前端面试:JS数组操作方法

基本方法

isArray() 判断数组
isArray() 方法用于判断是否是数组(有兼容性)

语法:Array.isArray(arr)

返回值:是数组,返回true。不是数组,返回false。

if (Array.isArray([1,2,3])) {
// true
} else {
// false
}

toString() 转字符串
toString() 方法可把数组转换为字符串,并返回结果。

语法:array.toString()

返回值:字符串

var arr = ['a','s','d']
var str = arr.toString()
console.log(str) // a,s,d

join() 分割
join() 方法用于把数组中的所有元素放入一个字符串。

语法:array.join(separator)

separator:可选。分割符,默认英文逗号。

返回值:字符串

var arr = ['a','s','d']
var str = arr.join()
console.log(str) // a,s,d

pop() 删除数组最后一项
pop() 方法用于删除并返回数组的最后一个元素。

语法:arrayObject.pop()

返回值:数组长度减1,并返回删除的元素的值。如果是空数组,返回undefined。

var arr = ['a','s','d']
var str = arr.pop()
console.log(str) // d
console.log(arr) // a,s

push() 数组尾部添加元素
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

语法:arrayObject.push(newelement1,newelement2,....,newelementX)

newelement1:必需。要添加到数组的第一个元素。

newelement2:可选。要添加到数组的第二个元素。

newelementX:可选。可添加多个元素。

返回值:新的长度

var arr = ['a','s','d']
var len = arr.push('f')
console.log(len) // 4
console.log(arr) // a,s,d,f

shift() 删除数组第一项
shift() 方法用于删除并返回数组的第一个元素。

语法:arrayObject.shift()

返回值:数组长度减1,并返回删除的元素的值。如果是空数组,返回undefined。

var arr = ['a','s','d']
var str = arr.shift()
console.log(str) // a
console.log(arr) // s,d

unshift() 数组开头添加元素
unshift() 方法可向数组的开头添加一个或多个元素,并返回新的长度。

语法:arrayObject.unshift(newelement1,newelement2,....,newelementX)

newelement1:必需。要添加到数组的第一个元素。

newelement2:可选。要添加到数组的第二个元素。

newelementX:可选。可添加多个元素。

返回值:新的长度

var arr = ['a','s','d']
var len = arr.unshift('f')
console.log(len) // 4
console.log(arr) // f,a,s,d

reverse() 颠倒数组
reverse() 方法用于颠倒数组中元素的顺序。

返回值:排序的原数组。

var arr = ['a','s','d']
arr.reverse()
console.log(arr) // d,s,a

sort() 排序
sort() 方法用于对数组的元素进行排序。

语法:arrayObject.sort(sortby)

sortby:可选。规定排序顺序,必须是函数。默认按字母编码顺序排序。

返回值:排序的原数组。

var arr = ['a','c','d','b']
arr.sort()
console.log(arr) // a,b,c,d

concat() 合并数组
concat() 方法用于合并两个或多个数组。

语法:arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX:必需。该参数可以是具体的值,可以是数组对象,也可以是任意多个。

返回值:返回一个新的数组。不会改变原数组。

var arr1 = ['a','b']
var arr2 = ['c','d']
var arr3 = arr1.concat(arr2)

console.log(arr1) // a,b
console.log(arr2) // c,d
console.log(arr3) // a,b,c,d

slice() 提取
slice() 方法可从已有的数组中返回选定的元素。

语法:arrayObject.slice(start,end)

start:必需。规定从何处开始选取(包含)。

end:可选。规定从何处结束选取(不包含)。

返回值:返回一个新的数组。不会改变原数组。

var arr = ['a','b','c','d','e']
var newArr = arr.slice(1,3)
console.log(arr) // a,b,c,d,e
console.log(newArr) // b,c

splice() 添加、删除、替换
splice() 方法用于添加、删除、替换数组元素,返回被删除的项目。

语法:arrayObject.splice(index,howmany,item1,.....,itemX)

index:必需。整数,规定添加/删除项目的位置。

howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1,.....,itemX:可选。向数组添加/替换的新项目。

返回值:删除的数组。

// 删除元素
var arr = ['a','b','c','d','e']
arr.splice(2,1)
console.log(arr) // a,b,d,e

// 删除元素 替换新元素
var arr = ['a','b','c','d','e']
var del = arr.splice(1,1,'f')
console.log(arr) // a,f,c,d,e
console.log(del) // b

// 添加新的元素
var arr = ['a','b','c','d','e']
arr.splice(1,0,'f')
console.log(arr) // a,f,b,c,d,e

