1. 90前端首页
  2. 前端开发
  3. JavaScript

数组对象的一些原生方法

var arr1 = [1, 2];
var arr2 = [3, 4];
var arr3 = [5, 6, 7];

常规方法

1.1 concat:合并两个或多个数组:

Array.concat(arr1,...)
var newArr = arr1.concat(arr2, arr3);
console.log(newArr);    //[1, 2, 3, 4, 5, 6, 7]

1.2 join():将数组中的元素转化为以特定方式连接的字符串。

var arrStr = arr.join(separator);
arrStr:返回的字符串
separator:可选,元素间的连接符号,无sepatator时元素以‘,’分隔
var arrStr = newArr.join(\'-\');
console.log(arrStr);    //1-9-9-4-5-6-7

1.3 pop():删除数组最后一个元素,并返回被删除的元素。

var dltItem = arr.pop();
dltItem:被删除的元素
arr:最后一个元素被删除的数组
var dltItem = arr3.pop();
console.log(dltItem);    //7
console.log(arr3);    //[5, 6]

1.4 push():在数组的末尾添加一个或多个新元素,并返回数组的新长度

var len = arr.push(item1, item2,...);
len:新长度
arr:被添加的数组
item1,item2:被添加的元素
var len = arr3.push(8, 9, 10);
console.log(len);    //6
console.log(arr3);    //[5, 6, 7, 8, 9, 10]

1.5 reverse():颠倒反转数组中的元素位置,更改原数组,没有返回值。

arr.reverse();
arr:需要执行反转操作的数组
arr1.reverse();
console.log(arr1);    //[2, 1]

1.6 shift():删除数组第一个元素,并返回被删除的元素值

var dltItem = arr.shift();
dltItem:被删除的元素
arr:执行删除操作的数组
var dltItem = arr3.shift();
console.log(dltItem);    //5
console.log(arr3);    //[6, 7]

1.7 slice():从已有数组中返回选定范围的元素,返回新的数组;该方法不会改变原数组。

var slctArr = arr.slice(start, end);
slctArr:返回的新数组
arr:原始数组
start:可选,范围起始点,默认为0,负值为倒数
end:可选,范围截止点,默认为从起始点到数组结束的所有元素
var sliceArr = arr3.slice(1);
console.log(sliceArr);    //[6, 7]

1.8 sort():对数组元素进行排序,改变原始数组,没有返回值。

arr.sort(sortFunction);
arr:需要排序的数组
sortFunction:可选,排序的特定方式
arr3.sort(function(a, b) {
    return b-a;
});
console.log(arr3);    //[7, 6, 5]

1.9 splice():用于添加或删除数组中的元素,会改变原始数组。

var dltItems = arr.splice(index, howmany, item1, item2,...);
dltItems:被删除元素组成的新数组
arr:被执行操作的数组
index:添加或删除的位置
howmany:被删除的元素数量
item1, item2:被添加的元素
var dltItems = arr3.splice(1, 1, 10, 11, 12);
console.log(dltItems);    //[6]
console.log(arr3);    //[5, 10, 11, 12, 7]

1.10 toString():把数组转换为字符串,并返回结果。数组元素之间用逗号分隔。不改变原数组。

var arrStr = arr.toString();
arrStr:返回的字符串结果
arr:被执行操作的数组
var arrStr = arr3.toString();
console.log(arrStr);     //5,6,7

IE9及以上支持

2.1 every:用于通过指定的函数检测数组所有元素是否都符合指定条件。如果数组检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行监测;如果所有元素都满足条件,则会返回true。函数返回值为布尔型(true或false)。

arrOri.every(function(item, index, arr){})
item:当前元素
index:可选,当前元素索引
arr:可选,当前元素所在数组,即为arrOri
var res1 = newArr.every(function(item) {
    return item > -1;
});
var res2 = newArr.every(function(item) {
    return item > 3;
});
var res3 = newArr.every(function(item, index, arr) {
    if (index+1<arr.length) {
        return arr[index+1] > arr[index];
    }else {
        return true;
    }
});
console.log(res1, res2, res3);    //true false true

2.2 filter:创建一个新的数组,新数组中的元素是只用函数通过检测指定数组中符合条件的所有元素。函数返回值为布尔型(true或false)。

var newArr = arrOri.filter(function(item, index, arr) {});
newArr:创建的新数组
item:当前元素
index:可选,当前元素索引
arr:可选,当前元素所在数组,即为arrOri
var checkArr = newArr.filter(function(item, index, arr) {
    return item > 4;
});
console.log(checkArr);    //[9, 9, 5, 6, 7]

2.3 forEach():遍历数组,并将数组、数组元素、元素索引传入回调函数。没有返回值。不影响原数组。IE9及以上支持。

arrOri.forEach(function(element, index, arr) {});
element:当前元素
index:可选,当前元素索引
arr:可选,当前数组,即为arrOri
var forArr = [];
arr3.forEach( function(element, index) {
    forArr.push(element+1);
});
console.log(forArr);    //[6, 7, 8]

2.4 indexOf():返回数组中某个指定的元素的索引。

var index = arr.indexOf(item, start);
index:返回的索引,无则为-1
arr:被检测的数组
item:被检测的指定值
start:开始被检测的元素索引
var index = arr3.indexOf(6);
console.log(index);    //1

2.5 lastIndexOf:返回指定值在数组中出现的最后一个位置的索引。使用方法同indexOf()。
2.6 isArray():判断一个对象是否为数组对象。

var isArr = Array.isArray(obj);
isArr:返回的判断结果,true/false
obj:被判断的对象
var isArr = Array.isArray(arr3);
console.log(isArr);    //true

2.7 map():返回一个新数组,数组元素为原数组元素调用函数处理后的返回值。不会对空数组进行操作。不会改变原数组。

var mapArr = arr.map(function(item, index){});
mapArr:返回的新数组。如果某元素没有返回值,则新数组中该元素索引位置的值为undefined
arr:被操作的原数组
var mapArr = arr2.map(function(item, index) {
    return item+10;
});
console.log(mapArr);    //[13, 14]

2.8 reduce():接收一个函数作为累加器,数组中的每个值从左到右开始,最终计算为一个值。

var redRes = arrOri.reduce(function(total, item, index, arr) {});
redRes:计算结果
arrOri:被计算的数组
total:被返回的累加值
item:当前元素
index:可选,当前元素的索引
arr:指代被计算的数组,即为arrOri
var redRes = arr1.reduce(function(ttl, item) {
    return ttl + 10 * item;
});
console.log(redRes);    //21,其中数组第一个元素未能实现*10操作

2.9 reduceRight():接收一个函数作为累加器,数组中的每个值从右到左开始,最终计算为一个值。

var redRes = arrOri.reduceRight(function(total, item, index, arr) {});
redRes:计算结果
arrOri:被计算的数组
total:被返回的累加值
item:当前元素
index:可选,当前元素的索引
arr:指代被计算的数组,即为arrOri
var redRes = arr1.reduceRight(function(ttl, item) {
    return ttl + 10 * item;
});
console.log(redRes);    //21,其中数组最后一个元素未能实现*10操作

2.10 some():检测数组中的元素是否满足指定条件(函数提供)。有一个元素满足条件,则返回true;如果没有满足条件的元素,则返回false。不会改变原始数组。

var someRes = arrOri.some(function(item, index, arr) {});
someRes:返回的结果,true/false
arrOri:执行操作的数组
item:当前元素
index:可选,当前元素的索引
arr:可选,当前元素所在数组,即为arrOri
var someRes = arr3.some(function(item, index, arr) {
    return item > 5;
});
console.log(someRes);   //true

2.11 unshift():向数组开头添加一个或更多元素,并返回新的长度

var len = arr.unshift(item1, item2, ...);
len:返回的新的长度
arr:被操作的数组
item1, item2:被添加的元素
var len = arr3.unshift(11, 22);
console.log(len);    //5
console.log(arr3);    //[11, 22, 5, 6, 7]

ES6新增方法(IE12及以上支持)

3.1 copyWithin:从数组的指定位置拷贝元素到数组的另一个指定位置中。该方法不会改变原数组的长度,只会修改数组中的元素。ES6新增方法。:

arr.copyWithin(targetPos, startPos, endPos)
targetPos:元素要拷贝到的指定位置
startPos:可选,要拷贝的元素的起始位置
endPos:可选,要拷贝的元素的结束位置
arr3.copyWithin(1, 0);
console.log(arr3);    //[5, 5, 6]

3.2 fill:用于将一个固定值替换数组的指定元素,ES6新增方法:

arr.fill(value, start, end)
value:固定值
start:可选,需要替换的元素的起始位置
end:可选,需要替换的元素的结束位置
newArr.fill(9, 1, 3);
console.log(newArr);    //[1, 9, 9, 4, 5, 6, 7]

3.3 find():返回数组中使用函数判断为true的第一个元素。返回符合条件的元素后,后面的元素不再调用函数进行判断。如果数组没有符合条件的元素,则返回undefined。ES6新增方法。

var itemRes = arrOri.find(function(item, index, arr) {});
itemRes:返回的符合条件的元素
item:当前元素
index:可选,当前元素索引
arr:可选,当前元素所在数组,即为arrOri
var itemRes = arr3.find(function(item, index, arr) {
    return item > 5;
});
console.log(itemRes);    //5

3.4 findIndex():返回数组中使用函数判断我true的第一个元素的索引。返回符合条件的元素后,后面的元素不再调用函数进行判断;如果数组中没有符合条件的元素,则返回-1。ES6新增方法。

var itemIndex = arrOri.findIndex(function(item, index, arr) {});
itemIndex:返回的符合条件的元素的索引
item:当前元素
index:可选,当前元素索引
arr:可选,当前元素所在数组,即为arrOri
var itemIndex = arr3.findIndex(function(item, index, arr) {
    return item > 5;
});
console.log(itemIndex);    //1

3.5 from():通过拥有length属性的对象或可迭代的对象来返回一个数组。

var fromArr = Array.from(arrObj, mapFunction, thisValue);
fromArr:最后得到的新数组
arrObj:需要转换的数组
mapFunction:可选,可对需要转换的数组的元素进行处理的回调函数
thisValue:可选,映射函数(mapFunction)中的this对象
var fromArr = Array.from(arr3, function(item) {
    return item>5?10:20;
});
console.log(fromArr);    //[20, 10, 10]

3.6 keys():用于从数组创建一个包含数组键的可迭代对象

var keysObj = arr.keys();
keysObj:创建的可迭代对象
arr:被转换的数组
var keysArr = arr1.keys();
console.log(keysArr.next().value);    //0
console.log(keysArr.next().value);    //1
console.log(keysArr.next().value);    //undefined

慎用方法(浏览器版本要求过高)

4.1 includes():判断数组中是否包含某个特定的值,有返回true,无返回false。

var res = arr.includes(checkValue, fromIndex);
res:检测结果,true/false
arr:被检测的数组
checkValue:被检测的特定值
fromIndex:可选,检测元素的起始索引
var inclRes = arr3.includes(6);
console.log(inclRes);    //true

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022074137

展开阅读全文

发表评论

登录后才能评论