ES6 新特性（一部分）

Betsy_迪發表於2018-12-26

ES6的新特性

  • ES6簡介：ES6是新一代的JS語言標準，對分JS語言核心內容做了升級優化，規範了JS使用標準，新增了JS原生方法，使得JS使用更加規範，更加優雅，更適合大型應用的開發。學習ES6是成為專業前端正規軍的必經之路。不學習ES6也可以寫程式碼打鬼子，但是最多隻能當個游擊隊長

1、 let 和 const

  • var是傳統的函式的作用域 ，存在變數提升，即在變數宣告之前使用的就是undefined
  • let是不存在變數提升的，但是有塊級作用域,暫時性死區
  • const與let類似，但是他定義的變數是不可以修改的
  • 在我們開發的時候，可能認為應該預設使用 let 而不是 var，這種情況下，對於需要防寫的變數要使用 const。 然而另一種做法日益普及：預設使用 const，只有當確實需要改變變數的值的時候才使用 let。這是因為大部分的變數的值在初始化後不應再改變，而預料之外的變數的修改是很多 bug 的源頭。
 var 的情況
 
console.log(foo); // 輸出undefined
var foo = 2;

 let 的情況
console.log(bar); // 報錯ReferenceError

let bar = 2;
複製程式碼

塊級作用域

  • 內層作用域和外層作用域不會互相影響
{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};
複製程式碼

ES6對於操作字串和陣列上增加了一些方法

陣列方法

  • 1、陣列的includes方法

    • [1, 2, 3].includes(4)// false

    • [1, 2, NaN].includes(NaN) // true

    • [1, 2, 3].includes(2)// true

  • 2、陣列的解構賦值 let [a,b,c]=[1,2,3]

  • 3、陣列的去重傳統方式vsES6的新方法

varary =[12,24,26,12,24,15,32,15,24];
                      varary1 =[];
                      for(vari=0;i<ary.length;i++){
                          if(ary1.indexOf(ary[i])===-1){
                              ary1.push(ary[i])
                          }
                      }
                      console.log(ary1);
                      
        
            ES6：Array.from(new Set(arr))    （返回的就是去重之後的）                  
複製程式碼
  • 4、陣列的filter find方法

filter:用來過濾陣列（比較常用）

find：也是過濾陣列的，但是與filter不同，他返回的過濾出來的第一項，不是陣列，而filter是陣列

const list = [{'name':'1',index:1},{'name':'2'},{'name':'1'}]
let list2 = list.find(i=>i.name==='1')
let list3 = list.filter(i=>i.name==='1')

console.log(list);//[ { name: '1', index: 1 }, { name: '2' }, { name: '1' } ]
console.log(list2)//{ name: '1', index: 1 }
console.log(list3)//[ { name: '1', index: 1 }, { name: '1' } ]
複製程式碼
  • 5、some every方法

const arr = [1, 2, 3, 4]
arr.every(d => d > 2)
<!--false 每一項都滿足條件則返回 true-->

arr.some(d => d > 2) 
<!--true 只要有一項滿足條件則返回 true-->

複製程式碼

字串方法

  • 模板字串

我們拼字串的時候可以使用模版字串，用處：拼url給後臺傳引數的時候


const foo = 'this is a' + example

可以優化寫法：

const foo = `this is a ${example}`
複製程式碼
  • includes()方法 startsWith()方法 endsWidth()方法
let s = 'Hello world!';
s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true
複製程式碼

解構賦值

 <!--首先有這麼一個物件-->

const  props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

<!--當我們想要取得其中的2個值：loading與clicked時：-->

<!--es5-->

var loading = props.loading;
var clicked = props.clicked;

<!--es6-->
const { loading, clicked } = props;
複製程式碼

箭頭函式（ES6升級重點核心）。箭頭函式是ES6核心的升級項之一，箭頭函式裡沒有自己的this,這改變了以往JS函式中最讓人難以理解的this執行機制。

