Javascript数组中16种常用方法

Javascript数组中16种常用方法

一、增加 删除 修改 （会修改原数组）

1. push

• 定义：向数组的末尾追加元素
• @params：追加的项（多个任意类型）
• @return：新增数组的长度
• 是否改变原数组：改变

使用方法：arr.push(增加的项)

var arr=[1,2,3,4,5];
var res=arr.push(6);
console.log(res);    ===>   6
console.log(arr);    ===>  [1,2,3,4,5,6]

2. unshift

• 定义：向数组的开头增加元素
• @params：追加的项（多个任意类型）
• @return：新增数组的长度
• 是否改变原数组：改变

使用方法：arr.unshift(增加的项)

var arr=[1,2,3,4,5];
var res=arr.unshift(0);
console.log(res);    ===>   6
console.log(arr);    ===>  [0,1,2,3,4,5]

3. shift

• 定义：删除数组的开头项
• @params：无
• @return：删除的那一项
• 是否改变原数组：改变

使用方法：arr.shift()

var arr=[1,2,3,4,5];
var res=arr.shift(); 
console.log(res);    ===>   1
console.log(arr);    ===>  [2,3,4,5]

4. pop

• 定义：删除数组的结尾项
• @params：无
• @return：删除的那一项
• 是否改变原数组：改变

使用方法：arr.pop()

var arr=[1,2,3,4,5];
var res=arr.shift(); 
console.log(res);    ===>   5
console.log(arr);    ===>  [1,2,3,4]

5. splice

• 定义：实现数组的增加、删除、修改；
• @params：x,y,z
• @return：修改的项
• 是否改变原数组：改变

使用方法：arr.splice(x,y,z)

var arr=[1,2,3,4,5];
var res = arr.splice(0,2,3,4)
console.log(res);    ===>[1,2];
console.log(arr)     ===>[3,4,3,4,5];

【删除】返回值是一个数组，里面是删除项

• arr.splice(0):可以清空数组，把原始数组中的内容基于新数组储存起来（有点类似于数组克隆）
• arr.splice(arr.length-1):删除最后一项
• arr.splice(0,1):删除第一项

var arr=[1,2,3,4,5];
var res = arr.splice(0,1)
console.log(res);    ===>[1];
console.log(arr)     ===>[2,3,4,5];

【新增】 arr.splice(x,0,y);在索引x的前面添加了y项；

• arr.splice(arr.length,0,x) ---------- 在数组最后增加x项；
• arr.splice(0,0,x) ---------- 在数组开头增加x项；

var arr=[1,2,3,4,5];
var res = arr.splice(arr.length,0,8)
console.log(res);    ===>[];
console.log(arr)     ===>[1,2,3,4,5,8];

【修改】 用z替代删除的y即可

其他

1.删除数组末尾一项的几种方法

• arr.length - -
• arr.pop() ：返回结果 删除的项
• arr.splice(arr.length-1) ： 返回结果是 [删除的项]
• delete arr[arr.length-1] ： 虽然能删除，但是length长度不变（一般不用）

2.向数组末尾追加项的几种方法

• arr.push(“增加的项”)
• arr[arr.length]=“增加的项”
• arr.splice(arr.length , 0 , “增加的项”)

二、查询和拼接（此类均不改变原数组）

6. slice

• 定义：实现数组的查询
• @params：n,m //从索引n开始，找到索引为m的地方（不包含m这一项）
• @return：把找到的内容以新数组的形式返回
• 是否改变原数组：不改变

使用方法：arr.slice(n,m)

var arr=[1,2,3,4,5];
var res=arr.slice(1,3);
console.log(res)==>[2,3]
console.log(arr)==>[1,2,3,4,5];

arr.slice(0): m不写是查找至末尾，相当于数组克隆，参数0可以不写

思考：1.如果n/m为负数会怎样，如果n>m会怎样，如果是小数会怎样，如果是非有效数字会怎样，如果m或者n的值比最大索引大会怎样？

• 1、如果n/m为负数会怎样？

参数	描述
start	要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end	紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

• 2、n>m：会返回空数组；
• 3、n,m如果是小数：会只取小数点前的整数，无论小数点后数字是几都直接省略；

let arr = [1,8,7,3,6,4]
arr.slice(1.3,4.2);//==> [8, 7, 3]
arr.slice(1.6,4.9);//==>[8, 7, 3]
arr.slice(1,4);//==>[8, 7, 3]

• 4、如果是非有效数字：会先基于Number转换为数字，在进行截取

let ary = [1,8,7,3,6,4]

undefined
arr.slice("sss","sss");//==> []
arr.slice("1","3");//==> [8, 7]
arr.slice(false,true);//==> [1]
arr.slice([],[4]);//==>[1, 8, 7, 3]
arr.slice({},{a:b});//==>Uncaught ReferenceError: b is not defined
arr.slice(NaN,2);//==> [1, 8]

• 5、如果m或者n的值比最大索引大会怎样:当n大于索引时，返回值为空数组；当n小于索引，m大于索引时，会返回从索引n开始直到数组末尾项；

arr.slice(8,3);//==> []
arr.slice(1,8);//==>[8, 7, 3, 6, 4]

