專案背景簡介
30 seconds of code
是一個非常優質精選的 JavaScript
專案 ,總結了大量的使用 ES6
語法實現的程式碼塊,專案的設計目標就是更簡潔,更高效,更快速的實現基礎程式碼模組,碎片化學習實用乾貨, 30
秒掌握一個高質量 ES6
程式碼塊 。
30 Seconds of ES6 專案
ECMAScript 6 中文文件 (阮一峰)
Babel工具 (ES6編譯成ES5)
學習初衷
- 學習
ES6
基礎知識,提升程式演算法能力;學習JavaScript
基礎從API
開始。 - 每篇精選
5
段優秀程式碼塊,和5
個以上API
,為前端大全棧打下堅實根基!
學習方法
- 認真解讀英文版
30 seconds of code
的每個ES6
程式碼塊,並把其中的API
重點分析。 - 認識新單詞,提升英語水平,目標可以輕鬆翻閱英文版專業書,全面提升前端技術軟實力。
主要內容分類
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));
//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()
.
MDN
解析 Array.prototype.join()
案例
該 join()
方法通過連線陣列(或類陣列物件)中的所有元素(由逗號或指定的分隔符字串分隔)來建立並返回新字串。如果陣列只有一個專案,那麼將返回該專案而不使用分隔符。如果元素是 undefined
或 null
,則將其轉換為空字串。
var elements = ['Fire', 'Wind', 'Rain'];
console.log(console.log(elements.join('-')));
//Fire-Wind-Rain複製程式碼
小結,每天堅持學習一個優質 ES6
程式碼塊,因為努力,所以看到了希望,一起繼續加油哦。