ECMAScript的Array笔记

关于JS数组的个人笔记

跟其它语言中的数组一样ECMAScript数组也是一组有序的数据，但跟其它语言不同的是，ECMAScript数组中每个槽位可以存储任意类型的数据；此外ECMAScript数组也是动态大小的会随着数据添加而自动增长。

一、JS数组的创建方法

• 使用Array构造函数创建

  const name = new Array("yxj","lqy");
  

• 使用字面量的形式创建

  const name = ["yxj","lqy"];
  

  补充：

  const在定义引用数据类型时可以修改数组里的内容，因为修改数组里的内容时，并没有改变数组的内存地址，只是改变了内存地址里的值。

  const name = ["yxj","lqy"];
  name[2] = 666;
  console.log(name);//[yxj,lqy,666];
  

二、数组的类型

数组是一个对象，是一个引用类型

let name = ["yxj","lqy"];
console.log(typeof name);//object
let n =name;
n[0]="son";
console.log(n);//['son', 'lqy']
console.log(name);//['son', 'lqy']
//他们被同时修改了，因为他们使用的是同一个内存地址
console.table(name);//会以表格的形式输出数组

三、二维数组

let arr = [[1,5],[2,9],[3,7]];
console.log(arr[0][1]);//5

let lessons = [{name:'yxj',age:18},{name:'lqy',age:18},{name:'son',age:0}];
console.log(lessons[1].name);//lqy

四、数组的属性及索引

• length属性

  可以查看或修改数组的长度

  let arr = [1,2,3];
  arr.length = 4;
  console.log(arr.length);//4
  console.log(arr[4]);//undefined
  

• of的属性

  // 问题:使用Array构造函数创建数组时
  let cms = new Array(1,2,3,4);
  let cmd = new Array(6);//如果只有一个参数，该默认为数组长度
  console.log(cms.length);//4
  console.log(cms);//[1,2,3,4]
  console.log(cmd.length);//6
  console.log(cmd);//6个空元素
  
  // of属性，解决使用Array构造函数创建数组时的问题
  let arr2 = Array.of(6);
  console.log(arr2.length);//1
  console.log(arr2);//[6]
  

五、检测数组的方法

一个经典的ECMAScript问题就是判断一个对象是不是数组，在只有一页网页（只有一个全局作用域）的情况下，使用instanceof操作符就可以

let arr = [];
console.log(arr instanceof Array);

网页里有多个不同的执行上下文时得使用Array.isArray( )方法

let arr2 =[];
if(Array.isArray(arr2)){
   console.log("arr2是数组");
   }

六、数组的方法

1.栈方法

ECMAScript给数组提供了几个方法让他看起来更像另外一种数据结构。数组对象可以像栈一样，也就是一种限制插入和删除项的数据结构。栈是一种后进先出（LIFO,last-In-First-Out）的结构，也就是最近添加的项先被删除。

数据项的插入（push）和删除（pop）只在栈的一个地方发生，即栈顶。ECMAScript数组提供了push（）和pop（）方法，以实现类似栈的行为。

方法	描述
pop(items)	删除数组的最后一个元素，并返回该元素。
push(items)	将新元素添加到数组的末尾，并返回新的长度。

2.队列方法

队列以先进先出（FIFO,First-In-First-Out）形式限制访问。队列在队列尾部添加添加数据，从列表开头获取数据。因为有了在数据末尾添加数据的push( )方法，所以要模拟队列就差一个从数组开头获取数据的方法。该方法为shift( ),他会删除数组的第一项并返回它，然后数组长度减一，使用shift（）和push（）

方法	描述
shift(items)	删除数组的第一个元素，并返回该元素
unshift(items)	将新元素添加到数组的开头，并返回新的长度。

3.排序方法

数组有两个方法可以用来对元素重新排序：reverse( ) 和 sort( )。reverse( ) 方法是将数组反向排序。默认情况下sort( )方法会按照升序重新排列数组元素，即最小值在前面，最大值在后面；为此 sort( ) 会在每一项上调用 String( )转型函数，然后比较字符串来决定排序。即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序。

