数组对象的一些原生方法

CodeEclipse
• 阅读 1269
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
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
JS中arr.forEach()如何跳出循环
示例我们都知道for循环里要跳出整个循环是使用break,但在数组中用forEach循环如要退出整个循环呢?使用break会报错,使用return也不能跳出循环。使用break将会报错:vararr使用return也不能跳出整个循环:vararr那么在用forEach()遍历数组时要如何才能跳出循环呢?经过查找资料后,我找到了两种方法可以实现跳出
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
LinMeng LinMeng
4年前
组合使用map 和find重组数组对象
需求:有两个均是数组对象结构的数组,如下://第一个数组对象结构如下:arr1数组长度大于arr2arr1{adCode:"12340",adName:'河南省'},{adCode:"12341",adName:'山东省'},{adCode:"12342",adName:'广东省'},{adCode:"12343",adNa
Stella981 Stella981
3年前
JavaScript中遍历数组和对象的方法
js数组遍历和对象遍历针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等JS数组遍历:1,普通for循环,经常用的数组遍历vararr1,2,0,3,9,10,20,
Easter79 Easter79
3年前
TiDB Pre
8月30日,TiDB发布PreGA版。该版本对MySQL兼容性、SQL优化器、系统稳定性、性能做了大量的工作。TiDB:SQL查询优化器调整代价模型优化索引选择,支持不同类型字段比较的索引选择支持基于贪心算法的JoinReorder
Wesley13 Wesley13
3年前
ES6新语法(二)
1.解构在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。解构:自动解析数组或对象中的值,并赋值给指定的变量。、1.1数组解构vararr3,4,5;vara,b,carr;
Stella981 Stella981
3年前
ES6中数组方法( every 和 some )
判断对象数组中每个人是否成年,大于17成年,否则未成年vararr{name:'jerry',sex:'man',age:14},{name:'jack',sex:'woman',age:19},{name:'bill',sex:'ma
Stella981 Stella981
3年前
Pre
PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin\_44385565/article/details/89737224(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fweixin_443855
Wesley13 Wesley13
3年前
Unity 获取场景中所有目标对象(包括不激活的对象)
usingUnityEngine;usingUnityEditor;usingSystem.Collections.Generic;publicclassExampleScript:MonoBehaviour{//获取场景中所有目标对象(包括不激活的对象)不包括Pre
Stella981 Stella981
3年前
JavaScript学习总结(八)——JavaScript数组
  JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组、ArrayList、Hashtable等的超强综合体。一、数组的声明  常规方式声明:    1、vararrNamenewArray();//创建一个数组2、vararr
Stella981 Stella981
3年前
JavaScript——数组(三)数组方法汇总
前面两篇大致介绍了一下数组的基本特性,这里说一下数组的常用方法:Array.join()   将数组中所有的元素都转化为字符串并拼接在一起,返回最后生成的字符串。  不改变原数组可通过指定的分隔符来分隔各个元素,如果不指定分隔符,则默认使用逗号。1vararr1,2,3;//创