js数组常用方法

前言:js数组自带了很多属性方法,这些方法为我们写程序提供了方便,因此,也是笔试、面试中经常会被问到的,本文总结了常用的数组的方法,提醒大家要注意这些方法是否改变了原有数组,返回值是什么,如果不注意这些,可能会导致一些莫名其妙的bug。在文末我将给出例子说明这一点。

一、数组中常用的方法:

Array.prototype.concat 将两个数组拼接,返回拼接后的新数组, 不改变原有数组

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

Array.prototype.copyWithin 浅复制数组的一部分到同一数组中的另一个位置,并返回它,原数组值被改变,而不修改其大小

var arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(0, 3, 4))
// [4, 2, 3, 4, 5]

arr.copyWithin(target[, start[, end]])
target: 复制序列到该位置,如果是负数,target将从末尾开始计算。
start: 开始复制元素的起始位置,如果是负数,target将从末尾开始计算。
end: 复制元素的结束为止,但不包括end这个位置的元素。

Array.prototype.entries 方法返回一个新的Array Iterator对象,该对象包含数组中的每个索引的健/值对原数组不变。

var arr1 = ['a', 'b', 'c']
var iter = arr1.entries()
console.log(iter.next().value)
// [0, 'a']
console.log(iter.next().value)
// [1, 'b']

Array.prototype.every()方法测试数组的所有元素是否都通过了指定函数的测试。如果都通过返回true,否则返回false。

function isBelowThreshold(currentValue) {
  return currentValue < 40
}
var arr1 = [1, 30, 39, 29, 10, 13]
console.log(arr1.every(isBelowThreshold))
// true

Array.prototype.fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,该方法会改变原数组的值,并返回被修改后的数组。

var arr1 = [1, 2, 3, 4]
console.log(arr1.fill(0, 2, 4))
// [1, 2, 0, 0]

arr.fill(value[, start[, end]])
value: 填充的值;
start: 开始索引值;
end:结束索引值,不包括end值。

Array.prototype.filter()方法返回一个新数组,其包含通过所提供函数实现的测试的所有元素,不改变原数组。

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// ["exuberant", "destruction", "present"]

Array.prototype.find()方法返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined。

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// 12

Array.prototype.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1

var arr1 = [5, 12, 8, 130, 44];
var found = arr1.findIndex(function(element) {
  return element > 13;
});
// 3

Array.prototype.forEach()方法对数组中的每个元素执行一次提供的函数,不会改变原数组的值。

var arr1 = ['a', 'b', 'c']
arr1.forEach(function(element) {
  console.log(element)
})
// a
// b
// c

Array.prototype.includes()方法判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则则返回false。不会改变原数组的值。

var arr1 = [1, 2, 3]
console.log(arr1.includes(2))
// true

Array.prototype.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,返回-1不改变原数组的值。

Array.prototype.join()方法将一个数组的所有元素连接成一个字符串并返回这个字符串。默认以','作为连接符。不改变原数组的值。

var elements = ['Fire', 'Wind', 'Rain']
console.log(elements.join());
// Fire,Wind,Rain 
console.log(elements.join(''));
// FireWindRain

Array.prototype.keys()方法返回一个新的Array迭代器它包含数组中的每个索引的键。不改变原数组。

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
  
for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}

Array.prototype.lastIndexOf()方法返回指定元素在数组中的最后一个的索引,如果不存在则返回-1。从数组后面向前查找,从fromIndex开始,fromIndex默认为 数组长度-1,不改变原数组

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// 3

console.log(animals.lastIndexOf('Tiger'));
// 1

Array.prototype.map() 方法,返回该数组中的每个元素都调用一个提供的函数后的结果。 不改变原数组。

var arr1 = [1, 4, 9, 16]
const map1 = array1.map(x => x * 2)
console.log(map1)
// [2, 8, 18, 32]

Array.prototype.pop()方法从数组中删除最后一个元素,并返回该元素的值此方法更改数组的长度

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// tomato
console.log(plants);
// ["broccoli", "cauliflower", "cabbage", "kale"]

Array.prototype.push() 方法将一个或多个元素添加到数组的末尾,改变了原数组,并返回新数组的长度。

var animals = ['pigs', 'goats', 'sheep'];
console.log(animals.push('cows'));
// 4
console.log(animals);
// ["pigs", "goats", "sheep", "cows"]
animals.push('chickens');
console.log(animals);
// Array ["pigs", "goats", "sheep", "cows", "chickens"]

