前言

虽然已经写前端很多年,但刚开始接触 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 一样,参数都为索引。✅