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

前言

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

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

那麼我們開始吧！

let const的命令

//變數提升
console.log(a);// 1
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來說，這裡就是暫緩性死區。

這裡的知識點很好記，看如下表格就可以了。

例如作者自己對這個問題的解答如下：

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函式也是迴圈陣列的每個元素，後續程式碼為真的元素懟到一個新的陣列內。

...: 這個很好理解，其實就拆分陣列，把所有元素一個個傳進去。

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的寫法畢竟容易檢視程式碼和維護類。