《深入理解ES6》中的程式碼片段，你能猜對幾個？

花生PeA發表於2017-08-12

花了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

相關文章