数组操作常用的方法

发表于 | 分类于

在javascript当中，主要操作的对象可以简单的理解为是字符串，数组和键值对，因此数组常用的操作方法和属性需熟悉掌握。
length 属性动态获取数组长度。//任何数组都有此属性，当数组为空的时候，其length的值为0。
join() 将一个数组转成字符串。返回一个字符串。经常和split配合使用，用于数组和字符串之间的转化。
reverse() 将数组中各元素颠倒顺序。通过此方法也可以实现数组中元素的倒序。
shift() 从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

pop() 从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
unshift() 将一个或多个元素添加到数组的开头，并返回新数组的长度。
push() 往数组结尾添加一个或多个数组元素，长度要改变。
concat( ) 连接数组，返回的是一个新数组。它连接的如果是数组的话，只能是平铺数组，如果是二维的数组，不能展开添加，如需展开，必须结合apply使用。
slice( ) 返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
sort( ) 对数组元素进行排序，默认排序顺序是根据字符串Unicode码点。
splice( ) 插入、删除或替换数组的元素,由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
toLocaleString( ) 把数组转换成局部字符串。
toString( ) 将数组转换成一个字符串。
forEach() 将数组转换成一个字符串。
every() 测试数组的所有元素是否都通过了指定函数的测试。
some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
map() 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

通过简单的demo来验证或者取代以上的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
join() 
语法: 1. str = arr.join() // 默认是",";
      2. str = arr.join("") // 空格符===空字符串""; 
      3. str = arr.join(separate) // 分隔符
var arr = ['I', 'love', 'China'] ;
arr.join() //return I,love,China
arr.join(",") //return I,love,China
arr.join("") //return IloveChina
arr.join("-")//return I-love-China
join()和split()结合使用的demo
var str = 'getElementById';//转化为get-element-by-id
    str = str.split('');//使用split方法来切割字符串，并转化为数组，
    var newstr = str.map(function (v) {
        if (v.toUpperCase() == v) {
            return "-" + v.toLowerCase();
        } else {
            return v;
        }
    }).join('')//转化为需求了
