es6常見語法的應用場景以及誤區


 es6越來越多的被應用到工作當中來,然后大部分人雖然明白es6的一些語法,有時候卻不能巧妙的應用到實際工作當中來,本文將常用的es6語法做了歸納與整理。
  • 數組常用的幾個方法

  1.  forEach 常用於對數組里的所有元素做同樣的操作。無返回值。
          使用方法:[].forEach(function(item, index, array){
                           })
         forEach方法中的function回調支持3個參數,第1個是遍歷的數組內容;第2個是對應的數組索引,第3個是數組本身

         2. map   常用於對數組里所有元素做同樣操作后返回新的數組。 有返回值。

         使用方法:[].map(function(item, index, array){

                           })

          使用誤區: var a=['1', '2', '3'].map(parseInt);
                             以上代碼 輸出為[1, NaN, NaN]
        3. reduce: es5出現的一個方法。常用於數組的迭代。有返回值。
            理解:  [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
                         [x1, x2, x3, x4].reduce(f, y) =f(f(f(f(y, x1), x2), x3, x4))
            使用形式: arr.reduce(callback[, initialValue]) 
                                callback(一個在數組中每一項上調用的函數,接受四個函數:)
                                 previousValue(上一次調用回調函數時的返回值,或者初始值)
                                currentValue(當前正在處理的數組元素)
                                currentIndex(當前正在處理的數組元素下標)
                             array(調用reduce()方法的數組)
                            initialValue(可選的初始值。作為第一次調用回調函數時傳給previousValue的值)
     4. filter:過濾掉不符合條件的數組元素,返回所有符合條件的數組元素組成的新的數組。有返回值。
        使用形式:[].filter(function(){
        })
 
     5.find
  • promise 與ajax請求

          promise是異步請求的一種解決方案, 比傳統的解決方案——回調函數和事件——更合理和更強大。
          誤區:很多人會以為使用.then指定的回調函數會在異步請求成功resolved后立即調用,其實是在當前腳本所有的同步代碼都執行后才會執行。以下代碼執行結果是:
// Promise
// Hi!
// resolved
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});
 
promise.then(function() {
  console.log('resolved.');
});
 
console.log('Hi!');
   注意:resolve(param)里的參數param可以傳到.then指定的回調函數里
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  let a = 'testa';
  resolve(a);
});
promise.then(function(val) {
  console.log(val);
});
console.log('Hi!');
以上代碼的運行結果為:
Promise
Hi!
testa
 
 誤區:並不是在promise里使用了reject ,promise的結果就為rejected。有時候即使是拋出錯誤,錯誤被捕獲到了,promise狀態也是resolved
var promise = new Promise(function(resolve, reject) {
     reject(new Erro);
});
promise.catch(function(error) {
  console.log(error);
});
 
運行結果如下:
 
  • object.assign() 與設置默認值

 
 
  • 解構賦值在函數中的應用

 
  • VUEX中的es6


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM