【系统性、全面性的学习JS数组】

最近在重新翻看红宝书，数组用到的地方很多，但是平时用的时候却是零零散散的。
这里做个总结，把数组放到阳光下见见光。

.length 返回数组长度，可操作数组，多出的显示undefined
instanceof 检测是否是数组
Array.isArray() 检测是否是数组
.toString() 转为string类型
.valueOf() 返回本身
.toLacaleString()
.join() 指定切割符符号分割数组
.push() 往数组最后面追加
.pop() 移除数组最后面一项 和 移除并返回数组最后面一项
.shift() 移除并返回数组第一项
.unshift() 在数组最前面添加

.reverse() 翻转
.sort() 排序, 但有问题，5在10前面，可以配合比较函数实现排序
.concat() 拼接两个数组
.slice(1) 复制从下标 1 开始和之后的数据，.slice(1, 3)两个参数则是复制从下标 1 开始和 3 之前的数据（不包括下标 3 的数据）
.splice() 全能型 全能型 可以删除，插入，替换 .splice(1, 2, 'li', 'sheng') 两个及两个以上的参数，第一个参数是开始位置，第二个参数是删除数量，第三个及之后的位置都是要添加的数据

.indexOf() 从前往后查找，找到则返回位置，没找到则返回-1
.lastndexOf() 从后往前查找，找到则返回位置，没找到则返回-1（数据量大时从后往前查可以提高效率）


// 不会返回具体的数据，只会返回布尔类型，true 或 false
every() 循环每一项，每一项都满足条件就返回 true (必须全部满足)
some() 循环每一项，只要有一项满足添加就返回 true (只满足一项即可)
// 会返回具体的数据，返回满足条件的数据
filter() 返回满足条件的数据
map() 循环有 return (做运算 加减乘除) 返回运算后的数据
forEach() 循环并判断如有大于2 的数据则 将arr数组通过splice截取掉从下标0开始的2项数据，并将截取下来的数据和arr2数组组成一个新的数组数据


// 迭代遍历方法
raduce() 从前往后遍历
raduceRight() 从后往前遍历

.length 属性，返回数组的长度。 不是只读，可以修改数组

let arr = [1, 2, 3, 4, 5]
arr.length = 1 // [1]
arr[1] // undefined
arr.length = 6 // [1, 2, 3, 4, 5, empty]
arr[5] // undefined

检测数组

instanceof

let arr = [1, 2, 3, 4, 5]
if (arr instanceof Array) {
  console.log('arr是数组')
} else {
  console.log('arr不是数组')
}
// arr是数组

Array.isArray()

let arr = [1, 2, 3, 4, 5]
console.log(Array.isArray(arr)) // true

改变和切割数组 为 string

.toString() .valueOf() .toLacaleString

// .toString() 转换为String类型
let arr = [1, 2, 3, 4, 5]
console.log(arr.toString()) // 1, 2, 3, 4, 5

// .valueOf() 返回数组本身

.join()

// .join() 以指定的切割符，分割数组成string类型
let arr = [1, 2, 3, 4, 5]
console.log(arr.join(',')) // 1,2,3,4,5
console.log(arr.join('|')) // 1|2|3|4|5

数组添加

.push()

// .push() 往数组最后面追加
let arr = [1, 2, 3, 4, 5]
arr.push('last')
console.log(arr) // [1, 2, 3, 4, 5, 'last']

.pop()

// .pop() 移除数组最后面一项 和 移除并返回数组最后面一项
let arr = [1, 2, 3, 4, 5]
arr.pop() // 移除数组最后面一项
console.log(arr) // [1, 2, 3, 4]

let last = arr.pop() // 返回数组最后面一项
console.log(last) // 5

数组队列方法

.shift() + .push() 和 .unshift() + .pop() 可以实现队列方法。应用场景如：文字，图片轮播等滚动显示数据，

.shift()

// .shift() 移除并返回数组第一项
let arr = [1, 2, 3, 4, 5]
console.log(arr.shift()) // 1
console.log(arr) // [2, 3, 4, 5]

.unshift()

// .unshift() 在数组最前面添加
let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift('first')) // 6
console.log(arr) // ['first', 1, 2, 3, 4, 5]

.reverse() 翻转

// .reverse()  翻转
let arr = [1, 2, 3, 4, 5]
console.log(arr.reverse()) // [5, 4, 3, 2, 1]

.sort() 排序 升序，最小的在最前面(但会有出现 5 排在 10 前面的问题，配合比较函数可以实现从小到大或者从大到小的排序)

// .sort() 排序
let arr = [3, 6, 1, 4, 10, 5]
console.log(arr.sort()) //[1, 10, 3, 4, 5, 6] 排序只认前面一位的数

// 配合比较函数使用，正常排序
// 从小到大
function compare(value1, value2) {
  if (value1 < value2) {
    return -1
  } else if (value1 > value2) {
    return 1
  } else {
    return 0
  }
}
console.log(arr.sort(compare)) // [1, 3, 4, 5, 6, 10]

