美文网首页
ES6浅记录

ES6浅记录

作者: Komolei | 来源:发表于2018-01-18 16:52 被阅读0次
    1. 解构赋值
      从对象或数组中提取数值,赋值于另一个变量。(Destructuring);
    // use with object
    function say({name='komolei',age=24,sex='male'}){
      console.log('arguments',name,age,sex)}
    say() // error // 应该改为say({}) // arguments komolei 24 male
    say({age:22}) // arguments komolei 22 male
    // use with Map or Set
    const m = new Map();
    m.set('one',{name:'komolei'});
    m.set('seconde','dd');
    for (let [,value] of m) {
      console.log(`value`,value)} // {name:'komolei'} dd
    // 这个也不错
    function people(){    
        return {name:'clc',age:22}}
    let {name,age}=people();
    name // clc
    age //22
    
    1. symbol //标识
    • 新增的原始类型:
    // 1997年前的js原始类型:
    // null ,undefined,string,boolean,number,object
    // 现在增加一个新的原始类型
    // symbol 充当标示符
    还有就是
    const a=Symbol('a') 
    // 不能直接使用到模板字符串中,如
    console.log(`xixi ${a}`) // error
    // 可以通过Sting(a)或a.toString() 进行covert
    // 生成方法:
    1. Symbol() 2.Symbol.for() // 注册表使用,理解为大范围使用同一个symbol的时候。其是为共享的 3. Symbol.iterator
    
    1. set and map 没有则返回undefined ,都有的方法:keys(),values(),entries(),forEach()
      哈希表(hash table):是一种以key存储在内存中的数据结构。是根据key来直接访问在内存存储位置的数据结构。
    • set: 类似array ,set,add(),delete(),clear(),has()
    数组去重:Array.from() //将其变成数组
    new Set() //利用set没有重复的值的属性
    综上:let a=new Set(Array.from([3,4,5,5]));//a:[3,4,5] 
    //注意;这个变成了Set construct。so should do this:
    let aa=Array.from(new Set([3,3,4,4,5])); //aa:[3,4,5]
    
    • map:类似object ,size,get(),set(),delete(),clear(),has()
    const m=new Map() //better key-value way
    m.set(name,'komolei')
    m.get(name) //komolei
    2. support chain invoked
    m.set('age',22).set('sex','female')
    3. for...of --> keys(),values(),entries(),forEach()
    const map=new Map([[{name:'komolei'}],{age:22},22]); // map是个对象。所以定义出差,
    改为
    const map=new  Map([[{name:'komolei'}],{age:22},{xx:22}])
    let a=map.keys(); // name,age,22
    let b=map.values(); // komolei,22,
    let c=map.entries(); //[name:'komolei'],{age:22},22  //上面error
    改为 
    const map=new Map([['p',{name:'komolei'}],[{age:22},{xx:2222}]]);
    let a=map.keys() //'p',undefined //error // 应该返回'p',{age:22}
    let b=map.values() // {name:'komolei'},{age:22},{xx:2222} //应该返回 {name:'komolei'},{xx:2222}
    3. 跟array的相互转化
    let a1=[...a] // [p,{age:22}]
    
    1. class
      js的class是根据原型链来模拟生成的。相当于语法糖。
      不同的版本,类的写法不一样
    • es5
    function People(name, age) {
        this.name = !name ? 'clc' : name;
        this.age = !age ? 24 : age;
        // function sayName() {
        //     return this.name;
        // }
        // function getAge(){
        //     return this.age;
        // }
        this.sayName();
    }
    People.prototype = { sayName: function () { return this.name }, getAge: function () { return this.age } }
    const c = new People('komolei');
    // 好吧。忘记es5的继承是怎么写的。复习一下
    function Person(sex) {
        this.sex=sex;
        People.call(this)
    }
    Person.prototype = new People();
    Person.prototype = People.prototype;
    
    

    reference

    • es6
    
    class People {
        constructor(name, age) {
            this.name = name;
            this.age = age;
            this.value = null;
        }
        sayName() {
            return this.name;
        };
        getAge() {
            return this.age;
        }
        set(value) {
            return this.value = value;
        }
        // static // 静态方法。是类所拥有的,并不会被实例对象所使用。
        // new 出来的对象,并不能调用static开头的方法
        static get() {
            return this.name.split('').join('!');
        }
    }
    const p = new People('komolei', 24);
    console.log(p.sayName());
    console.log(People.get());
    // 添加私有属性
    // 现在只能添加
    People.sex={}; 
    // 继承 
    class Person extends People {
        constructor(name, age, sex) {
            super(name, age);
            this.sex = sex;
        }
        getSex() {
            return this.sex;
        }
    }
    const per=new Person('clc',24,'male');
    console.log('person',per.sayName()); //这个sayName()是被继承而来的,来自于People.
    
    1. generators(生成器)
    // 普通函数以function开头,而generators以function*开头
    // 普通函数开始运行时,不能停止,最后会return一个值,而generators以yield作为return的替换,同时运行可以暂停。使用next,进入下一个yield。
    function* say(name){
        yield 'hello generator'
        yield 'yes'
        if(name.length>0){yield 'good'}
        yield 'say you' }
    const s = say('dd');  //初始化 //状态为 suspended
    s.next() // hello generator
    s.next() // yes
    s.next() // 进入判断,得到 good
    s.next() // say you
    s.next() // undefined // 状态为closed
    // 可以解决异步回调地狱 // 跟async和await一样吧。在使用过程中,generators还是用的少。
    // 同时generators的本质还是iteration(迭代器)
    
    1. string
      平常在使用的过程中,字符串的增删改查?增很少,通常是通过+来完成的,但是今天刚刚看见。在string的原型链上还有concat方法。多看书的好处啊
    2. Proxy(代理)
    • 什么是对象?
      一堆键值对的聚合。?一堆属性的集合?
      当我经常在使用Js的对象的时候,却忘记对象是什么?Mdn说对象,一系列的属性的聚合,一个属性包含一个名和一个对应的值,其中当对应的值是函数的时候,这个属性叫做方法,而不是这个函数叫做方法。不过貌似自己经常叫函数为方法。
    • Js
      对于Js而言。在初始化对象的时候,在其的内部包含着东西,想想原型链那样。就像我们身上的灵魂一样,看不见,但是组成了我们。
      现在通过proxy就能改变内部方法,多么美妙,就跟灵魂的改造一样。曾经触碰不到的宇宙的奥妙,现在通过一扇门向我们敞开。
    • example
    let target={},handler={};
    const proxy = new Proxy(target, handler);
    proxy.color='red'; //这个时候 target为{ color:'red'};
    // 多么奇怪,我们没有给target进行添加属性,但是它就在了。
    // 解析:一般我们对于一个对象进行这样的操作的时候:
    let obj={}; obj.name='komolei' //其实obj.name这个operation 是在调用obj中的[[set]]方法
    
    • proxy :将代理的内部所有方法转发到target中去
    // 上面的例子中 proxy.color='red' 
    实际上是proxy.[[set]]()调用了target.[[set]](),就像灵魂的交流一样。
    但是有时候,你会发现目标对象不会接收proxy的信息,就像吵架的人一样,一方不听一方说辞一样。
    即:target可以设置对象,让proxy无法转发信息到其内部。
    
    • 句柄对象:记得上面说过js的最内部的方法有14种,现在通过句柄对象的方法可以重写这些方法。
    let target={},handler={set:function(target,value){
        throw new Error('prohibit set') };
    let proxy=new Proxy(target,handler);
    proxy.color = 'red'; // prohibit set 
    // 现在我们无法对对象进行set operation了,这就像人生气,没有都不会听进去一样。
    
    • 对象是在js中拥有[[get]],[[set]]等操作的实体
    1. reflect (反射)
      个人理解:JS中的反射,是为了分离obj,因为js中的对象有很多的方法。太杂乱了,分离出来,让灵魂更加纯净。
      看了一些,还是这篇推荐一波Reference

    相关文章

      网友评论

          本文标题:ES6浅记录

          本文链接:https://www.haomeiwen.com/subject/bvbfnxtx.html