【笔记】es6语法

àì夳堔傛蜴生んèń 2022-10-04 14:55 171阅读 0赞

### es6 ###

*   *   *  1. Symbol:唯一性，相同的也是唯一的。
         *  2. 声明变量
         *  3. 解构赋值
         *  4.扩展运算符...:可以合并一维数组或者对象
         *  5.unicode，字符集，扩展。
         *  6. 模板字符串
         *  7. 对象简写：键名，键值一致，可以写一个。
         *  8.迭代。
         *  9. 函数扩展
         *  10.数组扩展
         *  11.对象扩展
         *  12. Set
         *  13. Map
         *  14. 字符串扩展
         *  15. Iterator接口，迭代器
         *  16. Proxy拦截代理和Reflect
         *  17. generator,生成器

> 一些新的语法，不定时更新

### 1. Symbol:唯一性，相同的也是唯一的。 ###

let gender = Symbol('gender') //不可遍历，枚举，里面为描述信息，任何可以被转换为字符串的值
    let symbolObj = {  //声明一个不可枚举对象属性
        [Symbol('name')]: '123',
        age: 456
    }
    let sy = Symbol('a')
    let sy1 = Symbol('a')
    sy===sy1 //false
    sy.toString() === sy1.toString();//true，转为字符串一样。
    sy.description === sy1.description // true，描述一样
    
    /*Symbol.for():不会立即返回一个新的Symbol,会先检测是否存在给定key,不存在创建新的，存在，每次返回同一个Symbol*/
    let s1 = Symbol.for('foo');
    let s2 = Symbol.for('foo');
    s1 === s2 // true
    
    Object.getOwnPropertySymbols(symbolObj) // 这两个方法可以获取symbol
    Reflect.ownKeys(symbolObj)

### 2. 声明变量 ###

//let：局部作用域，没有变量提升，声明后可修改,不可重复声明。
    
    // const：声明后不可以修改,必须赋值。但可以修改对象里面的属性。
    const a = [1,2,3]
    const b = Object.freeze(a) //freeze:冻结，只能冻结一层，多层需要递归
    Object.isFrozen(b) //检测是否为冻结对象

### 3. 解构赋值 ###

//数组
    let [a, b, c] = [1, 2, 3] //解构顺序相同，后面的可以赋值给前面解构,顺序需要一一对应
    
    //对象
    let { 
        a,
        b
    } = { 
        a: 1,
        b: 2
    } //对象的顺序不需要一一对应
    let { 
        a: c,
        b: d
    } = { 
        a: 1,
        b: 2
    } //c,d是别名，就不会重复了。
    let { log,sin,cos} = Math;
    const { log} = console;

### 4.扩展运算符…:可以合并一维数组或者对象 ###

### 5.unicode，字符集，扩展。 ###

### 6. 模板字符串 ###

### 7. 对象简写：键名，键值一致，可以写一个。 ###

let a = 'abc' //对象属性名可以用变量表示，可以是动态的
    let obj = { 
        [a]: 1
    }

### 8.迭代。 ###

// for ... in 可枚举
    // for ... of 可迭代的，可以自定义迭代器，进行迭代

### 9. 函数扩展 ###