方法	描述
sort()	排序（字符规则），返回新数组
reverse()	反转数组，返回新数组

• 反转排序

let values = [1,2,3,4,5];
values.reverse();
console.log(values);//[5,4,3,2,1]

• 升序排列数组

let arr = [0,1,5,10,15];
arr.sort();
console.log(arr);//0、1、10、15、5
//比较的是字符串的ascII码值，而且只比较第一位

//为此sort()方法可以接受一个比较函数，用于判断哪个值应该在前面
/* 比较函数接收两个参数，
    如果第一个参数应该排在第二个参数前面，就返回负值;
    如果两个参数相等就返回0；
    如果第一个参数应该排在第二个参数后面，就返回正值;
*/
function cmp(val1,val2){
    //升序
    if(val1 < val2){
        return -1;
    }else if(val1 > val2){
        return 1;
    }else{
        return 0;
    }
}
var arr2 = [5,2,4,3,2,1];
arr2.sort(cmp);
console.log(arr2);//1,2,2,3,4,5

//用箭头函数简写该比较方法
let arr3 = [2,5,1,9,12,6];
// 这里是降序
arr3.sort((a,b)=> a<b ? 1 : a>b ? -1 :0);
console.log(arr3);// [ 12, 9, 6, 5, 2, 1 ]

4.操作方法

方法	描述
concat()	用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
slice()	从已有的数组中返回选定的元素。[star,end)
splice()	从数组的指定位置添加/删除元素。返回值是被删除的数组

concat( )

对于数组中的元素，我们有很多操作方法，比如 concat( ) 方法可以在现有的数组全部元素基础上创建一个新数组。他首先会创建一个当前数组的副本，然后再把它的参数添加到副本尾部，最后返回这个新构建的数组。如果传入一个或多个数组，则 concat( )会把这些数组中的每一项添加到结果数组里，如果参数不是数组，则直接把他们添加到结果数组尾部。

let arr = [1,2,3];
let arr2 = arr.concat("元素1",[4,5,6]);
console.log(arr);
console.log(arr2);//[ 1, 2, 3, "元素1", 4, 5, 6 ]
/*
先创建了包含三个值的数组arr; 然后arr调用concat()方法,传入字符串"元素1"; 和一个包含4,5,6的数组。
保存在arr2中的就是[ 1, 2, 3, "元素1", 4, 5, 6 ]; 原数组arr保持不变;
concat()方法不会将数组打平。
数组打平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组
*/

/*打平数组的行为可以重写，方法是在参数数组上指定一个特殊的符号：Symbol.isConcatSpreadable
这个符号能够阻值concat()打平参数数组。相反把这个值设置为true可以强制打平类数组对象
*/
let arr3 = [1,2,3];
let newarr = [4,5];
let morearr = {
    [Symbol.isConcatSpreadable] : true,//打平数组
    length:2,
    0:"6",
    1:"7"
}
newarr[Symbol.isConcatSpreadable] = false;//不打平数组
//   强制不打平数组
let tmp1 = arr3.concat(8,newarr);
//  强制打平类数组对象
let tmp2 = arr3.concat(morearr);
console.log(tmp1);//[ 1, 2, 3, 8, (2) […] ]
console.log(tmp2);//[ 1, 2, 3, "6", "7" ]

slice( )

该方法用于创建一个包含原数组中一个或多个元素的新数组。slice( )方法可以接受一个或两个参数；返回元素的开始索引和结束索引。如果只有一个参数，则会返回该索引到数组末尾的所有元素。如果有两个参数，则 slice( ) 会返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。这个操作不影响原数组。

let s =[1,2,3,4,5];
let s2 = s.slice(1);
let s3 = s.slice(1,4);
console.log(s2);//[ 2, 3, 4, 5 ]
console.log(s3);//[ 2, 3, 4 ]
/*注意：如果slice() 参数有负值，那么就以数值长度加上这个负值的结果确定位置。
    比如在包含五个元素的数组上调用slice(-2,-1) 就相当于调用slice(3,4); 如果结束位置小于开始位置则返回空数组
*/