indexOf() 查找首次位置
indexOf() 方法可返回一个指定元素在数组中第一次出现的位置。

语法:Array.indexOf(item,start)

item:必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。

返回值:元素在数组中的位置,如果没有搜索到则返回 -1。

var arr = ['a','c','b','c','e']
var index = arr.indexOf('c')
console.log(index) // 1

lastIndexOf() 查找最后位置
lastIndexOf() 方法可返回一个指定元素在数组中最后出现的位置,从后向前查找。

语法:Array.lastIndexOf(item,start)

item:必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。

返回值:元素在数组中的位置,如果没有搜索到则返回 -1。

var arr = ['a','c','b','c','e']
var index = arr.lastIndexOf('c')
console.log(index) // 3

迭代数组的5种方法

every()
every()方法用于判断数组中是否每个元素都满足条件。

语法:Array.every(function(item,index,array) { return 条件 })

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

返回值:只有都满足才返回true,只要有一项不满足返回false。

var arr = [1,2,3,4,5,6]
var res = arr.every(item => {
return item > 2
})
console.log(res) // false

some()
some()用于判断数组中是否有至少一个元素满足条件。

语法:Array.some(function(item,index,array) { return 条件 })

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

返回值:只要有一个满足就返回true,只有都不满足才返回false。

var arr = [1,2,3,4,5,6]
var res = arr.some(item => {
return item > 5
})
console.log(res) // true

filter()
filter()方法用于对数组进行过滤。

语法:Array.filter(function(item, index, array) { return 条件 })

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

返回值:返回符合条件的新数组,不会改变原数组。

var arr = [1,2,3,4,5,6]
var res = arr.filter(item => {
return item > 3
})
console.log(res) // [4,5,6]

map()
map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

语法:Array.map(function(item, index, array) { return 条件 })

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

返回值:返回新的数组,不会改变原数组。

var arr = [1,2,3,4]
var res = arr.map(item => {
if (item == 3) {
return item * 2
}
return item
})
console.log(res) // [1,2,6,4]

forEach()
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

语法:Array.forEach(function(item, index, array) { return 条件 })

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

没有返回值:如果是空数组,item为undifined。

var arr = [1,2,3,4]
var sum = 0
arr.forEach(item => {
sum += item
})
console.log(sum) // 10

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

reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:Array.reduce(function(total, iten, index, array) { return total }, initialValue)

total:必须。计算结束后的返回值。初始值为initialValue。

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

initialValue:传递给函数的初始值。

返回值:返回计算结果。

// 计算数组项总和
var arr = [1,2,3,4]
var sum = arr.reduce((total,item) => {
return total + item
},0)
console.log(sum) // 10

// 计算数组项最大值
var arr = [1,2,3,4]
var max = arr.reduce((total,item) => {
return Math.max(total, item)
})
console.log(max) // 4

// 数组去重
var arr = [1,2,3,2,1,4]
var newArr = arr.reduce((total,item) => {
total.indexOf(item) === -1 && total.push(item)
return total
},[])
console.log(newArr) // [1,2,3,4]

ES6 新增数组方法

fill()
fill() 方法用于将一个固定值替换数组的元素。

语法:Array.fill(value, start, end)

value:必需。填充的值。

start:可选。开始填充位置。

end:可选。停止填充位置。

返回值:被填充的原数组。

var arr = ['a','b','c','d']
arr.fill('e',1,3)
console.log(arr) // ['a','e','e','d']

find()
find()方法用于查找并返回符合条件的第一个数组项。

语法:Array.find(function(item, index, array) { return 条件 })

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

返回值:返回符合条件的第一个数组元素值,没有符合条件返回 undefined。

var arr = ['a','b','c','d']
var str = arr.find(item => {
return item == 'c'
})
console.log(str) // c

findIndex()
findIndex()方法用于查找并返回符合条件的第一个数组项的位置。

语法:Array.findIndex(function(item, index, array) { return 条件 })

item:必须。当前元素的值。

index:当前元素的索引。

array:当前元素的数组对象。

返回值:返回符合条件的第一个数组元素值,没有符合条件返回 -1。

var arr = ['a','b','c','d']
var index = arr.findIndex(item => {
return item == 'c'
})
console.log(index) // 2

ES7 新增数组方法

includes()
includes() 方法用来判断一个数组是否包含一个指定的值。

语法:Array.includes(searchElement, fromIndex)

searchElement:必须。需要查找的元素值。

fromIndex:可选。从该索引处开始查找 searchElement。

返回值:包含返回true,不包含返回false。

var arr = ['a','b','c','d']
var res = arr.includes('b')
console.log(res) // true

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

推荐阅读更多精彩内容