Js数组操作方法示例

// Js数组方法示例
const languages = ['java', 'python', 'go']
const fruits = ['苹果', '香蕉', '梨']
// concat()
const concatArr = languages.concat(fruits)
console.log('1. concat 两个数组拼接为新数据 :>> ', concatArr)
// copyWithin()
languages.copyWithin(2, 0)
console.log('2. copyWithin 复制到指定位置。从指定位置开始复制 :>> ', languages)
// entries()
for (const iterator of languages.entries()) {
  console.log('3. entries 遍历数组的迭代器 :>> ', iterator[0], iterator[1])
}
// every()
function checkAdult(content) {
  return content.length >= 2
}
console.log('4. every 检查元素是否都符合条件 :>> ', languages.every(checkAdult))
// fill()
languages.fill('java')
console.log('5. fill 将数组数据刷为统一内容 :>> ', languages)
// filter()
const languagesFilter = languages.filter((ele, index) => {
  return ele.length > 2
})
console.log('6. filter 返回符合条件元素的新数组 :>> ', languagesFilter)
// find()
function checkAdultFind(content) {
  return content.length === 4
}
const ele = languages.find(checkAdultFind)
console.log('7. find 返回符合条件的第一个元素 :>> ', ele)
// findIndex()
const indexes = languages.findIndex(checkAdultFind)
console.log('8. findIndex 返回符合条件的第一个元素的索引 :>> ', indexes)
// forEach()
languages.forEach(element => {
  console.log('9. forEach 遍历数组元素 :>> ', element)
})
// from()
const arrayFrom = Array.from(new Set(['java', 'python', 'go']))
console.log('10. Array.from 创建新数组 :>> ', arrayFrom)
// includes()
console.log('11. includes 查询是否包含指定元素 :>> ', languages.includes('java'))
// indexOf()
let index = languages.indexOf('java')
console.log('12. indexOf 返回元素(存在)在数组中的第一次出现的索引 :>> ', index)
index = languages.indexOf('html')
console.log('12. indexOf 返回元素(不存在)在数组中第一次数显的索引 :>> ', index)
// isArray()
console.log('13. Array.isArray 检查是否为数组类型 :>> ', Array.isArray(languages))
// join()
const languagesJoin = languages.join('-')
console.log('14. join 将数组转为指定连接符的字符串 :>> ', languagesJoin)
// keys()
for (const iterator of languages.keys()) {
  console.log('15. keys 遍历数组的迭代器 :>> ', iterator)
}
// lastIndexOf()
const lastIndex = languages.lastIndexOf('java')
console.log('16. lastIndexOf 返回指定元素最后一次出现的索引 :>> ', lastIndex)
// map()
const languagesMap = languages.map((ele, index) => {
  return ele.toUpperCase()
})
console.log('17. map 遍历并调整为符合要求元素的新数组 :>> ', languagesMap)
// pop()
languages.pop()
console.log('18. pop 删除并返回数组末尾元素 :>> ', languages)
// push()
languages.push('c++')
console.log('19. push 添加新元素到数组末尾 :>> ', languages)
// reduce()
const languagesReduce = languages.reduce((content, item) => {
  return content + item
})
console.log('20. reduce 从左往右依次合并元素 :>> ', languagesReduce)
// reduceRight()
const languagesReduceRight = languages.reduceRight((content, item) => {
  return content + item
})
console.log('21. reduceRight 从右往左依次合并元素 :>> ', languagesReduceRight)
// reverse()
languages.reverse()
console.log('22. reverse 翻转数组元素的顺序 :>> ', languages)
// shift()
const first = languages.shift()
console.log('23. shift 删除并返回第一个元素 :>> ', first)
// slice()
const languagesSlice = languages.slice(0, 2)
console.log('24. slice 获取数组某一块数据 :>> ', languagesSlice)
// some()
function checkAdultSome(content) {
  return content.length >= 2
}
console.log('25. some 存在符合条件的元素 :>> ', languages.some(checkAdultSome))
// sort()
languages.sort()
console.log('26. sort 升序排序 :>> ', languages)
// splice()
languages.splice(2, 0, 'html')
console.log('27. splice 添加一个新元素到指定位置 :>> ', languages)
languages.splice(2, 1)
console.log('27. splice 删除一个指定位置元素 :>> ', languages)
// toString()
console.log('28. toString 数组转为字符串 :>> ', languages.toString())
// unshift()
languages.unshift('css', 'js')
console.log('29. unshift 添加新元素到数组开始位置 :>> ', languages)
// valueOf()
console.log('30. valueOf 返回数组原始值 :>> ', languages.valueOf())

新增&删除

