JavaScript学习笔记(四) ES6

思维导图

1. 简介

• ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
• ES6 实际上是一个泛指，泛指ES2015 及后续的版本，涵盖了 ES2015、ES2016、ES2017等等
• 查看兼容性：http://kangax.github.io/compat-table/es6/
• ECMAScript历史版本查看网址：历史版本查看

2. let 与 const

ES6中新增的用于声明变量的关键字。

2.1 let

• let声明的变量只在所处于的块级有效

if (true) {
   
	let b = 20;
	console.log(b); //20
	if (true) {
   
		let c = 30;
	}
	console.log(c);// c is not defined
}
console.log(b);// b is not defined

---

• 使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

if (true) {
   
	let num = 100;
	var abc = 200;
}
console.log(abc); //200
console.log(num) //num is not defined

• 防止循环变量变成全局变量

for (var i = 0; i < 2; i++) {
   }
console.log(i); //2
for (let j = 0; j < 2; j++){
   }
console.log(j); // j is not defined

---

• 使用let关键字声明的变量没有变量提升

console.log(b); // undefined
var b = 200;
console.log(a); //Cannot access 'a' before initialization
let a = 100;

---

• 使用let关键字声明的变量具有暂时性死区特性

var num = 10;
if (true) {
    //num和这个块绑定了，同时块中num又在申明前使用了，就报错了
	console.log(num); //Cannot access 'num' before initialization
	let num = 20;
}

---

• 面试题

此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.

var arr = [];
for (var i = 0; i < 2; i++) {
   
  arr[i] = function () {
   
    console.log(i);
  };
}
arr[0](); // 2
arr[1](); // 2

let arr = [];
for (let i = 0; i < 2; i++) {
   
  arr[i] = function () {
   
    console.log(i);
  };
}
arr[0](); // 0
arr[1](); // 1

2.2 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 PI = 3.14;
const PI;//Missing initializer in const declaration	

• 常量赋值后，值不能修改。

const PI = 3.14;  //基本数据类型值不可更改
// PI = 100; //Assignment to constant variable.
const ary = [100, 200];  //复杂数据类型内存地址不可更改，内容可变
ary[0] = 123;
ary = [1, 2]; //Assignment to constant variable.
console.log(ary);

2.3 let、const、var的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。(基本数据类型值不可更改,复杂数据类型内存地址不可更改，内容可变)
4. 应用场景：声明对象类型使用 const，非对象类型声明选择 let

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

3. 解构赋值

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

3.1 数组的解构赋值

• 可以从数组中提取值，按照对应位置，对变量赋值。

let ary = [1,2,3];
let [a, b, c ] = ary;
console.log(a);// 1
console.log(b);// 2
console.log(c); //3

• 如果解构不成功，变量的值就等于undefined

let [a] = [];
console.log(a); //undefined
let [b,c] = [1];
console.log(b); // 1
console.log(c); // undefined

3.2 对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let person = {
    
	name: 'zhangsan',
	age: 20,
	cando: function(){
   
		console.log('唱歌');
	} 
}; 
let {
    name, age, cando} = person;
console.log(name); // 'zhangsan' 
console.log(age); // 20
cando(); //输出 唱歌

• 对象的解构赋值，可以很方便地将对象的成员起别名

let person = {
    name: 'zhangsan', age: 20, }; 
let {
   name: myName, age: myAge} = person; // myName myAge 属于别名 ，
//从person对象中匹配name,age属性，如果有，则赋值到myName，myAge
console.log(myName); // 'zhangsan'
console.log(myAge); // 20

4. 箭头函数

ES6中新增的定义函数的方式，简化函数定义语法

() => {
   } //(放参数) ,{放函数体}
const fn = () => {
   }
const fn1 = () => {
   
	console.log(1);
}
// 相当于
//const fn1 = function(){
   
//	console.log(1);
//}

• 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号，且必须省略return

function sum1(n1, n2){
   
	return n1 + n2;
} 
const sum2 = (n1,n2) => {
   
	return n1 + n2;
}
const sum3 = (n1,n2) => n1 + n2;
console.lof(sum3(1,2));

• 如果形参只有一个，可以省略小括号

function fn1 (v) {
   
	return v; 
} //等价于下面
const fn2 = v => v;

• 不能使用arguments变量

function fn1() {
   
    console.log(arguments);
}
fn1(1, 2, 3);// 有输出
let fn = () => {
   
    console.log(arguments);
}
fn(1, 2, 3); // 报错 arguments is not defined

• 箭头函数没有自己的this对象，内部的this就是定义时上层作用域中的this。箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

function fn () {
   
	console.log(this);
	return () => {
   
		console.log(this);
	};
}
let obj = {
   name: 'zhangsan'};
fn(); //window
fn()(); // window window
ffn = fn.bind(obj); 
ffn(); // obj
ffn()(); // obj obj

• 例题1：this指向

