JavaScript常用数组方法汇总

整理了JavaScript中大部分常用的数组方法

• 添加/删除元素

  • push

    • 数组末端添加元素

    let arr = ['javascript', 'css'];alert( arr.push('html') );// 3alert( arr );// javascript, css, html

  • pop

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

    let arr = ['javascript', 'css'];alert( arr.pop() );// cssalert( arr );// javascript

  • unshift

    • 数组首端添加元素

    let arr = ['is', 'head'];alert( arr.unshift('here') );// 3alert( arr );// here, is, head

  • shift

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

    let arr = ['here', 'is', 'head'];alert( arr.shift() );// herealert( 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,malert( arr.slice(-4,-1) );// h,t,malert( arr.slice(1) );// t,m,lalert( arr.slice() );// h,t,m,l ;相当于生成一个数组的副本

  • concat()

    • 将参数（数组或值）添加至原数组末尾并返回此新数组，不会影响原数组

    let arr = [1, 2];alert( arr.concat(3, 4) );//1,2,3,4alert( arr.concat([3, 4], [5, 6], 7, 8) );//1,2,3,4,5,6,7,8alert( 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) ); // 1alert( arr.indexOf(false) ); // 2alert( arr.indexOf(null) ); // -1alert( 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 ); //3user.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, javascriptalert( 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, 18arr.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+..+6alert( addAll );// 21

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

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

原文转载：http://www.shaoqun.com/a/738802.html

跨境电商：https://www.ikjzd.com/

wish：https://www.ikjzd.com/w/105

五洲会海购：https://www.ikjzd.com/w/1068

整理了JavaScript中大部分常用的数组方法添加/删除元素push数组末端添加元素letarr=['javascript','css'];alert(arr.push('html'));//3alert(arr);//javascript,css,htmlpop移除并返回数组最后一个元素letarr=['javascript',&
执御：https://www.ikjzd.com/w/717.html
俄罗斯灰色清关：https://www.ikjzd.com/w/1409
mav：https://www.ikjzd.com/w/2414
口述：和包工头床头野合我愧对老公老公包工头床头：http://lady.shaoqun.com/m/a/37618.html
利好消息频频传出，跨境电商或迎新发展：https://www.ikjzd.com/home/17953
口述：徘徊在复婚路上 我进退两难：http://lady.shaoqun.com/m/a/77078.html