splice( )

splice( )的主要目的是在数组中间插入元素，有三种不同的使用方法。

splice( )方法始终返回这样一个数组，它包含从数组中被删除的元素（如果没有删除元素，则返回空数组）

删除：

• 需要给splice( )传两个参数：要删除的第一个元素的位置（索引）和要删除的元素数量。可以从数组中删除任意多个元素

插入：

• 需要给 splice( ) 传递三个参数：开始位置、0（要删除的元素数量）、要插入的元素，可以在数组中指定的位置插入元素，第三个参数可以传递多个。

替换：

• splice( ) 在删除元素的同时还可以在指定位置插入新元素，同样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。

let a1 = [1,2,3];
let a2 = a1.splice(0,1);//从索引为0位置开始删除，删除一个元素
console.log(a2);//返回被删除的元素[ 1 ]
console.log(a1);//[ 2, 3 ]

a2 = a1.splice(1,0,4,5);//在位置1插入4，5
console.log(a2);//返回空数组
console.log(a1);//[ 2, 4, 5, 3 ]

5.搜索和位置方法

ECMAScript提供两类搜索数组的方法：按严格相等搜索和按断言函数搜索。

1.严格相等

方法	描述
indexOf()	返回 item的第一次出现的位置（索引）;从前往后。数组中没找到指定元素则返回 -1。
lastIndexOf()	返回 item的第一次出现的位置（索引）;从后往前。数组中没找到指定元素则返回 -1。
includes()	返回是否至少找到一个与指定元素匹配的项（true/false）

ECMAScript提供了三个严格相等的搜索方法：indexOf()、lastIndexOf()、includes()。

这些方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。

indexOf() 和 includes() 方法从数组前头（第一项）开始向后搜索，而lastIndexOf( ) 从数组尾部向前搜索

indexOf() 和 lastIndexOf( ) 都返回要查找的元素在数组中的位置，如果没有找到则返回-1

includes() 返回布尔值，表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时会使用（===）比较，也就是两项必须严格相等。

let number = [1,2,3,4,5,4,3,2,1];//index == 8

console.log(number.indexOf(4));//3
console.log(number.lastIndexOf(4));//5
console.log(number.includes(4));//true

console.log(number.indexOf(4,4));//5
console.log(number.lastIndexOf(4,4));//3
console.log(number.includes(4,7));//false

let person = {name:"yxj"};
let people = [{name:"yxj"}];
let morepeople = [person];
console.log(people);//0: Object { name: "yxj" }
console.log(morepeople);//0: Object { name: "yxj" }
console.log(morepeople == people);//false
    
console.log(people.indexOf(person));//-1
console.log(morepeople.indexOf(person));//0
console.log(people.includes(person));//false
console.log(morepeople.includes(person));//true

2.断言函数

ECMAScript也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为分配。

断言函数接受3个参数：元素、索引、数组。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组，断言函数返回真值，表示是否匹配。

find() 和 findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find() 返回第一个匹配的元素，findIndex() 返回第一个匹配元素的索引。这两个方法也都接受第二个可选参数，用于指定断言函数内部this的值。

const people = [
{
    name: "matt",
    age:16
},
{
    name: "yxj",
    age:18
},
{
    name: "lqy",
    age:12
}
];
// 找到匹配项后这两个方法都不再继续搜索
var f = people.find((element,index,array)=>element.age<18);
console.log(f);//Object { name: "matt", age: 16 }
var f2 = people.findIndex((element,index,array)=>element.age>12);
console.log(f2);//0

// 找到匹配项后永远不会检查数组的后一个元素
const events = [2,4,6];
events.find((element,index,array)=>{
    console.log("element");
    console.log(+element);//2
    console.log("index");
    console.log(index);//0
    console.log("array");
    console.log(array);//Array(3) [ 2, 4, 6 ]
    console.log("rt");
    return element === 4;
    //第一次 2、0、Array(3) [ 2, 4, 6 ]
    //第二次 4、1、Array(3) [ 2, 4, 6 ]
});
//只查找了两次就找到匹配元素

