JavaScript進階之道
Python和JavaScript在筆者看來是很相似的語言,本文歸納了JavaScript的各種tricks,相對於之前的Python版。
兩篇文章都讀完,有沒有發現它們的目錄結構是一個樣的呢XD
基本
模板字串
let name = 'alphardex' `Ore wa ${name} desu, ${4 * 6} sai, gakusei desu.` // "Ore wadesu, 24 sai, gakusei desu." 複製程式碼
三元運算子
// if(condition){ //fuck // } else { //shit // } (condition)? fuck: shit 複製程式碼
字串的拼接,反轉與分割
let letters = ['h', 'e', 'l', 'l', 'o'] letters.join('') // "hello" letters.reverse() // ["o", "l", "l", "e", "h"] let name = 'nameless god' name.split(' ') // ['nameless', 'god'] 複製程式碼
判斷元素的存在性
'fuck you'.includes('fuck') // true ['bitch', 'whore'].includes('slut') // false 'company' in {'title': 'SAO III', 'company': 'A1 Pictures'} // true 複製程式碼
函式
箭頭函式
函式的簡化寫法,配合map、filter、sort等實現函數語言程式設計
// function foo(parameters){ //return expression // } let foo = (parameters) => expression 複製程式碼
map - 對映
let numbers = [1, 2, 3, 4, 5]; numbers.map(e=>e ** 2) // [1, 4, 9, 16, 25] 複製程式碼
filter - 過濾
let values = [null, undefined, NaN, 0, '', true, 'alphardex', 666] values.filter(e=>e) // [true, "alphardex", 666] 複製程式碼
sort - 排序
let numbers = [4, 2, 5, 1, 3]; numbers.sort((a, b)=>b-a) // [5, 4, 3, 2, 1] 複製程式碼
其他騷操作
求1到100的和
[...Array(101).keys()].reduce((a, b)=>a+b) // 5050 // 或者用lodash實現,寫法簡直跟Python一模一樣 // _.sum(_.range(101)) 複製程式碼
扁平化陣列
const flatten = (arr, depth=1) => arr.reduce((a, v)=>a.concat(depth>1 && Array.isArray(v)?flatten(v, depth-1):v), []) let arr = [1, [2, 3, ['a', 'b', 4], 5], 6] flatten(arr, 2) // [1, 2, 3, "a", "b", 4, 5, 6] // 或者用ES10新增的flat // arr.flat(2) 複製程式碼
擴充套件運算子
資料結構的合併
let arr1 = ['a', 'b'] let arr2 = [1, 2] [...arr1, ...arr2] // ['a', 'b', 1, 2] let obj1 = {'name': 'alphardex'} let obj2 = {'age': 24} {...obj1, ...obj2} // {name: 'alphardex', age: 24} 複製程式碼
函式引數的打包
let foo = (...args) => console.log(args) foo(1, 2) // [1, 2] 複製程式碼
資料結構
陣列
推導式
由於推導式暫時不在標準規範內,因此用高階函式配合箭頭函式代替
let even = [...Array(10).keys()].filter(e=>e%2!==1) even // [0, 2, 4, 6, 8] 複製程式碼
同時迭代元素與其索引
相當於Python的enumerate
let li = ['a', 'b', 'c'] li.map((e, i)=>`${i+1}. ${e}`) // ["1. a", "2. b", "3. c"] 複製程式碼
元素的追加與連線
push在末尾追加元素,concat在末尾連線元素
let li = [1, 2, 3] li.push([4, 5]) li // [1, 2, 3, [4, 5]] li.concat([4, 5]) li // [1, 2, 3, [4, 5], 4, 5] 複製程式碼
測試是否整體/部分滿足條件
every測試所有元素是否都滿足於某條件,some則是測試部分元素是否滿足於某條件
[1, 2, 3, 4, 5].every(e=>e<20) // true [1, 3, 4, 5].some(e=>e%2===0) // true 複製程式碼
同時迭代2個以上的陣列
相當於Python的zip
let subjects = ['nino', 'miku', 'itsuki'] let predicates = ['saikou', 'ore no yome', 'is sky'] subjects.map((e,i)=>`${e} ${predicates[i]}`) // ["nino saikou", "miku ore no yome", "itsuki is sky"] 複製程式碼
去重
利用集合的互異性,同時此法還保留了原先的順序
let li = [3, 1, 2, 1, 3, 4, 5, 6] [...new Set(li)] // [3, 1, 2, 4, 5, 6] 複製程式碼
解構賦值
最典型的例子就是2數交換
let [a, b] = [b, a] 複製程式碼
用rest運算子可以獲取剩餘的元素
let [first, ...rest] = [1, 2, 3, 4] first // 1 rest // [2, 3, 4] 複製程式碼
物件
遍歷
let obj = {name: "alphardex", age: 24} Object.keys(obj) // ["name", "age"] Object.values(obj) // ["alphardex", 24] Object.entries(obj).map(([key, value])=>`${key}: ${value}`) // ["name: alphardex", "age: 24"] 複製程式碼
排序
let data = [{'rank': 2, 'author': 'beta'}, {'rank': 1, 'author': 'alpha'}] data.sort((a, b)=>a.rank - b.rank) // [{'rank': 1, 'author': 'alpha'}, {'rank': 2, 'author': 'beta'}] 複製程式碼
反轉
let obj = {name: 'alphardex', age: 24} Object.fromEntries(Object.entries(obj).map(([key, value])=>[value, key])) // {24: "age", alphardex: "name"} // 或者用lodash實現 // _.invert(obj) 複製程式碼
缺失鍵處理
如果鍵不在字典中,返回一個預設值,類似Python的dict.get
let obj = {name: "alphardex", age: 24} obj.sex || 'male' // male 複製程式碼
如果鍵不在字典中,將會新增它並設定一個預設值,類似Python的dict.setdefault
let obj = {name: "alphardex", age: 24} obj.sex = obj.sex || 'male' // "male" obj // {name: "alphardex", age: 24, sex: "male"} 複製程式碼
分組
在Python中可以利用defaultdict(list)對資料進行分組
在JS中可以用Proxy來實現defaultdict
class DefaultDict { constructor(defaultFactory) { return new Proxy({}, { get: (target, name) => name in target ? target[name] : (target[name] = typeof defaultFactory === 'function' ? new defaultFactory().valueOf() : defaultFactory) }) } } let people = [['alphardex', 'male'], ['koizumi moeka', 'female'], ['alphardesu', 'male'], ['satou hinata', 'female']] let genderGroup = new DefaultDict(Array) people.map(([name, gender])=>{genderGroup[gender].push(name)}) genderGroup.male // ["alphardex", "alphardesu"] genderGroup.female // ["koizumi moeka", "satou hinata"] 複製程式碼