【譯】30 Seconds of ES6 (一)

墨言妹發表於2019-01-21
【譯】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() 方法返回一個陣列的一部分的一個淺拷貝,到選自新的陣列物件 beginend ( 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));
//trueconsole.log(all([1, 2, 3]));
//true複製程式碼

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

every() 方法測試陣列中的所有元素是否都通過了由提供的函式實現的測試。對於空陣列,任何情況下呼叫該方法都會返回 true

console.log([12, 5, 8, 130, 44].every(x =>
x >
= 10));
//falseconsole.log([12, 54, 18, 130, 44].every(x =>
x >
=10));
//trueconsole.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]));
//falseconsole.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));
//trueconsole.log(any([0, 0, 1, 0]));
//true複製程式碼

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

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

console.log([2, 5, 8, 1, 4].some(x =>
x >
10));
//falseconsole.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() .

【譯】30 Seconds of ES6 (一)

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

join() 方法通過連線陣列(或類陣列物件)中的所有元素(由逗號或指定的分隔符字串分隔)來建立並返回新字串。如果陣列只有一個專案,那麼將返回該專案而不使用分隔符。如果元素是 undefinednull ,則將其轉換為空字串。

var elements = ['Fire', 'Wind', 'Rain'];
console.log(console.log(elements.join('-')));
//Fire-Wind-Rain複製程式碼

小結,每天堅持學習一個優質 ES6 程式碼塊,因為努力,所以看到了希望,一起繼續加油哦。

來源:https://juejin.im/post/5c458913e51d4542253fee3a

相關文章