数组

数组（Array）

1.什么是数组？
数组就是一组数据的集合，它是JavaScript中的一种复合数据类型，用来存储和操作有序数据集的数据结构。
2.创建数组

// 1.字面量的方式声明一个数组
var arr = [3, 4, 5, 6, 7]
// 2.new运算符声明数组
// 传一个参数的时候，这个传的参数的数值就是数组的长度
var arr1 = new Array(4) // 此时arr1这个数组是一个空数组，但是它的长度为4
// 当我们传多个参数，那么这些参数就是数组的值
var arr2 = new Array(7, 8, 9, 10, 11)
console.log(arr2)

3.访问数组元素

// 如果要访问数组元素，可以通过索引（下标）进行访问，数组的下标都是从 0 开始的
var arr = [8, 5, 7, 10, 18]
console.log(arr[0])  // 8
console.log(arr[3])  // 10   

4.给数组赋值

// 给数组赋值
var arr1 = new Array(3) // 我们创建了一个数组长度为3的空数组
console.log(arr1)       // 空数组，长度为3
arr1[0] = 10            // 给数组的第一个元素赋值为 10
arr1[1] = 20            // 给数组的第二个元素赋值为 20
arr1[2] = 30            // 给数组的第三个元素赋值为 30
console.log(arr1)       // [10,20,30]
arr1[3] = 40            // 我们接着给数组赋值
console.log(arr1)       // [10,20,30,40] 数组长度为4

5.length

// length就是数组的长度，数组里面有几个元素那么length就是几
var arr = [8, 5, 7, 10, 18]
console.log(arr.length) //5

6.二维数组

// 二维数组
var arr = [
    [8,5,7],
    [9,9,6],
    [3,6,2,8,1,9]
]
console.log(arr.length) // 3
console.log(arr[0])     // [8,5,7]
console.log(arr[0][0])  // 8
console.log(arr[1][2])  // 6
console.log(arr[2][5])  // 9
console.log(arr[2].length)  //6

7.数组的遍历

• for循环遍历数组

var arr = [8,5,,7,2,,99,6]
for(var i = 0; i<arr.length; i++){
    console.log(arr[i])
}
// 8
// 5
// undefined
// 7
// 2
// undefined
// 99
// 6
// 使用for循环遍历数组，当遇到空值时会打印undefined

• for…in遍历数组

var arr = [8,5,,7,2,,99,6]
// idx是我们自定义的，它相当于数组的索引，但是它在这是字符串类型，并不影响取数据
for(var idx in arr){
    console.log(arr[idx],typeof idx,idx)
}
// 8    string     0
// 5    string     1
// 7    string     3
// 2    string     4
// 99   string     6
// 6    string     7
// 使用for...in去遍历数组，它会跳过空值

• for…of遍历数组

var arr = [8,5,,7,2,,99,6]
for (var value of arr){
    console.log(value)
}
// 8
// 5
// undefined
// 7
// 2
// undefined
// 99
// 6
// value是我们自定义的，它就是数组中的值

8.数组常用API

• concat()
  合并数组，它并不会修改原数组，而是得到一个新数组

var arr = [1,2,3]
var arr1 =  [4,5,6]
var arr2 = arr.concat(arr1) // 在arr数组后面合并上arr1这个数组然后赋值给arr2这个数组
console.log(arr2)   // [1,2,3,4,5,6]

• join()
  通过指定的字符把数组拼接成一个字符串，默认是逗号拼接，我们需要什么字符来拼接就在括号内填什么字符

var arr = [8,5,7]
var str = arr.join('-')
console.log(str)  // 8-5-7

• pop()
  删除并返回数组的最后一个元素

// pop()删除数组的最后一个元素，返回值就是删除的元素，会修改原数组
var arr = [6,8,2,5]
var a = arr.pop()
console.log(a,arr) // 5 [6,8,2]

• push()
  向数组的末尾添加一个或多个元素，并返回新的长度

// push()方法会修改原数组，返回值是新的长度
var arr = [6,8,2,5]
var len1 = arr.push(20)        // 在arr的末尾追加一个20
console.log(arr,len1)    // [6,8,2,5,20] 5(返回新的长度为5)
var len2 = arr.push(13,17)
console.log(arr,len2)    // [6,8,2,5,20,13,17] 7(返回新的长度为7)

• shift()
  删除并返回数组的第一个元素

