面試官：你瞭解es6的知識嗎？

前言

你們好喲，有沒有吃青團吶？做者是豆沙黨。另外做者面試系列的第三篇文章。

這篇比較基礎，討論的是es6的新語法。

那麼咱們開始吧！

let const的命令

//變量提高
console.log(a);  // undefined
console.log(b);  // 爆炸
console.log(c);  // 爆炸
var a = 1;
let b = 2;
const c = 3;

// 全局聲明
console.log(window.a) // 1 

// 重複聲明
let b  = 200;//爆炸

複製代碼

其實這裏很容易理解，var是能夠變量提高的。而let和const是必須聲明後才能調用的。 對於let和const來講，這裏就是暫緩性死區。

這裏的知識點很好記，看以下表格就能夠了。

null	變量提高	重複聲明	全局聲明
var	yes	yes	yes
let	no	no	no
const	no	no	no

例如做者本身對這個問題的解答以下：

1. let和const都不能變量提高的，若是在變量聲明前調用會產生暫緩性死區，報錯。
2. 它們聲明後也不會綁在window（瀏覽器）和global（node）上，而var能夠。
3. 它們不能重複聲明，而且const爲常量，不能修改值。

數組

數組的話，講解幾個在工做中經常使用的方法。

let array = [1,2,3,4,5];
//map
let mapResult = array.map(num => num + 1);
console.log(array); // [ 1, 2, 3, 4, 5 ]
console.log(mapResult);// [ 2, 3, 4, 5, 6 ]

//filter
let filterResult = array.filter(num => num === 4);
console.log(array); // [ 1, 2, 3, 4, 5 ]
console.log(filterResult); // [4]

// ...
let functionResult = (...array) => console.log(arguments); // 1,2,3,4,5
複製代碼

map: map函數是循環數組每一個元素，增刪查改後，懟到一個新數組內。

filter：filter函數也是循環數組的每一個元素，後續代碼爲真的元素懟到一個新的數組內。

...: 這個很好理解，其實就拆分數組，把全部元素一個個傳進去。

就如最多見的es6去重面試題：

let newArray = Array.from(...new Set(array))
複製代碼

例如做者本身對這個問題的解答以下：

只要把一些數組方法的使用方法，傳入參數講明便可。

另外你也能夠手寫實現幾個方法，這裏就不擴展啦。

Object的新增方法

Object.assign()

這個新增的方法做用是把對象的枚舉元素都複製到第一個參數對象裏。你們通常都用來作淺拷貝。

let a = {
        url: '996'
}
let b  = {
        name: '阿珍',
        url: a
}

let c = Object.assign({}, b)
a.url = a.url + '.icu'
console.log(c) // 996.icu
複製代碼

方法第一個參數是源對象，後面的參數都是用來取元素懟到第一個對象裏的。

如代碼，c的元素url仍是指向了a.url的內存地址，我修改了a.url，它也改變了。

Object.keys() 、Object.values() 和 Object.entries()

這幾個方法看名字就知道能夠返回什麼啦，其實在es6以前，想要獲取這些元素的話都是須要本身手寫forin再拿出來的，美妙的語法糖啊。

let a = {
        work: '996',
        sick: 'icu' 
}

console.log(Object.keys(a)); //[ 'work', 'sick' ]
console.log(Object.values(a)); // [ '996', 'icu' ]
console.log(Object.entries(a)); // [ '996', 'icu' ]
複製代碼

例如做者本身對這個問題的解答以下：

1. 說一下你以爲擅長的方法，介紹它們通常均可以用來幹嗎，固然你也能夠手寫一波！
2. 最好引出assign方法，而後說一下你對淺拷貝和深拷貝的理解。

關於Object的經常使用新方法就介紹到這裏了，詳細的能夠看阮老師的es6標準入門喲。

Class

es6新增的Class其實也是語法糖，js底層其實沒有class的概念的，其實也是原型繼承的封裝。

class Fruit {
        constructor(props) {
                this.props = props;
                this.name = 'fruit';
        }
        callMyName() {
                console.log(this.name);
        }
}
class Apple extends Fruit { // extends 其實就是繼承了哪一個類
        constructor(props) {
                // super至關於 把類的原型拿過來 
                // Fruit.call(this, props)
                super(props)
        }
        callMyApple() {
                console.log('我是蘋果！')
        }
}

let a = new Apple('啊啊啊')
a.callMyName(); //fruit
a.callMyApple(); // 我是蘋果！
複製代碼

看了代碼註釋也很容易理解，就是一層對於原型繼承的封裝，不過class的寫法畢竟容易查看代碼和維護類。

例如做者本身對這個問題的解答以下：

1. 告訴面試大佬，class的一些用法，super，constructor等等。
2. 若是沒有es6的class，你該怎麼實現的。
3. 能夠擴展一下 組合繼承，寄生繼承之類的。

---

好了這篇須要講的東西已經結束了。

這是第三篇關於es6的一篇文章。

面試系列第一篇： 面試官：你知道Callback Hell（回調地獄）嗎？

面試系列第二篇： 面試官：react和vue有什麼區別嗎？

若是您有收穫或者疑問請在下方評論，求贊！謝謝觀看到這裏。