Js常用数组方法汇总

更新日期: 2021-05-13阅读: 1.3k标签: 数组

添加/删除元素

push()

数组末端添加元素

let arr = ['javascript', 'css'];

alert( arr.push('html') );// 3

alert( arr );// javascript, css, html

pop()

移除并返回数组最后一个元素

let arr = ['javascript', 'css'];

alert( arr.pop() );// css

alert( arr );// javascript

unshift()

数组首端添加元素

let arr = ['is', 'head'];

alert( arr.unshift('here') );// 3

alert( arr );// here, is, head

shift()

移除并返回数组第一个元素

let arr = ['here', 'is', 'head'];

alert( arr.shift() );// here

alert( arr );// is, head

splice()

可对数组进行添加、删除、插入元素操作

arr.splice(start[, deleteCount, elem1, ..., elemN])

start为开始此次操作的索引值,deleteCount为删除的个数,elem为替换或添加的元素,例:

let arr = ["hello", "world", "web", "html"]

alert( arr.splice(1, 2, "javascript","css") );//hello,javascript,css,html   
//从索引1开始删除2个元素,并将"javascript" "css"	替换至原来的位置

注:splice方法返回的是一个包含了被删除元素的数组,而非删除了元素后的新数组

slice()

从索引start到索引end创建一个新数组(包含索引start,但不包含索引end)

arr.slice([start], [end])
let arr = ['h', 't', 'm', 'l'];

alert( arr.slice( 1, 3) );// t,m
alert( arr.slice(-4,-1) );// h,t,m
alert( arr.slice(1) );// t,m,l
alert( arr.slice() );// h,t,m,l  ;相当于生成一个数组的副本

concat()

将参数(数组或值)添加至原数组末尾并返回此新数组,不会影响原数组

let arr = [1, 2];
alert( arr.concat(3, 4) );//1,2,3,4
alert( arr.concat([3, 4], [5, 6], 7, 8) );//1,2,3,4,5,6,7,8
alert( arr );//1,2

若参数为对象,默认被当成一个整体来添加:

let arr = [1, 2];

let obj = {
	0: "html",
	1: "css"
};

alert( arr.concat(obj) );//1,2,[object Object]

可以为对象添加Symbol.isConcatSpreadable 属性来解决此问题:

let arr = [1, 2];

let obj = {
	0: "html",
	1: "css",
	[Symbol.isConcatSpreadable]: true
};

alert( arr.concat(obj) );//1,2,html,css

搜索元素

indexOf / lastIndexOf / includes

indexOf( item, from )

从索引 from 开始搜索 item,如果找到则返回索引,否则返回 -1

lastIndexOf( item, from )

同上,但从末端开始搜索

includes( item, from )

从索引 from 开始搜索 item,如果找到则返回 true,否则返回false

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

注:这三个方法使用的都是严格相等(===),查找item时不会对item进行类型转换;若是想知道数组是否含有某元素且不清楚其索引值时,应优先使用includes

find / findIndex

find()

返回数组中满足提供的callback函数第一个元素的值,否则返回undefined

callback最多接收三个参数(item, index, array),若callback中返回true则停止迭代并返回item,否则没有搜索到,返回undefined

arr.find(callback[, thisArg])

常用于对象数组中

let users = [
  {id: 1001, name: "Mike"},
  {id: 1002, name: "Pete"},
  {id: 1003, name: "Mary"}
];

let user = users.find(item => item.name == "Mary");

alert(user.id); // 1003

findIndex()

与find() 基本相同,区别在于findIndex()返回的是索引值,搜索不到时返回-1

filter()

过滤数组,用法与find()一样,但返回的是所有符合条件的元素组成的数组

let users = [
  {id: 1001, name: "Mike"},
  {id: 1002, name: "Pete"},
  {id: 1003, name: "Jack"},
  {id: 1004, name: "Mary"}
];

let user = users.filter(item => item.id > 1001);

