从简到难，重新学习ES6（上）

本文已参与「新人创作礼」活动， 一起开启掘金创作之路

前言

本文主要介绍ES6的内容，作者是在b站跟一个视频学习的www.bilibili.com/video/BV1uK…，然后我根据视频和资料做了一些总结性的工作，希望可以给刚入门ES6的小伙伴一些帮助，内容比较多，我会根据简单到难，分好几次来讲，我自己也做了张思维导图，让知识更体系，帮助加深印象。

ES6介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 、ES2018等等。

一、数据相关的新特性

let关键字

使用let 关键字用来声明变量，具有以下几个特性：

• 不允许重复声明
• 块级作用域
• 不存在变量提升
• 不影响作用域链

// 1.不允许重复声明
let a = 1;
let a = 2;// 不允许，会报错，但var不会

// 2.块儿级作用域
{
  let dog = "狗";
  console.log(dog);
}
console.log(dog);// 报错，但var声明不会，因为var没有块级作用域

// 3.不存在变量提升
console.log(d1);// 不报错
console.log(d2);// 报错
var d1 = "d1";
let d2 = "d2";

// 4.不影响作用域链
{
  let p = "人";
	function fn(){
  	console.log(p); // 这里是可以使用的
	}
fn();
}

应用场景：以后声明变量用 let 就对了

const关键字

使用const 关键字用来声明常量，具有以下几个特性：

• 声明必须赋初始值
• 标识符一般为大写（潜规则，看场景）
• 值不允许修改（注意数组、对象等引用数据类型）

注意：const关键字具有let关键字的所有特性，意思是上面let所列举的特性const都有。

这里就只演示最后一个特性

const person = "张三"
person = "李四" //报错

//数组和对象存的是引用地址，下列操作未改变地址，所以是可行的
const p = {
  name:"张三",
  age:18,
}
p.age = 20// 没有问题

const arr = ["pink","green"]
arr.push("blue")// 没有问题

arr = ["blank","white"]// 改变了地址，报错

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

// 数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;

// 对象的解构赋值
let obj = {
  name:"张三",
  age:17,
  say(){
    console.log("唱歌")
  }
}
let {name,age,say} = obj // 一定要对应key，顺序无所谓，少了也没关系

模板字符串

模板字符串（template string）是增强版的字符串，本质还是字符串，用反引号（`）标识，具有以下特性：

• 字符串中可以出现换行
• 可以使用 ${xxx} 形式输出变量

let str = `<ul>
                   <li>唱歌</li>
                   <li>跳舞</li>
                   <li>rap</li>
             </ul>`

// 变量拼接
let name = "张三"
let str2 = `我的名字叫${name}`

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name = '李四';
let hello = function(){
  console.log('hello');
}

const obj = {
  name,// 触发同名简写规则
  age:18,
  hello,// 触发同名简写规则
  get:function(){
    return name;
  },
  set(val){
    this.name = val;
  }// 函数简写
}

Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯 一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进 行遍历，Set的常用的属性和方法有：

• size 返回集合的元素个数
• add 增加一个新元素，返回当前集合
• delete 删除元素，返回 boolean 值
• has 检测集合中是否包含某个元素，返回 boolean 值
• clear 清空集合，返回 undefined

//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]); // [1,2,3],会自动去重

console.log(s1.size);
console.log(s1.add(4));
console.log(s1.delete(1));
console.log(s1.has(2));
console.log(s1.clear());// undefined

Set的一些实践：

let arr = [1,2,3,4,5,4,3,2,1];

// 数组去重
let s1 = new Set(arr);

// 交集
let arr2 = [3,4,5,6,5,4,3];
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item))

// 并集
let union = [...new Set([...arr,...arr2])]

// 差集：比如集合A和集合B求差集，就是A里面有的，B里面没有(A - B)
let result2 = [...new Set(arr)].filter(item => !new Set(arr2).has(item))

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类 型的值（包括对象）都可以当作键，差不多就是对象的加强版。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和 『for…of…』进行遍历。

Map常用的属性和方法：

• size 返回 Map 的元素个数
• set 增加一个新元素，返回当前 Map
• get 返回键名对象的键值
• has 检测 Map 中是否包含某个元素，返回 boolean 值
• clear 清空集合，返回 undefined

// 创建一个空 map
let m = new Map();
// 创建一个非空 map
let m2 = new Map([
  ['name','尚硅谷'],
  ['slogon','不断提高行业标准']
]);

console.log(m2.size);

// set 增加一个新元素，返回当前 Map；
m2.set('age',18)

// “键”的范围不限于字符串
let fn = function(){
  console.log("我是函数")
}
m2.set('key',fn)

// get 返回键名对象的键值
m2.get('age')

// has 检测 Map 中是否包含某个元素，返回 boolean 值
console.log(m.has("name"));// true

// clear 清空集合，返回 undefined
m2.clear();

二、函数相关的新特性

ES6中函数参数的默认值

ES6允许给函数的参数赋初始值。

//形参初始值 具有默认值的参数, 一般位置要靠后
function sum(a,b,c=3) {
	return a + b + c;
}
sum(1,2)//结果6

箭头函数

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，并且箭头函数在开发中的使用是非常广泛的。箭头函数具有以下特性：

• 如果形参只有一个，则小括号可以省略
• 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
• 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
• 箭头函数不能作为构造函数实例化
• 不能使用 arguments

// 1. 通用写法
let fn = (a, b) => {
  console.log(a + b);
  return a + b;
};
// 2. 省略小括号的情况，只有一个参数，无参数不能省略小括号
let fn2 = num => {
  return num;
};
// 3. 省略花括号的情况，只有一条return语句
let fn3 = score => score * 20;


// 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
console.log(this)// windows

let school = {
	name: "尚硅谷",
  getThis: () => {
    console.log(this);
  },
  getThis2(){
    console.log(this);
  }
};
school.getThis();// windows
school.getThis2();// school

rest参数（...args）

ES6 引入 rest 参数，用于获取函数的实参，作用与 arguments 类似，用来代替 arguments，

• rest 参数必须是最后一个形参

function sum(...args) {
  console.log(args);
}
let add = (...args) => args;
sum(1, 2, 3);// [1, 2, 3]
console.log(add(4, 5, 6));// [4, 5, 6]

//rest 参数必须是最后一个形参
function sum2(a,b,...args){
  console.log(args);
}
sum2(1,2,3,4,5) // [3,4,5]

注意：rest参数非常适合不定个数参数函数的场景

spread 扩展运算符（...）

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

// 展开数组
let heros = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){
  console.log(arguments);
}
fn(...heros)

// 展开对象
let skillOne = {
  q: '致命打击',
};
let skillTwo = {
  w: '勇气'
};
let skillThree = {
  e: '审判'
};
let skillFour = {
  r: '德玛西亚正义'
};

let gaiLun = {...skillOne, ...skillTwo,...skillThree,...skillFour};
console.log(gaiLun)

扩展运算符的常用应用场景：

• 数组的合并
• 数组的克隆
• 将伪数组转为真正的数组

// 1.数组的合并
let colors1 = ["blue","yellow","red"];
let colors2 = ["pink","green"];
let colors = [...colors1,...colors2] // ["blue","yellow","red","pink","green"]

// 2.数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']

//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];

最后

如果哪里讲的不对，还望指出。