1、繼承的幾種方式及優(yōu)缺點(diǎn)？

• 原型鏈繼承

function Parent () {
    this.name = 'kevin';
}

Parent.prototype.getName = function () {
    console.log(this.name);
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin

缺點(diǎn)：1.引用類型的屬性被所有實(shí)例共享
2.在創(chuàng)建 Child 的實(shí)例時(shí)，不能向Parent傳參

• 借用構(gòu)造函數(shù)(經(jīng)典繼承)

function Parent () {
    this.names = ['kevin', 'daisy'];
}

function Child () {
    Parent.call(this);
}

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]

優(yōu)點(diǎn)：1.避免了引用類型的屬性被所有實(shí)例共享
2.可以在 Child 中向 Parent 傳參
缺點(diǎn)：方法都在構(gòu)造函數(shù)中定義，每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法。

• 組合繼承

function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {

    Parent.call(this, name);
    
    this.age = age;

}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

優(yōu)點(diǎn)：融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)，是 JavaScript 中最常用的繼承模式。

• 原型式繼承

function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

就是 ES5 Object.create 的模擬實(shí)現(xiàn)，將傳入的對(duì)象作為創(chuàng)建的對(duì)象的原型。
缺點(diǎn)：包含引用類型的屬性值始終都會(huì)共享相應(yīng)的值，這點(diǎn)跟原型鏈繼承一樣。

2、HTML5新增標(biāo)簽和使用

語(yǔ)義化的好處

• 代碼結(jié)構(gòu): 使頁(yè)面沒(méi)有css的情況下，也能夠呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)
• 有利于SEO: 爬蟲(chóng)依賴標(biāo)簽來(lái)確定關(guān)鍵字的權(quán)重，因此可以和搜索引擎建立良好的溝通，幫助爬蟲(chóng)抓取更多的有效信息
• 提升用戶體驗(yàn)： 例如title、alt可以用于解釋名稱或者解釋圖片信息，以及l(fā)abel標(biāo)簽的靈活運(yùn)用。
• 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù): 語(yǔ)義化使得代碼更具有可讀性，讓其他開(kāi)發(fā)人員更加理解你的html結(jié)構(gòu)，減少差異化。
• 方便其他設(shè)備解析: 如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備等，以有意義的方式來(lái)渲染網(wǎng)頁(yè)。

布局相關(guān)的常用標(biāo)簽

<header>定義一個(gè)頁(yè)面或是區(qū)域的頭部</header>
<div>
        <section>定義一個(gè)區(qū)域</section>
        <aside>定義頁(yè)面內(nèi)容的側(cè)邊框部分</aside>
</div>
<footer>定義一個(gè)頁(yè)面或是區(qū)域的底部</footer>

3、內(nèi)存泄露

定義：應(yīng)用程序不再需要占用內(nèi)存的時(shí)候，由于某些原因，內(nèi)存沒(méi)有被操作系統(tǒng)或可用內(nèi)存池回收
常見(jiàn)內(nèi)存泄露的原因

• 意外的全局變量
• 被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)
• 脫離 DOM 的引用
• 閉包

4、ES6Object新增方法

• Object.is()
  傳入兩個(gè)要比較的值，判斷是否相同，全等的話返回true，不全等返回false。
• Object.assign()
  Object.assign()方法用于對(duì)象的合并，將源對(duì)象（ source ）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（ target ）。
  注意：這里是淺拷貝！！
  如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性！！
• Object.keys()、Object.values()、Object.entries()
  Object.keys()方法，返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（ enumerable ）屬性的鍵名數(shù)組。
  Object.values()方法返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（ enumerable ）屬性的鍵值數(shù)組。
  Object.entries()方法返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（ enumerable ）屬性的鍵值對(duì)數(shù)組。

let obj = {name:"winne",age:22};
let objKeys = Object.keys(obj);
let objValues = Object.values(obj);
let objItem = Object.entries(obj);

console.log(objKeys);   //["name","age"]
console.log(objValues); //["winne",22]
console.log(objItem);   //[["name","winne"],["age",22]]

5、ES6數(shù)組的map方法

• 應(yīng)用場(chǎng)景1
  假定有一個(gè)數(shù)值數(shù)組,將數(shù)組中的值以雙倍的形式放到另一個(gè)數(shù)組中

 var arr = [1,2,3,4,5]
        var doubleNumber = arr.map(function(num){
            return num*2
        })    
　　　　　console.log(doubleNumber) //[2,4,6,8,10]　

• 應(yīng)用場(chǎng)景2
  假定有一個(gè)對(duì)象數(shù)組，將數(shù)組中對(duì)象的某個(gè)屬性的值存儲(chǔ)到B數(shù)組中

var arr = [
            {
                name:'Jack',age:'16',sex:'男'     
            },{
                name:'Jerry',age:'18',sex:'男'    
            },{
                name:'Bailey',age:'14',sex:'女'    
            }
        ]
 var names = arr.map(function(name){
            return name.name;
        })
 console.log(names) //  ["Jack", "Jerry", "Bailey"]

6、ES6新增數(shù)組方法

• 新增數(shù)組創(chuàng)建方法
  1、Array.from
  Array.from的設(shè)計(jì)目的是快速便捷把一個(gè)類似數(shù)組的可迭代對(duì)象創(chuàng)建成一個(gè)新的數(shù)組實(shí)例。
  通俗的講，只要一個(gè)對(duì)象有l(wèi)ength，Array.from就能把它變成一個(gè)數(shù)組，返回新的數(shù)組，而不改變?cè)瓕?duì)象。

// String
Array.from('abc'); // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])); // ["abc", "def"]
// Map
Array.from(new Map([[1, 'abc'], [2, 'def']])); // [[1, 'abc'], [2, 'def']]

2、Array.of

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(3) // [3]
Array.of(3, 4, 5) // [3, 4, 5]

• 新增數(shù)組修改方法
  1、copyWithin

['a','b','c','d','e','f','g'].copyWithin(0, 3) //  ["d", "e", "f", "g", "e", "f", "g"]
['a','b','c','d','e','f','g'].copyWithin(0, 3, 4) //  ["d", "b", "c", "d", "e", "f", "g"]

2、fill
使用給定值，填充一個(gè)數(shù)組。

[1,2,3,4,5].fill('a');
// ["a", "a", "a", "a", "a"]

new Array(3).fill(12)
// [12, 12, 12]

• 新增數(shù)組查找遍歷方法
  1、find 和 findIndex
  find 返回?cái)?shù)組中第一個(gè)滿足條件的元素（如果有的話）， 如果沒(méi)有，則返回undefined。
  數(shù)組實(shí)例的 findIndex 方法的用法與 find 方法很類似，返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回 -1。
  2、includes
  方法返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值，與字符串的 includes 方法類似。
  includes 第二個(gè)參數(shù)表示搜索的起始位置：

['a','b','c','d'].includes('c',2)  //true
['a','b','c','d'].includes('c',3)  //false

3、entries、keys、values
用法類似對(duì)象

• 降維方法
  1、flat
  flat用于將嵌套的數(shù)組“拉平”。該方法返回一個(gè)新數(shù)組，對(duì)原數(shù)據(jù)沒(méi)有影響。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

2、flatMap
方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)（相當(dāng)于執(zhí)行 Array.prototype.map），然后對(duì)返回值組成的數(shù)組執(zhí)行 flat() 方法。該方法返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組。

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
// 相當(dāng)于 [[2, 4], [3, 6], [4, 8]].flat()