主要優化點:

  • 1、箭頭函式內的this指向的是函式定義時所在的物件，而不是函式執行時所在的物件。ES5函式裡的this總是指向函式執行時所在的物件，這使得在很多情況下this的指向變得很難理解，尤其是非嚴格模式情況下，this有時候會指向全域性物件，這甚至也可以歸結為語言層面的bug之一。ES6的箭頭函式優化了這一點，它的內部沒有自己的this,這也就導致了this總是指向上一層的this，如果上一層還是箭頭函式，則繼續向上指，直到指向到有自己this的函式為止，並作為自己的this。
  • 2、 箭頭函式不能用作建構函式，因為它沒有自己的this，無法例項化。
  • 3、也是因為箭頭函式沒有自己的this,所以箭頭函式 內也不存在arguments物件。（可以用擴充套件運算子代替）
  • 4、 函式預設賦值。ES6之前，函式的形參是無法給預設值得，只能在函式內部通過變通方法實現。ES6以更簡潔更明確的方式進行函式預設賦值。

import 和export

  • import引入的模組是靜態載入（編譯階段載入）而不是動態載入（執行時載入）。

  • import引入export匯出的介面值是動態繫結關係，即通過該介面，可以取到模組內部實時的值。

Promise 非同步操作

Promise 的then方法：


p.then(function (value) {
     <!--完成態，value是上面resolve傳入的值-->
}, 
function (error) {
    <!--失敗態，error是上面reject傳入的值-->
});
then()方法傳遞的兩個引數中:


<!--第一個引數（函式）對應著完成態的操作，也就是resolve時呼叫-->


<!--第二個引數（函式）對應著失敗態的操作，也就是reject時呼叫,第二個引數可以沒有-->

複製程式碼

錯誤處理：

var p = new Promise(function (resolve, reject) {
    // ...
    if(/* 非同步操作成功 */){
        resolve(ret);
    } else {
        reject(error);
    }
});

p.then(function (value) {
    // 完成態
}, function (error) {
    // 失敗態
});


複製程式碼

Promise的常見應用

  • 使用Promise封裝一個ajax請求：

function getURL(url){
    return new Promise(function(resolve,reject){
        var req=new XMLHttpRequest();
        req.open('GET',url,true);
        req.onload=function(){
            if (req.status==200) {
                resolve(req.responseText);
            }else{
                reject(new Error(req.statusText))
            }
        };
        req.onerror=function(){
            reject(new Error(req.statusText));
        };
        res.send();
    })
}
複製程式碼
  • 非同步載入圖片
let preloadImage=(path)=>{
    return  new  Promise(function(resolve,reject){
        let img=new Image();
        img.onload=resolve;
        img.onerror=reject;
        img.src=path;
    })
}
複製程式碼

Promise.all()

  • Promise.all()方法用於將多個Promise例項，包裝成一個新的Promise例項，例如：
 var p = Promise.all([p1, p2, p3])

複製程式碼

新的Promise例項p的狀態由p1, p2, p3決定：

當p1, p2, p3的狀態都為完成態時，p為完成態。

p1, p2, p3中任一一個狀態為失敗態，則p為失敗態。

例子：

let a = new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve(2) 
    }, 2000) 
  }) 

let b = new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve(3) 
    }, 2000) 
  }) 

Promise.all([a, b])
.then( (ret) => console.log(ret)) //2秒後，注意這裡返回的是陣列 [2,3]
.catch( err => console.log(err.toString()));

複製程式碼

async await ：實際上是generator的語法糖，主要用來解決非同步問題的

async function test() {
  const data = await axios.get('https://randomuser.me/api/')
  console.log(data)
}
// 等同於
function test() {
  axios.get('https://randomuser.me/api/').then(res => console.log(res)) // axios 也是 promise 物件
}

// 結合try/catch 
async function test() {
  try {
    const data = await axios.get('https://randomuser.me/api/')
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

複製程式碼

參考網站：

相關文章