JavaScript中的数组（join、concat、slice、splice、push、pop、unshift、shift方法）

以你之姓@ 2022-01-31 12:43 338阅读 0赞

### 数组 ###

数组（Array）对象用于在单个的变量中存储多个值，数组是值得有序集合，数组的下标保存的是数组的顺序，数组的大小是可以动态调整的，即可以随着数据的添加自动增长，且数组中存放的值可以是多种数据类型，如：

var scroe=100;//数组中是可以存放变量的
        var arr1=[1,null,"hello",true,undefined,{name:"张三"},[1,2,3],scroe]

创建数组对象有两种方法，一种通过字面量来创建数组对象，一种是通过new操作符字来创建数组对象。  
**字面量创建数组：**

var arr1 =  [];  //创建空数组
        var arr2 = [1,2,4,5,6];  //创建一个数组，元素有1,2,4,5,6

**new操作符创建数组：**

var arr2=new Array(); //创建一个空数组
        var arr3=new Array(4); //创建一个长度为4的数组，数组是没有值的 empty × 4
        var arr4=new Array(4,5,3,3,2); //创建一个数组，值为[4,5,3,3,2]

**读写数组操作**  
数组是一个有序的集合，元素保存的下标是从0开始的，可以通过下标获取对应位置的数组元素。  
获取数组的值

var arr1=[1,"hello","world","23",18];
        console.log(arr1[3]); //结果为：'23'  我们可以通过下标 （数字）得到数组的某个值
        console.log(arr1[1+1]); //结果为：'world'  下标中也可以书写表达式
        var a=2;
        console.log(arr1[a]) ; //结果为：'world'  下标中也可以书写变量

设置数组的值

var arr1=[1,"hello","world","23",18];
    
        arr1[2]="haha"; //对数组的下标为2的数据改变了
        console.log(arr1);  // 结果为： [1,"hello","haha","23",18]
    
        console.log(arr1.length) //得到数组的长度，结果为：5
        arr1[5]="hehe";   
        console.log(arr1);  //结果为[1,"hello","haha","23",18,"hehe"]
    
        arr1[10]="heihei";//当没有设置的时候数组的某一位就是空的  empty
        console.log(arr1);//[1, "hello", "haha", "23", 18, "hehe", empty × 4, "heihei"]
        console.log(arr1[7])//空的数组的位置 获取的是undefined
    
        arr1.length=100;//仍然是生效的，但是是empty空，如果我们获取空的，返回一个undefined

#### 数组的join方法 ####

1.不改变原数组，返回**新的字符串**，也就是该方法用于将数组转换为字符串。  
2.如果join中不写任何的参数，那么是把每一项转换成字符串，并把逗号也写在字符串中了

var arr=[1,2,3,4,5,6];
        var str1=arr.join();
        console.log(arr);  // 结果为：[1,2,3,4,5,6]
        console.log(str1);  //结果为：1,2,3,4,5,6

3、join括号内的参数控制数组的逗号，最终转换成字符串的时候，参数是什么，数组的逗号便转换成什么。

var arr=[1,2,3,4,5,6];
        var str1=arr.join("");
        console.log(arr); //结果为：[1,2,3,4,5,6]
        console.log(str1); //结果为：1 2 3 4 5 6

4、如果值是undefined，那么join就默认它是一个空字符串，如果是对象就转换为\[object Object\]

var a=6;
        var arr=[undefined,2,true,4,"abc",a,{name:"lily"},[1,2,3]];
        var str1=arr.join("");
        console.log(arr); // 结果为：[undefined,2,true,4,"abc",a,{name:"lily"},[1,2,3]]
        console.log(str1); //结果为：2true4abc6[object Object]1,2,3

#### 数组的concat方法 ####

数组的concat方法用于连接两个或更多的数组，并返回结果，不会改变原数组，返回一个新的数组。

var arr=[1,2,3,4,5];
        var newArr=arr.concat(1);//将concat的参数添加到了数组的末尾，并返回新的数组
        newArr=newArr.concat(1,2,3,4,5);//如果多个参数也能将数组的新值按照顺序一并添加到末尾
        newArr=newArr.concat(["hello","world",6,7]);//将两个数组合并
        newArr=newArr.concat(["hello","world",6,7],[8,9,10],[11,12,13]);//将多个数组合并
        newArr=newArr.concat(1,["hello","world",6,7],[8,9,10],[11,12,13]);//将多个值合并，如果碰到数组，则拆开合并进去
        newArr=newArr.concat(1,[1,2,[3,4,5]]);//如果是多维数组，那么内层的数组不会拆开
        console.log(arr);//不改变原数组
        console.log(newArr);