alert( user.length ); //3
user.forEach( item => alert(item.name) );// Pete, Jack, Mary

遍历元素

forEach()

为数组的每个元素调用一个函数,无返回值

let arr = ['hello', 'javascript'];

arr.forEach(alert);//为每个元素调用alert

配合箭头函数:

let arr = ['hello', 'javascript'];

arr.forEach((item, index, array) => {
    alert(`${item}是${array}中索引为${index}的值`);
});

转换数组

map()

为数组中每个元素调用一个函数,并返回结果数组(相当于有返回值的forEach())

let arr = ['hello', 'javascript'];

let length = arr.map( item => item.length );//将元素本身转换为元素的长度
alert( arr );//hello, javascript
alert( length );//5, 10

sort()

sort(fn)可为一个数组进行原位排序(直接修改原数组本身),fn排序函数提供排序的依据

fn(a, b)提供排序标准的原理:

如果 fn(a, b) 小于 0 ,那么 a 会被排列到 b 之前

如果 fn(a, b) 等于 0 , a 和 b 的相对位置不变

如果 fn(a, b) 大于 0 , b 会被排列到 a 之前

sort( (a, b) => a - b )(升序) 、 sort( (a, b) => b - a )(降序):

let arr = [ 18, 2, 13 ];

arr.sort( (a, b) => a - b );
alert(arr);  // 升序;2, 13, 18

arr.sort( (a, b) => b - a );
alert(arr);  // 降序;18, 13, 2

若要准确排序字母较多的单词,fn排序函数应配合str.localeCompare() 方法:

let arr = ["javascript", "css", "html", "Österreich"];

arr.sort( (a, b) => a.localeCompare(b) );

alert( arr );// css, html, javascript, Österreich

reverse()

反转数组,颠倒数组中的元素

let arr = [1, 2, 3];

alert( arr.reverse() );//3, 2, 1

split / join

split()

str.split(separator)可将字符串按指定条件分割成一个数组后返回

separator(分隔符)可以是字符串、正则表达式、数组等

let str = "This , is javascript";

//无分隔符,返回一个由整个字符串作为元素的数组
alert( str.split() );// This , is javascript

//分隔符为空串,遇字符分割,返回一个由每个字符作为元素的字母数组
alert( str.split('') );// T,h,i,s, ,,, ,i,s, ,j,a,v,a,s,c,r,i,p,t

//分隔符为空格,遇空格分割,返回一个由多个字符串作为元素的数组
alert( str.split(' ') );// This,,,is,javascript

//分隔符为逗号,遇逗号分割,返回一个由多个字符串作为元素的数组
alert( str.split(',') );// This , is javascript

join()

arr.join(separator)与split()相反,将数组里的元素用separator连接成一个字符串后返回

let arr = ['This', 'is', 'javascript'];

//无分隔符,元素之间以","分隔
alert( arr.join() );// This,is,javascript

//分隔符为空串,元素之间无任何字符分隔
alert( arr.join('') );// Thisisjavascript

//分隔符为空格,元素之间以空格分隔
alert( arr.join(' ') );// This is javascript

//分隔符为'-',元素之间以“-”分隔
alert( arr.join('-') );// This-is-javascript

reduce()

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

对数组中每个元素执行一个callback函数,并将其结果汇总为单个返回值

callback接收4个参数:

acc(累计器,是上次回调中返回的累积值,或initialValue)

cur(正在处理的数组元素)

index(正在处理的数组元素的索引,若有initialValue,则为0,否则从1开始)

array(调用reduce()的数组)

initialValue(作为callback中第一个参数的值,若无则使用数组中第一个元素的值)

let arr = [1, 2, 3, 4, 5, 6];

let addAll = arr.reduce( (sum, current) => (sum + current), 0);// 1+2+3+..+6

alert( addAll );// 21

reduceRight()与reduce()功能一样,只是从右向左遍历

注:应始终设置initialValue,否则当调用的数组为空数组时会报错


链接: https://fly63.com/article/detial/10277

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!