前言

虽然已经写前端很多年，但刚开始接触 JavaScript 时总是会搞混一些方法，比如 call/apply、slice/splice、substr/substring 等等。

所以在这里开一篇文章，专门记录这些容易搞混的方法，并且给出我自己的“永远不搞混”攻略！

该文章默认你知道这些函数都是干嘛的，如果不知道，那就去搜索吧

call/apply

用法区别

1
2
3
4
5
6
7
8
function log(title, content) {
    console.log(`${this.id}: ${title} ${content}`)
}

// call
log.call({ id: 1 }, "hello", "world") // 1: hello world
// apply
log.apply({ id: 1 }, ["hello", "world"]) // 1: hello world

永不搞混

call/apply 的区别就一个：传递参数的方式不一样。我们正常调用函数的英文翻译就叫做 function call。

所以，call 传入参数的方式是和正常调用函数一样的！✅

slice/splice

用法区别

1
2
3
4
5
6
7
8
9
10
11
12
13
const arr = [0, 1, 2, 3, 4, 5]

// slice
arr.slice() // [0, 1, 2, 3, 4, 5]
arr.slice(1, 3) // [1, 2]
arr.slice(-1) // [5]
arr // [0, 1, 2, 3, 4, 5]
// splice
arr.splice() // []
arr.splice(1, 3) // [1, 2, 3]
arr // [0, 4, 5]
arr.splice(-1) // [5]
arr // [0, 4]

永不搞混

slice 可以复制一个新的数组。

正因为可以复制，所以 slice 是不会改变原素组的。因为 slice 翻译过来是 切片，所以它的参数都为数组索引而不是索引加长度。✅

substr/substring

用法区别

1
2
3
4
const str = "1234567890"

str.substring(2, 4) // '34'
str.substr(2, 4) // '3456'

永不搞混

我的记忆方法是：因为 substring 是最完整的写法，所以就以它向数组的 slice 看齐，substring 和 slice 一样，参数都为索引。✅