ES6的新增语法
1. 声明变量关键字
1.1 let
新增的用于声明变量的关键字
- let声明的变量只在所处于的块级有用
- 不存在变量提升
- 使用let声明的变量具有暂时性死区的特性。
1.2 const
用于声明常量
4. 具有块级作用域
5. 声明常量时必须赋值
6. 常量赋值后,值不能修改。
1.3 let、const和var的区别
- 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
- 使用let声明的变量,其作用域为该语句所在的代码块,不存在变量提升
- 使用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 = () => {}
- 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
function sum(num1,num2){
return num1+num2;
}
//可以写成
const fn = (num1,num2) => num1 + num2;
- 如果形参只有一个,可以省略小括号
function hello(v){
return v;
}
//可以写成
const fn = v => v;
- 注意,箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。
4. 剩余参数
- 剩余参数语法允许我们将一个不定数量的参数表示为一个数组
function sum(arg1,...args){
console.log(arg1);
console.log(args);
}
sum(10,20,30);
- 剩余参数和解构配合使用
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'
扩展运算符的运用:
- 合并数组
//方法一
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
- 将类数组或可遍历对象转换为真正的数组。
//使用展开运算符将伪数组转换为数组
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))