#### 数组的slice方法 ####

数组的slice方法用于从某个已有的数组返回选定的元素，arrayObject.slice(start,end)，start用于获取数组的起始位置下标，包含该位置的元素，end获取数组的结束位置下标，不包含该位置的元素。该方法会修改原数组，返回的是一个新的数组。如果只写一个参数，则为start（开始位置下标），end没有规定，则为从起始位置获取后面的所有元素。

var arr=[1,2,3,4,5,6,7,8,9,10];
    var newArr=arr.slice(3,8);
    console.log(newArr); //结果为：[4,5,6,7,8]
    var newArr=arr.slice(3); 
    console.log(arr);  //结果为：[1,2,3,4,5,6,7,8,9,10]
    console.log(newArr); //结果为：[4,5,6,7,8,9,10]

#### 数组的splice方法 ####

数组的splice方法用于从数组中添加/删除元素，然后返回被删除的元素，该方法会改变原数组。  
**1.splice的删除功能**  
splice(3,3)的删除功能,两个参数分别是要删除的下标和删除的个数  
var arr=\[0,1,2,3,4,5,6,7,8,9,10,11,12,13\];

//原数组发生了改变，并且把删除的元素当成一个新的数组返回
        var newArr=arr.splice(3,3);
        console.log(arr); //结果为：[0,1,2,6,7,8,9,10,11,12,13]
        console.log(newArr);//返回删除的值，结果为：[3,4,5]

**2.splice的插入功能**

splice(3,0,“a”)，三个参数以上，且第二个参数为0，后面还有一个或多个参数，则为插入功能，第一个参数为插入的位置，0则为不删除元素，后面的参数则为插入的元素，可以是一个也可以是多个。

var arr=[0,1,2,3,4,5,6,7,8,9,10,11,12,13];
        
        var newArr=arr.splice(3,0,"a","b","c",["d","e"]);
        console.log(arr);
        console.log(newArr);

**3.splice的替换功能> 删除并添加**  
splice(3,3,“a”,“b”,“c”,“d”)，三个参数以上，且第二个参数不为0，则第一个参数为替换的起始位置下标，第二个参数为删除的元素个数，第三个或后面多个参数则为需要插入的元素。

var arr=[0,1,2,3,4,5,6,7,8,9,10,11,12,13];
        var newArr=arr.splice(3,3,"a","b","c","d");
        console.log(arr);
        console.log(newArr);

#### 数组的push方法 ####

数组的push方法用于在数组的最后插入一个或多个值，并返回数组的长度，会改变原数组。

var arr=[0,1,2,3,4,5,6,7,8];
        var len=arr.push("a","b",["c","d"]);
        console.log(arr);  //结果为：[0,1,2,3,4,5,6,7,8，"a","b",["c","d"]]
        console.log(len);  //结果为：12

#### 数组的pop方法 ####

数组的pop方法用于把数组末尾的项删除，并且返回删除的值，每次只删除一个，会改变原数组。

var arr=[1,2,3,4,5,6,7,8,9];
        var con=arr.pop();
        console.log(arr);  //结果为：[1,2,3,4,5,6,7,8]
        console.log(con); //结果为：9

#### 数组的unshift方法 ####

数组的unshift方法用于在数组的第一个位置插入一个或多个元素，参数靠前的后插入，会改变原数组。

var arr=[0,1,2,3,4,5,6,7,8,9];
        var len=arr.unshift("a","b");
        console.log(arr); //结果为：["a","b",0,1,2,3,4,5,6,7,8,9]
        console.log(len);  //结果为：12

#### 数组的shift方法 ####

数组的shift方法用于删除数组的第一项，并返回删除的值，每次只能删除一个，会改变原数组。

var arr=[1,2,3,4,5,6,7,8];
        var con=arr.shift();
        console.log(arr);  // 结果为：[2,3,4,5,6,7,8]
        console.log(con);  // 结果为：1