>> 欢迎您 客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章 返回首页
>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → JavaScript中数组的常用方法（含ES6）
发表一个新主题 开启一个新投票 回复文章 您是本文章第 15743 个阅读者 刷新本主题
 * 贴子主题:  JavaScript中数组的常用方法（含ES6） 回复文章 点赞(0)  收藏  
作者:mary    发表时间：2021-02-04 05:12:42     消息  查看  搜索  好友  邮件  复制  引用
    

js数组常用方法

1. concat()，不改变原数组

   arr1.concat(arr2) 连接两个或多个数组，返回一个新的数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5]
const newArr = arr1.concat(arr2)
console.log(newArr) // [1, 2, 3, 4, 5]

2. join()，不改变原数组

   join(str) 数组转字符串，方法只接受一个参数，默认为逗号分隔符
conat arr = [1, 2, 3]
console.log(arr) // [1, 2, 3]
console.log(arr.join()) // 1,2,3
console.log(arr.join(:)) // 1:2:3

  • tips: join() 实现重复字符串
const str = new Array(4).join('啦')
console.log(str) // 啦啦啦

3. push() & unshift() 添加元素操作，改变了原数组

   push() 向数组的末尾添加一个或多个元素，并返回新的长度
const arr = [1, 2]
console.log(arr.push(3)) // 3
console.log(arr) // [1, 2, 3]

   unshift() 向数组的开头添加一个或多个元素，并返回新的长度
const arr = [1, 2]
console.log(arr.unshift(3)) // 3
console.log(arr) // [3, 1, 2]

4. shift() & pop() 删除元素操作，改变了原数组

   shift() 删除并返回数组第一个元素
const arr = [1, 2, 3]
const deleteItem = arr.shift()
console.log(arr) // [2, 3]
console.log(deleteItem) // 1

   pop() 删除并返回数组最后一个元素
const arr = [1, 2, 3]
const deleteItem = arr.pop()
console.log(arr) // [1, 2]
console.log(deleteItem) // 3

5. sort() 数组排序，改变原数组

   sort() 对数组的元素进行排序
const arr = [2, 4, 3, 1]
console.log(arr.sort()) // [1, 2, 3, 4]
console.log(arr) // [1, 2, 3, 4]

  • tips: sort() 不按照数组元素数值的大小对数字进行排序，是按照字符编码的顺序进行排序，那怎么样根据元素数值大小进行排序呢？
const arr = [2, 4, 3, 1]
const arr1 = [...arr].sort((a, b) => a - b)
const arr2 = [...arr].sort((a, b) => b - a)
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [4, 3, 2, 1]

6. reverse() 反转数组，改变原数组

   reverse() 颠倒数组中元素的顺序
const arr = [2, 4, 3, 1]
console.log(arr.reverse()) // [1, 3, 4, 2]
console.log(arr) // [1, 3, 4, 2]

7. slice() 截取数组，不改变原数组

   arr.slice(start, end) 从start处开始选取（不包括该元素），从end处结束选取，如果为空的话，那么选取从start到数组结束的所有元素。负数代表方向，从数组尾部开始计算位置
const arr = [1, 2, 3, 4, 6]
console.log(arr.slice(1)) // [2, 3, 4, 6]
console.log(arr.slice(1, -2)) // [2, 3]
console.log(arr.slice(-3, 1)) // [2]
console.log(arr) // [1, 2, 3, 4, 6]

8. splice() 更新数组，改变原数组

   arr.splice(index, howmany, item1, ..., itemX) 向/从数组中添加/删除项目，然后返回被删除的项目，返回含有被删除的元素的数组，若没有删除元素则返回一个空数组。
  • [index] 必传项，整数，规定添加/删除项目的位置，负数表示从数组结尾处规定位置
  • [howmany] 必传项，要删除的项目数量。如果设置为 0，则不会删除项目
  • [item1, ..., itemX] 可选。向数组添加的新项目。
const arr = [1, 2, 3]
const arr1 = arr.splice(2, 1)
console.log(arr1) // [3]
console.log(arr) // [1, 2]

const arr2 = arr.splice(1, 0, 'ss')
console.log(arr2) // ['ss']
console.log(arr) // [1,'ss', 2]

9. indexOf() & lastIndexOf()  索引方法，不改变原数组

   两个方法都是返回要查找的项所在数组中首次出现的位置，没找到的话就返回-1。
   arr.indexOf(item, start) 从数组的开头开始向后寻找。
   arr.lastIndexOf(item, start) 从数组的末尾开始向前查找。
  • [item] 必须项，查找的元素
  • [start] 可选，在数组中开始检索的位置，默认0
