ES6中新增语法
一、声明变量
1.let
作用：声明变量
特点：
- 只在所处块级（一对{}中的区域）有效（var不行）
- 防止循环变量成全局变量
- 不存在变量提升（只能先声明，再使用）
- 暂时性死区
if(true) {
let a = 10;
}
console.log(a); //a is not defined
经典面试题
比较一下：
- var用法（输出2 2）
- let用法（输出0 1）
2.cosnt
作用：声明常量
特点：
- 具有块级作用域
- 声明时必须赋初值
- 赋值后不可修改
var、let、cosnt区别
二、解构赋值
ES6允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。
1.数组解构
允许按照一一对应的关系从数组提取值，然后赋值给变量！
let ary=[1,2,3]
let [a,b,c]=ary;//这个中括号在等号左边，代表解构，从数组中提取值（不代表数组）
console.log(a);//1
console.log(b);//2
console.log(c);//3
2.对象解构
属性匹配，变量名匹配对象中属性的名字，匹配成功，就将对象中属性的值赋给变量
- 写法一
let person = { name:"lily", age:20 };
let { name, age } = person;
console.log(name);//lily
console.log(age);//20
- 写法二（修改变量名）
let person = { name:"lily", age:20 };
let { name:myName, age:myAge } = person;//myName,myAge属于别名
console.log(myName);//lily
console.log(myAge);//20
三、箭头函数
ES6新增的定义函数的方式
() => { }
const fn = () => { }
函数体只有一句代码，且执行结果是返回值，可省略大括号
const sum = (num1, num2) => num1+num2;
形参只有一个，可以省略小括号
const fn = v => v;
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this
一个例子
var age = 10;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
};
obj.say();//弹出10
PS：对象是不产生作用域，所以箭头函数被定义在了全局作用域下，调用时，this指向的是window
四、剩余参数
讲一个不定数量的参数定义成一个数组
function sum(first, ...args) {
console.log(first);//10
console.log(args);//[20, 30]
}
sum(10, 20, 30);
与解构配合使用
let students = ['lily', 'lily1', 'lily2'];
let [s1, ...s2] = students;
console.log(s1);//'lily'
console.log(s2);//['lily1','lily2']
五、扩展运算符
与剩余参数相反，将数组或对象转为用逗号分隔的参数序列
let ary = [1, 2, 3];
...ary // 1,2,3
console.log(...arg);// 1 2 3
应用
- 合并数组
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4]
或者：
arr1.push(arr2);
- 将伪数组转换成真正的数组
let allDiv = document.getElementsByTagName("div");
allDivList = [...allDiv]
六、Array的扩展方法
1.Array.from()
同上，将伪数组转换成真正的数组
let arrayLike={
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
let arr2=Array.from(arrayLike);//['a', 'b', 'c']
let arr2=Array.from(arrayLike,item=>item+'1');//['a1', 'b1', 'c'1]
2.find()
找到第一个符合条件的数组成员，未找到返回undefined
let res = array.find((item,index) => item.id == 2);//返回第一个id为2的对象
3.findIndex()
找到第一个符合条件的数组成员的位置，未找到返回-1
let res = array.findIndex((item,index) => item.id == 2);//返回第一个id为2的对象索引
4.includes()
表示某个数组是否包含给定的值，返回布尔值
[1,2,3].includes(2); //true
七、模板字符串
模板字符串可以解析变量
let name = 'lily'
let string = 'hello,${name}';//"hello,lily"
模板字符串可以调用函数
const sayHello = function () {
return "hhhh"
}
let string = 'hello,${sayHello()},lily';//"hello,hhhh,lily"
八、String扩展方法
- startsWith() ：判断参数字符串是否在原字符串头部，返回布尔值
- endsWith()：~~~尾部
let str = 'hello world'
str.startsWith('hel');//true
- repeat(n)：表示将原字符串重复n次，返回一个新的字符串
'x'.repeat(3);//"xxx"
九、Set数据结构
类似于数组，但是成员唯一，无重复值
const s = new Set();
const set = new Set([1, 2, 3, 4, 4])
console.log(set.size);//4
可以利用Set去重
实例方法
- add(value):添加某个值，返回本身
- delete(value):删除某个值，返回布尔值
- has(value):判断是否为其成员，返回布尔值
- clear():清除所有成员，无返回值
遍历
与数组一样，有forEach方法，用于对每个成员执行某种操作，无返回值