ES6特性学习

ES6

let

1. 不能重复申明同一个变量

   //以下操作会报错（如果使用var不会报错）
   let a = 1;
   let a = 2;
   

2. 块级作用域

   {
   	let a = 2;
   }
   console.log(a); //因为块级所以这里无法获取a的值,报错undefined
   

3. 不存在变量提升
4. 不影响作用域链

const

1. 一定要赋初始值
2. 块级作用域
3. const不可修改，但对于数组和对象的元素修改，不会报错（因为栈内存指向的对象没有更改）

   const TEAM = ['a','b'];
   TEAM = 1; //报错，常量不可修改
   TEAM.push('c');//不报错，指向地址没有改变
   

变量解构赋值

对于数组和对象的解构

const obj = {
	name: '',
	age: '',
	func: function(){
	}
}
let {func} = obj;
func();

``定义符

let str = `content
            brcontent`; //接受换行符
let str2 = `${str}content2`;//可以直接拼接不需要+号

箭头函数

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

   //需求：点击div后2s变色
   //普通函数定义
   let ad = document.getElementById('ad');
   ad.adEventListener("click", function(){
   	let _this = this; //setTimeout内this没有指向，就会直接指向window，在此处保存this指向ad
   	setTimeout(function(){
   		_this.style.background = 'pink';
   	},2000)
   });
   //箭头函数定义
   ad.adEventListener("click", function(){
   	setTimeout(() =>{
   		this.style.background = 'pink';//箭头函数指向作用域内的this，直接指向ad
   	},2000)
   });
   

2. 不能作为构造函数实例化对象
3. 不能使用arguments变量

形参默认值/初始值

//可以与解构结合
function connect({
	host='127.0.0.1', //形参赋值，如果调用时没有host值则显示127.0.0.1
	username
}){
	console.log(host)
}

connect({
	host:'sss.com',
	username:'root'
})

扩展运算符…

//将数组转换为逗号分隔的参数序列
let arr = ['a','b','c'];
function func() {
	console.log(arguments);//结果为'a','b','c'
}
func(...arr);
//数组合并
const arr1 = [];
const arr2 = [];
const result = [...arr1, ...arr2];

symbol数据类型（基本）

1. symbol的值是唯一的，不能参与运算

生成器函数

//形成异步操作
function one(){
	let data = 'user';
	setTimeout(()=>{},1000);
	iterator.next(data);//第二个next //下一个next的参数会作为上一个yield的返回值返回
}
function two(){
	setTimeout(()=>{},2000);
	iterator.next();//第三个next
}
function three(){
	setTimeout(()=>{},3000);
	iterator.next();
}
function * gen(){ //*为生成器函数标志
	let userdata = yield one();//userdata = 'data'
	//下一个next会把参数作为上一个yield的返回值返回
	yield two();
	yield three();
}
//调用生成器函数
let iterator = gen();
iterator.next(); //生成器函数一个next走一个yield，没有next则不执行

Promise

避免回调地狱

• 手写promise

Set(集合)

let arr = [1,2,3,4,4,5,1];
//数组去重
let result = [...new Set(arr)];//Set会自动把集合内重复的内容去除只剩一个
//俩数组交集
let arr2 = [1,4,7,7,8];
let result = [...new Set(arr)].filter(item =>{
	let s2 = new Set(arr2);
	if(s2.has(item)){
		return true;
	}else{
		return false;
	}
});
//↑简化写法：
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
//并集
let union =[...new Set([...arr1, ...arr2])];

Map

Class

//类新建
class Phone {
	constructor(brand, price){
		this.brand = brand;
		this.price = price;
	}
	call(){
	}
}
//实例化对象
let onePlus = new Phone ('oneplus',1999);
onePlus.call();

继承
ES5的继承方式

//父类
function Phone(brand, price){
	this.brand = brand;
	this.price = price;
}
Phone.prototype.ask = function(){
}
//子类
function Smartphone(brand, price, color, size){
	Phone.call(this,brand,price);//继承父类元素，将this指向子类
	this.color = color;
	this.size = size;
}
//设置子集构造函数的原型
SmartPhone.prototype = new Phone;

ES6的继承方式

function Phone(brand, price){
    constructor(brand, price){
	    this.brand = brand;
		this.price = price;
    }
	ask(){
	}
}

 class SmartPhone extends Phone{
 	constructor(brand, price, color, size){
	 	super(brand,price);
	 	this.color = color;
	 	this.size = size;
 	}
 	photo(){
 	}
 	ask(){
 	//子类出现同名方法会将父类对应方法重写（覆盖）
 	}
 }
 const smp = new SmartPhone('','','','');
 smp.photo();
 smp.ask();

get & set

数值扩展

1. Number.EPSILON
   JS的最小精度

2.  let b = 0b1010 //二进制
    let o = 0o777 //八进制
    let d = 100 //十进制
    let x = 0xff //十六进制
   

3. Number.isFinite() //是否有限
4. Number.isNaN
5. Number.parseInt
   Number.parseFloat
6. Number.isInteger() //是否整数
7. Math.trunc //抹除小数部分
8. Math.sign //判断正负
   1：正数
   0：零
   -1: 负数

对象方式扩展

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

   Object.is(120,120) // true
   Object.is(NaN,NaN) // true
   if(NaN === NaN) // false
   

2. Object.assign //对象合并
3. Object.setPrototypeOf // 设置原型对象
   Object.getPrototypeOf // 设置原型对象

模块化语法

export & import

//通用导入
import * as m1 from "./src/js/m1.js";
//解构赋值形式导入
import {school as xuexi , find} from "./src/js/m1.js"；//重名情况下可以用as取别名引入

babel

ES6转换为ES5

ES7特性

1. arr.includes() //是否存在某个元素
2. **幂运算

   let a = 2**10 ;// 等同于 Math.pow(2,10);
   

ES8特性

1. async
   返回值是一个promise类型的对象
2. await
   必须放在async函数中

//发送ajax请求
function sendAJAX(url){
	return new Promise((resolve, reject) => {
		const xhr = new XMLHttpRequest();
		x.open('GET', url);
		x.send();
		x.onreadystatechange = function (){
			if (x.readyState === 4){
				if(x.status === 200) {
					resolve(x.response);
				} else {
					reject(x.status);
				}
			}
		}
	})
}

//测试
async function main(){
	let result = await sendAJAX('URL');
}
main();