JS的 array方法总结

2018-01-06 本文已影响0人那年点夏

数组创建

javascript中创建数组的方式有两种：

第一种是 使用Array构造函数:

var arr1 = new Array();//创建一个空数组
var arr2 = new Array(20);//创建一个包含20项的数组
var arr3 = new Array("hello","world");//创建一个包含2个字符串的数组

第二种是 使用数组字面量表示法

var arr4 = [];//创建一个空数组
var arr5 = [20];//创建一个包含20项的数组
var arr6 = ["hello","world"];//创建一个包含2个字符串的数组

javascript中数组的length属性是可以修改的：

var arr = ["hello","world","hi"];//创建一个包含3个字符串的数组
arr[arr.length] = "apple";//在下标为3处（也就是数组尾部）添加一项“apple”
arr.length=arr.length-1;//将数组的最后一项删除

判断一个对象是不是数组对象：

在ECMAScript5之前，我们可以通过 instanceof Array 去判断；

这个操作符和JavaScript中面向对象有点关系，了解这个就先得了解JavaScript中的面向对象。因为这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。

在ECMAScript5中，新增了Array.isArray()方法。

这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。
针对ES5新增的方法浏览器支持情况：
Opera 11+
Firefox 3.6+
Safari 5+
Chrome 8+
Internet Explorer 9+

数组方法

数组的方法有数组原型方法，也有从object对象继承来的方法
接下来是数组的原型方法：

join()

join( separator )：将数组元素组成一个字符串，最多只有一个参数separator即分隔符，没有参数的话默认用逗号为分隔符；
原数组不变；

var arr = [1,2,3];
console.log(arr.join());//1,2,3
console.log(arr.join("-"));//1-2-3
console.log(arr);//[1,2,3](原数组不变)

通过join()方法可以实现重复字符串，只需要传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：

function repeatString(str,n){
   return new Array(n+1).join(str);
}
console.log(repeatString("abc",3));//abcabcabc
console.log(repeatString("Hi",5));//HiHiHiHiHi

push()和pop()

push()：可以传入任意个数的参数，将参数逐个添加到数组末尾，返回值是修改后的数组的长度；
pop()：删除数组末尾最后一项，减少数组的length值，返回值是被删除的值；

var arr = ["koko","lulu","hehe"];
var count = arr.push("jack","sam");
console.log(count);// 5
console.log(arr);//["koko","lulu","hehe","jack","sam"]
var item = arr.pop();
console.log(item);//sam
console.log(arr);//["koko","lulu","hehe","jack"]

shift()和unshift()

unshift()：可以传入任意个数的参数，将参数逐个添加到数组的开头，返回值是修改后的数组的长度；
shift()：删除数组第一项，减少数组的length值，返回值是被删除的值，如果数组为空，则返回undefined；

var arr = ["koko","lulu","hehe"];
var count = arr.unshift("jack","sam");
console.log(count);// 5
console.log(arr);//["jack","sam","koko","lulu","hehe"]
var item = arr.shift();
console.log(item);//jack
console.log(arr);//["sam","koko","lulu","hehe"]

sort()

默认按升序排列数组项，即从小到大排序，但是只作用于字符串，也就是按照 字符编码的顺序进行排序；对于数字也是要先默认转换成字符串，再排序；
原数组改变；

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort());// ["a", "b", "c", "d"]
arr2 = [22,33,11,66,5];
console.log(arr2.sort());//[11,22,33,5,66];
console.log(arr2);//[11,22,33,5,66](原数组被改变)

参数可选，若有，则必须是函数，用来规定排序顺序；
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
用sort()方法实现按照数值的大小对数字进行排序；

function sortNumber(a,b){
  return a-b
}
arr2 = [22,33,11,66,5];
console.log(arr2.sort(sortNumber));//[5,11,22,33,66]

这里可以看出，如果按照升序排列，那么方法为：

function sortNumber(a,b){
  return a-b
}

如果按照降序排列：

function sortNumber(a,b){
  return b-a
}

如果想根据 数组对象中的某个属性值 进行排序呢？

sort 方法接收一个函数作为参数，这里嵌套一层函数用来接收对象的属性名，其他部分代码与正常使用sort方法相同；
//下面这种方法比较局限，已经把升序还是降序写死了；

var arr = [
  { name:'cj',age:18 },
  { name:'wzm',age:20 },
  { name:'dudu',age:8 }
];
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
  }
}
console.log(arr.sort(compare('age')));

结果如图所示：

image.png

那如何用传参的方式，根据参数不同，来确定是升序排列，还是降序排列？

