ES6

ES6的新增语法

1. 声明变量关键字

1.1 let

新增的用于声明变量的关键字

1. let声明的变量只在所处于的块级有用
2. 不存在变量提升
3. 使用let声明的变量具有暂时性死区的特性。

1.2 const

用于声明常量
4. 具有块级作用域
5. 声明常量时必须赋值
6. 常量赋值后，值不能修改。

1.3 let、const和var的区别

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

2. 解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

2.1 数组解构

let [a,b,c] = ["1","2","3"];
console.log(a);
console.log(b);
console.log(c);

2.2 对象解构

let persion = { name: '张三', age: 23 }
let { name, age } = persion;
console.log(name);
console.log(age);

//也可以这么写
let { name: nameValue, age: ageValue } = persion;
console.log(nameValue);
console.log(ageValue );

3. 箭头函数

() => {}
const fn = () => {}

1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function sum(num1,num2){
	return num1+num2;
}
//可以写成
const fn = (num1,num2) => num1 + num2;

2. 如果形参只有一个，可以省略小括号

function hello(v){
	return v;
}
//可以写成
const fn = v => v;

3. 注意，箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

4. 剩余参数

1. 剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function sum(arg1,...args){
	console.log(arg1);
	console.log(args);
}
sum(10,20,30);

2. 剩余参数和解构配合使用

let students = ['zahgnsan','lisi','wangwu']
let [s1,...s2] = students;
console.log(arg1); //'zahgnsan'
console.log(args); //['lisi','wangwu']

5. Array的扩展方法

5.1 扩展运算符

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let arr = ['zahgnsan','lisi','wangwu']
console.log(...arr); //'zahgnsan' 'lisi' 'wangwu'

扩展运算符的运用：

1. 合并数组

//方法一
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(...arr3); //1 2 3 4 5 6

//方法二
arr1.push(...arr2);
console.log(...arr1); //1 2 3 4 5 6

2. 将类数组或可遍历对象转换为真正的数组。

//使用展开运算符将伪数组转换为数组
let divs = document.getElementsByTagName('div');
divs = [...divs];

//使用构造函数方法：Array.from()
let array = {
	'0':'a',
	'1':'b',
	'2':'c',
	length: 3
};
let arr2 = Array.form(array);//['a','b','c',]

5.2 实例方法：find();

用于找出第一个符合条件的数组成员，如果没有找到返回undefined。

let arr = [{
	id: 1,
	name: "张三"
},{
	id: 2,
	name: "李四"
}];
let target = arr.find(item => item.id==2);
console.log(target); //{ id: 2, name: '李四' }

5.3 实例方法：findIndex();

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

let arr = [{
	id: 1,
	name: "张三"
},{
	id: 2,
	name: "李四"
}];
let index = arr.findIndex(item => item.id==2);
console.log(index); // 1

5.4 实例方法：includes();

表示数组是否包含某个特定的值，返回bool。

let arr = [1, 2, 3, 4];
console.log(arr.includes(2)); // true
console.log(arr.includes(5)); // false

6. String的扩展方法

6.1 模板字符串

ES6新增的创建字符串的方式，使用反引号定义，在模板字符串中可以解析变量。

let name = '张三';
let sayHello = `hello! I'm ${name}`;
console.log(sayHello);// hello! I'm 张三

模板字符串可以换行，而且还可以调用函数。

let getName= name => '张三';
let sayHello = `hello! 
i'm ${getName()}`;
console.log(sayHello);
/*
hello!
i'm 张三
*/

6.2 实例方法：startsWith()和endsWith()

startsWith()表示是否以传入的字符串开头，返回bool值。
endsWith()表示是否以传入的字符串结束，返回bool值。

let str = 'hello World!';
console.log(str.startsWith('hello')); // true
console.log(str.endsWith('World')); // false

6.3 实例方法：repeat()

repeat()表示是将原字符串重复n次，返回一个新的字符串

let str = 'hello'.repeat(3);
console.log(str); // hellohellohello

7. Set数据结构

类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构。

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化

let arr = [1,2,3,3,4,5,5];
const s = new Set(arr);
console.log(s.size); // 5
console.log(s); // Set { 1, 2, 3, 4, 5 }
//可以实现数组的去重
let newArr = [...s];
console.log(newArr); // [ 1, 2, 3, 4, 5 ]

7.1 实例方法

• add(value): 添加某个值，返回set本身。
• delete(value): 删除某个值，返回一个bool值。
• has(value): 返回bool值，表示该值是否是Set结构的成员。
• clear(): 清除所有成员，没有返回值。

7.2 遍历Set

使用forEatch()方法

setExample.forEarch(value => console.log(value))