JS数组

创建数组

let arr = []
let arr1 = new Array() // 或 let arr = Array() 方法可以传递一个参数 为数组长度  Array(6)
let arr2 = Array(6)
console.log(arr2.length) //6
// ES6
let arr3 = Array.form({}) // []
let arr4 = Array.of() // []

数组方法

• push(), pop()
• shift(), unshift()
• join()
• sort()
• reverse()
• concat()
• slice()
• splice()
• toString(), toLocaleString()
• indexOf(), lastIndexOf() // ES5
• forEach() // ES5
• filter() // ES5
• map() // ES5
• every() // ES5
• some() // ES5
• reduce(), reduceRight()
• find() //ES6
• findIndex() // ES6
• copyWithin() // ES6
• fill() // ES6
• entries(), keys(), values()
• includes()
• flat(), flatMap()
• Arrya.prototype.sort()
• Array.from() // ES6
• Array.of() // ES6

push(), pop()

push() 在数组的末尾增加一个或多个元素 并返回修改后的长度

let a = []
a.push('hello') // ['hello']
a.push('1', '2') // ['hello', '1', '2']

pop() 删除数组末尾一个元素，返回移除的值

let aPop = a.pop()
console.log(aPop) // 2
console.log(a)  // ['hello', '1']

shift(), unshift()

shift() 删除数组的第一项，并返回删除的值
unshift() 将参数添加到数组开头，并返回数组的新长度

let aShift = a.shift() // 'hello'
console.log(a) // ['1']
let aUnshift = a.unshift('2', '3') // 3
console.log(a) // ['2', '3', '1']

jion()

把数组转换称字符串， 然后使用参数链接一起

let aJoin = a.join() //  2,3,1 默认是 ,
let aJoin2 = a.join('-') // 2-3-1

sort()

将数组中的元素排序并返回排序后的数组。
当不带参数调用sort()时， 数组元素以字母表顺序排序

var a = new Array("banana", "orange", "apple")
a.sort() // ["apple", "banana", "orange"]
var b = [22,66,3,33]
b.sort() // [22, 3, 33, 6] 字母顺序表
b.sort(function(a, b) { return a - b }) // [3, 22, 33, 66] // 数值顺序

reverse()

将数组中的元素顺序颠倒， 返回逆序的数组

var a = [1,3,4]
a.reverse() // [4,3,1]

concat()

创建并返回一个新数组， 它的元素包括调用concat()的元素数组的元素和concat()的每个参数

var a = [1,2,3]
a.concat(4, 5) // [1,2,3,4,5]
console.log(a) // [1,2,3]
a.concat([4,5]) // [1,2,3,4,5]
a.concat([4,5], [6,7]) // [1,2,3,4,5,6,7]
a.concat(4, [5,[6, 7 ]]) // [1,2,3,4,5, [6,7]]

slice()

返回指定数组的一个片段或子数组 参数包头不包尾

var a = [1,2,3,4,5]
a.slice(0,3) // [1,2,3]
a.slice(4) // [4,5]
a.slice(1, -1) // [2,3,4]
a.slice(-3, -2) // [3]

splice()

在数组中插入或删除元素的通用方法。不同于slice()和concat() splice()会修改调用的数组

var a = [1,2,3,4,5,6,7,8]
a.splice(4) // 返回[5,6,7,8] a: [1,2,3,4]
a.splice(1,2) // [2, 3] a:[1,4]

splice的第一个参数指定插入或删除的起始位置，第二个参数指定了要从数组中删除的个数。如果省略第二个参数 则是从起始点开始到结尾全部删除，紧随其后的任意参数指定了需要插入到数组中的元素

toString() toLocaleString()

将其每个元素转化为字符串，并且输出用逗号分隔的字符串

var a = [1,3,4]
a.toString() // 1,3,4

toLocaleString()是toString()的本地化版本

indexOf(), lastIndexOf()

indexOf() 返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf() 返回某个指定的字符串值在字符串中最后出现的位置

var a = [1,2,3,2,4]
a.indexOf(2) // 1
a.lastIndexOf(2) // 3
a.indexOf(2, 2) // 3 第二个参数是从Array 索引的起始位置, 默认 0

数组的遍历

• for循环

var arr = [1,2,3,4]
for (let i = 0; i < arr.length; i++ ){
  console.log(arr[i]) // 1,2,3,4
}

for循环有break语句 可以在循环过程中跳过(continue)某一项或者退出(break)

• forEach()
  从头到尾为数组的每个元素执行一次指定的函数

arr.forEach(function(item) {
  console.log(item) // 1;2;3;4;
})

function 回调参数 当前遍历数组内容, 索引和 数组本身

arr.forEach(function(item, index, arr) {
  console.log(item, index, arr) // 1, 0 ,  [1, 2, 3, 4];  2, 1, [1, 2, 3, 4]; 3, 2, [1, 2, 3, 4]; 4 3  [1, 2, 3, 4]
})
arr.forEach((item, index, array) => array[index]  = item * 2)
arr // [2, 4, 6, 8]

