【譯】30 Seconds of ES6 （一）

項目背景簡介

30 seconds of code 是一個很是優質精選的 JavaScript 項目 ，總結了大量的使用 ES6 語法實現的代碼塊，項目的設計目標就是更簡潔，更高效，更快速的實現基礎代碼模塊，碎片化學習實用乾貨， 30 秒掌握一個高質量 ES6 代碼塊 。

30 Seconds of ES6 項目
ECMAScript 6 中文文檔 (阮一峯)
Babel工具 (ES6編譯成ES5)

學習初衷

1. 學習 ES6 基礎知識，提高程序算法能力；學習 JavaScript 基礎從 API 開始。
2. 每篇精選 5 段優秀代碼塊，和 5 個以上 API ，爲前端大全棧打下堅實根基！

學習方法

1. 認真解讀英文版 30 seconds of code 的每一個 ES6 代碼塊，並把其中的 API 重點分析。
2. 認識新單詞，提高英語水平，目標能夠輕鬆翻閱英文版專業書，全面提高前端技術軟實力。

主要內容分類

contents	模塊
Adapter	適配器
Array	數組
Browser	瀏覽器
Date	日期
Function	函數
Math	數學方法
Node	節點
Object	對象
String	字符串
Type	類型
Utility	使用函數

20190121開啓打卡第一週， ary 、 all、 allEqual、 any、 arrayToCSV .

Adapter 適配器 ary

建立一個接受最多 n 個參數的函數，忽略任何其餘參數。使用 Array.prototype.slice（0，n） 方法和 spread 擴展運算符 （…） 調用提供的函數 fn （最多 n 個參數）。

const ary = (fn , n) => (...args) => fn(...args.slice(0, n));
const firstTwoMax = ary(Math.max, 2);
console.log([[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)));//[6, 8, 10]
複製代碼

MDN 解析 Array.prototype.slice() 案例

該 slice() 方法返回一個陣列的一部分的一個淺拷貝，到選自新的數組對象 begin 到 end ( end 不包括)。原始數組不會被修改。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2,4));//['camel', 'duck']
console.log(animals);// ["ant", "bison", "camel", "duck", "elephant"]
複製代碼

MDN 解析 Math.max() 案例

該 Math.max() 函數返回零個或多個數字中的最大值。

console.log(Math.max(-10, 20)); //20
複製代碼

Array 數組 all

若是提供的謂詞函數對集合中的全部元素都返回 true ，則返回 true，不然返回 false 。使用 Array.prototype.every（） 測試集合中的全部元素是否基於 fn 返回 true 。省略第二個參數 fn ，將布爾值用做默認值。

const all = (arr, fn = Boolean) => arr.every(fn);
console.log(all);
console.log(all([4, 2, 3], x => x >1));//true
console.log(all([1, 2, 3]));//true
複製代碼

MDN 解析 Array.prototype.every() 案例

該 every() 方法測試數組中的全部元素是否都經過了由提供的函數實現的測試。對於空數組，任何狀況下調用該方法都會返回 true。

console.log([12, 5, 8, 130, 44].every(x => x >= 10));//false
console.log([12, 54, 18, 130, 44].every(x => x >=10));//true
console.log([].every(x => x));//true
複製代碼

Array 數組 allEqual

檢查數組中的全部元素是否相等。使用 Array.prototype.every（） 檢查數組中的全部元素是否與第一個元素相同。

const allEqual = arr => arr.every( val => val === arr[0]);
console.log(allEqual([1, 2, 3, 4, 5, 6]));//false
console.log(allEqual([1, 1, 1, 1]));//true
複製代碼

Array 數組 any

若是提供的謂詞函數對集合中的至少一個元素返回 true ，則返回 true ，不然返回 false 。使用 Array.prototype.some（） 測試集合中的任何元素是否基於 fn 返回 true 。省略第二個參數 fn ，將布爾值用做默認值。

const any = (arr, fn = Boolean) => arr.some(fn);
console.log(any([0, 1, 2, 0], x => x >=2));//true
console.log(any([0, 0, 1, 0]));//true
複製代碼

MDN 解析 Array.prototype.some() 案例

該 some () 方法測試數組中是否至少有一個元素經過了由提供的函數實現的測試。此方法返回 false 放在空數組上的任何條件。

console.log([2, 5, 8, 1, 4].some(x => x > 10));//false
console.log([12, 5, 8 ,1 , 4].some( x => x >10));//true
複製代碼

Array 數組 arrayToCSV

將二維數組轉換爲逗號分隔值（ csv ）字符串。使用 Array.prototype.map () 和 Array.prototype.join（delimiter） 將一維數組組合成字符串。使用 Array.prototype.join（'\n'） （ ，換行符號）兩個組合的全行到 CSV 格式的字符串，每排分撿和一個換行符。在第二 omit 參數delimiter ，使用 delimiter（默認）。

const arrayToCSV = (arr, delimiter = ',') => arr.map( v => v.map( x => `"${x}"`).join(delimiter)).join('\n');

console.log(arrayToCSV([['a', 'b'], ['c', 'd']]));
//"a","b" 
//"c","d"

console.log(arrayToCSV([['a', 'b'],['c', 'd']],';'));
//"a","b" 
//"c","d"
複製代碼

MDN 解析 Array.prototype.map() 案例

該 map() 方法建立一個新數組，其結果是在調用數組中的每一個元素上調用提供的函數。

var array1 = [1, 4, 9 ,16];
const map1 = array1.map(x => x * 2);
console.log(map1);// [2, 8, 18, 32]
console.log(array1);//[1, 4, 9, 16]
複製代碼

另外，分享個有趣的圖片，幫助更好的理解 map() .

MDN 解析 Array.prototype.join() 案例

該 join() 方法經過鏈接數組（或類數組對象）中的全部元素（由逗號或指定的分隔符字符串分隔）來建立並返回新字符串。若是數組只有一個項目，那麼將返回該項目而不使用分隔符。若是元素是 undefined 或 null ，則將其轉換爲空字符串。

var elements = ['Fire', 'Wind', 'Rain'];

console.log(console.log(elements.join('-')));//Fire-Wind-Rain
複製代碼

小結，天天堅持學習一個優質 ES6 代碼塊，由於努力，因此看到了但願，一塊兒繼續加油哦。如有幫助，請點個贊，謝謝您的支持與指教。

歷史文章：

細讀《你不知道的JavaScript·上卷》1-1 做用域是什麼