*  函数默认值
 *  rest剩余参数
    
        function arrPush(arr,...rest) { 
            rest.forEach(el => { 
                arr.push(el)
            });
        }
 *  箭头函数
    
        //参数只有一个，参数括号可以去掉。
        //函数体内只有一条语句，大括号可以省略，return也可以省略,返回对象不能省略
        //this指向，在执行期间确定this指向。没有arguments，不能作为生成器函数
        let b = x =>x+10
        let a = ()=>{ }
    
    ### 10.数组扩展 ###
 *  forEach,every,filter,map,reduce,forEach
    
        let a = [1,2,3];
         Array.from(a)//把类数组变为数组
         Array.of(1);//创建数组
         a.find() //返回符合项
         a.findIndex()//返回查找项下标
         a.fill()//数组填充
         a.forEach((item,index)=>{ })//参数为当前值，和下标
         a.every(v=>v>3)//返回布尔值，所有都符合条件为真，可做全选
         a.some(v=>v<3)//返回布尔值，一个为真，为真。多选一
         a.filter(v=>v<3)//返回数组，从原有数组，过滤符合条件项
         a.map(v>v+10)//返回新数组，原数组每一项，通过条件的改变。
         a.reduce((prev,current)=>prev+current,0)//累加，0为初始值，prev:上一次结果，current:当前循环项。
    
    ### 11.对象扩展 ###
    
        // Object.assign(obj1,obj2),合并对象。
        let obj1 = { a:1,b:2}
        let obj2 = { c:1,d:2}
        
        Object.is(+0,-0)//false，不仅表示一样，长得也要一样。
        
        Object.assign(obj1,obj2)//不会修改第一个参数。后面会覆盖前面，返回合并后对象，可以有多个对象，后面覆盖前面。浅拷贝的。
        fn(options){ 
            let defaults ={ 
               a:'默认1',
               b:'默认2'
               c:'默认3'
            }
            Object.assign(defaults,options) //合并对象，后者会覆盖前者的同名属性。
        }
        
        //Object.create(),创建对象，参数是给所创建的原型对象，添加内容
        
        // Object.freeze(a) //freeze:冻结，只能冻结一层，多层需要递归
        
        //Object.defineProperty //更加详细的设置一个对象的属性。
        let c={ x:1}
        Object.defineProperty({ 
         c,'x',{ //描述符，用来描述当前属性
             value：100,//等同于复赋值,默认undefined
             configurable:true,//是否可配置，默认false,不可改变，删除等。
             enumerable:true,//是否可枚举，默认false
             writable：true,//是否可写，默认false,为真，才可以被赋值改写。
         }
        });

### 12. Set ###

*  类数组，无序的，无重复的,唯一的，强类型的。

let s1 = new Set()
     s1.add('a')//添加，key,value一致，唯一的，可以链式添加
     s1.size(),//获取长度
     s1.delete('a')//删除某一项
     s1.has('a')//是否有某一项
     s1.clear()//清除所有数据
     s1.keys(),s1.values()//键值一样
     s1.entries()//返回键值对的遍历器
     //数组去重，先变为set,然后用扩展运算符转回来
     let arr = [1,22,22,333,]
     let arr1 = [...new Set(arr)]
     
     let a = new Set([1,2,3])
     let b = new Set(3,4,5)
     /*求并集*/
     let union = new Set([...a,...b]);
    /*求交集*/ 
     let intersect = new Set([...a].filter(x=>b.has(x)))
     /*求差集*/
    let difference = new Set([...a].filter(x=>!b.has(x)))

### 13. Map ###

//字典数据类型。类似与对象。键不局限于字符串。键值对  
//new weakMap 弱引用类型的map对象。

//对象作为键名，比较的是内存地址，不会相等
    let m1 = new Map();
    m1.set('a','b')//添加键值对，可以链式调用，后面覆盖前面。
    m1.get('a')//获取某个键的值。
    m1.delete('a')//删除某个键，返回布尔
    m1.has('a') //是否有某一项
    m1.clear()//清空数据。

### 14. 字符串扩展 ###

*  includes,every,repeat

### 15. Iterator接口，迭代器 ###

//创建一个指针对象，next方法，返回当前项，包含value:当前成员，done:是否遍历完成

let arr = [1,2,3]
    //手写遍历器
    function iterator(arr) {  
        let index = 0;
        return { 
            next:()=>{ 
                return index<arr.length?
                 { value:arr[index++],done:false}: 
                 { value:undefined,done:true}
            }
        }
     }
    
    // 给数据创建遍历器
    let s2 = new Set([1,2,3])
    let m2 = new Map({ 'a':1})
    
    //创建遍历器
    const its2 = s2[Symbol.iterator]()
    const itm2 = m2[Symbol.iterator]()
    
    //调用
    s2.next()
    
    // 有iterator接口，可以解构赋值，可以for...of循环

### 16. Proxy拦截代理和Reflect ###

*  Proxy 拦截代理对象或者数组等
 *  Reflect 操作对象的新api,用来拿去Object内部方法，失败false,不会报错，函数行为。

### 17. generator,生成器 ###

/** * promise的爹，async * async 必须声明在函数前面 * await 必须在声明的async函数内部使用 */
    
    // generator 函数,不是立即执行的，返回一个迭代器函数，有一个next方法。调用next才会执行
    function* fn() { 
        console.log(1)
        yield console.log(2);
        console.log(3);
    }
    
    //语法糖 就是async await
    // 错误捕获要用，try,catch;
    
    let fn = async function () { }
    let fn1 = async () => { }