7. concat

• 定义：实现数组拼接（合并）
• @params：拼接的项（多个任意值）
• @return：拼接后的新数组
• 是否改变原数组：不改变

使用方法：arr.concat(拼接的内容)

let arr1=[10,20,30];
let arr2=[40,50,60];
let res=arr1.concat("培训"，arr2);
console.log(res);//==>[10,20,30,"培训",40,50,60]

• arr.concat()：相当于数组克隆（真实项目一般不用）
• arr.concat(‘1’)：传一个值也相当于给数组末尾追加项（真实项目一般不用）

三、把数组转换为字符串（此类都不改变原数组）

8. toString

• 定义：把数组转换为字符串
• @params：无
• @return：转换后的字符串，每一项用逗号分隔
• 是否改变原数组：不改变

使用方法：arr.toString()

let arr = [10,20,30];
let res = arr.toString();
console.log(res);//==>"10,20,30"
console.log([].toString());//==>""
console.log([12].toString());//==>"12"

9. join

• 定义：把数组转换为字符串
• @params：按指定的分隔符连接
• @return：转换后的字符串
• 是否改变新数组：不改变

使用方法：arr.join(‘指定分割符’)

let arr = [10,20,30];
var res=arr.join("-");===>"10-20-30"

四、检测数组中是否包含某一项（该类都不改变原数组）

10. indexOf

• 定义：检测当前项在数组中第一次出现位置的索引值
• @params：要检索的这一项内容
• @return：这一项出现的位置索引值（数字），如果数组中没有这一项，返回的结果是-1
• 是否改变原数组：不改变

使用方法：arr.indexOf(检索的项)；

let arr = [10,20,30,10,20,30];
console.log(arr.indexOf(20));//==>1

• 想验证ARR中是否包含“培训”

if（arr.indexOf("培训")===-1）{//不包含}

//也可以直接使用ES6新提供的includes方法判断(不兼容)
if（arr.includes("培训")）{//包含:如果存在返回的是TRUE}

• 注意：在IE6-8中不兼容

11. lastIndexOf

• 定义：检测当前项在数组中最后一次出现位置的索引值
• 其余内容通indexOf相同

12. includes

• 定义：检测当前数组是否包含某项
• @params:要检索的这一项内容
• @return:布尔，true 包含，false 代表不包含
• 是否改变原数组：不改变

使用方法：arr.includes(检索的项)

var ary=[1,2,3]
ary.includes(1);===>true

• 注意：在IE6-8中不兼容

五、排序或排列(该类均改变原数组)

13. reverse

• 定义：把数组倒过来排列
• @params：无
• @return：排列后的新数组
• 是否改变原数组：改变

使用方法：arr.reverse()

var arr=[1,2,3,4,5];
var res=arr.reverse();==>[5,4,3,2,1];
console.log(res,arr);===>[5,4,3,2,1];

14. sort

• 定义：把数组按大小顺序排列
• @params：可以没有，也可以是函数
• @return：排好序后的数组
• 是否改变原数组：改变

使用方法：arr.sort()：SORT方法中如果不传递参数，是无法处理10以上数字排序的（它默认按照每一项第一个字符来排，不是我们想要的效果）

• 想要实现多位数正常排序，需要给SORT传递一个函数，函数中返回a-b实现升序，返回b-a实现降序：
• arr.sort(function(a,b){return a-b;})；
• 可用箭头函数表示：arr.sort((a,b) => a-b);

【升序】

var arr=[11,12,1,2,3];
arr.sort(function(a,b){
    return a-b;
});

【降序】

var arr=[11,12,1,2,3];
arr.sort(function(a,b){
    return b-a;
});

六、遍历和映射（此类均不改变原数组）

15. forEach

• 定义：遍历数组中的每一项内容
• @params：回调函数
• @return：无/undefined
• 是否改变原数组：不改变

使用方法：arr.forEach(function(item,index){ alert(item);})

var arr=[2,1,3,5,6,7,8,2];
var res=arr.forEach(function(item,index){
    alert(item);
})
console,log(res)

• arr.forEach((item,index)=>{console.log(‘索引：’+index+‘内容：’+item)；})

arr.forEach((item,index)=>{
//数组中有多少项，函数就会被默认执行多少次
//每一次执行函数：item是数组中当前要操作的这一项，index是当前项的索引
console.log('索引：'+index+'内容：'+item)；
})

• 基于原生JS中的循环实现:for（let i = 0；i<arr.length;i++）{console.log(‘索引：’+i+‘内容：’+arr[i]);}

for（let i = 0；i<arr.length;i++）{
//i:当前循环这一项的索引
//ary[i]:根据索引获取循环的一项
console.log('索引：'+i+'内容：'+arr[i]);
}

16. map

• 定义：数组映射
• @params：回调函数
• @return：映射后的新数组
• 是否改变原数组：不改变

使用方法：arr.map(function(item,index){ return “真棒”;})

var arr=[2,1,3,4]
var res=arr.map(function(item,index){
    return "你真棒"
})
["你真棒"，"你真棒"，"你真棒"，"你真棒"]