JavaScript高级笔记05 ES6相关语法

ES6中新增的语法与方法

• ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范
• ES6解决了之前的一些问题，使语法更加严谨

1.LET

• let是ES6中新增的用于声明变量的关键字

1. let声明的变量在在所处的块级有块级作用域，每个{ }中就是一个块级作用域
2. 不存在变量提升。如果先输出再声明，则会报错，显示找不到变量
3. 暂时性死区，外部声明的变量不会影响存在let的区域。如果在块级作用域外部用var声明一个变量，在块级作用域内，先给变量赋值，再用let声明变量，则会报错
4. 面试题；

	var arr = [];
 	for (var i = 0; i < 2; i++) {
     	arr[i] = function () {
         	console.log(i); 
     	}
 	}
 	arr[0]();//2
 	arr[1]();//2
 	//变量i是全局变量

	let arr = [];
 		for (let i = 0; i < 2; i++) {
     		arr[i] = function () {
         	console.log(i); 
     	}
 	}
	arr[0]();//0
	arr[1]();//1
	//每次循环都会生成一个块级作用域，i存在于每一个作用域中

2.CONST

• ES6中声明常量的方法。常量就是值（内存地址）不能变化的量

1. const声明的常量具有块级作用域
2. 声明常量时必须赋值
3. 常量赋值后，值不能修改

let、const、var的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

3.解构赋值

1. 数组解构，将数组中的值赋给变量

let [a, b, c] = [1, 2, 3];
 console.log(a)//1
 console.log(b)//2
 console.log(c)//3
//如果解构不成功，变量的值为undefined

2. 对象解构，将对象属性的值赋给变量

let person = { name: 'zhangsan', age: 20 }; 
 let { name, age } = person;
 console.log(name); // 'zhangsan' 
 console.log(age); // 20

 let {name: myName, age: myAge} = person; // myName myAge 属于别名
 console.log(myName); // 'zhangsan' 
 console.log(myAge); // 20

4.箭头函数

• 箭头函数是ES6中新增的定义函数的方式

let fn = (形参) => {函数体}

1. 只有一个形参时，可以省略小括号
2. 函数体只有一句代码，执行结果就是返回值，可以省略大括号
3. this指向：箭头函数声明所在的位置

5.剩余参数

• 剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数

function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30] 
 }
 sum(10, 20, 30)

6.扩展运算符. . .

1. 将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
 ...ary  // 1, 2, 3
 console.log(...ary);    // 1 2 3,相当于下面的代码
 console.log(1,2,3);

2. 合并数组

// 方法一 
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 // 方法二 
 ary1.push(...ary2);

3. 把伪数组转换为真正的数组

7.ES6中数组的方法

1. Array.form()，将伪数组转换为真正的数组
2. Array.prototype.find()，找到第一个符合条件的数组元素。有则返回元素，无则返回undefined
3. Array.prototype.fineIndex()，找到第一个符合条件的数组元素的索引号
4. includes()，数组是否包含该元素。返回布尔值

8.ES6中字符串的方法

1. startsWith()，是否以某值开头。返回布尔值
2. endsWith()，是否以某值结尾。返回布尔值
3. repeat()，原字符串重复的次数。返回一个新字符串
4. padStart(‘填充后的长度’，‘要填充的字符串’)，在字符串头部添加
5. padEnd(‘填充后的长度’，‘要填充的字符串’)，在字符串尾部添加

9.Set数据结构

• ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
• 主要用于数组去重

const s = new Set();
const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

1. add()，添加某个值，返回新的
2. delete()，删除某个值，返回布尔值，表示删除是否成功
3. has()，是否存在某个值，返回布尔值
4. clear()，清空所有值