ES6 学习笔记

Let

特性：  
	1.变量无法重复声明
	2.块级作用域 
	3.不存在变量提升（不允许在变量声明之前，去使用变量）
		console(song);
		let song = '恋爱达人'
		//这种使用就是错的
	4.不影响作用域链

Const

特性：
	1.一定要赋初始值
	2.一般常量使用大写
	3.常量的值不能修改
	4.块级作用域
	5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
	例：
	const TEAM = ['uzi','MLXG']
	TEAM.push('xiaohu')
	//不会报错

解构赋值

const zhao = {
    name:'赵本山',
    age:'不详',
    xiaopin:function(){
        console.log('我可以演小品')
    }
}

let {name,age,xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);

箭头函数

特性：
	1.箭头函数的this是固定的
	2.箭头函数适合与this无关的回调，如定时器，数组的方法回调
	3.箭头函数不适合做与this 有关的回调，如时间回调，对象的方法

rest参数

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

function date(...args){
    console.log(args)
}

date('阿娇','柏芝','思慧')

扩展运算符

数组的合并

const kuaizi = ['111','222']
const fenghuang = ['3333','444']
const zuhe = [...kuaizi,...fenghuang]

数组的克隆

const kuaizi = ['111','222']
const fenghuang = [...kuaizi]

将伪数组转为真数组

const divs = document.querySelectorAll('div')
const divArr = [...divs]

Symbol

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

//Symbol 创建
let s = Symbol();
console.log(s,typeof s);
//字符串的作用使用来描述这个symbol的
let s2 = Symbol('gmz')
let s3 = Symbol('gmz')
//两个symbol 是不相等的

//Symbol.for 创建
let s4 = Symbol.for('gmz')
let s5 = Symbol.for('gmz')
//这两个Symbol是相等的

注意事项：Symbol类型不能进行运算和比较

迭代器

注：ES6创造了新的遍历命令for...of循环，Iterator接口主要供for..of消费
原生具备iterator接口的数据类型（可用for of 遍历）：Array，Argument，Set，Map，String，TypedArray，NodeList
工作原理：
	1.创建一个指针对象，指向当前数据结构的初始位置
	2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
	3.接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
	4.每调用next方法返回一个包含value和done属性的对象

const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']

// for(let v of xiyou){
//     console.log(v)
// }

let iterator = xiyou[Symbol.iterator]();

console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

自定义创建迭代器

const banji = {
    name:'YM',
    logo:'聚是一坨屎，散是满天星',
    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}
                }
            }
        }
    }
}

生成器

注：生成器其是一个特殊的函数

//生成器创建
function * gen(){
    console.log(111);
    yield '分界一'
    console.log(222)
    yield '分界二'
    console.log(333);
}

let iterator = gen()
iterator.next()
iterator.next()
iterator.next()

效果：

function * gen(){
    console.log(111);
    yield '分界一'
    console.log(222)
    yield '分界二'
    console.log(333);
}

let iterator = gen()
console.log(iterator.next()); 
console.log(iterator.next());
console.log(iterator.next()); 

效果：

实际应用：避免回调地狱

//异步编程
//1s后控制台输出111,2s后控制台输出222,3s秒后输出333

function one(){
    setTimeout(()=>{
        console.log(111);
        iterator.next()
    },1000)
}
function two(){
    setTimeout(()=>{
        console.log(222);
        iterator.next()
    },1000)
}
function three(){
    setTimeout(()=>{
        console.log(333);
    },1000)
}

function * gen(){
    yield one();
    yield two();
    yield three();
}

let iterator = gen()

iterator.next()

Promise

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

//promise 封装获取文件数据
//1, 引入fs模块
const fs = require('fs');

//2.使用Promise封装
const p = new Promise(function(resolve,reject){
    fs.readFile("./resouces/weixue.md",(err,data)=>{
        if(err) reject(err);
        resolve(data);
    })
})

//成功接收
p.then(function(value){
    console.log(value);
}),function(reason){
    console.log('读取失败')
}

//promise 封装ajax函数

const p = new Promise(function(resolve,reject){
    const xhr = new XMLHttpRequest();
    xhr.open("GET","https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1");
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                resolve(xhr.response)
            }else{
                reject(xhr.status)
            }
        }
    }
})

p.then((value)=>{
    console.log(value)
}),(err)=>{
    console.log(err)
}

//Promise避免回调地狱
const p = new Promise((resolve,reject)=>{
    fs.readFile("./111.md",(err,data)=>{
        resolve(data);
    })
})
p.then((value)=>{
    return new Promise((resolve,reject)=>{
        fs.readFile("./222.md",(err,data)=>{
            resolve([value,data]);
        })
    })
}).then((value)=>{
    return new Promise((resolve,reject)=>{
        fs.readFile("./333.md",(err,data)=>{
            resolve([value,data]);
        })
    })
}).then((value)=>{
    console.log(value)
})

Set

含义：集合

//声明一个set
let s = new Set();

//添加新元素
s.add();
//删除元素
s.delete();
//检测元素
s.has();
//清空元素
s.clear();
//数组去重
let result = [...new Set(arr)];
//交集
let arr2 = [4,5,8,3,9];
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([...arr,...arr2])];