const arr = [2, 4, 1, 9, 1, 2]
console.log(arr.indexOf(2)) // 0
console.log(arr.lastIndexOf(1)) // 1
console.log(arr.indexOf(3)) // -1

10. find() & findIndex() 根据函数内的判断返回找到的数组内的第一个元素。不改变原数组。 （es6新增方法）

  • 对于空数组不执行
  • [currentValue] 必须项，当前元素
  • [index] 可选。当前元素的索引值
  • [url=] 可选。当前元素所属的数组对象
   arr.find((currentValue, index, arr) => {}) 返回通过测试函数内判断的数组的第一个元素的值。当数组中的元素在测试函数中返回true时，返回符合条件的元素，之后不再调用测试函数判断剩下的元素，如果每个元素都执行了测试函数，没有符合的元素，则返回undefined。
const arr = [1, 2, 3, 4]
const findItem = arr.find((item, index) => {
    return item > 2
})
const findItem1 = arr.find((item, index) => {
    return item > 5
})
console.log(findItem) // 3
console.log(findItem1) // undefined

   findIndex((currentValue, index, arr) => {}) 用法和find()一样，不同的是不是返回数组内元素，而是返回符合测试函数判断的元素索引值，如果没有符合条件的元素返回 -1。
const arr = [1, 2, 3, 4]
const findItemIndex = arr.findIndex((item, index) => {
    return item > 2
})
const findItemIndex1 = arr.findIndex((item, index) => {
    return item > 5
})
console.log(findItemIndex) // 2
console.log(findItemIndex1) // -1

11. forEach()、map()、filter()、some()、every() 迭代方法，不改变原数组。

   arr.forEach((currentValue , index , arr) => {},  thisValue) 对数组进行遍历循环，这个方法没有返回值。
  • 对于空数组不执行
  • [currentValue] 必须项，当前元素
  • [index] 可选。当前元素的索引值
  • [url=] 可选。当前元素所属的数组对象
  • 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值。
const arr = [1,4,7,10];
arr.forEach((currentValue, index, arr) => {
    console.log(index + "--" + currentValue + "--" + (arr === Arr))
})
// 输出：
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true  

   arr.map((currentValue , index , arr) => {},  thisValue) 指“映射”，方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。（不会改变数组长度，和原数组长度保持一致）
const arr = [1, 2, 3]
const arr1 = arr.map((currentValue) => {
    return currentValue + 1
})
console.log(arr) // [1, 2, 3]
console.log(arr1) // [2, 3, 4]

   arr.filter((currentValue , index , arr) => {},  thisValue) “过滤”功能，方法

创建一个新数组，其包含通过所提供函数实现的测试的所有元素。（可以改变数组长度，不必和原数组长度保持一致）
const arr = [1, 2, 3]
const arr1 = arr.filter((currentValue) => {
    return currentValue > 1
})
const arr2 = arr.filter((currentValue) => {
    return currentValue > '1'
})
console.log(arr) // [1, 2, 3]
console.log(arr1) // [2, 3]
console.log(arr2) // [2, 3]

  • arr1和arr2结果一致，可以看出函数支持弱等于，不是必须全等于
   arr.some((currentValue , index , arr) => {},  thisValue) 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true，不再往下执行。
const arr = [1, 2, 3]
const str = arr.some((currentValue) => {
    console.log(currentValue)
    return currentValue > 1
})
// 1
// 2
console.log(str) // true

   arr.every((currentValue , index , arr) => {},  thisValue) 判断数组中的每一项是否都满足条件，全部符合就会返回true，否则false。
const arr = [1, 2, 3]
const str = arr.every((currentValue) => {
    return currentValue > 1
})
console.log(str) // false

12. reduce()、reduceRight() 归并方法，不改变原数组

  • 这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。他们都接收两个参数，第一个参数是每一项调用的函数，函数接受四个参数分别是初始值，当前值，索引值，和当前数组，函数需要返回一个值，这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。
  • [total] 必须项，初始值, 或者计算结束后的返回值。
  • [cur] 必须项，当前元素。
  • [index] 可选。当前元素的索引值
  • [url=] 可选。当前元素所属的数组对象
  • [initialValue] 可选。传递给函数的初始值。
   arr.reduce((total , cur , index , arr) => {}, initialValue) 从数组的第一项开始，逐个遍历到最后

