2019-09-22 / 学习前端记录 JavaScript

JavaScript 基础

学习内容

JavaScript 简介
- 简介
- 书写规范
- 数据类型
- 常用输出方式
- typeof
- 数据转换
JavaScript 语法
- 基础语法
- 语句结构
- 数组
- 函数
- 作用域
- 预解析（提权）
- 对象
- 为什么要根据数据创建结构
内置对象、内置 API
- Math 数学
- Date 日期对象
- 数组操作
- 字符串操作

一、JavaScript 简介

JavaScript 是用于制作的网页与用户进行交互，其最初的目的是为了进行表单验证。

JavaScript 的组成部分
- ECMAScript 简称 ES，指的是 JavaScript 的基础语法，语言规范
- BOM 浏览器对象模型，本质上是一组用来操作浏览器功能的工具
- DOM 文档对象模型，本质上是一组用来操作文档（HTML页面）的工具。
书写方式
- 外链式
  - <script src="地址"></script>
  - 不可在外链式的标签内写书写代码，不会生效的。
- 内嵌式
  - <script>这里书写代码即可</script>
- 行内式
  - <button onClick="alert('点击')">
变量命名规范
- 规则：
  - 变量名可以使用字母，_下划线，$美元符开头
  - 组成中除了上面的形式外，还可使用数字
  - 不能使用 js 中的关键字和保留字
  - 名称区分大小写
- 规范：
  - 命名有意义
  - 命名由多部分组成时，推荐使用驼峰命名法
js中的常用输出方式
- alert() 当初提示框
- console.log() 在控制台中输出内容（常用）
- confirm() 确认提示框，比 alert 多个取消按钮
- prompt() 输入提示框，比confirm多了个输入框
- document.write() 在页面中展示内容
  - 如果内容中存在标签，标签会生成为 html 标签结构
  - 设置为 body 中
数据类型
- 基本类型：
  - number：任何数字类型，包括浮点数
    - 组成：生活中见到的任何数字
    - 特殊值：NaN
  - 字符串类型 string
  - 布尔类型 boolean
  - undefined 未定义（默认为空）
    - 通常是出现在某些操作的默认值中
  - null 空（主动设置为空）
类型检测方式 typeof
- 使用方式：
  - typeof 数据;
  - typeof(数据);
- 结果为数据对应的类型名称，名称为字符串形式。
- 其对 null 测试结果不准确，对复杂类型的检测结果不准确
数据类型转换
- 转换为字符串
  - 数据.toString() (null 和 undefined 无法使用，数值类型要 100..toString())
  - String(数据)，任何数据都可以使用
  - 隐式转换，任意字符串进行 '+' 操作表示内容连接，结果为连接后的字符串
- 转换为数值类型
  - Number（数据）如果有非数字字符，则为 NaN
  - parseInt（数据）如果第一个字符是数字解析到字符停止，如果解析失败返回 NaN
  - parseFloat（数据）与 parseInt 规则一样
  - 算术运算中除了'+'操作符与字符串会拼接成字符串，其他的算术运算符都会隐式转换成数字类型
- 布尔类型转换
  - 转换方式：Boolean()
  - 六个否定含义为 false （0 NaN null undefined false），其他都为true

二、JavaScript 语法

JavaScript 的基础语法与其他语法相类似

声明变量：
var a = ? var 声明的变量可以使任何基本数据类型或复杂类型，不加 var 直接复制 sum=100 则 sum 直接默认为全局变量，并且 var a=b=c=1 只有 a 是标准变量命名方式。
分支语句：

if: 
	if() {
	} else {
	}
	if() {
	} else if() {
	} else {
	}
switch(i) {
	case 1:break;
	case 2:break;
	case 3:break;
	case 4:break;
}

循环语句

for(var i = 1;i<10;i++){}
while(true){}
do{
}while(true);

数组声明方式：

var arr = [];
var arr = new Array();
var arr = [1,2,3,4,5];

基本数据与复杂数据的区别
- 基本数据类型占用内存小，直接存储在栈内存中，其内存单元存储的位数据，而复杂类型占用空间会大，其内容存储在堆区，而栈区的内存单元格则存储着复杂类型的地址，用来指向堆区的内容。
- 基本数据类型直接复制会复制相同的值，而且是相互独立，互补影响，而复杂类型数据直接复制的话复制的是地址，两个指向的同一个对象，改变一个，影响另一个。
函数声明方式：

