《深刻理解ES6》中的代码片断，你能猜对几个？

花了3个周末看完了《深刻理解ES6》，其中有许多代码段以及文字描述和我“常识”有些出入，所以记录了下来并加以验证。

有些代码段仍是蛮有趣的，在此分享下。正在阅读屏幕的你，能“猜”对几个代码片断呢？

每一个代码片断均有编号，格式为为try-xxx-yyy或note-xxx-yyy，其中xxx表明书中的页码，yyy是笔者随意加的名称

 

笔者已经将全部代码片断上传到GitHub中，有兴趣的小伙伴能够戳这里→ pea3nut/read-unes6-demo

代码片断

try-82-keys

最后一个console.log语句要格外注意，笔者错的很离谱

var obj ={
    a:1,
    b:2,
};
Object.setPrototypeOf(obj,{
    c:3,
});

console.log(Object.keys(obj));
console.log(JSON.stringify(obj));

var keys1 =[];
for(let key in obj)keys1.push(key);
console.log(keys1);

var keys2 =[];
for(let key in Object.assign({},obj))keys2.push(key);
console.log(keys2);复制代码

try-87-super

代码略长，主要思想是：this是“墙头草”能够随意被改变，那么super呢？是否是和this同样是“墙头草”呢？

答案是：███████████████请用小刀刮开

class A{
    say(){
        console.log('It\'s A#say.');
    };
};
class B extends A{
    say(){
        console.log('It\'s B#say.');
    };
    run(){
        this.say();
        super.say();
    };
};

var b =new B;
b.run.call({
    say(){
        console.log('call');
    }
});


console.log('===');


var obj ={
    say(){
        console.log('It\'s obj.say.');
    },
    run(){
        this.say();
        super.say();
    }
};

Object.setPrototypeOf(obj,{
    say(){
        console.log('It\'s proto.say.');
    },
});

obj.run();复制代码

try-99-destructuring

这是书上的一个错误，笔者已经提交了勘误

var {a=1,b=2} ={b:undefined};
console.log(a,b);

var [c=3,d=4] =[,undefined];
console.log(c,d);复制代码

try-112-symbol-tox

代码虽少，可是却很是很是很是难，能答对的应该是很厉害了。。。

友情提示：console.log不必定是会输出什么，throw个错误也说不定哦~~

var smb =Symbol('hello');

console.log(smb);
console.log(''+smb);
console.log(1+smb);
console.log(String(smb));复制代码

try-154-generator-symbol

为了能验证出有效结果，这个片断写的很露骨，你们就当是在看“你知道吗？披萨其实一直是从里往外吃的！”这样的冷知识看看就好

var gen =function*(){
    yield 1;
    yield 2;
};


console.log(gen()[Symbol.iterator] ===gen());
console.log(gen()[Symbol.iterator]()[Symbol.iterator] ===gen()[Symbol.iterator]);

console.log('===');
console.log(...gen());
console.log(...gen()[Symbol.iterator]());
console.log(...gen()[Symbol.iterator]()[Symbol.iterator]());

console.log(Object.getOwnPropertyNames(gen().__proto__.__proto__));复制代码

try-185-class-name

这算是一个很实用而且你们都在用的知识了，只是不少人可能并无意识到。。。

这题必须答出为何才算对哦~~

class A{
    say(){
        console.log(A);
    };
};

var B =A;
A =null;

var a =new B();
a.say();复制代码

try-187-class-name-2

这个代码在不一样环境表现不一致，笔者也不知道为何，如有了解ES6规范的dalao请科普下

var A =class{};
var B =function(){};

console.log(A.name);
console.log(B.name);复制代码

try-198-class-extent-super.js

extends却不调用super，会报错吗？不会报错吗？将代码复制进WebStorm中有惊喜~~

这个片断也须要说出为何才算答对

class A{};
class B extends A{
    constructor(){
        return {};
    };
};

console.log(new B);复制代码

try-310-class-prototype

本文的初衷只是分享笔记和知识，而不是卖关子哗众取宠，所以下面的片断在注释中已经该出了部分答案

class A{};
A.prototype ={b:2};//严格模式会报错
A.prototype.c =3;

var a =new A();

console.log(a.b);
console.log(a.c);复制代码

try-332-number-safe

这个片断引伸出了一个颇有趣的问题，那就是

num === num+1
请问在什么条件下上面的表达式会返回true？

答案是2个：

• IEEE 754存储的整数开始重用二进制时
• 大浮点数

var num1 =Math.pow(2,53);
var num2 =Math.pow(2,53)+1;


console.log(num1);
console.log(num2);

console.log(num1 ===num2);
console.log(Math.pow(2,53) ===Math.pow(2,53)+1);
console.log(num1+1 ===num1);

console.log('===');

console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.isSafeInteger(num1));
console.log(Number.isSafeInteger(num1-1));
console.log(Number.isSafeInteger(Math.pow(2,53)));复制代码

tyr-120-toPrimitive

此片断能够完美解释try-112-symbol-tox片断

var obj =Object.create(null);
obj[Symbol.toPrimitive] =function(hint){
    console.log(hint);
    return '';
};

console.log(String(obj));
console.log(obj+'');
console.log(+obj);复制代码

note-216-array-from

这是个至关不错的面试题，大概

（但愿我一朝一日能够拿去面试别人）

var arrayLike ={
    0:'a',
    1:'b',
    length:2,
    *[Symbol.iterator](){
        yield this[1];
        yield this[0];
    },
};

console.log(Array.from(arrayLike));复制代码

note-259-promise-all

和上面的片断有殊途同归之妙

try{
    let arrayLike ={
        0:Promise.resolve('233'),
        length:1,
    };
    Promise.all(arrayLike);
}catch(e){
    console.log('error');
};


var promises =[
    new Promise(function(resolve){
        setTimeout(function(){
            resolve(1)
        },90);
    }),
    new Promise(function(resolve){
        setTimeout(function(){
            resolve(2)
        },10);
    }),
    new Promise(function(resolve){
        setTimeout(function(){
            resolve(3)
        },50);
    }),
];

Promise.all(promises).then(console.log)复制代码

对ES5很是很是很是熟悉的同窗应该了解下面的片断 —— Object.create(null)是个至关风骚的用法

var obj =Object.create(null);

console.log(obj+'');
console.log(String(obj));
console.log(Number(obj));
console.log(obj.__proto__ ===Object.prototype);复制代码

结束

代码片断就差很少到这里，在GitHub的源代码中，还有一些笔者认为“没有必要放上来”的片断，若你有些在乎，或者想拿下来跑一跑，欢迎来Star：pea3nut/read-unes6-demo

若你对于文章内容或代码有异议，可在上方的GitHub连接中发送issue