js基本数据类型-Array (数组)常用方法

608 阅读5分钟

日常开发撸代码,当然少不了各种各样的数组操作啦。这里给大家分享数组,即Array 类型数据的常用且实用的方法,随看随用,帮助记忆~

一、 创建数组的基本方式(两种)

1.使用 Array 构造函数

 var colors = new Array();
 var colors = new Array(20); //创建长度为20的数组
 var colors = new Array('red','blue','green'); //创建包含了red,blue,green 3个字符串的数组

2.数组字面量表示法

var colors = ["red","blue","green"];//创建包含了red,blue,green 3个字符串的数组
var colors = [];//创建空数组

二、检测数组的方法(四种)

判断一个js变量是否是数组,我们有下面四种方法。假设现在有一个变量arr:

1.arr instanceof Array

如果 arr instanceof Array 返回true,则arr是数组

2.arr.constructor == Array

如果 arr.constructor == Array 返回true,则arr是数组

3.Object.prototype.toString.call(arr) =='[object Array]’

如果 Object.prototype.toString.call(arr) =='[object Array]’ 返回true,则arr是数组

4.Array.isArray(arr)

如果 Array.isArray(arr) 返回true,则arr是数组

三、遍历数组的方法

1.for循环

var colors = ['red','blue','green'];
for(var i = 0; i < colors.length; i++){
        console.log(colors[i]);
        // red
        // blue
        // green
    }

2.for in循环

var colors = ['red','blue','green'];
for(var i in colors){
        console.log(colors[i]);
        // red
        // blue
        // green
    }

3.forEach循环

这个方法没有返回值, 本质上与使用 for 循环迭代数组一样

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
//执行某些操作
});

4.map循环

有返回值,可以return想要的东西出来

var arr = [1,2,3,4,5]; 
var res = arr.map(function(item,index,ary){ 
    return item*10; 
}) 
console.log(res); //-->[10,20,30,40,50];  原数组拷贝了一份,并进行了修改
console.log(arr); //-->[1,2,3,4,5];  原数组并未发生变化

5.every遍历

every():对数组中的每一项运行给定函数,如果该函数对(每一项)都返回 true,则返回 true

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
    return (item > 2);
});
console.log(everyResult); // false

6.some遍历

some():对数组中的每一项运行给定函数,如果该函数对(任意一项)返回 true,则返回 true

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.some(function(item, index, array){
    return (item > 2);
});
console.log(everyResult); // true

7.filter遍历

filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
console.log(filterResult); // [3,4,5,4,3]

8.reduce

reduce()方法从数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。reduce接受一个函数,函数有四个参数,分别是:上一次的值,当前值,当前值的索引,数组。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur;
});
console.log(sum); // 15

reduce()还有第二个参数,我们可以把这个参数作为第一次调用callback时的第一个参数,即initialValue

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur;
},5);
console.log(sum); // 20

9.reduceRight

reduceRight()则从数组的最后一项开始,向前遍历到第一项,迭代数组的所有项,然后构建一个最终返回的值。同样地,reduceRight接受一个函数,函数有四个参数,分别是:上一次的值,当前值,当前值的索引,数组。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
});
console.log(sum); // 15

类似地,reduceRight同时也可以接收第二个参数,如果调用 reduceRight() 时提供了 initialValue 参数,则 prev 等于 initialValue,cur等于数组中的最后一个值。如果没有提供 initialValue 参数,则 prev等于数组最后一个值, cur等于数组中倒数第二个值。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
},5);
console.log(sum); // 20

10.find

find()方法返回数组中符合测试函数条件的第一个元素,否则返回undefined

var data = [
    {id:1 ,name:"a1"},
    {id:2, name:"a2"},
    {id:3 ,name:"a3"}
];
//找到id=2的项
data.find((item,index,arr)=>item.id ===2);// {id: 2, name: "a2"}

11.findIndex

与find不同,findIndex()返回数组符合条件元素的索引值

var data = [
    {id:1 ,name:"a1"},
    {id:2, name:"a2"},
    {id:3 ,name:"a3"}
];
//找到id=2的项的索引值
data.findIndex((item,index,arr)=>item.id ===2);// 1

12.keys,values,entries

ES6 提供三个新的方法——entries(),keys()和values()用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

四、常用操作方法

1. 转换方法 toString(),valueOf()

调用数组的 toString()方法,会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

var colors = ["red","blue","green"];
colors.toString() //"red,blue,green"

而调用 valueOf()返回的还是数组。

var colors = ["red","blue","green"];
colors.valueOf() //(3) ["red", "blue", "green"]

2. 栈方法 push(),pop()

var colors = ["red","blue","green"];

//推入一项“yellow” 返回数组的长度
colors.push("yellow") // 4

//取得数组最后一项 yellow 并移除  返回移除项
colors.pop() // yellow

3. 队列方法 shift(),unshift()

var colors = ["red","blue","green"];
//向数组的尾部 删除并返回数组的第一个元素
colors.shift();// "red"

//向数组的开头 添加一个或更多元素,并返回新的长度
colors.unshift(); //2
colors.unshift("yellow"); // 3

console.log(colors);//(3) ["yellow", "blue", "green"]

4.重排序方法 reverse(),sort()

var colors = ["red","blue","green"];

//1.反转数组的元素顺序
colors.reverse();//(3) ["green", "blue", "red"]

//2.对数组的元素按照一定的方法进行排序
function f(a,b){
    //按照元素的长度,从小到大进行排序
    return a.length - b.length;
}
colors.sort(f);//(3) ["red", "blue", "green"]

5. 操作数组的方法 concat(),slice(),splice()

var colors1 = ["red","blue","green"];
var colors2 = ["pink"];

//1.连接两个或更多的数组,并返回结果
var colors3 = colors1.concat(colos2);
console.log(colors3); //(4) ["red", "blue", "green", "pink"]

//2. 截取数组的的一部分,并返回一个新数组
var colors4 = ["red","blue","green","pink","black"];
//(1)截取第一个
//(-2)截取从后面数第二个开始,后面所有部分
//(1,2)从第一个截取数组,到2,但不包括2

colors4.slice(1); //(4) ["blue", "green", "pink", "black"]
colors4.slice(-2); //(2) ["pink", "black"]
colors4.slice(1,2); //["blue"]

//3.从数组中添加或删除元素
var colors5 = ["red","blue","green","pink","black","yellow"];
//从第二个开始,删除一个,并插入一个"orange" 返回删除的项组成都数组
colors5.splice(2,1,"orange"); //["green"]
console.log(colors5); //(6) ["red", "blue", "orange", "pink", "black", "yellow"]

6.位置方法 indexOf(),lastIndexOf()

var colors5 = ["red","blue","green","pink","black","yellow"];
//搜索数组中的元素,并返回它所在的位置
colors5.indexOf("blue");//1

//返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索
var s= [1,2,1,1];
s.lastIndexOf(1);//3