js常用数组的方法总结

Javascript原生方法

注意:js数组每一项可以保存任何类型的数据,比如第一个元素是字符串,第二个元素是数字,第三个元素是对象

创建数组

tips: 建议使用数组字面量方式【简单】

var colors = new Array()
var colors = new Array('red','blue')

var colors = [];
var colors = ['red','blue'];

检测数组

对于一个网页或一个全局作用域,可以通过如下方法

if(arr instanceof Array){
    //对数组执行某些操作
}

网页中包含多个框架,通过如下ES5方法检测

if(Array.isArray(arr)){
    //对数组执行某些操作
}

转换方法

arr.valueOf()

var colors = ['red','blue','green']
colors.valueOf() //['red','blue','green']

arr.toString()

var colors = ['red','blue','green']
colors.toString() //"red,blue,green"

tips: arr.toString() 与 arr.join()输出相同,不过join里可以输入其它链接符

push、pop、unshift、shift

arr.push(item)方法
接受任意数量的参数,添加到数组末尾,返回新数组的长度

let arr = [1,2,3]
arr.push('4')
console.log(arr) // [1,2,3,4]

arr.pop()
删除数组最后一项,返回删除的项

var colors = ['blue','green']
colors.pop() //green

arr.unshift()
接受任意数量的参数,添加到数组头部,返回新数组的长度

var colors = ['red']
colors.unshift('green') //2

arr.shift()
删除数组第一项,返回删除的项

var colors = ['blue','green']
colors.shift() //blue

reverse、sort、concat、slice

arr.reverse()
反转数组的顺序,并返回重新排序之后的数组, 原数组会被改变

var arr1 = [1,2,3,'red','blue']
arr1.reverse() //["blue", "red", 3, 2, 1]

arr.sort()
如果不传参数,默认情况下数组内的元素会被转换为字符串进行比较,因此一般不推荐直接使用默认的arr.sort()进行排序。
返回值为排序后的新数组。原数组会被改变
注意:sort里接收一个比较参数

var b = [1,2,3]
//升序
b.sort((a,b)=>a-b) //[1, 2, 3]
//降序
b.sort((a,b)=>b-a) //[3, 2, 1]

arr.concat()
没有传递参数,那么只是复制当前数组并返回副本,原数组不变;
传递一个元素(数组)或多个元素(数组),会将其合并到arr中,返回新数组,原数组不变

var colors = ['red','blue','green']
colors.concat('gray',['a','green'])  //["red", "blue", "green", "gray", "a", "green"]
console.log(colors) // ["red", "blue", "green"]

tips: js数组复制

arr.concat()    //原生
[...arr]   //ES6
Array.from(arr) //ES6
$.extend(arr) //JQ

arr.slice
剪切数组,返回剪切之后的数组,元素不会改变
1、传入一个参数,表示起始位置,结束位置为最末尾

var colors = ['red','blue','green']
colors.slice(2) //['green']

2、传入2个参数,表示起始位置与结束位置,但不包括结束位置所在的元素

var colors = ['red','blue','green']
colors.slice(1,2) //['blue']

splice()

删除:arr.splice(index, num)
传入两个参数,第一个为位置( 数组下标),第二个为删除的项数,可以删除任意项,返回删除元素组成的数组,原数组变了

var colors = ['red','blue','green']
colors.splice(1,1) //['blue']

插入:arr.splice(index,0,item)
传入3个参数, [起始位置( 数组下标) | 要删除的项数 为0 | 要插入的元素], 最终返回删除掉的元素组成的数组,因为这里删除项数为0,因此会返回空数组

var colors = ['red','blue','green']
colors.splice(1,0,'gray') //[]
console.log(colors) // ['red','gray','blue','green']

替换:arr.splice(index, num, item)
传入3个参数,[起始位置 | 要删除的项数 | 要插入的任意项数], 最终返回删除掉的元素组成的数组

var colors = ["red", "gray", "blue", "green"]
colors.splice(2,2,'yellow') // ["blue", "green"]
console.log(colors); //["red", "gray", "yellow"]

tips:这个方法会因为参数的不同而实现不同的功能

查找元素

arr.indexOf()
验证数组中是否含有某个元素,返回第一个匹配到的元素在数组中所在的位置,如果没有,则返回 -1

var colors =  ["red", "gray", "yellow"]
colors.indexOf('gray') // 1
colors.indexOf('mm') //-1

arr.lastIndexOf()
验证数组中是否含有某个元素,不过是从数组尾部开始查找,返回第一个匹配到的元素所在的位置,如果没有,则返回-1

var colors =  ["red", "gray", "yellow","gray"]
colors.indexOf('gray') 
console.log(colors.indexOf('gray')) // 1
colors.lastIndexOf('mm') 
onsole.log(colors.lastIndexOf('mm')) // -1

迭代方法

ES5定义了5个迭代方法,每个方法接收2个参数----》[要在每一项上运行的函数 | 运行该函数的作用域对象(可选)]
运行的函数包括3个参数 ---》 [数组项的值 | 该项在数组中的位置 | 数组对象本身]

arr.every()
检查数组中的项是否满足某个条件,传入的函数对每一项都返回true,则返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.every((item, index, arr)=> item >2 ) //false

arr.some()
检查数组中的项是否满足某个条件,只要传入的函数对数组中某一项返回true,则返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.some((item, index, arr)=> item >2 ) //true

arr.filter()
对数组中的每一项运行给定函数,返回该函数会返回true的项组成的新数组

//返回nums中所有值大于2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.filter((item, index, arr)=> item >2 ) //[3, 4, 5, 4, 3]

arr.map()
对数组中的每一项运行给定函数,返回每次函数调用的结果组成的新数组

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.map((item, index, arr)=> item * 2 ) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

arr.forEach()
对数组中的每一项运行给定函数,这个方法没有返回值

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.forEach((item, index, arr)=> item * 2 ) // undefined

tips: map、forEach里不可以使用continue、break ,每一项都会执行,如果遍历中要用到continue或break提升效率,则可以使用for()循环 或 for...of..循环

arr.find()
Array.find() 方法。find() 方法会返回数组中第一个满足条件的元素。

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 20 },
  { name: 'David', age: 30 }
];

const foundPerson = people.find(person => person.age >= 18);

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

推荐阅读更多精彩内容

  • 数组方法 下面开始介绍数组的方法,数组的方法有数组原型方法,也有从object对象继承来的方法,这里我们只介绍数组...
    祈求者阅读 366评论 0 2
  • 1、join() join(separator): 将数组的元素组起一个字符串,以separator为分隔符,省略...
    泽玲_d7fb阅读 561评论 0 1
  • JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: vararr1 = newArra...
    寄鱼予海与你阅读 514评论 0 0
  • 本文总结了数组所有的方法。 1. 检测对象是不是数组 instanceof操作符 Array.isArray()方...
    胡不归vac阅读 668评论 0 1
  • 面对和张哥的谈话,觉察张哥谈话的立场,觉得是事实,从领导角度在考虑问题,自己的感受有点失落,失落的同时是因为自己的...
    691bd9461501阅读 97评论 0 0