Javascript - 数组常见方法使用

2019-11-17 本文已影响0人厦门_小灰灰

简单介绍一下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中新增的数组方法，后续学习到在补充。

Javascript - 数组常见方法使用

猜你喜欢

热点阅读