简单介绍一下javascript中数组常见方法的使用
- concat
通过合并（连接）现有数组来创建一个新数组，说明不会改变原数组；
var arr1 = ['1', '2', '3'];
var arr2 = ['a', 'b', 'c'];
var result = arr1.concat(arr2);
console.log("result:", result);
console.log("arr1:", arr1);
console.log("arr2:", arr2);
//注意concat后面可以多个参数，如：
var result1 = arr1.concat(arr2, "I", "II");
console.log("result1:", result1);
结果.png
- join
将所有数组元素结合为一个字符串，元素是通过指定的分隔符进行分隔的，默认使用','号分割，不改变原数组。
var arr1 = ['1', '2', '3'];
var arr2 = ['a', 'b', 'c'];
var result = arr1.concat(arr2);
var joinResultNoParams = result.join();
var joinResultParams = result.join('-');
console.log("joinResultNoParams:", joinResultNoParams);
console.log("joinResultParams:", joinResultParams);
结果.png
- push
在数组结尾处向数组添加一个新的元素，改变原数组，返回新数组的长度；
var arr = ['1', '2', '3'];
//push后可以添加多个参数，都会依次添加到数组后面
var result = arr.push('4');
console.log("arr:", arr);
console.log("result:", result);
结果.png
- pop
从数组中删除最后一个元素，改变原数组，返回“被删除”的元素；
var arr = ['1', '2', '3'];
var result = arr.pop();
console.log("arr:", arr);
console.log("result:", result);
结果.png
- shift
删除首个数组元素，并返回首个元素的值。改变原数组；
var arr = ['1', '2', '3'];
var result = arr.shift();
console.log("arr:", arr);
console.log("result:", result);
结果.png
- unshift
向数组的开头添加一个或更多元素，并返回新的长度。改变原数组；
var arr = ['1', '2', '3'];
var result = arr.unshift('10', '11');
console.log("arr:", arr);
console.log("result:", result);
结果.png
- slice
用数组的某个片段切出新数组，返回选定的元素（数组），不改变原数组；
参数说明
/**
* start:要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推
* end:紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置
*
* */
array.slice(start,end)
var arr = ['1', '2', '3', '4', '5'];
var result = arr.slice(0, 3);
console.log("arr:", arr);
console.log("result:", result);
image.png
- splice
用于添加或删除数组中的元素。改变原数组；
参数说明
/**
* index : 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
* howmany: 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
* item1,.....,itemX: 可选。要添加到数组的新元素
*
* return : 如果从 array 中删除了元素，则返回的是含有被删除的元素的数组。
* */
array.splice(index,howmany,item1,.....,itemX)
//1.删除元素 一个或者多个,如果第二个参数为0，那么等于没有删除
var arr = ['1', '2', '3', '4', '5'];
var result = arr.splice(0, 3);
console.log("删除元素 一个或者多个");
console.log("原来的数组:", arr);
console.log("返回的数组:", result);
//2.插入元素
var otherArr = ['1', '2', '3', '4', '5'];
var otherResult = otherArr.splice(1, 2, '6', '7');
console.log("插入元素 ");
console.log("原来的数组:", otherArr);
console.log("返回的数组:", otherResult);
这里分别解释一下：
-
删除元素，删除元素只需要两个参数；
arr.splice(0, 3);
第一个参数代表要从什么地方开始删除；
第二个参数代表，要删除的元素个数； -
插入元素，插入元素至少需要三个参数；
otherArr.splice(1, 2, '6', '7');
第一个参数代表从什么地方开始插入；
第二个参数代表删除几个元素；
后面的参数代表将第三个开始的参数全部插入；
- sort
按照 Unicode code 位置排序，默认升序，改变原数组；
var arr = [2, 3, 11, 5, 4];
arr.sort();
console.log("原来的数组:", arr);
结果.png
因为默认是通过Unicode code来进行排序，所以 11在2前面；
另外可以通过自己的条件来进行排序，在sort方法加入一个回到函数
var arr = [2, 3, 11, 5, 4];
arr.sort(function(a, b) {
return a - b;
});
console.log("原来的数组:", arr)
结果.png
上面的结果是升序排序，如果你想要的是降序，那么
return b - a;
即可。
如果数组的是对象元素，那么根据自己的条件进行判断即可。
解释一下返回值：
如果 a-b 小于 0 ，那么 a 会被排列到 b 之前；
如果 a-b 等于 0 ， 那么 a 和 b 的相对位置不变。
如果 a-b 大于 0 ， 那么 b 会被排列到 a 之前。
- reverse
用于颠倒数组中元素的顺序。返回的是颠倒后的数组，改变原数组。
var arr = [2, 3, 11, 5, 4];
arr.reverse();
console.log("原来的数组:", arr);
结果.png
- indexOf和lastIndexOf
都接受两个参数：查找的值、查找起始位置
不存在，返回 -1 ；
存在，返回位置。
indexOf 是从前往后查找， lastIndexOf 是从后往前查找。
var arr = [2, 3, 11, 5, 4];
console.log(arr.indexOf(3));
console.log(arr.indexOf(10));
console.log(arr.lastIndexOf(5));
console.log(arr.lastIndexOf(10));
image.png
- forEach
数组的每个元素执行一次提供的函数。不会改变原数组
返回值：undefined
语法：
arr.forEach(callback[, thisArg]);
参数说明：
/*
callback
为数组中每个元素执行的函数，该函数接收三个参数：
currentValue 数组中正在处理的当前元素。
index可选，数组中正在处理的当前元素的索引。
array可选，forEach() 方法正在操作的数组。
thisArg可选，可选参数。当执行回调函数时用作 this 的值(参考对象)。
*/
注意：没有办法中止或者跳出 forEach() 循环，除了抛出一个异常。
var arr = [2, 3, 11, 5, 4];
arr.forEach(function(value, index, array) {
console.log(value, index, array);
});
console.log("原来的数组:", arr);
结果.png
- every
对数组的每一项都运行给定的函数，每一项都返回 ture,则返回 true；返回一个布尔值，不改变原数组；
参数与forEach一样。
var arr = [2, 3, 11, 5, 4];
var result = arr.every(function(value, index, array) {
return value > 5;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
结果.png
- some
对数组的每一项都运行给定的函数，任意一项都返回 ture,则返回 true；返回一个布尔值，不改变原数组；
参数与forEach一样。
var arr = [2, 3, 11, 5, 4];
var result = arr.some(function(value, index, array) {
return value > 5;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
结果.png
- filter
对数组的每一项都运行给定的函数，返回 结果为 ture 的项组成的数组；返回一个过滤后的新数组，不改变原数组；
参数与forEach一样。
var arr = [2, 3, 11, 5, 4];
var result = arr.filter(function(value, index, array) {
return value > 5;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
结果.png
- map
对数组的每一项都运行给定的函数，返回每次函数调用的结果组成一个新数组；返回一个map后的新数组，不改变原数组；
参数与forEach一样。
var arr = [2, 3, 11, 5, 4];
var result = arr.map(function(value, index, array) {
return value * 2;
});
console.log("原来的数组:", arr);
console.log("结果:", result);
image.png
ES6中新增的数组方法，后续学习到在补充。
网友评论