ES6浅记录

2018-01-18 本文已影响0人 Komolei

解构赋值
从对象或数组中提取数值，赋值于另一个变量。（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

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

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}]

class
js的class是根据原型链来模拟生成的。相当于语法糖。
不同的版本，类的写法不一样

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


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.

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（迭代器）

string
平常在使用的过程中，字符串的增删改查？增很少，通常是通过+来完成的，但是今天刚刚看见。在string的原型链上还有concat方法。多看书的好处啊
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]]等操作的实体

reflect （反射）
个人理解：JS中的反射，是为了分离obj,因为js中的对象有很多的方法。太杂乱了，分离出来，让灵魂更加纯净。
看了一些，还是这篇推荐一波Reference

ES6浅记录

猜你喜欢

热点阅读