function sortBy(property,rev){
    if(rev == undefined){
        rev = 1; //第二个参数没有传递，默认升序排列
    }else{
        rev = (rev) ? 1 : -1;
    }
    return function(a,b){
        a = a[property];
        b = b[property];
        if(a<b){
            return rev * -1
        }
        if(a>b){
            return rev * 1
        }
        return 0;
    }
}
var newArray=[
    { name:'cj',age:18 },
    { name:'wzm',age:20 },
    { name:'dudu',age:8 }
];
console.log(newArray.sort(sortBy('age',false)));

结果如图所示：

image.png

reverse()

reverse()：反转数组项的顺序；
原数组改变；

var arr = [22,33,11,66,5];
console.log(arr.reverse()); //[5,66,11,33,22]
console.log(arr); //[5,66,11,33,22]（原数组改变）

concat()

concat()：将参数添加到数组的末尾；
原理：concat()方法会先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
原数组不变；

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1,3,5,7,9,11,13]
console.log(arr); //[1,3,5,7]

从上面测试的结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是一维数组，则将此一维数组中的各个项添加到数组中。
如果传入的是一个二维数组呢？

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1,3,5,7,9,Array[2]]
console.log(arrCopy2[5]); //[11,13]

上述代码中，arrCopy2数组的第五项是一个包含两项的数组，也就是说，concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中的有些项是数组，那么也会把这一数组当作一项，添加到arrCopy2中。

slice()

slice()：从原数组中指定开始下标到结束下标之间的项组成的新数组；
slice()方法的参数有一个或者两个，即表示返回项的起始和结束位置。

只有一个参数时，slice()方法返回的是从该参数指定位置开始到当前数组末尾的所有项；
如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项；

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1,3,5,7,9,11]（原数组不变）
console.log(arrCopy); //[3,5,7,9,11]
console.log(arrCopy2); //[3,5,7]
console.log(arrCopy3); //[3,5,7]
console.log(arrCopy4); //[5,7,9]

arrCopy 只设置一个参数1，也就是起始下标为1，所以返回的数组为下标为1（包括1）开始到数组最后；
arrCopy2设置了两个参数（1,4），返回起始下标（包括1）开始到终止下标（不包括4）的子数组；
arrCopy3设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组的长度的值（6）来替换该位置的数，因此是从1到4（不包括）的子数组；
arrCopy4中两个参数都是负数，所以都加上数组的长度6转换成正数，因此相当于slice(2,5)；

splice()

splice()：很强大的数组的方法，它有很多用法，可以实现删除、插入、替换；
删除：需要2个参数，第一个参数表示要删除的第一项的位置（索引），第二个参数表示要删除的项数。例如：splice(0,2)表示删除数组中的前两项。
插入：可以向指定位置插入任意数量的值，需要提供3种参数：起始位置、0（要删除的项数）、要插入的值（可以多个）。例如：splice(2,0,4,6)表示从数组的第二个值后面插入4和6。
替换：将数组中的任意一个或几个值替换成其他值，需要提供3种参数：起始位置、0（要删除的项数）、要插入的值（可以多个）。例如：splice(2,1,4,6)表示删除第二个值后面的一个数（也就是第三个数），将第三数替换成4和6。
splice()方法：始终都会返回一个数组，该数组的值是从原数组中删除的值，如果没有删除的项，则返回一个空数组。
原数组改变；

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5,7,9,11]
console.log(arrRemoved); //[1,3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); //[5,7,4,6,9,11]
console.log(arrRemoved2); //[]
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); //[5,2,4,4,6,9,11]
console.log(arrRemoved2); //[7]

find()

find()方法返回函数中满足提供的测试函数的第一个元素的值。否则返回 undefined；
语法：arr.find(callback[,thisArg])
参数：
callback：在数组每一项上执行的函数，接收3个参数：
- element：当前遍历到的元素；
- index：当前遍历到的索引；
- array：数组本身；
thisArg：可选。指定 callback 的 this 参数；

function isBigEnough(element){
    return element >= 15;
}
[12,5,8,130,44].find(isBigEnough); //130

findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1；
语法：arr.findIndex(callback[,thisArg])
参数：
callback：在数组每一项上执行的函数，接收3个参数：
- element：当前遍历到的元素；
- index：当前遍历到的索引；
- array：数组本身；
thisArg：可选。指定 callback 的 this 参数；

function isBigEnough(element){
    return element >= 15;
}
[12,5,8,130,44].findIndex(isBigEnough); // 3

ES5新增的9个数组方法：

