当前位置: 代码迷 >> 综合 >> slice() splice()和call() apply() bind()的使用
  详细解决方案

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

热度:98   发布时间:2023-11-22 22:58:53.0

slice()

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

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

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

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

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(可选)需要添加的新元素

一起执行会有数据不准问题
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,…)

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(对象,数组)

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
小腾--小明--新人--旧人

bind()

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

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
小米--小华--新人--旧人
小腾--小明--新人--旧人

可以看出call()和apply()的第一个参数都是对象,第二个参数开始call的是多个参数用逗号隔开进行填入,apply的是一个数组,所以apply()常用于借用数组的方法,而call只是处理普通对象;bind是最不好使用的,暂时未知作用在哪,因为 前两个都已经够满足使用了

  相关解决方案