【ES6】笔记

为什么学习ES6

1. ES6版本变动内容最多，有里程碑意义
2. ES6加入许多新语法特性，使工作更加效率、简单
3. ES6是大多数应聘所要求

变量声明关键字 let

特性：

• 变量不能重复声明
  例：

{
  let a = 1;
  let a = "abc" ;	
  //重复声明报错
}

• 块级作用域
  例：

{
	let a = 1;
}
congsole.log(a);
//无法读取到参数a

• 不存在变量升级
  变量升级：代码执行之前会收集变量。
  例：

{
	congsole.log(a);
	//不会报错 会输出undefined
	congsole.log(b);
	//会报错 
	var a = 1;
	let b = 2;
}

• 不影响作用域链
  例：

{
	let a = 2;
	function b (){
		console.log(a);
	}
	b();
	//可输出a
}

常量声明关键字 const

const 特性：

• 一定要赋初始值
• 一般常量用大写
• 常量的值不能更改
• 块级作用域
  例：

{
	const a = 1;
}
congsole.log(a);
//无法读取到参数a

• 对数组和对象的元素修改，不算对常量修改
  例：

{
	const a = [1, 2, 3, 4];
	a.push(5);
	//不会报错 因为常量所指向的地址没有改变
}

变量解构赋值

1. 数组的解构
例：

const n = [ '红' , '黄' , '蓝' ];
let [a, b, c]=n;
console.log(a);
console.log(b);
console.log(c);
/*输出结果: 
红 
黄 
蓝
*/

2. 对象的解构
例：

const n = {
	color: '红',
	name: 'red',
	way:function(){
		console.log("颜色");
		}
	};
let {color, name, way}=n;
//let声明的变量名必须与对象中的元素名相同
console.log(color);
console.log(name);
way();
/*输出结果: 
红 
red 
颜色
*/

模板字符串

用法：

let a=`模板字符串反引号`

特性：

• 内容可以直接出现换行符
  例：

let a=
`红
黄
蓝
绿`
console.log(a);
/*输出结果: 
红 
黄
蓝
绿
*/

• 变量拼接
  例：

let a = '红';
let b = `${a}黄蓝绿`;
console.log(b);
/*输出结果: 
红黄蓝绿
*/

对象简化写法

例：

let name = '红';
let way = function(){
	console.log('颜色');
}
const n = {
	name,
	way,
	//等价于 name:name, way:way,
	way2(){
		console.log('蓝绿');
	}
	//等价于 way2: function(){...}
}

箭头函数

用法：

let a = ()=>{
	return 0;
}

特性：

• 箭头函数中的this是静态的，this始终指向函数声明时所在作用于下的this值
  例：