// 函数声明语句 会提权
function 函数名() {
}
// 函数表达式 不会提权
var 函数名 = function() {
};

// 匿名函数
function () {
}

// 立即执行函数
(function(){
}());
或
(function(){
})();

函数的参数：可以接受自定义的，也可以接受更多的，如果形参不够实际给的，可以使用函数内置对象 arguments ，它是一个伪数组，类似于数组的访问方式，用来存储传入的参数个数

函数返回值默认为 undefined,它可以返回任意数据类型

作用域（一般情况下）
- 全局作用域：只要不在函数内，就是全局作用域
- 局部作用域：任意函数内都称为局部作用域
- 全局变量和函数：全局作用域中声明的变量和函数称为全局变量和全局函数
- 局部变量和函数：局部作用域中声明的变量和函数称为局部变量和局部函数，其访问范围只能在当前作用域内部访问，无法被外部作用域访问，内部可以访问，内部的内容也可以...
- 作用域链：
  - 首先查找当前作用域，如果存在则使用
  - 如果不存在，会查找父作用域，如果存在则使用
  - 最终找到全局作用域，如果存在则使用，如果不存在，取值报错，赋值隐式声明为全局变量。
预解析（提权）
js 代码在执行之前解析器对代码预先进行了解析操作，如下

// 解析前
var sum = 10;
function test() {
	console.log(num);
	var sum = 20;
}
test(); // undefined

// 解析后
var sum;
function test() {
	var sum;
	console.log(num);
	sum = 20;
}
sum = 10;
test(); // undefined

自己总结的秘籍：先定义，后执行；寻变量，就近查，表达执行顺序排（表达式声明，立即执行函数）

对象
- 对象是一种复杂数据类型
- 对象是有一个或多个属性组成的
- 属性是由属性名和属性值组成的
- 这种写法称为键值对
```
	var obj = {
		name: 'jack',
		age: 18,
		gender: '男'
	}
	var obj2 = new Object();//声明了一个空对象
```
- 对象的属性操作
  - 对象.属性名
  - 对象['属性名']
```
	// 声明对象同时设置初始属性：
    var obj = {
        name : 'jack',
        age : 18,
        gender : '男'
    };

    // 声明后进行的属性操作：
    // 方式1：
    console.log( obj.name ); // 'jack'
    obj.name = 'rose';
    console.log( obj.name ); // 'rose'

    // 方式2：
    console.log( obj['name'] ); // 'rose'
    obj['name'] = '张三';
    console.log( obj['name'] ); // '张三'
```
- 对象的属性和方法
  - 含义：方法其实也是属性，只是属性值保存的是函数，所以称为方法。
  - 起这个名字的作用：用来区分函数属性和其他普通属性
    - 函数需要进行调用才有意义
- 设置方式：
  - 可以设置匿名函数
  - 也可以设置命名函数
- 对象的遍历操作：
```
	for(var key in obj) {
		console.log(obj[key]);
	}
```
- 对象的属性删除：
  delete obj.name将obj 的 name 属性删除，此操作仅可以删除对象的属性，无法删除其原型中的 name（如果有）
为什么要根据数据创建结构
- 传统的 html 和 css 写法如果要进行内容修改，操作比较繁琐，很慢。
- 通过 js 代码进行设置处理起来更为简便、快速
- 操作步骤
  - 1、明确数据的含义
  - 2、明确数据对应的结构
  - 3、根据数据进行结构的生成即可
    - 在字符串中进行数据拼接的方法：
      - 找到要放置数据的位置，书写两个引号
      - 在书写两个 +
      - 将数据放入即可
    - 如果要生成复杂结构，会出现多行字符串导致的错误
      - 解决方式：在每行字符串最后设置一个\去除换行符的功能即可
多对象的创建

// 通过工厂方式进行创建
function Person(name,age,gender) {
	var obj = {};
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
	return obj; 
}
var person 1 = Person('lily',20,'男');

// 通过构造方法创建
function Person(name,age,gender) {
	this.name = name;
	this.age = age;
	this.gender = gender;
}
var person1 = new Person('Mike',18,'男');

对象类型检测相关
- typeof 只能用于除 null 以外的其他基本类型检测
- instanceof
  - 格式：数据 instanceof 构造函数名
  - 返回值：boolean
  - 注：x instanceof y，如果 y 的原型对象在 x 的原型链之上，则返回 true
- constructor (常用)
  - 格式：数据.constructor
  - 返回值：获取创建当前函数的构造函数
