🚀详解JavaScript系列之数组(四)

375 阅读2分钟

image.png


这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战


前言

接上一篇文章,我们来详细解读js数组的内容,本篇幅讲述“数组的拆分和拼接”,上一篇传送门


子集拼接与拆分


concat()

简介:连接两个或多个数组,返回结果为新的数组不会改变原数组。 concat()方法的作用是数组合并

语法: 新数组 = 数组1.concat(数组2, 数组3 ...);

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = ['小只前端攻城狮', 'PJ'];
const result1 = arr1.concat(arr2);
const result2 = arr2.concat(arr1, arr3);
console.log('arr1 =' + JSON.stringify(arr1));
console.log('arr2 =' + JSON.stringify(arr2));
console.log('arr3 =' + JSON.stringify(arr3));
console.log('result1 =' + JSON.stringify(result1));
console.log('result2 =' + JSON.stringify(result2));
​
​
//从打印结果中可以看到,原数组并没有被修改。arr1 = [1, 2, 3];
arr2 = ['a', 'b', 'c'];
arr3 = ['小只前端攻城狮', 'PJ'];
result1 = [1, 2, 3, 'a', 'b', 'c'];
result2 = ['a', 'b', 'c', 1, 2, 3, '小只前端攻城狮', 'Di'];
​
​

Rest(...)

ES6给我提供了更加简便的方式,我们可以使用...这种展开语法,将两个数组进行合并。如下:

const arr1 = [1, 2, 3];
​
const result = ['a', 'b', 'c', ...arr1];
console.log(JSON.stringify(result)); // 打印结果:["a","b","c",1,2,3]

具体想要了解更多关于Rest的用法的,可以参考这篇文章。🔥Rest参数和扩展运算符


join()

作用:将数组转换为字符串,返回结果为转换后的字符串(不会改变原来的数组)。

扩充:join()方法可以指定连接符,用参数来实现。连接符为字符串,如果不指定连接符 ,则默认使用 , 作为连接符,此时和 toString()的效果是一致的

语法:新的字符串 = 原数组.join(参数); // 参数选填

var arr = ['a', 'b', 'c'];
var result1 = arr.join(); // 这里没有指定连接符,所以默认使用 , 作为连接符
var result2 = arr.join('-'); // 使用指定的字符串作为连接符
console.log(typeof arr); // 打印结果:object
console.log(typeof result1); // 打印结果:string
console.log('arr =' + JSON.stringify(arr));
console.log('result1 =' + JSON.stringify(result1));
console.log('result2 =' + JSON.stringify(result2));
​
//打印结果
arr =["a","b","c"]
result1 =a,b,c
result2 =a-b-c

split()

作用:通过指定的分隔符,将字符串拆分成字符数组。不会改变原字符串。

特别提醒,split()是字符串的方法,不是数组的方法。

语法:新的数组 = str.split(分隔符);

注意:split()这个方法在实际开发中的应用场景非常多,大家用得也很频繁。要和slice和splice注意区分。不能傻傻分不清楚

\