javascript中的slice方法,你知多少?

  • 内容
  • 评论
  • 相关

slice字面意思

slice 当动词用时,把...切成片,切下一部分,这就很好理解啦,那为啥不用cut呢?跟cut有啥区别呢?好吧,slice是切的一定要是薄片,cut指的范围比较广,各种切都可以。反正你只要理解slice是切下一部分就好了,对我们理解这个方法有好处。

Array 和 String 里都有 slice 方法,下面分别介绍,不过用法类似。

Array.slice()

Array.slice()方法是将数组的一部分的浅拷贝返回到一个新的数组对象中,是从开始到结束(end不包括end)选择的。原始数组将不被修改。
注意点:
1.原数组不会被修改,返回一个新数组。
2.该方法包含两个参数(start,end),新数组包含start,不包含end。
3.start或者end是负数,是从末尾开始算起,负数是从-1开始。
4.怎么理解上面说的浅拷贝呢?举个栗子:

var arr1 = [1,2,['w']];
var arr2 = arr1.slice();
console.log(arr2);  //[1,2,['w']]

当我执行arr1[2][0] = 'z';

console.log(arr1);  //[1,2,['z']]
console.log(arr2);  //[1,2,['z']]

arr1 和 arr2 都改变了,所以slice浅拷贝说的是 array 的 elements, 而不是 array 本身,所以
当我执行arr1[0]=2;

console.log(arr1);  //[2,2,['z']]
console.log(arr2);  //[1,2,['z']]

array 本身是深拷贝,改变arr1[0],而arr2并不会跟着改变。

var arr = [2,3,4,5,6,7,8];
console.log(arr.slice(2,4))  //[4,5]

同时也可以调用 slice 方法将类似 Array 的对象/集合转换为新的 Array。 您只需将方法绑定到对象。

function list() {
  return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]

//也可以用 [].slice.call(arguments) 来代替 Array.prototype.slice.call。

function list() {
  return [].slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]

Array.prototype.slice.call(arguments);
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })   //["a", "b"]
Array.prototype.slice.call(document.querySelectorAll("div"));

String.slice()

String.slice() 方法从一个字符串中提取字符串并返回新字符串。在一个字符串中的改变不会影响另一个字符串。也就是说,slice 不修改原字符串,只会返回一个包含了原字符串中部分字符的新字符串。

注意点:
1.原字符串不会被修改,返回一个新字符串。
2.该方法包含两个参数(start,end),新字符串包含start,不包含end。
3.start 或者 end 是负数,是从末尾开始算起,负数是从-1开始。

slice的用法
1.单纯的复制功能

var arr1 = [1,2,3];
var arr2 = arr1.slice();
console.log(arr2);

var str1 = 'topfe.cn';
var str2 = str1.slice();
console.log(str2);

当然ES6中,可以用展开运算符(...)来实现

var arr1 = [1,2,3];
var arr2 = [...arr1];
console.log(arr2);

2.将任意长度多余的参数强制转换为数组

function myFunc(a, b) { 
  const extraArgs = Array.prototype.slice.call(arguments, 2); 
}

这允许使用任意数量的参数调用myFunc, 例如:

myFunc(1, 2, 3, 4, 5, 6, 7, 8)

在函数里面会得到a == 1,b === 2,extraArgs=== [3,4,5,6,7,8]

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注