劳动节，简单总结下ES6基础知识

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的区别

1. 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
2. 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
3. 使用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 = `<div>
                <span>${result.name}</span>
                <span>${result.age}</span>
                <span>${result.sex}</span>
            </div>`;
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))