// 从大到小
function compare(value1, value2) {
  if (value1 < value2) {
    return 1
  } else if (value1 > value2) {
    return -1
  } else {
    return 0
  }
}
console.log(arr.sort(compare)) // [10, 6, 5, 4, 3, 1]

操作方法

.concat() 拼接两个数组

let arr = [3, 6, 1, 4, 10, 5]
let objArr = ['first', 'last']
console.log(arr.concat(objArr)) //[3, 6, 1, 4, 10, 5, 'first', 'last']

.slice(1) 复制从下标 1 开始和之后的数据，.slice(1, 3)两个参数则是复制从下标 1 开始和 3 之前的数据（不包括下标 3 的数据）

let arr = [3, 6, 1, 4, 10, 5]
// 传一个参数的情况下 复制出来的数据会包括从传的参数作为下标开始和之后的数据
console.log(arr.slice(2)) // [1, 4, 10, 5]

// 传两个参数的情况下 复制出来的数据会包括从传的d第一个参数作为下标开始 第二个参数作为下标之前（不包括第二个下标）的数据
console.log(arr.slice(2, 4)) // [1, 4]

.splice() 全能型 可以删除，插入，替换

// 删除 传入两个参数，.splice(0, 2) 第一个参数是起始位置，第二个参数是删除几项。（记住：该操作会改变原数组）
let arr = [1, 2, 3, 4, 5]
console.log(arr.splice(0, 2)) // [1, 2]
console.log(arr) // [3, 4, 5]

// 插入 第一个参数 起始位置，第二个参数 删除项数（设置0则不删除）,第三个参数和之后的参数是要插入的数据，后面还可以传参数作为要插入的数据
let arr = [1, 2, 3, 4, 5]
arr.splice(1, 0, 'data1')
console.log(arr) // [1, 'data1', 2, 3, 4, 5]

// 替换 第一个参数 起始位置 ，第二个参数 要删除和要插入数据的位置（同时删除该位置的数据和插入后面参数的数据），第三个参数和之后的参数 要插入的数据
let arr = [1, 2, 3, 4, 5]
arr.splice(1, 1, 'data1', 'data2')
console.log(arr) // [1, 'data1', 2, 3, 4, 5]

位置方法

.indexOf() 从前往后查找，找到则返回位置，没找到则返回-1
.lastndexOf() 从后往前查找，找到则返回位置，没找到则返回-1 （数据量大时从后往前查可以提高效率）

let arr = [1, 2, 3, 4, 5]
console.log(arr.indexOf(2)) // 1
console.log(arr.indexOf(6)) // -1

// 应用案例
// 处理过的一个复杂数组数据，要查找该数组中是否包含某一个数据
if (arr.indexOf(2) != -1) {
  // ... 包含该数据的处理
} else {
  // ... 不包含该数据的处理
}

迭代（循环）方法 (不会修改原数组)

every() 循环每一项，每一项都满足条件就返回 true
some() 循环每一项，只要有一项满足添加就返回 true

let arr = [1, 2, 3, 4, 5]
let everyResult = arr.every((item, index, array) => {
  // 必须数组中所有项都大于2才会返回true,否则返回false
  return item > 2
})
console.log(everyResult) // false

let someResult = arr.some((item, index, array) => {
  // 只要arr数组中有一项大于2就会返回true,全部都不大于2则会返回false
  return item > 2
})
console.log(someResult) // true

filter() 返回满足条件的数据

let arr = [1, 2, 3, 4, 5]
let filterResult = arr.filter((item) => {
  return item > 2
})
console.log(filterResult) // [3, 4, 5]

map() 循环有 return (做运算 加减乘除) 返回运算后的数据 （是一个函子，带运算工具的数据类型或数据结构值）

let arr = [1, 2, 3, 4, 5]
let mapResult = arr.map((item) => {
  return item * 2
})
console.log(mapResult) // [2, 4, 6, 8, 10]

forEach() 循环，没有 return （在循环中做处理）

// forEach 循环并判断如有大于2 的数据则 将arr数组通过splice截取掉从下标0开始的2项数据，并将截取下来的数据和arr2数组组成一个新的数组数据
let arr = [1, 2, 3, 4, 5]
let arr2 = ['first', 'last']
let newArr = []
arr.forEach((item) => {
  if (item > 2) {
    newArr = arr.splice(0, 2)
    newArr = newArr.concat(arr2)
  }
})
console.log(newArr) // [1, 2, 'first', 'last']

归并方法

// 迭代遍历方法
raduce() 从前往后遍历
raduceRight() 从后往前遍历

let arr = [1, 2, 3, 4, 5]
var sum = arr.reduce((prev, cur, index, array) => {
  return prev + cur // 做累加操作
})
console.log(sum)