Javascript数组操作

Allenyhy

2017-11-04

关注关注

Javascript数组操作

1.1颠倒数组元素顺序

1.1.1reverse()方法

语法：

arrayObject.reverse()

注意：该方法会改变原来的数组，而不会创建新的数组。

实例：

var myArr = ["1","2","3"];
document.write(myArr + "<br />"); //运行结果：1,2,3
document.write(myArr.reverse()); //运行结果：3,2,1

1.2判断某元素是否在数组内

1.2.1indexOf方法

功能：返回给定元素在数组中的第一个索引值，否则返回-1。

语法：

array.indexOf(item[,index]);

item，要查找的元素。

index，开始查找指定元素的索引值，默认值为0(即在整个数组中查找指定元素)。

注意：

index大于或等于数组长度，则停止查找并返回-1。

index是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。

兼容性：不兼容IE6～8。

实例：

var arr = new Array(1, 2, 3);  
var backVal=arr.indexOf(2);
console.log(backVal); //运行结果：1

1.2.2自定义函数

function contains(arr, obj) {
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) { return true; }
    }  
    return false;
}
var arr = new Array(1, 2, 3);  
contains(arr, 2); //返回true
contains(arr, 4); //返回false

1.2.3给Array增加一个函数

Array.prototype.contains = function (obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) { return true; }
    }
    return false;
}
[1, 2, 3].contains(2);  //返回true
[1, 2, 3].contains('2');  //返回false

注意：如果是用JQuery的话，可以用$.inArray(value,array);函数。

1.3删除数组中的某一值

1.3.1delete方法

功能：只是将被删除的元素变成了undefined，而其他元素的键值还是不变。

兼容性：IE4及以上版本都支持。

实例：

var arr = ['a','b','c','d'];
delete arr[1];
for(index in arr){
    console.log(arr[index]);
}
运行结果：a c d
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
运行结果：a undefined c d

1.3.2splice方法

功能：删除或者替换数组中的某一值。删除某一值后数组的数组的长度、索引也会相应地改变。

语法：

splice(index,len[,item]);

index：数组开始下标。

len：替换/删除的长度。

item：替换的值。

兼容性：IE5.5及以上版本都支持。

实例一：删除

var arr = ['a','b','c','d'];
arr.splice(1,1);
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
运行结果：a c d

实例二：替换

var arr = ['a','b','c','d'];
arr.splice(1,1,1);
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
运行结果：a 1 c d

实例二：替换及添加

var arr = ['a','b','c','d'];
arr.splice(1,1,1,2);
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
运行结果：a 1 2 c d

1.4遍历数组

1.4.1forEach()方法

功能：遍历数组，使数组的每一项都执行一次给定的函数。

语法：

array.forEach(callback[,thisArg]);

callback：在数组每一项上执行的函数，接收三个参数：currentValue（当前项的值）、index（当前项的索引）和array（数组本身）。

thisArg：可选参数。用来当作callback函数内this值的对象，即callback函数的执行上下文。

兼容性：不兼容IE6～8。

1.4.2map()方法

功能：遍历数组，返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组，而保持原数组不变。

语法：

array.map(callback[,thisArg]);

callback：在数组每一项上执行的函数，接收三个参数：currentValue（当前项的值）、index（当前项的索引）和array（数组本身）。

thisArg：可选参数。用来当作callback函数内this的值的对象，即callback函数的执行上下文。

兼容性：不兼容IE6～8。

1.4.3forEach()和map()比较

共同点：

1、都是循环遍历数组中的每一项。

2、forEach()和map()里面每一次执行匿名函数都支持3个参数：数组中的当前项item，当前项的索引index，原始数组arr。

3、匿名函数中的this都是指Window。

4、只能遍历数组。

5、兼容性相同，IE8及以下版本不支持。

不同点：

1、forEach()没有返回值，而map()有返回值，可以return出来。

实例：

var arr_0 = [12,23,24,42,1];
var res_0 = arr_0.forEach(function (item,index, arr) {
    arr [index] = item*10;
})
console.log(res_0); //执行结果：undefined
console.log(arr_0); //执行结果：[120, 230, 240, 420, 10]，对原来的数组产生改变
var arr_1 = [12,23,24,42,1];
var res_1 = arr_1.map(function (item,index, arr) {
    return item*10;
})
console.log(res_1); //执行结果：[120,230,240,420,10]
console.log(arr_1); //执行结果：[12,23,24,42,1]，原来的数组不变

