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 = ['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"]
复制代码