ES6浅记录

  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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 强大的for-of循环 ES6不会破坏你已经写好的JS代码。目前看来,成千上万的Web网站依赖for-in循环,其...
    Awe阅读 7,508评论 2 7
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 6,534评论 3 22
  • 那一段时间,网上疯传的一段话,他说他结婚了,说是因为家里人的催促,她说她结婚了,因为说他有房有车,她说她结婚了,说...
    Faintstarlight阅读 209评论 0 0
  • 今日关键词:【秘密】 自2016年9月中旬以来的4个多月的时间里,周围的朋友都感受到了我的快速成长,甚至有很多朋友...
    罗艺律师阅读 1,421评论 3 46
  • 添了三天的胡萝卜泥,今天开始加西兰花。没有出现过敏现象。这两天来最关心的是她的便便,次数、颜色和性状啦。吃了胡萝卜...
    layilayo阅读 208评论 0 0