6.迭代方法

ECMAScript为数组定义了五个迭代方法。每个方法接收两个参数：以每一项为参数运行时的函数，以及可选的作为函数运行上下文的作用域对象（影响函数中this值）。传给每个方法的函数接收3个参数：数组元素、元素索引、和数组本身。因具体的方法而异，这个函数的执行结果可能会也可能不会影响方法的返回值。

这些方法都不改变调用他们的数组

方法	描述
every()	对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true
filter()	对数组每一项都运行传入的函数,返回新数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
forEach()	对数组每一项都运行传入的函数，没有返回值
map()	对数组每一项都运行传入的函数，返回由每次调用的结果构成的数组
some()	对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true

every() 和 some()

在这些方法中，every() 和 some() 是最相似的，都是从数组中搜索符合某个条件的元素。对于 every() 来说，传入的函数必须对每一项都返回true，他才会返回true;否则返回false。而对于 some() 来说只要有一项让传入的函数返回true,就会返回true。

let arr = [1,2,3,4,5,1,2,3,4,5];
let arr2 = arr.every((item,index,array)=>item > 1);
let arr3 = arr.some((item,index,array)=>item>2);
console.log(arr2);//false
console.log(arr3);//true

some()

<script>
    let arr = [{id:'01',age:18,name:'成年'},{id:'02',age:16,name:'未成年'},{id:'03',age:12,name:'小学毕业'},];
    const arr1 = [];
    const result = arr.some((item,index,arr)=>{
        if(item.name === '小学毕业'){
            arr1.push(item);//{ id: "03", age: 12, name: "小学毕业" }
        }
    });
    console.log(arr1);//[{ id: "03", age: 12, name: "小学毕业" }];
</script>

every()

<script>
    let arr = [{id:'01',age:18,name:'成年'},{id:'02',age:16,name:'未成年'},{id:'03',age:12,name:'小学毕业'},];
    const result = arr.every((item,index,arr)=>item.age >= 12);
    console.log(result);//true
</script>

filter()

filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。用于把Array的某些元素过滤掉，然后返回剩下的元素。比如要返回一个数组里大于2的数值.

let arr = [2,3,4,1,5,6,9,8,2,1,4,0,4];
let arr2 = arr.filter((item,index,array)=>item > 2);
console.log(arr2);// [ 3, 4, 5, 6, 9, 8, 4, 4 ]

map()

按照原始数组元素顺序依次处理元素，返回一个新数组，新数组中的元素为原始数组元素调用函数处理后的值。数组元素个数不变，只是按照一定的条件转换，使数组元素的值发生了变化。例如，可以将一个数组中的每一项都乘以2，并返回包含所有结果的数组。

let arr = [1,3,5,7,9];
let arr2 =arr.map((item,index,array)=>item*2);
console.log(arr2);//[ 2, 6, 10, 14, 18 ]

forEach()

这个方法只会对每一项运行传入的函数，没有返回值。本质上forEach() 方法相当于for循环遍历数组。

let arr = [{name:'yxj',age:18},{name:'lqy',age:14}];
arr.forEach((item,index,array)=>{
    console.log(array[index].name);//yxj  lqy
})

7.归并方法

方法	描述
reduce()	对数组中的每个元素按序执行一个由您提供的 reduce 函数，每一次运行 reduce 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
reduceRight()	该方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

ECMAScript为数组提供了两个归并方法：reduce( ) 和 reduceRight( ) 。这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce（）方法从数组第一项开始遍历到最后一项。而 reduceRight( )从最后一项开始遍历至第一项。

• 语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

这两个方法都接收两个参数：对每一项都会运行的归并函数，以及可选的以之为归并起点的初始值。传给 reduce() 和 reduceRight( ) 的函数都接收四个参数：上一个归并值、当前值、当前项的索引、数组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入第二个可选的参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

