ES6常用知识总结和使用方法

ES6基础与语法

1.let声明变量

1. 不能重复声明变量
2. 块级作用域
3. 不存在变量提升

2.const常量的使用

1. 必须赋初始值
2. 常量不能修改(对于数组和对象的元素修改 不算对常量的修改 不会报错)
3. 块级作用域

3.变量结构赋值

1.数组
const f4 = ['小沈阳','李四','宋小宝'];
let [xiao,li,song] = f4
2.对象
const person ={
    name:'刘德华',
    sing:function(){
        console.log('我可以演戏吗')
    }
}
let {name,sing} = person

4.模板字符串

1. 内容中可以直接使用换行符
2. 使用${}字符串拼接

1.声明
let str = `我是一个字符串`
let res = `我是被拼接了${str}`

5.对象的简化写法

let name = '刘德华';
let sing = function(){
    console.log('我们可以改变你')
}
let obj ={name,sing,improve()}

6.箭头函数

1. this是静态的，始终是指向函数声明时所在的作用域
2. call方法不能改变this的指向
3. 不能作为构造函数实例化对象
4. 不能使用 argument 变量
5. 当参数只有一个时可以省略小括号 代码体只有一条语句时可以省略return
6. 应用场景：定时器 数组的方法 (与this无关的回调函数)

let fn = () =>{};
let db = (a,b) =>{
    return a+b
}
let b = a => console.log(a)

7.函数参数的默认值

1. 当函数没有传参数则使用默认参数
2. 具有默认参数位置靠后

function add(a,b,c=2){
    return a+b+c
}
与结构赋值结合,如果未传 port 则使用默认值
function connect({host,username,password,port=9000}){
    console.log(host)
}
connect({
    host:'localhost',
    username:'root',
    password:'root',
    port:8000
})

8.rest参数

1. 返回一个数组
2. rest 参数必须要放到参数最后

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

9.扩展运算符

1. 合并数组
2. 数组的克隆
3. 将伪数组转化未真正的数组

conet arr =['张三','李四','王麻子']
...arr => 张三 李四 王麻子
1.应用
cosnt arr1 =[1,2,3]
const arr2 =[4,5,6]
const res =[...arr1,...arr2]
const clone =[...arr1]

10.Symbol的使用:ledger:

1. 不能与其他数据类型进行计算
2. Symbol的内置属性

let s1 = Symbol('尚硅谷');
let s2 = Symbol('尚硅谷');
s1 !== s2
let s4 = Symbol.for('哈哈')

let game ={}
let methods={
    up:Symbol(),
    down:Symbol()
}
game[methods.up]=function(){
    console.log('我可以改变形状')
}
game[methods.down]=function(){
    consloe.log('我可以快速下降')
}
let yoyxi = {
    name:'狼人杀',
    [Symbol(say)]:function(){}
}

11.迭代器:ledger:

1.for...of 循环遍历
const movice = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
for(let value of movice){
    console.log(value)
}
2.使用迭代器
let iterator = movice[Symbol.iterator]();
console.log(iterator.next())
3.自定义
 const classmate = {
            name: '终极一班',
            student: ['小米', '华为', '联想'],
            [Symbol.iterator]() {
                let index = 0
                let that = this
                return {
                    next: function () {
                        if (index < that.student.length) {
                            const result = { value: that.student[index], done: false }
                            index++
                            return result
                        } else {
                            return { value: undefined, done: true }
                        }
                    }
                }
            }
        }
        for (let value of classmate) {
            console.log(value);
        }

12.生成器:cookie:

1. 生成器是一个特殊的函数
2. 异步编程 回调函数

function* gen(arg) {
       console.log(arg);
       let res = yield '一只没有耳朵'       
        console.log(res);   //返回第二次的传参
        console.log('嘿嘿')
        yield '一只没有尾巴'
        console.log('哈哈')
 }
let iterator = gen('我是参数');
iterator.next('第一次')
iterator.next('第二次')

function one(){
    setTimeout(() =>{
        iterator.next()
    },1000)
}
function * fn(){
    yield one()
}

13.Promise异步编程:star:

new Promise((resolve,reject)=>{
    setTimeout(() => {
        reslove()
    })
}).then(res => {},err => {})   throw new Error('错误啦')  catch(res => {})

14.Set数据结构:star:

1. add() 添加
2. delect() 删除
3. has() 检测
4. clear() 清空

1.数组去重
Array.from(...new Set([1,2,3,4]))
2.交集
[...new Set([1,2,3]).filter(item => new Set(arr2).has(item))]
3.并集
[...new Set([...arr1,...arr2])]
4.差集
[...new Set([1,2,3]).filter(item => !new Set(arr2).has(item))]

15.Map的使用:star:

let m = new Map();
m.set()  //设置属性
m.size  //个数
m.delete() //删除属性
m.get()  //获取属性
m.clear() //

16.Class类:star:

1. 静态成员的属性属于类不属于实例化对象

1.静态成员
Class Person{
    static name = '手机';
    static change(){
        console.log('我可以的!')
    }
}
2.类的继承
Class Person{
    constructor(brand,price){
        this.brand = brand;
        this.price = price
    }
}
Class Son extends Person{
    constructor(brand,price,color,size){
        super(brand,price)
    }
}
3.class中getter和setter方法
Class Phone{
    get price(){
        console.log('价格属性被读取了')
        return '哈哈哈'
    }
    set price(value){
        consloe.log('当数据被修改则触发')
    }
}
let s = new Phone()