forEach()没有break语句， 如果想要终止 必须把forEach()方法放在一个try块中，并抛出异常。

• map()
  map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，包含改函数的返回值

a = [1,2,3]
b = a.map(x => x*2)
b // [2,4,6]

• filter()
  filter()方法返回的数组元素是调用数组的一个子集。传递的函数用来逻辑判定，该函数返回true或false。

 a = [1,2,3,4,5]
 b = a.filter(x => x > 2)
 b // [3,4,5]

• every()和some()
  every()和some()方法返回数组的逻辑判定。它们对数组元素进行指定的函数进行判定，返回true或false
  every():当数组中所有元素都满足判定函数才会返回true
  some():当数组中只要又一个元素满足判定函数就返回true

a  = [1,2,3,4]
a.every(x => x < 10)  // true 全部满足条件
a.every(x => x >2) // false 有一个未满足
a.some(x => x > 3) // true 有一个满足
a.some(x => x > 10) // false  没有一个满足

• reduce()和reduceRight()
  使用指定的函数将数组元素进行组合，生成单个值。

var a = [1,2,3,4,5]
var sum = a.reduce((x, y) => x + y, 0) // 15 数组求和
var product = a.reduce((x, y) => x * y, 1) // 120 数组求积
var max = a.reduce((x, y) => x > y ? x : y) // 5 数组求最大值

reduce需要两个参数，第一个是执行简化操作的函数，化简函数就是用某种方法把两个值组成一个值，并返回。第二个（可选）的参数是一个传递给函数的初始值。默认为数组的第一个元素
化简函数的参数和forEach(), map()使用的函数不同。es5默认操作函数的值为(数组元素， 元素索引， 和数组本身)。
化简函数的第一个参数是到目前为止的化简操作累计的结果。第一次调用函数时，第一个参数是一个初始值，他就是传递给reduce()的第二个参数。在接下来调用中，这个值就是上次一化简函数的返回值。当不指定初始值的时候，它使用数组的第一个元素为初始值。
在空数组上不带初始值调用reduce()会导致类型错误异常。如果给初始值，那么会直接返回初始值，而不会调用化简函数
redcueRight()的工作原理和reduce()一样，不同的是它从右到左处理数组

不推荐的方法

• for in
  为Object设计 之所以能够遍历数组 是因为数组的构造函数是Object
  支持 continue 和 break

var a = [1,2,3,4]
for (let i in arr) {
  console.log(i, arr[i]) // 0 1, 1 2, 2 3, 3 4
}
arr.a = 7
for (let i in arr) {
  console.log(i, arr[i]) // 0 1, 1 2, 2 3, 3 4, a 7. for in 会把对象属性遍历出来
}

es6

• for of
  遍历可遍历的对象, 不只是数组,Object. 可以遍历出这两个常规对象之外的对象, 自定义结构

• Array.prototype.from
  方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
  伪数组:

  • 具有length属性
  • 根据索引储存数据
  • 不能调用数组的方法
  • 可遍历
    比如: function中的 arguments, class 选择器获取的结果. NodeList
    如果伪数组想使用数组的方法, 需要把伪数组转化为数组

// ES5转换方法
let arr = [].slice.call(arguments)
let imgs = [].slice.call(document.querySelectorAll('img'))

// Array.prototype.from
let args = Array.from(arguments)
let imgs = Array.from(document.querySelectAll('img'))

Array.from(arrayLike, mapFn, this) // arrayLike  伪数组, 遍历方法, 函数指向的this
// 遍历方法 对每个元素进行处理，将处理后的值放入返回的数组。

生成一个新的数组

// es5
let array = Array(5)
let array = []
// es6
let arr = Array.from({length: 5})
// 初始化值为1
// es5 需要进行循环赋值
// es6
let arr = Array.from({length: 5}, () => 1)
arr // [1, 1, 1, 1, 1]

• Array.prototype.of
  用于将一组值，转换为数组。

// 将传入的所有的值转换为数组
Array.of(1, 1, 1, 1, 1) // [1,1,1,1,1 ]
Array.of(3) // [3]
Array.of(3).length // 1
// es5 的 Array
Array() // []
Array(1,2,3) // [1,2,3]
Array(3) // [,,]

• Array.prototype.fill
  fill方法使用给定值，填充一个数组。
  fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

let arr = Array(5).fill(1)
arr // [1,1,1,1,1]
arr.fill(2, 1, 3)
arr // [1, 2, 2, 1, 1]

• find() 和 findIndex()
  找出第一个符合条件的数组成员, 遍历所有成员执行函数, 第一个返回true之后返回该成员,没有找到则返回undefined

[1,2,3,4,5].find(n => n > 2) // 3
[1,2,3,4,5].find((val, index, arr) => n > 2) // 3 三个参数 当前的值、当前的位置和原数组

findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。