// push() 新增&尾位
languages.push('c++')
console.log('push 添加新元素到数组末尾 :>> ', languages)
// pop() 删除&返回尾元素
languages.pop()
console.log('pop 删除并返回数组末尾元素 :>> ', languages)
// unshift() 新增&首位
languages.unshift('css', 'js')
console.log('unshift 添加新元素到数组开始位置 :>> ', languages)
// shift() 删除&返回首元素
const first = languages.shift()
console.log('shift 删除并返回第一个元素 :>> ', first)
// splice()
languages.splice(2, 0, 'html')
console.log('27. splice 添加一个新元素到指定位置 :>> ', languages)
languages.splice(2, 1)
console.log('27. splice 删除一个指定位置元素 :>> ', languages)

遍历输出

// forEach()
languages.forEach(element => {
  console.log('9. forEach 遍历数组元素 :>> ', element)
})
// entries()
for (const iterator of languages.entries()) {
  console.log('3. entries 遍历数组的迭代器 :>> ', iterator[0], iterator[1])
}
// keys()
for (const iterator of languages.keys()) {
  console.log('15. keys 遍历数组的迭代器 :>> ', iterator)
}

获取数组中一块元素

// slice()
const languagesSlice = languages.slice(0, 2)
console.log('24. slice 获取数组某一块数据 :>> ', languagesSlice)

拼接数组

// concat()
const concatArr = languages.concat(fruits)
console.log('1. concat 两个数组拼接为新数据 :>> ', concatArr)

合并数组元素

// reduce()
const languagesReduce = languages.reduce((content, item) => {
  return content + item
})
console.log('20. reduce 从左往右依次合并元素 :>> ', languagesReduce)
// reduceRight()
const languagesReduceRight = languages.reduceRight((content, item) => {
  return content + item
})
console.log('21. reduceRight 从右往左依次合并元素 :>> ', languagesReduceRight)

遍历获取指定条件的全部元素

// filter()
const languagesFilter = languages.filter((ele, index) => {
  return ele.length > 2
})
console.log('6. filter 返回符合条件元素的新数组 :>> ', languagesFilter)

调整元素规范

// map()
const languagesMap = languages.map((ele, index) => {
  return ele.toUpperCase()
})
console.log('17. map 遍历并调整为符合要求元素的新数组 :>> ', languagesMap)

排序

// sort()
languages.sort()
console.log('sort 升序排序 :>> ', languages)
// reverse()
languages.reverse()
console.log('reverse 翻转数组元素的顺序 :>> ', languages)

查询是否存在指定元素

// includes()
console.log('11. includes 查询是否包含指定元素 :>> ', languages.includes('java'))
// indexOf()
let index = languages.indexOf('java')
console.log('12. indexOf 返回元素(存在)在数组中的第一次出现的索引 :>> ', index)
index = languages.indexOf('html')
console.log('12. indexOf 返回元素(不存在)在数组中第一次数显的索引 :>> ', index)
// lastIndexOf()
const lastIndex = languages.lastIndexOf('java')
console.log('16. lastIndexOf 返回指定元素最后一次出现的索引 :>> ', lastIndex)

检查元素是否存在/全部符合规则

// some()
function checkAdultSome(content) {
  return content.length >= 2
}
console.log('25. some 存在符合条件的元素 :>> ', languages.some(checkAdultSome))
// every()
function checkAdult(content) {
  return content.length >= 2
}
console.log('4. every 检查元素是否都符合条件 :>> ', languages.every(checkAdult))

查找符合规则的元素/索引

// find()
function checkAdultFind(content) {
  return content.length === 4
}
const ele = languages.find(checkAdultFind)
console.log('7. find 返回符合条件的第一个元素 :>> ', ele)
// findIndex()
const indexes = languages.findIndex(checkAdultFind)
console.log('8. findIndex 返回符合条件的第一个元素的索引 :>> ', indexes)

其他

// toString()
console.log('28. toString 数组转为字符串 :>> ', languages.toString())
// valueOf()
console.log('30. valueOf 返回数组原始值 :>> ', languages.valueOf())
// join()
const languagesJoin = languages.join('-')
console.log('14. join 将数组转为指定连接符的字符串 :>> ', languagesJoin)
// isArray()
console.log('13. Array.isArray 检查是否为数组类型 :>> ', Array.isArray(languages))
// fill()
languages.fill('java')
console.log('5. fill 将数组数据刷为统一内容 :>> ', languages)
// from()
const arrayFrom = Array.from(new Set(['java', 'python', 'go']))
console.log('10. Array.from 创建新数组 :>> ', arrayFrom)
// copyWithin()
languages.copyWithin(2, 0)
console.log('2. copyWithin 复制到指定位置。从指定位置开始复制 :>> ', languages)