ES6要点学习笔记

一、let、const的使用

1.let变量

（1）变量不能重复声明；

（2）块级作用域，全局，函数，eval作用域；

（3）不能存在变量提升

//会报错
console.log(song);
let song = '恋爱达人';

（4）不影响作用域链

{
    let school = '尚硅谷';
    function fn() {
        console.log(school);
    }
    fn();
}

经典案例：

//获取div元素对象
let items = document.getElementsByClassName('item');
//遍历并绑定事件
for(var i = 0;i < items.length;i++) {
	items[i].onclick = function() {
		//修改当前元素的背景色
		// this.style.background = 'pink';
		items[i].style.background = 'pink';
	}
}

会报错，因为最后 i = 3，数组越界了。for循环声明里改成let i = 0就没问题。

//获取div元素对象
let items = document.getElementsByClassName('item');
//遍历并绑定事件
for(let i = 0;i < items.length;i++) {
	items[i].onclick = function() {
		//修改当前元素的背景色
		// this.style.background = 'pink';
		items[i].style.background = 'pink';
	}
}

2.const声明常量

（1）一定要赋初始值；

（2）一般常量使用大写（约定）；

（3）常量的值不能修改；

（4）块级作用域；

（5）对于数组和对象的元素修改，不算对常量的修改。

const TEAM = ['UZI','MXLG','MING','LETME'];
TEAM.push('MEIKO');//不报错，本质上数组指向的地址不变
TEAM = 100;//会报错

二、解构赋值

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

1.数组的解构

const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

2.对象的解构