// shift()删除数组的第一个元素，返回值就是删除的元素，会修改原数组
var arr = [6,8,2,5]
var a = arr.shift()
console.log(a,arr) // 6 [8,2,5]

• unshift()
  向数组的开头添加一个或多个元素，并返回新的长度

// unshift()方法会修改原数组，返回值是新的长度
var arr = [6,8,2,5]
var len1 = arr.unshift(20)        // 在arr的开头追加一个20
console.log(arr,len1)    // [20,6,8,2,5] 5(返回新的长度为5)
var len2 = arr.unshift(13,17)
console.log(arr,len2)    // [13,17,20,6,8,2,5] 7(返回新的长度为7)

• reverse()
  颠倒数组中元素的顺序

// reverse()会修改原数组
var arr = [6,8,2,5]
arr.reverse()
console.log(arr)  // [5,2,8,6]

• slice()
  从某个已有的数组返回选定的元素

// slice()这个方法可以用来截取一个数组中的某一段，不会修改原数组，返回的是一个新数组
// 截取时的两个参数，含头不含尾
var arr = [6,8,2,5]
var arr1 = arr.slice(1,3)  // 含头不含尾，也就是包含下标为1的元素，不包含下标为3的元素
console.log(arr1)   // [8,2]
// 如果slice只传一个参数，那么就是从该参数一直截取到末尾
var arr2 = arr.slice(2) // 从下标为2开始截取到末尾
console.log(arr2)       // [2,5]
// 如果slice里面传的是负数，表示倒数，具体看如下例子
var arr3 = arr.slice(-2,-1) // 意思是从倒数第二个截取到倒数第一个，含头不含尾，就是包括倒数第二个不包括倒数第一个
console.log(arr3)   // [2]

• sort()
  对数组的元素进行排序

// sort()给数组进行排序，它默认的是按照编码来排序，只要第一位分出了顺序，就不会看第二位
var arr = [2,35,11,5,8,90,6,74,521]
arr.sort()
console.log(arr)    // [11,2,35,5,521,6,74,8,90]
// 指定排序规则
arr.sort(function(a,b){
    // 指定升序规则
    // a和b是sort方法会一次去取数组里的元素
    // 如果这里的返回值大于0，那么a和b就会交换顺序，不大于0就不交换
    return a-b
})
console.log(arr)    // [2,5,6,8,11,35,74,90,521]
arr.sort(function(a,b){
    // 指定降序规则
    return b-a
})
console.log(arr)    // [521,90,74,35,11,8,6,5,2]

• splice()
  删除元素，并向数组添加新元素

// splice()修改的是原数组
var arr = [2,1,5,3,9,7,12,8,18]
// 当只有一个参数的时候，表示把从该下标开始之后的所有元素都删掉
arr.splice(2)  // 从下标为2的元素开始，包括下标为2的元素，全部删除
console.log(arr)  // [2,1]
var arr1 = [2,1,5,3,9,7,12,8,18]
// 当有两个参数的时候，第一个参数代表删除开始的下标，第二个参数代表删除的个数
arr1.splice(2,4)   // 从下标为2的元素开始删除（包括），删除4个
console.log(arr1)  // [2,1,12,8,18]
// 当存在三个参数的时候，第一个参数和第二个参数作用不变，第三个参数会添加到我们删除掉的元素的位置上
var arr2 = [2,1,5,3,9,7,12,8,18]
arr2.splice(2,4,99) // 从下标为2的元素开始删除（包括），删除4个,然后将99添加到删除元素的的位置上
console.log(arr2)   // [2,1,99,12,8,18]
// 当存在三个以上的参数的时候，第一个和第二个参数作用不变，第三个及其后的参数都是用来删除后替换在删除了的元素的位置上的新元素
// 我们可以使用此方法在数组任意位置进行元素添加，只要我们将第二个参数写成0，也就是删除0个

• toString()
  把数组转换成字符串，并返回结果

var arr = [8,5,7]
var str = arr.toString()
console.log(str)    // 8,5,7 (string类型)

9.ES5新增数组常见方法

• 2个索引方法：indexOf()，lastIndexOf()

// indexOf()这个方法用来查找数组元素，他返回的是对应元素的下标
// 如果查找的元素存在多个，那么只返回第一个元素的下标
// 如果查找的元素不存在，则返回-1
var arr = [8,5,7,2,2,6]
console.log(arr.indexOf(2))     // 3
console.log(arr.indexOf(10))    // -1