• reduce()的用法

<script>
    let arr = [9,8,5];
    const result = arr.reduce((total,item,index,arr)=>{
        // console.log(total);//上一个归并值9，如果设置了归并值起点，则为归并值
        // console.log(item);//当前项8 | 9
        // console.log(index);//当前项的索引
        // console.log(arr);//数组
        return total += item*2;//total = 9*2 + 8*2 + 5*2 = 44
    },0);//0为归并值的起点，如果不设置，将从数组的第二项开始迭代 total = 9 + 8*2 + 5*2 =35
    console.log(result);
</script>

• 使用 reduce( ) 函数执行累加数组中所有数值

let arr = [1,2,3,4,5];
let sum = arr.reduce((prev,cur,index,array)=> prev + cur);
console.log(sum);//15
/*
    第一次执行归并函数时，prev是1，cur是2。第二次执行时，prev是3（1+2），cur是3（数组第三项）。
    如此递进直到把所有项都遍历一次，最后返回归并结果
*/

• reduceRight()

//    reduceRight() 方法与 reduce() 方法类似，只是方向相反
let values = [1,2,3,4,5];
let sum2 = values.reduceRight(function(prev,cur,index,array){
    return prev + cur;
})
console.log(sum2);//15
/*
    在这里，第一次调用归并函数时prev是5，而cur是4 。最终结果都相同，因为归并操作都是简单的加法
*/
</script>

8.迭代器方法

在ES6中，Array的原型(Object的原型)上暴露了3个用于检测数组内容的方法：keys()、values()、和entries();

keys()返回数组索引的迭代器

values()返回数组元素的迭代器

entries()返回 索引/值对 的迭代器

const a =["name","age","sex"];
/*
    因为这些方法否返回迭代器，
    所以可以将他们的内容通过Array.from()直接转为数组实例
*/
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values());
const aEntries = Array.from(a.entries());
console.log(aKeys);//[0,1,2]
console.log(aValues);//[ "name", "age", "sex" ]
console.log(aEntries);//[[0,"name"],[1,"age"],[2,"sex"]]

// 使用es6的结构可以非常容易地在循环中拆分键/值对
for(const [index,element] of a.entries()){
    console.log(index);//0  1   2   
    console.log(element);//name age sex
}

9.复制和填充方法

ES6新增了两个方法：批量复制方法 fill() ,以及填充数组方法 copyWithin() 。这两个方法地函数签名类似，都需要指定既有数组实例上地一个范围，包含开始索引，不包含结束索引。使用这个方法创建的数组不能缩放。

填充方法

使用 fill() 方法可以向一个已有的数组中插入全部或者部分相同的值。开始索引用于指定开始填充的位置，他是可选的。如果不提供结束索引，则一直填充到数组末尾。负值索引从数组末尾开始计算。也可以将负索引想象成数组长度加上他得到的一个正索引：

const zero = [0,0,0,0,0];
//用5填充整个数组
zero.fill(5);
console.log(zero);//[5,5,5,5,5]

zero.fill(0);//重置
//用6填充索引大于等于3的元素
zero.fill(6,3);
console.log(zero);//[ 0, 0, 0, 6, 6 ]

zero.fill(0);//重置
//用7填充索引大于等于1且小于3的元素
zero.fill(7,1,3);
console.log(zero);// [ 0, 7, 7, 0, 0 ]

zero.fill(0);//重置
//用8填充索引大于等于1且小于4的元素
zero.fill(8,-4,-1);
console.log(zero);// [ 0, 8, 8, 8, 0 ]

/*
    fill() 默认忽略超出数组边界、零长度以及方向相反的索引范围
*/
const arr =[0,0,0,0,0];
arr.fill(1,-10,-6);
console.log(arr);//索引过低 忽略 [0,0,0,0,0]

arr.fill(1,10,15);
console.log(arr);//索引过高 忽略 [0,0,0,0,0]

