Fork me on GitHub

有用的 js 技巧

数组

合并数组

  1. Array.concat():会创建一个新的数组,对于大数组来说会消耗大量内存。
  2. Array.push.apply(arr1,arr2)

类数组 arguments 对象、DOM 节点列表转化成数组的几种方式

  1. for 循环后 rebuild
  2. ES5 - Array.prototype.slice.call(NodeList) (性能差)

    1
    2
    3
    4
    5
    // 以 arguments 为例
    (function fn(){
    var arr = Array.prototype.slice.call(arguments)
    return arr.reduce((prev, curr) => prev + curr, 0)
    })(1, 2, 3, 4) // 10

    可以使用如下方法

    1
    2
    3
    4
    5
    6
    7
    function acc(...arr) {
    return arr.reduce((prev, curr) => prev + curr, 0)
    }
    function fn() {
    return acc.apply(null, arguments)
    }
    fn(1, 2, 3, 4) // 10
  3. ES6 - 数组/对象扩展运算符arr = [...NodeList]

  4. Array.from()
    ES6 为了增加语义的清晰,语法的简洁性。添加了一个新方法Array.from,用于将 arrayLike 的对象转换成数组。
    Array.from方法用于将两类对象转为真正的数组:
    • 可遍历(iterable)的对象(包括 Set 和 Map)。
    • 类似数组的对象(array-like object):所谓类似数组的对象,本质特征只有一点,即必须有 length 属性。因此,任何有 length 属性的对象,都可以通过 Array.from 方法转为数组。比如:
      • arguments 对象
      • DOM NodeList 对象
      • 包含 length 属性的普通对象 { a: 1, b: 2, length: 2 }

Array and Boolean

数组中去除falsy values(0, undefined, null, false, etc.)

1
2
3
4
5
array
.map(item => {
// ...
})
.filter(Boolean) // Get rid of bad values

0、1互换

1
2
3
let a = 0
a = ~a + 2
console.log(a) // 1

最大最小值

1
2
3
4
5
6
7
// ES5
var max = Math.max.apply(null, arr)
var min = Math.min.apply(null, arr)

// ES6
var max = Math.max(...arr)
var min = Math.min(...arr)

是否可迭代

1
2
3
if ((typeof arr[Symbol.iterator]).toUpperCase() === 'FUNCTION') {
// do something
}

创建空对象

Object.create():创建对象的新方式

Merge Objects

  1. Object.assgin()
  2. 扩展运算符
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const person = { name: 'David Walsh', gender: 'Male' }
    const tools = { computer: 'Mac', editor: 'Atom' }
    const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }
    const summary = { ...person, ...tools, ...attributes }
    /*
    Object {
    "computer": "Mac",
    "editor": "Atom",
    "eyes": "Blue",
    "gender": "Male",
    "hair": "Brown",
    "handsomeness": "Extreme",
    "name": "David Walsh",
    }
    */

Require Function Parameters

函数的必选参数

1
2
3
4
5
6
7
const isRequired = () => { throw new Error('param is required') }
const hello = (name = isRequired()) => { console.log(`hello ${name}`) }

hello() // This will throw an error because no name is provided
hello(undefined) // This will also throw an error
hello(null) // hello null
hello('David') // hello David

Get Query String Parameters

获取 url 参数

1
2
3
4
5
6
7
8
// Assuming "?post=1234&action=edit"
let urlParams = new URLSearchParams(window.location.search)

console.log(urlParams.has('post')) // true
console.log(urlParams.get('action')) // "edit"
console.log(urlParams.getAll('action')) // ["edit"]
console.log(urlParams.toString()) // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')) // "?post=1234&action=edit&active=1"