共计 2185 个字符,预计需要花费 6 分钟才能阅读完成。
为什么炒冷饭:
了解这些方法就可以在很方业务场景使用,了解他们的用法也会带来很大的遍历
concat() 这里我总结的是 数组拼接法
该方法基于当前数组创建一个 新的数组(副本),然后将参数添入该数组副本中的末尾,如果参数中包含一个或多个数组,该方法会将数组中的每一项都添加到结果中,没有参数则只简单创建一个新的数组副本。
let arr = [1, 2];
let newArr = arr.concat('3', 4);
let otherArr = arr.concat('3', [4, 5, '6'], {name: 'Phoenix'});
console.log(newArr); // [1, 2, '3', 4]
console.log(otherArr); // [1, 2, '3', 4, 5, '6', { name: 'Phoenix'} ]
如上代码 concat()
中的参数可以是多种多样的(Number,Array,Object,String…)等;
细心点看可以发现细节,我使用同一数组 arr 调用了 concat()
方法两次;
如果你对 concat()
方法并不了解 那么你肯恩对它给你返回对结果并不理想;
你可能认为最终结果是 [1, 2, '3', 4, '3', 4, 5, '6', { name: 'Phoenix'} ]
;
这里就要追溯到 该方法会创建一个新的数组副本,也就是说 concat()
不会更改原来的数组;
slice() 这里我总结的是 数组截取法
该方法呢,接受一或两个参数;
如果只传递一个参数就是指定开始截取数组的位置一直到数组末尾,然后 返回截取出来的值
说到这,必须提醒一下,slice()
方法不会操作原数组,不会操作原数组,不会操作愿数组;
那么继续说,如果传递两个参数的时候,第一个参数还是指定截取的开始位置,第二个参数则是结束位置(不包括结束位置的元素);
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1);
let otherArr = arr.slice(1, 3);
console.log(newArr); // [2, 3, 4, 5]
console.log(otherArr); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
上面代码可以看出 newArr
是从 arr
数组中 index
为 1 的位置开始截取到末尾;
otherArr
是从 arr
数组中 index
为 1 开始到 index
为 3(arr[3]
结果是 4),所以最终返回[2, 3]
,该结果并不包括 4;
而最后我打印了原来的数组 arr
发现和原来并没有任何变化;
脑洞大些的同学一定想到传递 负值 会有什么结果;
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(-2);
console.log(newArr); // [4, 5]
从上面可以看出 当参数为 负值 该方法会截取该数组最后 2 个元素;
好像和 Array.pop()
很像,但是区别在于 前者返回一个数组,且不会改变原数组,而后者是返回单个元素,而且会改变原有元素;
接下来就是相对比较好用的且常用的splice()
;
该方法接受三个参数(还可以更多,等下细说);
第一个参数是下标值,将要操作当前数组内的第 n 项开始;
第二个参数是将要删除的 n 个项;
第三个参数则是单个或多个将要插入的元素;
下面开始玩吧:
let arr = [1, 2, 3, 4, 5];
let newArr = arr.splice(1);
console.log(newArr); // [2, 3, 4, 5]
console.log(arr); // [1]
可以看到,我只传递一个参数进去,和 slice()
方法没有区别,细节就在于我为什么这次没有一下调用该方法好几次,就是因为,这个方法强大到,可以更改原来的数组;
可以看到 我打印的 arr 数组中只剩下一个元素 1 了;
这次我再传递一个 负值 进去;
let arr = [1, 2, 3, 4, 5];
let newArr = arr.splice(-1);
console.log(newArr); // [5]
console.log(arr); // [1, 2, 3, 4]
和想的一样,只不过该方法更改了原数组;
那么传递 2 个参数看看;
let arr = [1, 2, 3, 4, 5];
let newArr = arr.splice(1, 3);
console.log(newArr); // [2, 3, 4]
console.log(arr); // [1, 5]
比较直观的看出从 数组中的 1 开始截取,截取 3 个元素出来,那么这个结果没有什么错了,原数组也是想的一样;
再看三个参数:
let arr = [1, 2, 3, 4, 5];
let newArr = arr.splice(1, 3, '5', {name: 'Phoenix'}, [1, 2]);
console.log(newArr); // [2, 3, 4]
console.log(arr); // [1, 5, { name: 'Phoenix'}, [1, 2], 5 ]
newArr
还是老样子,截取的和之前的一样,但是后面我在之前的基础上又加了 3 个参数;
也就是说该方法把之前删除掉的元素换成了这些('5', {name: 'Phoenix'}, [1, 2]
);
还一点就是 它也没有像 concat()
一样把所有参数展开再添加进去,而是原封不动的添加进来;
以上就是这些内容,希望对你学习 JavaScript 有所帮助,本人近期也在写一些关于 TypeScript 的文章比较基础细致,欢迎有问题指出。