当前位置:
首页 > temp > JavaScript教程 >
-
JavaScript常用数组方法汇总
-
添加/删除元素
-
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://www.cnblogs.com/hJ777/p/14762779.html
-
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数