17.Number数值的扩展:ledger:

1. Number.EPSILON是javascript 表示最小的精度
2. 0b 表示二进制 0o 表示八进制 0x 表示十六进制
3. Number.isFinte 检测一个数值是否为有限小数
4. Number.isNaN() 是否为NaN
5. Number.parseInt() Number.parseFloat()
6. Number.isInteger() 判断是否为整数
7. Math.trunc() 抹掉小数后
8. Number.sign() 判断为正数 负数 还是零

18.对象方法的扩展:ledger:

1. Object.is 判断两个值是否相等 (NaN与NaN相等)
2. Object.assgin() 对象的合并
3. Object.setPrototype() Object.getPrototype() 设置和获取原型对象

19.模块化

import * as 命名 from 文件路径
export default{}   =>  import 命名 from 文件路径

20.ES7-includes新特性

1.includes 判断数组的值是否存在
let arr = ['西游记','红梦楼','三国演义']
console.log(arr.includes('西游记'))

21.ES8-async和await异步:ledger:

async function main(){
    let result = await sendAjax()  //接受返回的结果
}

22.ES8-的对象方法扩展:ledger:

1. Object.keys 获取对象的属性名
2. Object.values 获取对象属性值
3. Object.getOwnPropertyDescriptors 获取对象的描述

const school = {
      name: '哈哈',
      cite: ['北京', '上海', '深圳'],
}
let result = Object.keys(school)
console.log(result);
console.log(Object.values(school));

//2.每个对象的属性名和属性值组成一个数组
    console.log(Object.entries(school));
    let m = new Map(Object.entries(school))
    console.log(m);
    console.log(m.get('name'));
    console.log(m.get('cite'));

//3.获取对象的描述 getOwnPropertyDescriptors
  console.log(Object.getOwnPropertyDescriptors(school));

  const obj = Object.create(null, {
       //设置值
        name: {
              value: '哈哈',
               //属性特性
               writable: true,
               configurable: true,
               enumerable: true
         }
   })
   console.log(obj);

23.ES9-扩展运算符

1. 合并对象

function connect({host,username,...user}){
    console.log(host)
}
connect({
    host:'127.0.0.1',
    port:3306,
    username:'root',
    type:'master'
})

24.ES9-正则表达扩展:cookie:

1. 命名捕获 reg.exec()
2. 断言
3. dotAll模式(除换行符以外的单个字符)

1.捕获
let str = '百度'
let reg = /(.*)/
const result = reg.exec(str)

const reg = /(?.*)<\/a>/           //group

2.反向断言 和正向断言
let str = 'js5211314你知道么555啦啦啦'
const reg = /\d+(?=啦)/
const  reg = /(?<=么)\d+/

let str = `
`
const reg = /
\s+(.*?)<\/a>/   //\s 字符
const reg = /
.*?(.*?)<\/a>.*?
(.*?)<\/p>/gs
let result;
let data;
while(result= reg.exec(str)){
    data.push({title:result[1],time:result[2]})
}

25.ES10-语法:art:

1.对象方法的扩展

1. Object.fromEntries() 二维数组转化为对象
2. Object.entries 对象转化为二维数组

const m = new Map({name:'aaa'})
let res = Object.fromEntries(m)

2.字符串

const arr = [1,2,3,4]
let res = arr.flatMap(value => [value*10])

//Symbol获取属性
let a = Symbol('哈哈哈')
console.log(a.description)

3.数组

1. flat() 将多维数组降低
2. flatMap() 接收一个数组

26.ES11-语法

1.私有属性

Class person{
    //共有属性
    name;
    //私有属性
    #age;
    constructor(name,age){
        this.name = name;
        this.#age = age
    }
}

2.Promise.allSettled方法

const p1 = new  Promise((reslove,reject) => {
    setTimeout(() => {
        reslove('商品数量')
    },,1000)
})
const p2 = new  Promise((reslove,reject) => {
    setTimeout(() => {
        reslove('商品数量')
    },,1000)
})
1.Promise.allSettled([p1,p2])    //一个成功返回reslove
2.Promise.all([p1,p2])

3.matchAll方法

let str = `
`
const reg = /
.*?(.*?)<\/a>.*?
(.*?)<\/p>/sg
const result = str.matchAll(reg)
for(let v of result){}

4.可选链操作符

function main(config){
    //const dbHost = config&&config.db&&config.db.host
    const dbHost = config?.db?.host
}
main({
    db:{
        host:'192.168.1.100',
        username:'root'
    },
    cache:{
        host:'192.168.1.200',
        username:'admin'
    }
})

5.动态import

const btn = document.querySelector("button");
btn.addEventListen('click',fuction(){
    import('路径').then()   => 返回一个Promise 对象
})

6.BigInt大整形

let n = 521n
console.log(BigInt(123))  => 123n
let max = Number.MAX_SAFE_INTEGER
console.log(max);
console.log(max + 1);
console.log(max + 2);

let res = BigInt(max) + BigInt(3)
console.log(res, typeof res);

7.globalThis全局对象

find(返回元素)  findIndex(返回索引号)
var arr = [1,2,3,4]
const arr = [1, 2, 3];
const newarr = arr.find(value => value == 2)  // 2