JavaScript進階之道

JavaScript Python · 發表 2019-04-27 21:49:30

摘要： repo:github.com/alphardex/p… Python和JavaScript在筆者看來是很相似的語言，本文歸納了JavaScript的各種tricks，相對於之前的Python版。兩篇文章都讀完，有沒有發現它們的目錄結構是一個樣的呢XD 基本...

repo:github.com/alphardex/p…

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"]
複製程式碼