function a(){
	console.log("this.name");
}
let b = ()=>{
	console.log("this.name)";
}
window.name = '箭头函数';
const n ={
	name: "普通函数"
}
//call方法调用
a.call(n);
//a不是箭头函数，call方法调用改变了this指向，this指向更改为n中的name
b.call(n);
//b是箭头函数，所以call不会改变this指向，b中的this依旧是指向全局的name
/*输出结果：
普通函数
箭头函数
*/

• 不能作为构造函数实例化对象
  例：

window.name = 'abc';
let a = (name)=>{
	this.name=name;
}
let n = new a('qwe');
//输出结果会报错

• 不能使用arguments变量
  例：

let a = ()=>{
	console.log(arguments);
}
a(1,2,3);
//输出结果报错

• 箭头函数省略写法

1. 省略小括号
   使用条件：形参有且只有1个
   例：

let a = n =>{
	return n+1;
}

2. 省略花括号
   使用条件：代码体只有一条语句

let a = (n) => n+1;

rest参数

作用:获取函数的实参，代替arguments参数

用法：

function a(...args){
	console.log(args);
}
a('红','蓝','白');

注意：在函数有多个参数时候，rest参数必须放到最后

Symbol类型

特性：

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

用法：

let a = Symbol();
let b = Symbol("颜色");
//传入的字符串并不是Symbol的值,而是对该值的注释
let c = Symbol.for('颜色');
//创建Symbol对象

使用场景：

let a = {...};
//要在对象a中创建一个方法打印abc
let b = {
	x: Symbol(),
};
a[b.x] = function(){
	console.log("abc"):
}
//用来解决命名重复问题，防止创建的方法名在a中已经被创建

迭代器

作用：迭代器是一种接口，为不同类型的数据结构提供同一个访问机制。在ES6中，通过for…of 就可以遍历不同数据类型的数据，具体如下：

1. Array
2. Arguments
3. Set
4. Map
5. String
6. TypedArray
7. NodeList

工作原理:

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

用法：

const a = ['红', '蓝', '绿'];
for(let b of a){
	console.log(b);
}

Promise

作用： Promise是ES6引用的异步编程（文件IO 数据库IO 网络请求）的新解决方法。
用法：

1. 首先用new Promise()实例化Promise对象
2. 在实例化时候接受含两个形参 resolve和reject 的函数
3. 函数内部放异步操作
4. 通过调用resolve和reject来改变Promise对象的状态(初始化 成功 失败）
5. 使用resolve和reject方法后会调用promise对象的then方法，若状态是成功则调用then方法中的第一个方法，失败则调用第二个方法

const a = new Promise(function(resolve, reject){
	setTimeout(function(){
		let data = '成功';
		resolve(data);//Promise对象状态变为成功
	},1000);

//调用Promise对象的then方法
p.then(function(value){
	console.log(value);
},function(reason){
	console.error(reason);
})
//then方法接受两个函数，分别是成功状态调用的函数和失败状态调用的函数
});
	

Set（集合）

用法：

let a = new Set();
let b = new Set(['红', '蓝']);

方法：

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

let a = new Set(['红', '蓝']);
console.log(a.size);//打印元素个数
a.add('黄');//添加新元素
a.delete('红');//删除元素
console.log(a.has('蓝'));//检测是否含有元素
a.clear();//清空

常见操作

• 去重

let a = [1,2,3,1,2];
let b = [...new Set(a)];

• 交集

let a = [1,2,3,4,4];
let b = [2,3,3];
let result = [...new Set(a)].filter(item =>{
	let n = new Set(b);
	if(n.has(item)){
		return true;
	}else{
		return false;
	}
});
console.log(result);
//取交集时先去重，再用has判断是否是交集

• 并集

let a = [1, 2, 3, 4];
let b = [3, 4, 5];
let result = [..new Set([a,b])];
console.log(result);

• 差集

let a = [1, 2, 3, 4];
let b = [3, 4, 5];
let result = [..new Set(a)].filter(item => !(new Set(b).has(item)));

Map（键值对集合）

用法：

let a = new Map();
a.set('name','红');	//a.set('键'，'值');
a.set('way',function(){
	console.log('蓝');
	});
let key = {
	color:'黄'
}；
a.set(key,['深黄','浅黄']);
console.log(a);

方法:

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

ES6数值扩展

1. Number.EPSILON（比较浮点数大小）
   作用： EPSILON是JS的最小精度，用于两个浮点数比较。当两个浮点数误差小于EPSILON时，则说明这两个浮点数相等。
   例：

console.log(0.1 + 0.2 === 0.3);
//0.1 + 0.2是不等于0.3的
function equal(a,b){
	if(Math.abs(a-b)<Number.EPSILON){
		return true;
	}
	else{
		return false;
	}
}
console.log(equal(0.1 + 0.2,0.3));
//使用EPSILON后即可正确比较浮点数

2. Number.isFinite（检测是否为有限数）
   例：

console.log(Number.isFinite(100));
console.log(Number.isFinite(100/3));

3. Number.isNaN（检测是否为NaN）
   例：

console.log(Number.isNaN(100));

4. **Number.parseInt Number.parseFloat（字符串转整数/浮点数） **

console.log(Number.parseInt('1234abc');
console.log(Number.parseFloat('3.1415红色');

5. Number.isInteger (检测是否为整数）

console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));

6. Math.trunc (将数字的小数抹去）

console.log(Number.trunc(3.5));

7. Math.sign (检测正、负数、0）

console.log(Math.sign(100));
console.log(Math.sign(-100));
console.log(Math.sign(0));

ES6对象方法拓展

1. Object.is (判断两个值是否完全相等）

console.log(Object.is(120,120));
console.log(Object.is(NaN,NaN));

2. Object.assign (对象的合并）

const a = {
 	name:'红';
 	color:'红';
 };
 const b = {
 	name:'蓝';
 	number:0;
 };
 console.log(Object.assign(a,b));
 //如果对象中有重复的属性，后面的对象会覆盖前面的对象属性

ES6模块化

暴露数据语法

1. 分别暴露

export let a = '红';
export function b(){
	console.log('蓝'):
}

2. 统一暴露

let a = '红';
function b(){
	console.log('蓝'):
}
export {a, b};

3. 默认暴露

export default{
	let a = '红';
	function b(){
	console.log('蓝'):
	}
}

引入数据语法

1. 通用导入方式

import * as a from "相对路径/a.js";

2. 解构赋值形式

import {a as newName, b} from "相对路径/a.js";
import {default as newName2} from "相对路径/a.js";
//不能直接使用default 要使用别名

3. 简便形式 针对默认暴露

import a from "相对路径/a.js";