const zhao = {
    name: '',
    age: '',
    xiaopin: function() {
        console.log("我可以演小品");
    }
};
let {name, age, xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
//xiaoping();

let{xiaoping} = zhao;
xiaoping();

三、模板字符串

1.ES6引入新的声明字符串的方式【``】 ，以前的【''】【""】；

2.内容中可以直接出现换行符；

3.变量拼接

let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员！！`;
console.log(out);

四、对象简化写法

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

//这样的书写更加简洁
let name = '尚硅谷';
let change = function() {
    console.log('我们可以改变你！！');
}

const school = {
    name,
    change,
    improve() {
        console.log("我们可以提高你的技能");
    }
}

console.log(school);

五、箭头函数

//ES6允许使用箭头【=>】定义函数
//以前声明一个函数
let fn = function(a, b) {
    return a + b;
}
//现在用箭头函数声明
let fn = (a, b) => {
    return a + b;
}

1.this是静态的，this始终指向函数声明时所在的作用域下的this的值；

2.不能作为构造函数实例化对象；

3.不能使用arguments变量；

4.箭头函数简写：

（1）当形参有且只有一个的时候，可以省略小括号；

（2）当代码体只有一条语句的时候，可以省略花括号。

let pow = n => n * n;
console.log(pow(8));

5.箭头函数的使用场景：

（1）箭头函数时候与this无关的回调，定时器，数组的方法回调；

（2）箭头函数不适合与this有关的回调，事件回调，对象的方法。

例1：

//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener("click", function() {
    //保存this的值
    let _this = this;
    //定时器
    setTimeout(function() {
        //修改背景颜色 this
        console.log(this);
        _this.style.background = 'pink';
    }, 2000);
});

改成箭头函数：

//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener("click", function() {
    //保存this的值
    let _this = this;
    //定时器
    setTimeout(() => {
        //修改背景颜色 this
        console.log(this);
        _this.style.background = 'pink';
    }, 2000);
});

例2：

//从数组中返回偶数的元素
const result = arr.filter(function(item) {
    if(item % 2 === 0) {
        return true;
    } else {
        return false;
    }
});

改成箭头函数：

//从数组中返回偶数的元素
const result = arr.filter(item => item % 2 === 0);

六、rest参数、拓展运算符、Symbol对象、迭代器、生成器

1.rest参数：ES6引入rest参数，用于获取函数的实参，用来代替arguments

// ES5获取实参的方式
function date() {
	console.log(arguments);//对象
}
date('柏芝','阿娇','思慧');

// rest 参数
function date(...args) {
	console.log(args);//数组，可以使用filter some every map
}
date('柏芝','阿娇','思慧');

// rest参数必须要放到参数最后
function fn(a,b,...args) {
	console.log(a);
	console.log(b);
	console.log(args);
}
fn(1,2,3,4,5,6,7);

2.拓展运算符：...拓展运算符能将数组转换为逗号分隔的参数序列

// 声明一个数组
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'

// 声明一个函数
function chunwan() {
	console.log(arguments);
}
chunwan(...tfboys);//chunwan('易烊千玺','王源','王俊凯');

拓展运算符的应用：

// 1.数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// const zuixuanxiaopinguo = kuaizi.concat(fenghuang);
const zuixuanxiaopinguo = [...kuaizi,...fenghuang];
console.log(zuixuanxiaopinguo);

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

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

3.Symbol对象

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是Javascript语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol特点：

1. Symbol的值是唯一的，用来解决命名冲突的问题；
2. Symbol的值不能与其他数据进行运算；
3. Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。

// 创建Symbol
let s = Symbol();
console.log(s, typeof s);
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2 === s3);

// Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 === s5);

// 不能与其他数据进行运算
// let result = s + 100;
// let result = s > 100;
let result = s + '100';

Javascript的数据类型速记口诀：USONB   you are so niubility

• u  undefined
• s  string symbol
• o  object
• n  null number
• b  boolean

4.迭代器

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就具备遍历操作的功能。

1. ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费

2. 原生具备Iterator接口的数据（可用for...of遍历）

• Array
• Arguments
• Set
• Map
• String
• TypedArray
• NodeList

      3.工作原理

• 创建一个指针对象，指向当前数据结构的起始位置
• 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
• 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
• 每调用next方法返回一个包含value和done属性的对象

注：需要自定义遍历数据的时候，要想到迭代器。

const banji = {
	name: "终极一班",
	stus: [
		'xiaoming',
		'xiaoning',
		'xiaotian',
		'knight',
	],
	[Symbol.iterator]() {
		// 索引变量
		let index = 0;
		let _this = this;
		return {
			next: function() {
				if(index < _this.stus.length) {
					const result = {value: _this.stus[index], done: false};
					// 下标自增
					index++;
					// 返回结果
					return result;
				} else {
					return {value: undefined, done: true};
				}
			}
		}
	}
}

// 自定义遍历对象
for(let v of banji) {
	console.log(v);
}

5.生成器

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

七、Promise对象

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

1. Promise构造函数：Promise(excutor){}
2. Promise.prototype.then方法
3. Promise.prototype.cach方法

//实例化Promise对象
const p = new Promise(function(resolve, reject) {
    //异步任务
    setTimeout(function() {
        //let data = '读取数据库中的数据';
        //resolve(data);

        let err = '读取数据库失败';
        reject(err);
    }, 1000);
});

//调用Promise对象的then方法
p.then(function(value) {
    console.log(value);
}, function(reason) {
    console.error(reason);
});

// p.catch(function(reason) {
//    console.warn(reason);
// });

八、Module模块化

1.export，包括3种暴露数据的方式

// 1.分别暴露
export let school = '尚硅谷';

export function teach() {
    console.log('我们可以教你开发技能！！');
}

// 2.统一暴露
let school = '尚硅谷';
function findJob() {
    console.log('我们可以帮助你找工作！！');
}

export {school, findJob}

// 3.默认暴露
export default {
    school: 'ATGUIGU',
    change: function() {
        console.log('我们可以改变你！！');
    }
}

2.import，包括3种导入数据的方式

<script type="module">
	// 在里面写导入语句
</script>

// 1.通用的导入方式
// 引入m1.js模块内容
import * as m1 from "./js/m1.js"
console.log(m1);
// 引入m2.js模块内容
import * as m2 from "./js/m2.js"
console.log(m2);
// 引入m3.js模块内容
import * as m3 from "./js/m3.js"
console.log(m3);
m3.default.change();

// 2.解构赋值的方式
import {school, teach} from "./js/m1.js";
console.log(school,teach);
import {school as guigu, findJob} from "./js/m2.js";
console.log(guigu,findJob);
import {default as m31} from "./js/m3.js";
console.log(m31);

// 3.简便形式 针对默认暴露
import m32 from "./js/m3.js";
console.log(m32);