一、ES6简介:
1. 什么是ES6:
ES全称是ECMAScript, 它是由ECMA国际标准组织制定的一项脚本语言的标准化规范
年份 | 版本 |
---|---|
2015年6月 | ES2015 |
2016年6月 | ES2016 |
2017年6月 | ES2017 |
2018年6月 | ES2018 |
… | … |
2. 为什么要使用ES6:
每一次标准的诞生都意味着语言的完善, 功能的加强. javascript语言本身也有一些令人不满意的地方.
- 变量提升特性增加了程序运行时的不确定性;
- 语法过于松散, 实现相同的功能, 不同的人可能会写出不同的代码;
二、ES6的新增语法:
1. let关键字:
ES6中新增的用于声明变量的关键字;
- let声明的变量只在所处于的块级有效;
- 防止循环变量变成全局变量;
- 使用let关键字声明的变量不存在变量提升;
- 使用let关键字声明的变量存在暂时性死区;
2. const关键字:
作用: 声明常量, 常量就是值(内存地址)不能改变的量
- 具有块级作用域;
- 必须赋初始值;
- 常量赋值(内存地址)后, 值不能修改;
3. let,const,var的区别:
- 使用var声明的变量, 其作用域为该语句所在的函数内, 且存在变量提升现象;
- 使用let声明的变量, 其作用域为该语句所在的代码块内, 不存在变量提升;
- 使用const声明的是常量, 在后面出现的代码中不能再修改改常量值;
var | let | const |
---|---|---|
函数级作用域 | 块级作用域 | 块级作用域 |
变量提升 | 不存在变量提升 | 不存在变量提升 |
值可更改 | 值可更改 | 值不可更改 |
4. 解构赋值:
4.1 什么是解构赋值:
ES6中允许从数组中提取值, 按照对应位置, 对变量赋值. 对象也可以实现解构;
4.2 数组的解构:
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
注意:
- 结构失败的变量,将会被赋值undefined;
4.3 对象结构:
对象结构允许使用变量的名字匹配对象的属性, 匹配成功,将对象属性值赋值给变量;
let person = {name: '张三', age: 20};
let {name, age} = person;
console.log(name); // 张三
console.log(age); // 20
4.4 对象解构赋值:
let { name: myNmae, age: myAge } = person; // 别名
console.log(myNmae);
console.log(myAge);
5. 箭头函数:
5.1 什么是箭头函数:
ES6中新增的定义函数的方式
箭头函数是用来简化函数定义语法的
() => {}
const fn = () => {}
- 函数体只有一句代码, 且代码的执行结果就是返回值, 可以省略大括号;
const sum = (a, b) => a + b;
- 如果形参只有一个, 可以省略小括号;
5.2 箭头函数的this:
箭头函数不绑定this关键字, 箭头函数中的this, 指向的是函数定义位置的上下文this
const obj = {name: "张三", age: 20};
function fn() {
console.log(this);
return () => {
console.log(this);
}
}
const resFn = fn.call(obj);
resFn();
6. 剩余参数:
6.1 剩余参数:
剩余参数语法允许将一个不定数量的参数表示为一个数组
function sum(a, ...args) {
}
const sum = (...args) => {
let res = 0;
args.forEach( item => res += item );
return res;
}
console.log(sum(1,2,3,4,5,6));
6.2 剩余参数与解构:
let stus = ["张三", "李四", "王五"];
let [zs, ...others] = stus;
console.log(zs); // 张三
console.log(others); // ["李四", "王五"]
三、ES6的内置对象扩展:
1. Array的扩展方法:
1.1 扩展运算符(展开语法):
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列;
let arr = [1, 2, 3];
// ...arr 1,2,3
console.log(...arr); // 1 2 3.
// 等价于
console.log(1, 2, 3); // 1 2 3
1.2 扩展运算符合并数组:
let arr1 = [1, 2, 3];
let arr2 = [5, 6, 7];
// 方式一:
let arr3 = [...arr1, ...arr2]; // [1, 2, 3, 5, 6, 7]
// 方式二:
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 5, 6, 7]
1.3 将类数组或可遍历对象转换成真正的数组:
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
let divs = document.querySelectorAll('div');
console.log(divs);
let oDivs = [...divs];
console.log(oDivs);
</script>
</body>
1.4 构造函数方法: Array.from()
Array.from(): 将类数组或可遍历对象转换成真正的数组;
方法还可以接受第二个参数, 作用类似于数组的map方法, 用来对每个元素进行处理, 将处理后的值放入返回的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
let arr2 = Array.from(arrayLike);
console.log(arr2); // ["a", "b", "c"]
let arr3 = Array.from(arrayLike, item => item+'111');
console.log(arr3); // ["a111", "b111", "c111"]
1.5 实例方法: find()
用于找出第一个符合条件的数组成员, 如果没有找到,返回undefined
let arr = [
{ id: 1, name: 'zhangsan' },
{ id: 2, name: 'lisi' }
];
let tar = arr.find((item, index) => item.id === 2)
console.log(tar); // {id: 2, name: "lisi"}
1.6 实例方法: findIndex()
用于找出第一个符合条件的数组成员的索引, 如果没有找到,返回-1
let arr = [
{ id: 1, name: 'zhangsan' },
{ id: 2, name: 'lisi' }
];
let index = arr.findIndex((item, index) => item.id === 2)
console.log(index); // 1
1.7 实例方法: includes()
表示某个数组是否包含给定的值, 返回布尔值
console.log([1,2,3].includes(3)); // true
console.log([1,2,3].includes(4)); // false
2. string的扩展方法:
2.1 模板字符串:
ES6新增的创建字符串的方式, 使用反引号
let name = `张三`;
- 模板字符串中可以解析变量:
let name = "张三";
let sayHello = `hello, my name is ${name}`; // hello my name is 张三
- 模板字符串可以换行;
- 在模板字符串中可以调用函数,调用函数的位置,将会显示函数的执行结果;
2.2 实例方法: startsWith() 和 endsWith()
- startsWith(): 表示参数字符串是否在原字符串的头部, 返回布尔值;
- endsWith(): 表示参数字符串是否在原字符串的尾部, 返回布尔值;
let str = "Hello world!"
str.startsWith('Hello'); // true
str.endsWith('!'); // true
2.3 实例方法: repeat()
repeat方法表示将原字符串重复n次, 返回一个新的字符串
3. Set数据结构:
3.1 set对象:
ES6提供了新的数据结构Set. 它类似于数组, 但是成员的值都是唯一的, 没有重复值;
Set本身是一歌构造函数, 用来生成Set数据结构;
const s = new Set(); // 一个空的set
const ss = new Set([1,2,2,3,4,5]); // 接收一个数组作为参数, 来初始化
// Set(5) {1, 2, 3, 4, 5}
console.log(ss.size); // 5
- set可以做数组去重;
let arr = [1,2,2,3,4,5,6,5];
let ss = new Set(arr);
arr = [...ss];
console.log(arr); // [1,2,3,4,5,6]
3.2 Set的常用实例方法:
- add(val): 添加某个值, 返回Set结构本身;
- delete(val): 深处某个值, 返回一个布尔值, 表示删除是否成功;
- has(val): 返回一个布尔值, 表示该值是否为Set成员;
- clear(): 清楚所有成员, 没有返回值;
3.3 Set遍历:
Set结构的实例与数组一样, 也拥有forEach方法, 用于对每个成员执行某种操作, 没有返回值;
s.forEach(item => console.log(item));