indexOf() 和 lastIndexOf()

indexOf()：接收2个参数：第一个参数表示要查找的项，第二个参数表示查找起点位置的索引。从数组开头（第二个参数）开始向后查找。返回的是要查找的项的索引值。
lastIndexOf()：接收2个参数：第一个参数表示要查找的项，第二个参数表示查找起点位置的索引。从数组末尾（第二个参数）开始向前查找。返回的是要查找的项的索引值（索引仍然是从左向右计算，注意不要弄混）。
没有找到的情况下返回 -1；
在比较第一个参数与数组中的每一项时，会使用全等操作符；

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

forEach()

forEach()：对数组进行循环遍历，并将元素传递给回调函数。
参数是函数参数（必需）：function(currentValue, index, arr)，数组中每个元素都要调用的函数。currentValue表示当前元素（必需）；index表示当前元素的索引值（可选）；arr表示当前元素所属的数组对象（可选）；
这个方法没有返回值（undefined）；
注意：forEach()对于空数组是不会执行回调函数的。

var arr = [1,2,3,4,5];
arr.forEach(function(x,index,a){
    console.log(x+'|'+index+'|'+(a===arr))
})
//输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

map()

map()：指“映射”，也就是原数组被“映射”成对应新数组；
参数为函数，和forEach()方法差不多，但是需要有返回值；
下面代码利用map方法实现数组中每个数求平方；

var arr = [1,2,3,4,5];
var arr2 = arr.map(function(item){
      return item*item;
});
console.log(arr2); //[1,4,9,16,25]

在实际使用的时候，我们可以利用map方法方便获得对象数组中的特定属性值们。例如：

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
var emails = users.map(function(user){
      return user.email;
});
console.log(emails);

结果如下：

image.png

Array.prototype扩展可以让IE6-IE8浏览器也支持map方法：

if(typeof Array.prototype.map != "function"){
    Array.prototype.map = function(fn,context){
          var arr = [];
          if(typeof fn === "function"){
                for(var k = 0,length = this.length;k<length;k++){
                      arr.push(fn.call(context,this[k],k,this));
                }
          }
          return arr;
    };
}

filter()

filter()：指“过滤”，也就是原数组被“过滤”成对应新数组；
参数为函数，和forEach()方法差不多，但是需要有返回值，返回值是满足过滤条件的数组；

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.filter(function(x,index){
      return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1,4,7,8,9,10]

every()

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

some()

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

reduce()

reduce() 方法接收一个函数 callback 作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。
语法：

array.reduce(callback[, initialValue])

reduce() 方法接收 callback 函数，而这个函数包含四个参数：

function callback(accmulator, currentValue, currentIndex, array) {}

accmulator：上一次调用回调返回的值，或者提供的初始值（initialValue）
currentValue：当前项
currentIndex：当前项的索引
array：调用reduce()方法的数组
而 initialValue 作为第一次调用 callback 函数的第一个参数

reduce() 方法为数组中的每一个元素依次执行回调函数 callback，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce() 的数组。
回调函数第一次执行时，accumulator 和 currentValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 accumulator 等于 initialValue ，并且 currentValue 等于数组中的第一个值；如果 initialValue 未被提供，那么 accumulator 等于数组中的第一个值，currentValue 等于数组中的第二个值

var arr = [0,1,2,3,4];
arr.reduce(function (accumulator, currentValue, currentIndex, array) {
    return accumulator+ currentValue;
}); // 10

reduceRight()

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

ar arr = [0,1,2,3,4];
arr.reduceRight(function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
}); // 10

JS的 array方法总结

数组创建

javascript中创建数组的方式有两种：

javascript中数组的length属性是可以修改的：

判断一个对象是不是数组对象：

数组方法

join()

push()和pop()

shift()和unshift()

sort()

reverse()

concat()

slice()

splice()

find()

findIndex()

ES5新增的9个数组方法：

indexOf() 和 lastIndexOf()

forEach()

map()

filter()

every()

some()

reduce()

reduceRight()

猜你喜欢

热点阅读

JS的 array方法 总结

数组创建

javascript中创建数组的方式有两种：

javascript中数组的length属性是可以修改的：

判断一个对象是不是数组对象：

数组方法

join()

push()和pop()

shift()和unshift()

sort()

reverse()

concat()

slice()

splice()

find()

findIndex()

ES5新增的9个数组方法：

indexOf() 和 lastIndexOf()

forEach()

map()

filter()

every()

some()

reduce()

reduceRight()

猜你喜欢

热点阅读

JS的 array方法总结