1.4.4filter()方法

功能：遍历数组，返回所有通过指定函数测试的元素创建的新数组。

语法：

arr.filter(callback[,thisArg]);

callback：在数组每一项上执行的函数，接收三个参数：currentValue（当前项的值）、index（当前项的索引）和array（数组本身）。

thisArg：可选参数。用来当作callback函数内this的值的对象，即callback函数的执行上下文。

兼容性：不兼容IE6～8。

实例：

var arr = ["关羽","张翼德","赵子龙","黄忠","马超"];
var res = arr.filter(function(ele,index,array){
    if(ele.length>2){ return true; }
    return false;
});
console.log(arr); //执行结果：["关羽", "张翼德", "赵子龙", "黄忠", "马超"]
console.log(res); //执行结果：["张翼德", "赵子龙"]

注意：return会结束定义的function函数，但filter()方法内部有一个类似for循环的句式对元素进行依次执行function函数。

1.4.5some()方法

功能：遍历数组，数组中的每一个元素执行一次指定函数，直到找到一个使得指定函数返回一个true的值。如果找到则返回true，否则返回false。

语法：

arr.some(callback[,thisArg]);

callback：在数组每一项上执行的函数，接收三个参数：currentValue（当前项的值）、index（当前项的索引）和array（数组本身）。

thisArg：可选参数。用来当作callback函数内this的值的对象，即callback函数的执行上下文。

兼容性：不兼容IE6～8。

实例：

var arr = [ 1, 2, 3, 4, 5, 6 ];  
var res=arr.some(function(item,index,array){
    console.log(item);
    return item > 3;
});
//执行结果：1 2 3 4
console.log(arr); //执行结果：[1, 2, 3, 4, 5, 6]，原数组不变
console.log(res); //执行结果：true

1.4.6every()方法

功能：遍历数组，数组中的每个元素执行一次指定函数，只有所有元素都在指定函数中都返回true，则返回true，否则返回false。

语法：

arr.every(callback[,thisArg]);

callback：在数组每一项上执行的函数，接收三个参数：currentValue（当前项的值）、index（当前项的索引）和array（数组本身）。

thisArg：可选参数。用来当作callback函数内this的值的对象，即callback函数的执行上下文。

兼容性：不兼容IE6～8。

实例：

var arr = [ 6, 5, 4, 3, 2, 1 ];
var res = arr.every( function( item, index, array ){
    console.log(item);
    return item > 3;
});
//执行结果：6 5 4 3
console.log(arr); //执行结果：[6, 5, 4, 3, 2, 1]，原数组不变
console.log(res); //执行结果：false

1.5数组的拼接

1.5.1concat方法

功能：用于连接两个或多个数组。

语法：

arrayObject.concat(arrayX,arrayX,......,arrayX);

arrayX：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

注意：该方法返回一个新的数组。该数组是通过把所有arrayX参数添加到arrayObject中生成的。

实例一：拼接数组元素

var arr = [1,2,3];
var newArr=arr.concat(4,5);
console.log(arr); //执行结果：[1, 2, 3]，原数组不变
console.log(newArr); //执行结果：[1, 2, 3, 4, 5]

实例二：拼接数组

var arr_0 = ["George","John","Thomas"];
var arr_1 = ["James","Adrew", "Martin"];
var newArr=arr_0.concat(arr_1);
console.log(arr_0); //执行结果：["George", "John", "Thomas"]，原数组不变
console.log(arr_1); //执行结果：["James", "Adrew", "Martin"]，原数组不变
console.log(newArr); //执行结果：["George", "John", "Thomas", "James", "Adrew", "Martin"]

1.6数组的截取

1.6.1slice方法

功能：从已有的数组中返回选定的元素。

语法：

arrayObject.slice(start,end);

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。

end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从start到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

注意：该方法返回一个新的数组，包含从start到end（不包括该元素）的arrayObject中的元素。

实例：

var arr = ["George","John","Thomas"];
var newArr=arr.slice(1,2);
console.log(arr); //执行结果：["George", "John", "Thomas"]，原数组不变
console.log(newArr); //执行结果：["John"]

jquery数组数组 arr var