let obj = {
    // 对象没有作用域
	age: 20,
	say: () => {
   
		console.log(this); //window
		console.log(this.age); //undefined
	}
}
obj.say();

• 例题二 ：this指向

window.name = '凉宫'
function getName() {
    // 普通函数定义
    console.log(this.name);
}
let getName2 = () => {
   
    console.log(this.name);
}
getName();  //凉宫
getName2(); // 凉宫
const school = {
   
    name: 'it'
}
getName.call(school); // it
getName2.call(school); // 凉宫；call,bind等无法改变箭头函数this指向

• 例题三： this指向，实现点击div 几秒后变色

let ad = document.querySelector('.ad'); // ad为某个div类名
ad.addEventListener('click', function () {
   
    let _this = this; //保存外层的this;
    setTimeout(function () {
    //setTimeout 内的this指向window，故要做处理
        _this.style.background = 'blue';
    }, 4000);
})
ad.addEventListener('click', function () {
   
    setTimeout(() => {
    // 箭头函数的this 指向在函数申明时所在作用域下的this 
        this.style.background = 'pink';
    }, 2000);
})

使用场景：

• 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
• 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法(this会指到对象外层的this，而不是这个对象)

5. rest 剩余参数

5.1 用于数组

• 剩余参数：剩余参数语法允许将一个不定数量的参数表示为一个数组。
• 用于获取函数的实参，用来代替 arguments

用法示例1：

function date(){
    //arguments示例
    console.log(arguments);
}
date('凉宫','长门','朝比奈'); 
//rest 参数示例
function date2(...args){
   
    console.log(args);
}
date2('凉宫','长门','朝比奈');
//rest 参数必须要放到参数最后
function fn(a,b,...args){
   
    console.log(a); //1
    console.log(b);// 2
    console.log(args); //[3,4,5,6]
}
fn(1,2,3,4,5,6);
let ary1 = ['张三' , '李四', '王五'];
let [s1, ...s2] = ary1;
console.log(s1); // 张三
console.log(s2); // ['李四', '王五']

用法示例2：配合forEach遍历

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 = ['wangwu', 'zhangsan', 'lisi']; 
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']

5.2 用于对象

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

//rest 参数
function connect({
     host, port, ...user }) {
   
  console.log(host); // 127.0.0.1
  console.log(port); //  3306
  console.log(user); // {username: 'root', password: 'root'}
}
connect({
   
  host: "127.0.0.1",
  port: 3306,
  username: "root",// 把后面多的参数，直接封装成一个对象
  password: "root",
});

6. 扩展运算符

扩展运算符（spread）也是三个点（...）。

6.1 数组的扩展运算符

作用：将一个数组转为用逗号分隔的参数序列，对数组进行解包。

let ary = ["a", "b", "c"];
//...ary // "a", "b", "c"
console.log(...ary); // a b c
console.log("a", "b", "c");// a b c
//========================
const people = ['凉宫', '长门', '朝比奈'];
function say() {
   
    console.log(arguments);
}
say(...people);//等价于 say('凉宫','长门','朝比奈');
// 注意和rest剩余参数区分

• 数组的克隆

const a = ['h', 'e', 'y'];
const b = [...a]; // b = ['h','e','y']; 若果数组里面有复杂数据类型，是浅拷贝

• 扩展运算符可以应用于合并数组。

let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// ...ary1 // 1, 2, 3
// ...ary1 // 4, 5, 6
let ary3 = [...ary1, ...ary2];
console.log(ary3); //[1, 2, 3, 4, 5, 6]

• 合并数组的第二种方法

let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
ary1.push(...ary2);
console.log(ary1);//[1, 2, 3, 4, 5, 6]

• 利用扩展运算符将伪数组转换为真正的数组

<div>1</div>
<div>4</div>
<div>3</div>
<script>
	let oDivs = document.getElementsByTagName('div');
	console.log(oDivs); //oDivs是个对象
	let ary = [...oDivs]; // [div, div, div]
	ary.push('a');//将伪数组转为数组的好处是可以用数组的方法
	console.log(ary); //[div, div, div, 'a']
</script>

6.2 对象的扩展运算符

//对象合并
const msg = {
   
  name: "凉宫",
  age: 15,
};
const features = {
   
  hight: "158cm",
  isCute: true,
};
const person = {
   
  ...msg,
  ...features,
};
console.log(person); // {name: '凉宫', age: 18, hight: '158cm', cute: true}

7. Array 的扩展方法

7.1 from()

将类数组或可遍历对象转换为真正的数组

let arrayLike = {
   
	"0": "张三",
	"1": "李四",
	"2": "王五",
	"length": 3 //要加这个属性
}
let ary = Array.from(arrayLike);
console.log(ary); //Array(3)

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arrayLike = {
   
	"0": 1,
	"1": 2,
	"length": 2
}
let ary = Array.from(arrayLike, item => item * 2</