- Object.prototype.toString.call(数据)
  - 作用：可以获取任意数据类型的类型名称
  - 返回值：[object 首字母大写的类型名称]
```
	console.log( Object.prototype.toString.call('abc') ); // '[object String]'
	console.log( Object.prototype.toString.call(200) ); // '[object Number]'
	console.log( Object.prototype.toString.call({}) ); // '[object Object]'
	console.log( Object.prototype.toString.call(null) ); // '[object Null]'	
```
- null 数据类型检测：
  - typeof 对 null 检测结果为 'object' 检测结果不准确
  - null 一定为基本类型
  - 检测 null 的方式
    - 一般不写上面的检测方式，直接进行：
      - 数据 === null
      - Object.prototype.toString.call(null) === ['object Null'] 太麻烦，但是功能没问题
复杂类型比较
复杂类型比较的是其地址，而不是内容

三、内置对象

Math
- Math.max() 取最大值
- Math.min() 去最小值
- Math.random() 取随机数
```
	// 取一个区间的数
	function selectFrom(lowerNum,upperNum) {
		var choice = upperNum - lowerNum + 1;
		return Math.floor(Math.random()*choice + lowerNum);
	}
```
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.round() 四舍五入，负数.5特别
- Math.abs() 取绝对值
Date 日期对象 var date = new Date();
- var date = new Date() 表示当前计算机时间
- var date = new Date('2018-7-5 15:13:6'); // 方式1：传参设置为指定的某个时间
- var date = new Date(2018, 0, 5, 15, 13, 6); // 方式2：数值形式注意月份从0开始
- date.getFullYear() 获取年
- date.getMonth() + 1 获取月，月份从 0 开始
- date.getDate() 获取当前日数
- date.getDay() 获取星期，周日为0
- date.getHours() 获取小时
- date.getMinutes() 获取分钟
- date.getSeconds() 获取秒
- date.getMilliseconds() 获取毫秒
- date.getTime() 获取当前时间毫秒，+date，Date.now()，date.valueOf()，Date.parse('2018-7-5');
数组操作
- splice() 方法，用来在数组的任意位置进行增删改操作
  - 参数1：操作开始位置的索引值
  - 参数2：要删除的元素个数
  - 后续参数：向删除位置添加的元素值（个数无需对应）
  - 返回值：被删除的元素组成的新数组
- slice() ：取字符串，第一个参数代表要开始的索引，第二个参数为结束索引（不包含），不传参数则默认表示从头取到尾
- indexOf()：查找字符的位置，第一个参数为要查找的字符，第二个参数为开始的索引位置，示例代码：
```
	var index = -1;
	do {
		index = arr.indexOf('a',index+1);
		console.log(index);
	}while(arr.indexOf('a',index+1)!==-1);
```
- 数组的排序方式
```
	var arr = [1,4,2,3,11,10,33,22];
	arr.sort(function (a,b) {
		return a-b;
	});
	console.log(arr);
```
- join(): 将数组以特定的符号连接成字符串
字符串操作：
- 字符串索引：
  - str[index] （IE6以下不支持）
  - str.charAt(index)
- 拷贝字符串
  - str.slice()：第一个参数是开始的索引，第二个参数是拷贝的结束索引（不包含）
  - substring()：与 slice 一样
  - substr() 用法一样
- indexOf() 用法与数组的 indexOf基本一样，检索字符串中的多个字符组成部分，返回的是首字符的索引,如果检索空字符串，没有第二个参数，一定返回 0；
- replace() 字符串替换，一次只能替换一个，需要使用循环可以替换所有
```
	while(str.indexOf('-') !== -1) {
		str = str.replace('-', '|');
	}
	console.log(str);
```
- split()
```
	//不传参数没有意义
	//传入空字符串，将每个字符分隔
	//与数组的 join 方法结合使用
	// 1 替换字符串中的部分内容
	// var str = 'a-b-c-d-e';
	// 将字符串中的 - 替换为 |
	str.split('-').join('|'));

	// 2 删除字符串中的部分内容
	var str = 'a-b-c-d-e';
	// 将字符串那种的 - 删除
	console.log(str.split('-').join(''));
```
- trim() 去除字符串中两端空格
```
	var str = '    jack    ';
	console.log(str.trim());
	console.log(str);
```

内事不懂问百度，外事不懂问谷歌~

昔洛的个人博客

Bug不空，誓不成佛

JavaScript 基础

学习内容

一、JavaScript 简介

二、JavaScript 语法

三、内置对象