arr.reduceRight((total , cur , index , arr) => {}, initialValue) 从数组的最后一项开始，向前遍历到第一项
const arr = [1,2,3,4,5]
const result1 = arr.reduce((total,cur,index,arr) => {  
    console.log("total:" + total + ",cur:" + cur + ",index:" + index)
    return total + cur
})
console.log("结果：" + result1)
// 输出
// total:1,cur:2,index:1
// total:3,cur:3,index:2
// total:6,cur:4,index:3
// total:10,cur:5,index:4
// 结果：15
const result2 = arr.reduce((total,cur,index,arr) => {  
    console.log("total:" + total + ",cur:" + cur + ",index:" + index)
    return total + cur
},10)
console.log("结果：" + result2)
// 输出
// total:10,cur:1,index:0
// total:11,cur:2,index:1
// total:13,cur:3,index:2
// total:16,cur:4,index:3
// total:20,cur:5,index:4
// 结果：25

  • 从上面代码我们可以看出，当我们不给函数传递迭代初始值时初始值 total 为数组第一项，函数从数组第二项开始迭代；若我们给函数传递迭代初始值，则函数从数组第一项开始迭代。

13.  keys()、values()、entries() 遍历数组方法,不改变原数组。 （es6新增方法）

   keys() 对键名的遍历
const arr = ["a","b","c","d"]
for(let i of arr.keys()){
    console.log(i)
}
//打印：
// 0
// 1
// 2
// 3

   values()对键值的遍历
const arr = ["a","b","c","d"]
for(let i of arr.values()){
    console.log(i)
}
//打印：
// a
// b
// c
// d    

   entries()是对键值对的遍历。
const arr = ["a","b","c","d"]
for(let i of arr.entries()){
    console.log(i)
}
//打印：
// [0, "a"]
// [1, "b"]
// [2, "c"]
// [3, "d"]
for(let [idx,item] of arr.entries()){
    console.log(idx + ":"+item)
}
//打印：
// 0:a
// 1:b
// 2:c
// 3:d

14. includes() 不改变原数组。 （es6新增方法）

   arr.includes(searchElement ,  fromIndex) 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
  • [searchElement] 可选。需要查找的元素值。
  • [fromIndex] 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
const arr = ["a","b","c","d"]
const result1 = arr.includes("b")
const result2 = arr.includes("b",2)
const result3 = arr.includes("b",-1)
const result4 = arr.includes("b",-3)
console.log(result1)  // true
console.log(result2)  // false
console.log(result3)  // flase
console.log(result4)  // true

15. Array.from() （es6新增方法）

   Array.from() 用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。
const json ={
    '0':'喜',
    '1':'欢',
    '2':'你',
    length:3
}
const arr = Array.from(json)
console.log(arr) // ["喜", "欢", "你"]

16. Array.of()   （es6新增方法）

   Array.of() 将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。
let arr1 = Array.of(1,2,3)
let arr2 = Array.of([1,2,3])
let arr3 = Array.of(undefined)
let arr4 = Array.of()
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [[1, 2, 3]]
console.log(arr3) // [undefined]
console.log(arr4) // []

17. fill() 改变原数组。 （es6新增方法）

   arr.fill(value,  start,  end) 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
  • [value] 必需。填充的值。
  • [start] 可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
  • [end] 可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
let arr = [1,2,3,4,5,6]
arr.fill(0)  // [0, 0, 0, 0, 0, 0]
arr.fill(0,1)  // [1, 0, 0, 0, 0, 0]
arr.fill(0,1,2)  // [1, 0, 3, 4, 5, 6]
arr.fill(0,-1)  // [1, 2, 3, 4, 5, 0]
arr.fill(0,1,-1)  // [1, 0, 0, 0, 0, 6]

18. copyWithin() 不改变原数组。 （es6新增方法）

   arr.copyWithin(target,  start,  end) 用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员。
  • [target] 必需。从该位置开始替换数据。
  • [start] 可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
  • [end] 可选。到该位置前停止读取数据 (默认为 array.length)。如果为负值，表示倒数。
let arr = [1,2,3,4,5,6]
let result1 = [1,2,3,4,5,6].copyWithin(0)
let result2 = [1,2,3,4,5,6].copyWithin(0,1)
let result3 = [1,2,3,4,5,6].copyWithin(1,3,5)
let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1)
let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6)
console.log(result1)  // [1, 2, 3, 4, 5, 6]
console.log(result2)  // [2, 3, 4, 5, 6, 6]
console.log(result3)  // [1, 4, 5, 4, 5, 6]
console.log(result4)  // [1, 3, 4, 5, 5, 6]
console.log(result5)  // [1, 3, 4, 5, 6, 6]

----------------------------
原文链接:https://www.jianshu.com/p/18c9d6f0faa5

程序猿的技术大观园：www.javathinker.net



[这个贴子最后由 flybird 在 2021-02-14 19:00:25 重新编辑] 		网站系统异常

返回首页 → 网站系统异常

系统异常信息
Request URL: http://www.javathinker.net/WEB-INF/lybbs/jsp/topic.jsp?postID=3651

java.lang.NullPointerException

如果你不知道错误发生的原因，请把上面完整的信息提交给本站管理人员。