slice() splice()和call() apply() bind()的使用

98 阅读 0 评论 65 点赞

我是靠谱客的博主坚定云朵，这篇文章主要介绍slice() splice()和call() apply() bind()的使用，现在分享给大家，希望可以做个参考。

slice()

可提取数组中选定的元素，并以新的数组返回被提取的元素，不会改变原数组
可提取字符串的某个部分，并以新的字符串返回被提取的部分。
array.slice(start, end)或string.slice(start, end)

注意：start是从0位置开始算起，提取的数组或字符串是包括start位置的元素但不包括end元素；end表达的是位置不是长度；start, end都没有填值，返回一个未提取的数组，只填start，就是提取start位置到最后。也就是说取值范围包含开始不包含结尾：[）

注意：如果start是负数，那么它从数组或字符串尾部位置开始算起。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

注意：如果数组没有提取到元素返回一个空数组，字符串没有提取到元素返回空字符串

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr = ["A", "B", "C", "D"];
console.log(arr.slice(-1));
console.log(arr.slice(1, 3));
console.log(...arr.slice(1, 3));//这种使用场景可以使用在函数传参的方面或需要一个个数据一一对应作为参数传入的函数
比如call的使用:
方法.call（对象，参数1，参数2，....）
方法.call（对象，...arr）
[ 'D' ]
[ 'B', 'C' ]
B C
var str = "你好么312你们";
console.log(str.slice(-1));
console.log(str.slice(1, 3));
们
好么

splice()

可用于纯添加或纯删除或替换数组中的元素。
注意：这种方法会改变原始数组长度，同时并返回一个新数组以提取的元素组成
注意：howmany是长度
注意：
array.splice(index,howmany,item1,…,itemX)
index (必需)规定从何处添加/提取元素，从0位置开始算起；
howmany(可选) 规定应该删除多少元素，必须是数字，但可以是 “0”。如果未规定此参数，则从 index 开始提取到原数组结尾的所有元素，howmany是长度。
item1(可选)需要添加的新元素

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
一起执行会有数据不准问题
var arr = ["A", "B", "C", "D"];
一次尝试
console.log(arr.splice(1, 0, 1, 2));
console.log(arr);
[]
[ 'A', 1, 2, 'B', 'C', 'D' ]
二次尝试
console.log(arr.splice(1, 1, 1, 2));
console.log(arr);
['B']
['A', 1, 2, 'C', 'D']

call()

可编写能够在不同对象上使用的方法
使用方式：方法.call（对象，参数1，参数2，…）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var person = {
  fullName: function (newn, oldn) {
    return this.fn + "--" + this.ln + "--" + newn + "--" + oldn;
  },
};
var person1 = {
  fn: "小米",
  ln: "小华",
};
var person2 = {
  fn: "小腾",
  ln: "小明",
};
console.log(person.fullName());
console.log(person.fullName.call(person1));
console.log(person.fullName.call(person2));
console.log(person.fullName.call(person2, "新人", "旧人"));

undefined--undefined--undefined--undefined
小米--小华--undefined--undefined
小腾--小明--undefined--undefined
小腾--小明--新人--旧人

apply()

可编写能够在不同对象上使用的方法
使用方式：方法.apply(对象,数组)

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var person = {
  fullName: function (newn, oldn) {
    return this.fn + "--" + this.ln + "--" + newn + "--" + oldn;
  },
};
var person1 = {
  fn: "小米",
  ln: "小华",
};
var person2 = {
  fn: "小腾",
  ln: "小明",
};
console.log(person.fullName());
console.log(person.fullName.apply(person1));
console.log(person.fullName.apply(person2));
console.log(person.fullName.apply(person2, ["新人", "旧人",'其它']));

undefined--undefined--undefined--undefined
小米--小华--undefined--undefined
小腾--小明--undefined--undefined
小腾--小明--新人--旧人

例子
1、Math.max 可以实现得到数组中最大的一项？
因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组
但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决
var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

复制代码

1
2
3
4
Math.max.apply(null, [1,2,3])
Math.max.apply(Math, [1,2,3])
都返回3

2、Math.min 可以实现得到数组中最小的一项？
同样和 max是一个思想 var min=Math.min.apply(null,array);

bind()

可编写能够在不同对象上使用的方法
使用方式：方法.bind(对象，参数1，参数2，…)（）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var person = {
  fullName: function (newn, oldn) {
    return this.fn + "--" + this.ln + "--" + newn + "--" + oldn;
  },
};
var person1 = {
  fn: "小米",
  ln: "小华",
};
var person2 = {
  fn: "小腾",
  ln: "小明",
};

console.log(person.fullName());
console.log(person.fullName.bind(person1)());
console.log(person.fullName.bind(person1, "新人", "旧人")());
console.log(person.fullName.bind(person2, "新人", "旧人")());

undefined--undefined--undefined--undefined
小米--小华--undefined--undefined
小米--小华--新人--旧人
小腾--小明--新人--旧人