年底面試之es6總結

NeverSettle發表於2020-02-15
面試

剛從學校出來實習面的是一年崗位的面試題，答的不好 歡迎指正！
主頁還有html/css,JavaScript的面試題，隨後還有vue....持續更新
( 收集不易，看前先點贊養成好習慣~)

自從ES6釋出以來，就受到了廣大開發者的歡迎。它的新特性解決了很多實際開發中的痛點，並且使得JavaScript逐步成為一門能夠開發大型企業應用的程式語言，基於這種技術環境下，很多公司都將ES6視為開發的其中一個標準，因此在招聘人才的時候，也會對其進行ES6知識的考察。

1.var let const 區別

  • (1). var宣告的變數會掛載在window上，而let和const宣告的變數不會：

var a = 100;
console.log(a,window.a);    // 100 100

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 1;
console.log(c,window.c);    // 1 undefined
複製程式碼

(2). var宣告變數存在變數提升，let和const不存在變數提升

console.log(a); // undefined  ===>  a已宣告還沒賦值，預設得到undefined值
var a = 100;
複製程式碼
console.log(b); // 報錯：b is not defined  ===> 找不到b這個變數
let b = 10;
複製程式碼
console.log(c); // 報錯：c is not defined  ===> 找不到c這個變數
const c = 10;
複製程式碼

(3).let和const宣告形成塊作用域

if(1){
    var a = 100;
    let b = 10;
}

console.log(a); // 100
console.log(b)  // 報錯：b is not defined  ===> 找不到b這個變數
複製程式碼
if(1){

    var a = 100;
        
    const c = 1;
}
 console.log(a); // 100
 console.log(c)  // 報錯：c is not defined  ===> 找不到c這個變數
複製程式碼

(4).同一作用域下let和const不能宣告同名變數，而var可以

var a = 100;
console.log(a); // 100

var a = 10;
console.log(a); // 10
複製程式碼
let a = 100;
let a = 10;

//  控制檯報錯：Identifier 'a' has already been declared  ===> 識別符號a已經被宣告瞭。
複製程式碼

  • (5). 暫存死區

var a = 100;

if(1){
    a = 10;
    //在當前塊作用域中存在a使用let/const宣告的情況下，給a賦值10時，只會在當前作用域找變數a，
    // 而這時，還未到宣告時候，所以控制檯Error:a is not defined
    let a = 1;
}
複製程式碼

  • (6).const

1、一旦宣告必須賦值,不能使用null佔位。
*
*   2、宣告後不能再修改
*
*   3、如果宣告的是複合型別資料，可以修改其屬性
*
* */

const a = 100; 

const list = [];
list[0] = 10;
console.log(list);  // [10]

const obj = {a:100};
obj.name = 'apple';
obj.a = 10000;
console.log(obj);  // {a:10000,name:'apple'}
複製程式碼

2. 箭頭函式

（1）不需要function關鍵字來建立函式

  • es5建立函式
var aa = function() {}
複製程式碼
  • es6建立函式
var aa = () => {}
複製程式碼

(2)可以極大的簡寫函式

  • es5函式
var fn = function(a) {
  return a + 5
  }
複製程式碼
  • 可以利用箭頭函式簡寫為：
    var fn = a => a + 5;
複製程式碼
  • 簡寫規則：
    當函式所傳引數只有一個時，可以去掉();        eg: (a) => {}   簡寫為：a => {}
    當函式體中只返回值，而沒有其他操作時，可以去掉{}；eg: (a, b) => {return a+b} 簡寫為：(a, b) => a+
複製程式碼