注意：如果数组为空，通过join()分割后，均返回为一个空字符串；关于字符串之间的转换，经常和split()方法结合使用。
1
2
3
4
5
6
7
8
reverse() 
语法:  arr.reverse() //无需传参
var arr = [1, 2, 3, 4, 5, 6, 7];
arr.reverse()  //return [7, 6, 5, 4, 3, 2, 1]
var array = [];
for (var i = arr.length - 1; i >= 0; i--) {
    array[array.length] = arr[i];
}   //此方法获得的结果和reverse()方法相同。
1
2
3
4
5
6
7
shift() 
语法: 1. arr.shift() 
var arr = [1, 2, 3] ;
arr.shift()  //return 1;同时arr输出为[2, 3]
[].shift()  // return undefinded
注意：1. shift 方法并不局限于数组：该方法亦可通过 call 或 apply 作用于对象上。对于不包含 length 属性的对象，将添加一个值为 0 的 length 属性。
     2. shift 方法移除索引为 0 的元素(即第一个元素)，并返回被移除的元素，其他元素的索引值随之减 1。如果length值 (长度为 0，则返回 undefined。
1
2
3
4
5
6
pop() 
语法:  arr.pop() //无需传参
var arr = [1, 2, 3, 4, 5, 6, 7];
arr.pop() //return 7; 同时arr变成为[1, 2, 3, 4, 5, 6];
[].pop() //return undefinded;
注意：空数组上调用 pop()，它返回  undefined。
1
2
3
4
5
6
7
unshift() 
语法:  arr.unshift(element1, ..., elementN)
var arr = [1, 2, 3, 4, 5, 6, 7];
arr.unshift(0) //return 8; 同时arr变成为[0, 1, 2, 3, 4, 5, 6, 7];
注意: 1. 当一个对象调用该方法时，返回其 length 属性值。
      2. unshift 方法会在调用它的类数组（array-like）对象的开始位置插入给定的参数。
      3. unshift 特意被设计成具有通用性；这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。
1
2
3
4
5
6
7
8
9
push()
语法:  arr.push(element1, ..., elementN)
var arr = [1, 2, 3];
arr.push(4, 5) //return 5; 同时arr变成为[ 1, 2, 3, 4, 5];
var arr = [1, 2, 3]; 
var array = [4, 5, 6];
arr.push.apply(arr,array)  //return 6;同时arr的为[1, 3, 5, 2, 4, 6];
注意: 1. 当一个对象调用该方法时，返回其 length 属性值。
      2. push 方法有意具有通用性。合并数组的时候，该方法和 call() 或 apply()上下文一起使用时，可进行逐一的添加。
1
2
3
4
5
6
concat()
语法:  var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
var arr = ['a','b','c'];
var array = ['d','e','f'];
arr.concat(array) //return ["a", "b", "c", "d", "e", "f"]; 同时arr不变为['a','b','c'];
注意: 连接一个或多个数组（值）将不会改变原本的数组/值。进一步说，任何对新数组的操作都不会对原有的数组造成影响（仅当该元素不是对象的引用时），反之亦然。
1
2
3
4
5
6
7
slice()
语法: 1. arr.slice()
      2. arr.slice(begin)
      3. arr.slice(begin,end)
var arr = ['one', 'two', 'three', 'four', 'five', 'six'];
arr.slice(1, 3) //return ["two", "three"];同时原arr数组不变["one", "two", "three", "four", "five", "six"];
注意: 获取的元素不包括end。
1
2
3
4
5
6
7
8
9
sort()
语法: 1. arr.sort() 
      2. arr.sort(compareFunction)
var arr = ['parent', 'father', 'mother', 'aunt'];
arr.sort() //return ["aunt", "father", "mother", "parent"];
var array = [1, 23, 4, 85, 9]
array.sort() //[1, 23, 4, 85, 9]
array.sort(function(a,b){return a-b}) //[1, 4, 9, 23, 85]
注意: 当不传参数时，会按照默认排序顺序是根据字符串Unicode码点，如果数字进行排序的时候，必须传入参数，才能按照数字的大小进行排序。
1
2
3
4
5
6
7
8
splice()
语法: 1. array.splice(start) 
      2. array.splice(start, deleteCount)
      3. array.splice(start, deleteCount, item1, item2, ...)
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum';myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）;myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]
注意: splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
1
2
3
4
5
6
7
toLocaleString( )
语法: 1. arr.toLocaleString();
var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString();   //return "1,337,2016/8/8 下午9:58:12,foo"
注意: toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。
1
2
3
4
toString( )
语法: 1. arr.toString()
var myArr = ['I', 'Love', 'China'];
myArr.toString() //return "I,Love,China"
1
2
3
4
5
6
7
8
9
forEach( )
语法: array.forEach(callback(currentValue, index, array){
         //do something
      }, this)
var a = ['a', 'b', 'c'];
a.forEach(function(element) {
console.log(element); //return a   b   c
});
注意：没有办法中止或者跳出 forEach 循环，除了抛出一个异常。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。
1
2
3
4
5
6
7
8
every()
语法: arr.every(callback[, thisArg])
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is false
var passed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true
注意：every不会改变原数组。
1
2
3
4
5
6
7
8
some()
    语法: arr.some(callback[, thisArg])
    function isBigEnough(element, index, array) {
    return (element >= 10);
    }
    var passed = [12, 5, 8, 130, 44].some(isBigEnough);// passed is true
    passed = [12, 54, 18, 130, 44].some(isBigEnough);// passed is true
    注意：some不会改变原数组。
1
2
3
4
5
6
7
8
9
10
map()
    语法: let array = arr.map(function callback(currentValue, index, array) { 
            // Return element for new_array 
          }[, thisArg])
          var numbers = [1, 5, 10, 15];
          var doubles = numbers.map((x) => {
              return x * 2;
           });
           console.log(doubles) // return [2, 10, 20, 30]
 注意：不改变原数组，成为新的数组。
1
2
3
4
5
6
7
8
9
   filter()
   语法: var new_array = arr.filter(callback[, thisArg])
         function isBigEnough(element) {
           return element >= 10;
         }
         var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
           // filtered is [12, 130, 44]
         console.log(doubles) // return [2, 10, 20, 30]
注意：filter不会改变原数组。