JavaScript進階之道

repo: github.com/alphardex/p…

Python和JavaScript在筆者看來是很類似的語言，本文概括了JavaScript的各類tricks，相對於以前的Python版。

兩篇文章都讀完，有沒有發現它們的目錄結構是一個樣的呢XD

基本

模板字符串

let name = 'alphardex'
`Ore wa ${name} desu, ${4 * 6} sai, gakusei desu.`
// "Ore wa desu, 24 sai, gakusei desu."
複製代碼

三元運算符

// if(condition){
// fuck
// } else {
// shit
// }
(condition)? fuck: shit
複製代碼

字符串的拼接，反轉與分割

let letters = ['咚', '噠', '呦', '!']
letters.join('')
// "咚噠呦!"
letters.reverse()
// ["!", "呦", "噠", "咚"]
let name = 'fujiwara chika'
name.split(' ')
// ["fujiwara", "chika"]
複製代碼

判斷元素的存在性

'fuck you'.includes('fuck')
// true
['bitch', 'whore'].includes('slut')
// false
'company' in {'title': 'Kaguya-sama: love is war', '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)=>a-b) // 升序
// [1, 2, 3, 4, 5]
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 = ['kaguya', 'miyuki']
let arr2 = ['chika', 'ishigami']
[...arr1, ...arr2]
// ['kaguya', 'miyuki', 'chika', 'ishigami']
let obj1 = {'name': 'rimuru'}
let obj2 = {'kind': 'slime'}
{...obj1, ...obj2}
// {name: 'rimuru', kind: 'slime'}
複製代碼

函數參數的打包與解包

// 打包
let foo = (...args) => console.log(args)
foo(1, 2)
// [1, 2]
// JS只能打包位置參數，沒法正確地打包關鍵詞參數
// foo(name='hayasaka', job='maid')
// ["hayasaka", "maid"] (keyword沒了)

// 解包
let divmod = (a, b) => [Math.floor(a/b), a % b]
let t = [10, 3]
let [quotient, remainder] = divmod(...t)
quotient
// 商：3
remainder
// 餘：1
複製代碼

生成器

只要函數中包含yield關鍵詞，這函數就是一個生成器函數

調用生成器函數時，會返回一個生成器對象

正如yield自己的意思（產出），對生成器對象調用next()會使其不斷產出值，直到無值才終止遍歷，done屬性變爲true

function* genHello() {
    yield 'hello'
    yield 'world'
}

g = genHello()
// genHello {<suspended>}
g.next()
// {value: "hello", done: false}
g.next()
// {value: "world", done: false}
g.next()
// {value: undefined, done: true}
複製代碼

若是生成器函數須要產出另外一個生成器生成的值，就要用到yield*

function* chain(...iterables){
    for(let it of iterables){
        yield* it
    }
}

let s = 'ABC'
let t = [...Array(3).keys()]
[...chain(s, t)]
// ["A", "B", "C", 0, 1, 2]
複製代碼

數據結構

數組

同時迭代元素與其索引

至關於Python的enumerate

let li = ['umaru', 'ebina', 'tachibana']
li.map((e, i)=>`${i+1}. ${e}`)
// ['1. umaru', '2. ebina', '3. tachibana']
複製代碼

元素的追加與鏈接

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': 'sekiro', 'hobby': 'blacksmithing', 'tendency': 'death'}
Object.keys(obj)
// ["name", "hobby", "tendency"]
Object.values(obj)
// ["sekiro", "blacksmithing", "death"]
Object.entries(obj).map(([key, value])=>`${key}: ${value}`)
// ["name: sekiro", "hobby: blacksmithing", "tendency: death"]
複製代碼

排序

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': 'sakurajima mai', 'suit': 'bunny girl'}
Object.fromEntries(Object.entries(obj).map(([key, value])=>[value, key]))
// {sakurajima mai: "name", bunny girl: "suit"}
// 或者用lodash實現
// _.invert(obj)
複製代碼

缺失鍵處理

若是鍵不在字典中，返回一個默認值，相似Python的dict.get

let obj = {'name': 'okabe rintaro', 'motto': 'elpsycongroo'}
obj.job || 'mad scientist'
// mad scientist
複製代碼

若是鍵不在字典中，將會添加它並設置一個默認值，相似Python的dict.setdefault

let obj = {'name': 'okabe rintaro', 'motto': 'elpsycongroo'}
obj.job = obj.job || 'mad scientist'
// "mad scientist"
obj
// {name: "okabe rintaro", motto: "elpsycongroo", job: "mad scientist"}
複製代碼

語言專屬特性

待整理