(3）當要求動態上下文的時候，就不能夠使用箭頭函式，也就是this的固定化。

    1、在使用=>定義函式的時候，this的指向是定義時所在的物件，而不是使用時所在的物件；
    2、不能夠用作建構函式，這就是說，不能夠使用new命令，否則就會丟擲一個錯誤；
    3、不能夠使用arguments物件；
    4、不能使用yield命令；
複製程式碼

3. 陣列新增常用的4個方法

(1）map --對映

let arr=[66,59,80];
let result=arr.map(item => {
if(item >= 60){
  return "及格"
}else{
  return "不及格"
}
});
//result:["及格", "不及格", "及格"]
複製程式碼

(2) reduce --彙總

let arr = [12,69,180,8763];
let result = arr.reduce((tmp, item, index) => {
 console.log(tmp, item, index);
 return tmp + item;
 });
 console.log(result);//求和
複製程式碼

（3）filter --過濾

let arr=[
    {title: '電源線', price: 50},
    {title: '電腦', price: 13000},
    {title: '鍵盤', price: 120},
    {title: '手機', price: 9000}
];
 
let result=arr.filter(json=>json.price>=5000);
 
console.log(result);//[{title: '電腦', price: 13000},{title: '手機', price: 9000}]
複製程式碼

（4）forEach --迭代


let arr=[12,5,8,9];
 
arr.forEach((item,index)=>{
   console.log(index+': '+item); //0: 12  1: 5  2: 8  3: 9
});
複製程式碼

4. 函式的引數

（1）收集引數

function show(a, b, ...args){
  console.log(args)
}
show(1,2,3,4,5,6) //輸出[3,4,5,6]
複製程式碼

（2）展開陣列

const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1, ...arr2]); //輸出[1,2,3,4,5,6]
console.log(...arr1); //輸出1，2，3
複製程式碼

（3）預設值

const show = (a=666, b=999) => {
  console.log(a); //輸出666
  console.log(b); //輸出999
}
 
show();
複製程式碼

5. 解構賦值

(1)左右兩邊結構必須一樣；

(2)右邊必須是個合法的值；

(3)宣告和賦值不能分開(必須在一句話裡完成)；

let [a,b,c]=[1,2,3,999];
let {e,d,g}={e: 4, d: 5, f: 6, g: 7};
console.log(a,b,c,e,d,g);
//輸出1 2 3 4 5 7
複製程式碼

6. 字串

(1)多了兩個新方法: startsWith endsWith


//startsWith
 
let str='https//http://mp.blog.csdn.net/postedit/79478118';
 
if(str.startsWith('http://')){
  alert('普通網址');
}else if(str.startsWith('https://')){
  alert('加密網址');
}else if(str.startsWith('git://')){
  alert('git地址');
}else if(str.startsWith('svn://')){
  alert('svn地址');
}else{
  alert('其他');
}
複製程式碼

//endsWith
 
let str='12121.png';
 
if(str.endsWith('.txt')){
  alert('文字檔案');
}else if(str.endsWith('.jpg')){
  alert('JPG圖片');
}else{
  alert('其他');
  }
複製程式碼

(2)字串模板

優點：方便字串拼接；可以折行


let title='標題';
let content='內容';
let str='<div>\
  <h1>'+title+'</h1>\
  <p>'+content+'</p>\
</div>';
 
let str2=`<div>
  <h1>${title}</h1>
  <p>${content}</p>
</div>`;
複製程式碼

7. promise 實現原理? promise的三種狀態

promise實際上解決jquery的ajax回撥地域(解決層層巢狀),只是非同步程式設計的一種解決方案

new promise(function(resolve,reject) {
   	// 111111111
   	resolve('...')
   } ).then(function(value) {
   	console.log(value)
   }).catch(function(error){
   console.log(error)
})
複製程式碼
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
複製程式碼

三種狀態:pending（進行中）、fulfilled（已成功）和rejected（已失敗）
promise兩個特點:
（1）物件的狀態不受外界影響
(2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。

promise 缺點: 無法取消promise,如果不設定回撥函式,promise內部丟擲錯誤
第三，當處於pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

8.對es6的瞭解

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

寫在最後

暫時總結這麼多還會持續更新~
收集不易如果覺得對您有用就動動手點個贊個關注支援一下吧
收藏總有用武之地,謝謝~

相關文章