//差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));

Map

特性：它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用扩展运算符和for...of进行遍历

let m = new Map()
//添加元素
m.set('name','gmz');
m.set('change',()=>{
    console.log("1111")
})

let key = {
    school : 'ATGUTGU'
}
m.set(key,['北京','上海','深圳'])
//获取长度
m.size

//删除
m.delete('name');

//获取
m.get(change);

//清除
m.clear();

//遍历
for(let v of m){
    console.log(v)
}

Class

class Phone{
    //构造方法，名字不能更改
    constructor(brand,price){
        this.brand = brand
        this.price = price
    }

    call(){
        console.log('我可以打电话')
    }
}

let onePlus = new Phone("1+",19999)

console.log(onePlus)

class Phone{
    //静态属性
    static name = '手机'
    static change(){
        console.log("我可以改变世界")
    }
}

//类的继承
class Phone{
    //构造方法
    constructor(brand,price){
        this.brand = brand
        this.price = price
    }
    //父类的成员属性
    call(){
        console.log("我可以打电话")
    }
}

class SmartPhone extends Phone{
    constructor(brand,price,color,size){
        super(brand,price);
        this.color = color;
        this.size = size;
    }

    photo(){
        console.log("拍照");
    }

    playGame(){
        console.log("玩游戏");
    }
}

//get 和 set
class Phone{
    get price(){
        console.log("价格属性被读取了")
        return "1234"
    }

    set price(newVal){
        console.log("价格属性被修改了")
    }
}
let s = new Phone();
console.log(s.price);
s.price = 'free'

数值扩展

二进制：0b开头 例：let b = 0b1010
八进制进制：0o开头 例：let b = 0o777
二进制：0x开头 例：let b = 0xff

//检测一个数是不是有限的
Number.isFinite(100)

//检测一个数是否为NaN
Number.isNaN(123)

//字符串转Int,float
Number.parseFloat()
Number.parseInt()

//判断是否为整数
Number.isInteger(5)

//将小数后面的值抹去
Math.trunc(3.5)

//判断一个数是正数，还是负数，还是零
Math.sign(100)

对象的扩展

// Object.is 判断两个值是否完全相同
Object.is(120,120)

//Object.assign 对象的合并
const config1 = {
    host:'localhost',
    part:3306,
    name:'root',
    pass:'root'
}

const config2 = {
    host:'https://baidu.com',
    part:33060,
    name:'baidu.com',
    pass:'11234'
}
//config2 覆盖 config1
Object.assign(config1,config2)

模块化

好处：
	1.防止命名冲突
	2.代码复用
	3.高维护性
功能主要由两个命令构成:export和 import
	export命令用于规定模块的外接口
	import命令用于输入其他模块提供的功能

ES7新特性

Array.includes方法，用来检测数组中是否含有某个元素，返回布尔类型	
幂运算 例：2 ** 10

ES8新特性

async和await：
	async和await两种语法结合可以让异步代码像同步代码一样
获取对象所有的键：
	Object.keys()
获取对象所有的值：
	Object.value()
获取对象的键和值，并包装成一个数组
	Object.entries()
对象属性的描述
	Object.getOwnPropertyDescriptors()

ES9新特性

rest：为对象提供了像数组一样的rest参数和扩展运算符

function connect({host,port,...user}){
    console.log(host)
    console.log(port)
    console.log(user);
}

connect({
    host:'127.0.0.1',
    port:3306,
    username:'root',
    password:'root'
})

扩展运算符：

const skillOne = {
    q:"天音波"
}
const skillTwo = {
    w:"金钟罩"
}
const skillThree = {
    e:"天雷破"
}
const skillFour = {
    r:"猛龙摆尾"
}

const mangseng = {...skillOne,...skillTwo,...skillThree,...skillFour};
console.log(mangseng)

正则表达式，捕获命名分组：

let str = '<a href="www.baidu.com">尚硅谷</a>';

const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/

const result = reg.exec(str);

console.log(result)

正则断言：

//目标：获取1212
        //声明字符串
        let str= '1111嘿嘿嘿1212啦啦啦'

        //正向断言
        const reg = /\d+(?=啦)/;
        const result = reg.exec(str);

        //反向断言
        const reg = /(?<=嘿)\d+/;
        const result = reg.exec(str);

Object.fromEntries方法：将二维数组转变为对象

//二维数组
        const result = Object.fromEntries([
            ['name','gmz'],
            ['xueke','前端']
        ])
        console.log(result);

Object.entries()方法：将对象转变为数组

trimStart和trimEnd：分别是清除字符串前面的空格和清除字符串后面的空格

//trim
        let str = '        iloveyou    '

        console.log(str);
        console.log(str.trimStart());
        console.log(str.trimEnd());

arr.flat():数组方法，将高维数组，转为低维数组

const arr = [1,2,3,[4,5,[3,3,4]]]
        //参数为深度，例：将一个三维数组，展开成一个一维数组，深度就是2
        console.log(arr.flat(2))