arr.fill(1,4,2);
console.log(arr);//反向索引 忽略 [0,0,0,0,0]

arr.fill(4,3,15);
console.log(arr);//索引部分可用，填充可用部分 [ 0, 0, 0, 4, 4 ]

复制方法

与 fill() 不同，copyWithin() 会按照指定范围浅复制（浅拷贝）数组中的部分内容，然后将他们插入到指定索引开始的位置。开始索引和结束索引则与 fill() 使用同样的计算方法：

let ints,
reset = ()=>ints =[0,1,2,3,4,5,6,7,8,9];
reset();

// 在源索引或者目标索引达到数组边界时停止
ints.copyWithin(5);//复制从0索引开始的内容，插入到从5索引开始的位置
console.log(ints);//[ 0, 1, 2, 3, 4, 0, 1, 2, 3, 4 ]
reset();


ints.copyWithin(0,5);//复制索引5开始的内容，插入到索引0开始的位置
console.log(ints);//[ 5, 6, 7, 8, 9, 5, 6, 7, 8, 9 ]
reset();

ints.copyWithin(4,0,3);//复制索引0开始到索引3结束的内容，插入到索引4开始的位置 [0,3)
console.log(ints);//[ 0, 1, 2, 3, 0, 1, 2, 7, 8, 9 ]
reset();
/*
    js引擎在插值前会完整复制范围内的值，复制期间不存在重写的风险
    该方法也支持负索引
    默认忽略超出数组边界、零长度、方向相反的索引范围
*/

10.转换方法

所有对象都有toLocaleString()、toString()、和valueOf() 方法。其中，valueOf()返回的还是数组本身。而 toString() 返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说对数组的每个值都会调用其 toString() 方法，以得到最终的字符串。

toString()

let colors = ["red","blue","green"];
console.log(colors.toString());// red,blue,green
console.log(colors.valueOf());//[ "red", "blue", "green" ]
console.log(colors);//[ "red", "blue", "green" ]
alert(colors);//red,blue,green
console.log(colors.valueOf() === colors);//true
/*
    首先是被显示调用的 toString() 和 valueOf() 方法，他们分别返回了数组的字符串表示，即将所有字符串组合起来，以逗号分隔。
    因为alert期待字符串，所以会在后台调用数组的 toString() 方法
    
*/

toLocaleString()

toLocaleString() 方法也可能返回跟 toString()、和 valueOf() 相同的结果，但也不一定。在调用数组的 toLocaleString() 方法时，会得到一个逗号分隔的数组值得字符串。它与另外两个方法得唯一区别是，为了得到最终的字符串，会调用数组每个值的 toLocaleString() 方法，而不是 toString() 方法。

let person1 = {
toLocaleString(){
    return "yyy";
},
toString(){
    return "yxj";
},
};
let person2 = {
toLocaleString(){
    return "lqy";
},
toString(){
    return "son";
},
}
let people = [person1,person2];
alert(people);//yxj,son
console.log(people);//[ {…}, {…} ]
console.log(people.toString());//yxj,son
console.log(people.toLocaleString());//yyy,lqy
/*
这里定义了两个对象person1和person2，他们都定义了toString() 和 toLocaleString() 方法
而且返回不同的值。然后又创建了一个包含这两个对象的数组people。
在将数组传给alert()时输出的是 yxj,son ，这是因为会在数组每一项上调用 toString() 方法
与people.toString()显示调用效果一样。
而在调用数组的toLocaleString() 方法时结果变成了yyy,lqy,这是因为调用了数组每一项的 toLocaleString()方法
*/

join()

继承的方法 toLocaleString() 和 toString() 都返回数组值的逗号分割的字符串。如果想使用不同的分割符，则可以使用 join() 方法。 join()方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。

如果不传值或者传入undefined默认会使用，作为分隔符

let arr = ["yxj","lqy","son"];
console.log(arr.join(","));//yxj,lqy,son
console.log(arr.join("|"));//yxj|lqy|son