Array.prototype.reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值并返回该值不改变原数组的大小。

const arr1 = [1, 2, 3, 4]
const reducer = (accumulator, currentValue) => accumulator + currentValue
console.log(arr1.reduce(reducer))
console.log(arr1.reduce(reducer, 5))

arr.reduce(callback[, initialValue])
callback执行数组中每个值的函数,它是上一次调用回调时返回的累积值,或者initialValue
currentValue 数组中正在处理的元素
currentIndex 数组中正在处理的当前元素的索引。如果提供了initialValue,则索引号为0,否则索引为1
array 调用reduce的数组。
initialValue用作第一个调用callback的第一个参数的值,如果没有提供初始值,则将使用数组中的第一个元素,在没有初始值的空数组上调用reduce将报错。

Array.prototype.reduceRight()方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值

Array.prototype.reverse()方法颠倒数组中元素的位置,并返回该数组的引用会改变原数组

Array.prototype.shift()方法删除数组中的第一个元素,并返回该元素的值此方法改变数组的长度。

Array.prototype.slice()方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原数组不会被修改。注意:与copyWithin()方法的区别在于:copyWithin方法选择数组的一部分复制到自身某处,而slice是拷贝到一个新的数组对象。

Array.prototype.some() 方法与every向对应,测试数组中的某些元素是否通过由提供的函数的测试,只要有大于等于1个则返回true,同样不改变原数组的值。

Array.prototype.sort()方法用就地(in-place)排序算法(指的是不占用额外的内存或占用常数的内存) 对数组元素进行排序,并返回排序后的数组,sort方法是会修改原数组的。sort排序不一定是稳定的,默认的排序是根据字符串的Unicode码点。

Array.prototype.splice()方法通过删除现有元素和/或添加新元素来更改一个数组的内容,如果删除了元素,则会返回被删除元素的数组,如果是新添元素,则返回空数组。会改变原数组

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start 指定修改的开始位置(从0计数)如果超过了数组的长度,则从数组末尾开始添加内容,如果是负值,则表示从数组末位开始的第几位(从-1计数),若只使用start参数而不使用deleteCount,item,如array.splice(start)表示删除[start, end]的元素。
deleteCount 整数,表示要移除的数组元素的个数,如果为0,则不删除元素。
item1, item2, .... 要添加进数组的元素,从start开始,如果不指定,则splice()将只删除数组元素。

这些方法中不会改变原数组的有:concat entries every filter find findIndex forEach includes indexOf join keys lastIndexOf map reduce reduceRight slice some
会改变原数组的: copyWithin fill reverse pop push reverse shift sort splice
最后 举例说明注意数组方法的返回值和是否修改原数组的重要性:
栗子:
将数组var a = [1,2,3] 变成数组 [4,3,2,1] 下面的方法正确的是?

A. a.reverse().unshift(4)
B. a.push(4).reverse()
C. a.push(4);a.reverse()
D. a.splice(3,1,4).reverse()

答案:A C

A中reverse()改变数组自身并返回再调用unshift可以在数组首位添加元素并返回添加后的数组长度,此时a变成[4, 3, 2, 1],所以a是可行的。
B中push()改变数组自身,但是返回新数组的长度,数值没有reverse方法,因此会报错。
C中先执行a.push(4)后数组变为[1, 2, 3, 4],然后调用reverse()改变数组并返回。
D中splice(3, 1, 4)在索引为3出新增一个元素为4,正如上面所说,返回的是空数组[],因此调用reverse后还是空数组。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • js数组常用方法整理 标签:js 数组 前言:这篇文章主要是一些归纳总结,大部分参考的是MDN的程序,也加了一些自...
    wrma阅读 679评论 0 10
  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 3,990评论 0 6
  • 添加(返回新的数组长度) 末尾添加 arr.push(els) 开头添加 arr.unshift(els) 删除(...
    追卓2018阅读 400评论 0 0
  • //JS数组常用方法及其应用/** * 1.push(): 向数组尾部添加一个或多个元素,并返回添加新元素后的数组...
    李二狗的星球阅读 407评论 0 0
  • 生活已经是千疮百孔, 不是你想象中的模样 风吹雨打 早已消灭昨日的痕迹 任重道前行 没有人到珍重 我还是昨日的我...
    二月六六阅读 101评论 0 0