// lastIndexOf()也是用来查找数组元素，它返回的是最后一个的元素的下标
// 如果查找的元素不存在，则返回-1
console.log(arr.lastIndexOf(2)) // 4
console.log(arr.lastIndexOf(20))// -1

• 5个迭代方法：forEach()，map()，filter()，some()，every()

// forEach()可用来遍历数组，既能得到值也能得到下标，如下所示
var arr = [2,3,1,2,6]
// item和index都是自定义的形参，item接收到的是值，index接收到的是下标
arr.forEach(function(item,index){
    console.log(item,index)
})
// item    index
//  2        0
//  3        1
//  1        2
//  2        3
//  6        4

// map()也是用来遍历数组的，遍历的同时可以给一个返回值，所有的返回值会放进一个新的数组
var arr1 = arr.map(function(item,index){
    // item是值，index是下标
    console.log(item,index)
    return item*2
})
console.log(arr1)   // [4,6,2,4,12]

// filter()用来过滤数组
// 每一次遍历的时候都会返回一个条件
// 当这个条件结果为true的时候，当前值就会保留，否则就会被过滤掉
var arr2 = arr.filter(function(item,index){
    // item是值，index是下标
    // 数组中大于三的值保留，其余的都会被过滤
    return item > 3
})
console.log(arr2)   // [6]

// some()测试数组中是不是至少有1个元素通过了被提供的函数测试，它返回的是一个布尔值
// 每一次遍历的时候都会返回一个条件，只要有一个满足条件最后的结果就是true
// 如果没有一个满足条件就返回false
// 在遍历过程中，只要遇到一个满足条件的元素就会停止遍历
var is = arr.some(function(item,index){
    // item是值，index是下标
    console.log(item,index)
    return item%2 === 0
})
console.log(is) // true
var is1 = arr.some(function(item,index){
    return item*2 === 100
})
console.log(is1) // false   

// every()测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
// 全部满足条件返回true，否则返回false
// 遍历过程中只要遇到一个不满足条件的元素就会停止遍历
var is2 = arr.every(function(item,index){
    return item > 0
})
console.log(is2)    // true
var is3 = arr.every(function(item,index){
    return item > 100
})
console.log(is3)    // false

• 2个归并方法：reduce()，reduceRight()

// reduce()对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
// 也就是执行一个我们需要的运算然后把所有值归并成一个值
var arr = [3,5,2,6,2]
var sum = arr.reduce(function(res,curr,index){
    // res是用来放返回值的；第一次的res是arr[0]，之后的res是上一次的返回值
    // curr是数组元素，但它是从arr[1]开始的
    // index就是数组的下标，但是此处的下标是从1开始
    console.log(res,curr,index)
    res += curr
    return res
})
console.log(sum)    // 18
/* 
数组是[3,5,2,6,2]
   res     curr     index
    3       5         1
    8       2         2
    10      6         3
    16      2         4
    18
由此我们可以看出res的第一个值是3也就是arr[0]，curr第一个值是5也就是arr[1]
每次循环遍历执行完 res += curr 后的值都保存在res中
*/

// 如果我们想要curr从第一个元素开始，我们只需要在函数后面加上0；如下：
var sum1 = arr.reduce(function(res,curr,index){
    console.log(res,curr,index)
    res += curr
    return res
},0)
console.log(sum1)
/* 
数组是[3,5,2,6,2]
   res     curr     index
    0       3         0 
    3       5         1
    8       2         2
    10      6         3
    16      2         4
    18
当在函数后面加上0之后，res初始值就是0，初始值我们也可以不给0，可以给其他值，具体看需求
curr就是从数组的第一个元素开始，index也是从0开始
*/

// 小例题：把一个二维数组归并成一个一维数组
var arr1 = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
]
var arr2 = arr1.reduce(function(res,curr){
    return res.concat(curr)
},[])
console.log(arr2)   // [1,2,3,4,5,6,7,8,9]

// reduceRight()和reduce()用法一样，但是它的归并方向不一样
// reduce()是从左往右进行归并，但是reduceRight()是从右往左归并
// 接着上面例题：
var arr3 = arr1.reduceRight(function(res,curr){
    return res.concat(curr)
},[])
console.log(arr3)   // [7,8,9,4,5,6,1,2,3]