ES6
ES全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的规范化标准
| 年份 | 版本 |
|---|---|
| 2015年6月 | ES2015 |
| 2016年6月 | ES2016 |
| 2017年6月 | ES2017 |
| 2018年6月 | ES2018 |
| ... | ... |
ES6其实是一个泛指，泛指ES2015及后续的版本
为什么使用ES6？
每一次标准的诞生都意味着语言的完善，功能的加强，JavaScript语言本身也有一些令人不满意的地方
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
let
ES6中新增的用于声明变量的关键字
- 使用
let声明的变量具有块级作用域(一对{}产生的作用域)- 使用
let声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性
- 使用
if(true) {
let a = 0;
}
console.log(a); // 报错：a is not defined
/* 防止循环变量成为全局变量 */
for(var i = 0; i < 10; i++) {}
console.log(i); // 10
for(let j = 0; j < 10; j++) {}
console.log(j); // 报错：j is not defined
- 使用
let声明的变量不存在变量提升- 只能先声明再使用
console.log(a); // 报错：a is not defined
let a = 100;
- 使用
let声明的变量具有暂时性死区特性
var tmp = 123;
if(true) {
console.log(tmp); // 报错：tmp is not defined
let tmp = 20;
}
====================
经典面试题
var arr = [];
for(var i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0]();
arr[1]();
// 此题关键点在于变量i是全局的，函数执行时输出的都是全局作用域下i的值
let arr = [];
for(let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0]();
arr[1]();
// 此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下i的值
const
作用：声明常量，常量就是值(内存地址)不能变的量
- 使用
const声明常量具有块级作用域
if (true) {
const a = 10;
if (true) {
const a = 20;
console.log(a); // 20
}
console.log(a); // 10
}
console.log(a); // a is not defined
- 使用
const声明常量必须赋值(声明常量时必须赋初始值)
const a; // Missing initializer in const declaration
- 使用
const声明常量，常量赋值后，值不能被修改- 如果值是基本数据类型，是不可更改的
- 如果值是引用数据类型，虽然不能重新赋值，但可以更改数据结构内部的值
const a = 100;
a = 200; // Assignment to constant variable
const ary = [100,200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']
ary = ['a', 'b']; // Assignment to constant variable
let、const、var的区别
- 使用
var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象 - 使用
let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升 - 使用
const声明的是常量，在后面出现的代码中不能再修改该常量的值
var |
let |
const |
|---|---|---|
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 不存在变量提升 | 不存在变量提升 |
| 值可更改 | 值可更改 | 值不可更改 |
解构赋值
ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构
数组解构
let [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量，如果解构不成功，变量的值为
undefined
let [foo] = [0]; // foo => undefined
let [bae, foo] = [1]; // bae => 1 foo => undefined
对象解构
let person = { name:'张三', age:20 };
let { name, age } = person;
console.log(name); // '张三'
console.log(age); // 20
对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量
let person = { name:'张三', age:20 };
let { name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // '张三'
console.log(myAge); // 20
箭头函数
ES6种新增的定义函数的方式（箭头函数是用来简化函数定义语法的）
() => {}
const fn = () => {}
- 在箭头函数中，如果只有一句代码，且代码的执行结果就是返回值，可以省略大括号
// 传统函数定义方式
function sum(x, y) {
return x + y;
}
const result = sum(10, 20);
console.log(result); // 30
// 箭头函数定义方式
const sum1 = () => x + y;
const result1 = sum1(10, 20);
console.log(result1); // 30
- 在箭头函数中，如果形参只有一个，可以省略小括号
// 传统函数定义方式
function fn(x) {
return x;
}
// 箭头函数定义方式
const fn1 = v => v;
- 箭头函数不绑定
this关键字（箭头函数没有自己的this）,箭头函数中的this指向的是函数定义位置的上下文的this
const obj = {name: '张三' };
function fn() {
console.log(this);
return () => {
console.log(this);
}
}
const resFn = fn.call(obj);
resFn();
var age = 30;
var obj = {
age: 20,
say: () => {
alert(this.age); // 30 对象是不能产生作用域的，这里的this指向window
}
}
obj.say();
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
function sum(first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30);
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item);
return total;
}
console.log(sum(10, 20)); // 30
console.log(sum(10, 20,30)); // 60
- 剩余参数和解构赋值配合使用
let students = ['张三', '赵四', '王五'];
let [s1, ...s2] = students;
console.log(s1); // '张三'
console.log(s2); // ['赵四', '王五']
扩展运算符(展开语法)
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary = [1, 2, 3];
// ...ary //=> 1, 2, 3
console.log(...ary); // 1 2 3
console.log(1, 2, 3); // 1 2 3
扩展运算符的应用：扩展运算符可以应用于合并数组
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
// 方法一
let ary3 = [...ary1, ...ary2];
console.log(ary3); // [1, 2, 3, 3, 4, 5, 6]
// 方法二
ary1.push(...ary2);
console.log(ary1);
扩展运算符的应用：将类数组或者可遍历的对象转换为真正的数组
let divs = document.getElementsByTagName('div');
console.log(divs);
let ary = [...divs];
console.log(ary);
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr = Array.from(arrayLink); // ['a', 'b', 'c']
// ====================================
// Array.from方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
let arrayLike = {
'0': 'a',
'1': 'b',
length: 2
};
let arr = Array.from(arrayLink, item => item * 2);
ES6内置对象扩展(数组的扩展方法)
-
find()方法- 用于找出第一个符合条件的数组成员，如果没有找到返回
undefined
- 用于找出第一个符合条件的数组成员，如果没有找到返回
let ary = [{
id: 1,
name: '张三'
},{
id: 2,
name: '李四'
}];
let target = ary.find((item,index)=>(item.id == 2));
console.log(target);
-
findIndex()方法- 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
-
includes()方法- 表示某个数组是否包含给定的值，返回布尔值
[1, 2, 3].includes(2); // true
[1, 3, 5].includes(6); // false
let ary = ['a', 'b', 'c'];
let result = ary.includes('a');
console.log(result); // true
let result = ary.includes('y');
console.log(result);
模板字符串
ES6新增的创建字符串的方式，使用反引号定义
let name = `张三`;
console.log(name);
- 模板字符串中可以解析变量
let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello,my name is 张三
console.log(sayHello);
- 模板字符串中可以换行
let result = {
name: '张三',
age: 30,
sex: '男'
}
let html = `
${result.name}
${result.age}
${result.sex}
`;
console.log(html);
- 模板字符串中可以调用函数
const sayHello = () => {
return '呵呵';
};
let greet = `${sayHello()}嘿嘿`;
console.log(greet); // 呵呵嘿嘿
ES6内置对象扩展(String的扩展方法)
-
starsWith(): 判断字符串是否以某字符串开头，返回布尔值 -
endsWith(): 判断字符串是否以某字符串结尾，返回布尔值
let str = `hello world!`;
str.starsWith('hello'); // true
str.endsWith('!'); // true
-
repeat()方法-
repeat()方法接收一个数字作为参数，表示将原字符串重复n次，返回一个新字符串
-
'x'.repeat(3); // "xxx"
'hello'.repeat(2); // "hellohello"
数据解构 Set
ES6提供了一种新的数据解构
Set,它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成Set数据结构
const s = new Set();
// Set函数可以接收一个数组作为参数，用来初始化
const set = new Set([1, 2, 3, 'a', 5, 9]);
console.log(set.size); // => 6
// 数组去重
const se = new Set(['a', 'b', 'b', 'c']);
console.log(se.size); // 3
const ary = [...se];
console.log(ary); // ['a','b','c']
Set数据结构中的方法
-
add(value):添加某个值，返回Set结构本身 -
delete(value):删除某个值，返回一个布尔值，表示删除是否成功 -
has(value):返回一个布尔值，表示该值是否为Set成员 -
clear():清除所有成员，没有返回值
const s = new Set();
s.add(1).add(2).add(3); // 向Set结构中添加值
s.delete(2); // 删除Set结构中的2值 返回布尔值，表示是否删除成功
s.has(1); // Set结构中是否有1这个值，有返回true，没有返回false
s.clear(); // 清除Set结构中所有的值 没有返回值
遍历
Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
s.forEach(value => console.log(value))