第四篇 引用类型 - 数组类型 - Array

1、概述

1、所有数组实例都继承于 Array.protoptype

2、所有的数组方法都定义在 Array.prototype 身上，和其他的构造函数一样，你可以通过扩展 Array 的 prototype 属性上的方法来给所有数组实例增加方法。

3、还一个鲜为人知的事实：Array.prototype 本身也是个数组。

 Array.isArray(Array.prototype); // true

2、数组的属性

Array.prototype.constructor

所有的数组实例都继承了这个属性，它的值就是 Array，表明了所有的数组都是由 Array 构造出来的。

 Array.prototype.constructor.call([1]) // []

Array.prototype.length

因为 Array.prototype 也是个数组，所有它也有 length 属性，这个值为 0，因为它是个空数组。

作用: 1、设置或返回数组的长度 2、用来增加和删除数组项

3、数组的创建

字面量方式

let arr = ['a','b','c'] => 字面量方式,直接给数组赋值

构造函数方式

let arr = new Array(); => 创建一个空数组
 
let arr = new Array(10); => 创建长度为10的数组
 
let arr = new Array('a') => 创建包含一个字符串元素a的数组
 
let arr = new Array(10,'a') => 创建包含10和字符串a两个元素的数组

Array.of ( ES6 新增 )

Array.of ()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

let arr = Array.of(3) => [3]
 
let arr = Array(3) => [empty * 4]
 
let arr1 = Array.of(1, 'a', true, null, undefined, {name: "zhangsan"}, [45]); =>  [ 1, 'a', true, null, undefined, { name: 'zhangsan' }, [ 45 ] ]

4、数组的检测

两种较为准确的检测方法

利用对象的 toString 方法

   Object.prototype.toString.call([]) === "[object Array]"

Array.isArray(); （ES6新增）

   Array.isArray([1,2,3]) => true

5、数组的方法

数组的方法主要包括: 1、数组原型的方法。2、构造函数的方法 （ES6新增部分）

各方法主要学习: 1、作用 2、参数 3、返回值 4、原始数组是否改变

原型上的方法 （共 24 个）

push()

   作用: 向数组的末尾添加一项或多项
   
   参数: ele1,ele2,[...ele3]
   
   返回值: push后数组的长度
   
   原数组是否改变: 是
   
      let arr = [1,2,3]
      
      let arr_1 = arr.push(7,8)
      
      console.log(arr) => [1,2,3,7,8]
      
      console.log(arr_1) => 5

pop()

   作用: 删除数组最后一项
   
   参数: 无
   
   返回值: 删除的那一项
   
   原数组是否改变: 是
   
       let arr = [1,2,3,4,5]
       
       let arr_1 = arr.pop()
       
       console.log(arr) => [1,2,3,4]
       
       console.log(arr_1) => 5

unshift()

   作用: 向数组的开头添加一项或多项
   
   参数: ele1,ele2,[...ele3]
   
   返回值: 添加元素后数组的长度
   
   原始数组是否改变: 是
   
       let uArr = [1,2,3]
   
       let uArr_1 = uArr.unshift('a','b')
   
       console.log(uArr) => ['a','b',1,2,3]
   
       console.log(uArr_1) => 5

shift()

   作用: 删除数组的第一项
   
   参数: 无
   
   返回值: 删除的那一项
   
   原始数组是否改变: 是
   
       let sArr = [1,2,3]
   
       let sArr_1 = sArr.shift()
   
       console.log(sArr) => [2,3]
   
       console.log(sArr_1) => 1

splice()

   作用: 删除、插入、替换数组项
   
   参数: startIndex,deleteCount,item
   
   返回值: 删除项组成的数组
   
   是否改变数组: 是
   
       let splArr = [1,2,3,4,5]
       
       let splArr_1 = splArr.splice(2,1)
       
       console.log(splArr) => 
       
       console.log(splArr_1)  => 

copyWithin()

   作用: 将数组指定位置（start 到 end）的元素复制到当前数组的其他位置（target开始），这种复制会替换原来位置的元素（ES6新增）
   
   参数: target[start,end]
   
   参数说明:
   
        target: 复制的目标位置（包括），即要被替换的元素开始的位置
        
        start: 要copy的元素的开始位置，默认0
        
        end: 要copy的元素的结束位置，默认为数组最后一个元素
        
   返回值: 复制替换之后的数组
   
   原始数组是否改变: 是

reverse()

   作用: 翻转原数组
   
   参数: 无
   
   返回值: 翻转后的数组
   
   愿数组是否改变: 是
   
         let rArr = [1,2,3]
         
         let rArr_1 = rArr.reverse()
         
         console.log(rArr)   => [3,2,1]
         
         console.log(rArr_1)   => [3,2,1]

sort()

   作用: 数组排序
   
   参数: compareFunction
   
   参数说明: 
   
        compareFunction 的值大于 0 时 调换当前比对项的顺序，否则顺序不变；
        
        参数可以不传，不传默认按照 Unicode 编码的顺序排列
        
   返回值: 排序后的数组
   
   原数组是否改变: 是
   
        let sArr = [1,2,3,4]
        
        let sArr_1 = sArr.sort((a,b) => {
           return a - b
        } )
        
        console.log(sArr)   => [4,3,2,1]
        console.log(sArr_1)  => [4,3,2,1]

concat()

    作用: 居于当前数组拼接数组
    
    参数: 参数的类型可以是任意类型
    
         不是数组类型直接按顺序拼接到数组末尾
         
         数组类型的则将数组元素逐一取出拼接到数组末尾
         
         不传则相当于复制数组
         
    返回值: 拼接后的数组
    
    原数组是否改变: 否
    
         let cArr = [1,2]
         
         let cArr_1 = cArr.concat('a',{id:1},[3,4])
         
         console.log(cArr)  => [1,2]
         console.log(cArr_1)  => [1,2,'a',{id:1},3,4]
         
         let cArr_2 = cArr.concat([5,6])
         
         console.log(cArr_2)  => [1,2,5,6]

slice()

    作用: 基于当前数组的一项或多项创建一个新的数组
    
    参数: startIndex endIndex
    
    参数说明: 返回的元素包含 startIndex 位置的元素 但不包含 endIndex 的元素
    
    返回值: 返回截取的元素组成的数组
    
    原数组是否改变: 否
    
         let slArr = [1,2,3,4,5]
         
         let slArr_1 = slArr.slice(2,4)
         
         console.log(slArr)  => [1,2,3,4,5]
         console.log(slArr_1)  => [3,4]
         
         // 用于复制数组 
         
         let slArr_2 = slArr.slice(0)
         
         console.log(slArr_2)  => [1,2,3,4,5]

indexOf() （ ES5 ）

     作用: 从数组开头查找元素在数组中的索引位置
     
     参数: searchElement fromIndex
     
     返回值: searchElement在数组中的索引，没找到 searchElement 则 返回 -1 
     
     原数组是否改变: 否
     
          let iArr = [1,2,3,4,5,6,7]
          
          let iArr_1 = iArr.indexOf(3)
          
          let iArr_2 = iArr.indexOf(9)
          
          console.log(iArr)  => [1,2,3,4,5,6,7]
          console.log(iArr_1)  => 2
          console.log(iArr_2)  => -1

lastIndexOf() ( ES5 )

     作用: 从数组结尾查找元素在数组中的索引位置
      
     参数: searchElement fromIndex
      
     返回值: searchElement在数组中的索引，没找到 searchElement 则 返回 -1 
     
     原数组是否改变: 否
     
          let lArr = [1,2,3,4,5,6,7]
          
          let lArr_1 = lArr.indexOf(5)
          
          let lArr_2 = lArr.indexOf(9)
          
          console.log(lArr)  => [1,2,3,4,5,6,7]
          console.log(lArr_1)  => 4
          console.log(lArr_2)  => -1

every() （ ES5 ）

    作用: 对数组的每一项运行指定的函数，如果该函数对每一项都返回 true ，则返回 true 
    
    参数: callback thisArg
    
    参数说明: callback 有三个参数  item（当前项） index（当前索引） array(数组对象本身)
    
    返回值: true or false
    
    原数组是否改变: 涉及 callback 不确定
    
          let eArr = [1,2,3,4,5]
          
          let eArr_1 = eArr.every((item,index,array) => {
              return item > 2
          })
          
          console.log(eArr)  => [1,2,3,4,5]
          console.log(eArr_1)  => false
          
      注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
      
          let eArr_2 = eArr.every(function(item,index,array){
              return item > this.id
          },{id:2})
          
          console.log(eArr)  => [1,2,3,4,5]
          console.log(eArr_2)  => false

some() （ ES5 ）

      作用: 对数组中的每一项运行指定函数，如果该函数对任意一项返回 true 则返回 true
      
      参数: callback  thisArg
      
      返回值: true  or  false
      
      原始数组是否改变: 涉及 callback 不确定
      
           let soArr = [1,2,3,4,5]
           
           let soArr_1 = soArr.some((item,index,array) => {
                return item > 2
           })
           
           console.log(soArr)  => [1,2,3,4,5]
           console.log(soArr_1)  => true
           
        注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
       
           let soArr_2 = soArr.some(function(item,index,array){
              return item > this.id
           },{id:3})
           
           console.log(soArr_2)  => true

filter() （ ES5 ）

      作用: 对数组每一项运行给定的函数，返回该函数返回 true 的项 组成的数组
      
      参数: callback thisArg
      
      参数说明: callback 有三个参数  item（当前项） index（当前索引） array（数组对象本身）
      
      返回值: 函数返回 true 的项组成数组
      
      原始数组是否改变: 涉及 callback 不确定
      
           let fArr = [1,2,3,4,5]
           
           let fArr_1 = fArr.filter((item,index,array) => {
                return item > 2
           })
           
           console.log(fArr)  => [1,2,3,4,5]
           console.log(fArr_1)  => [3,4,5]
           
        注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
        
           let fArr_2 = fArr.filter(function(item,index,array){
                return item > this.id
           },{id:3})
           
           console.log(fArr_2)  => [4,5]

map() （ ES5 ）

      作用: 对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组
      
      参数: callback thisArg
      
      参数说明: callback 有三个参数  item（当前项） index（当前索引） array（数组对象本身）
      
      返回值: 函数每次调用结果组成的数组
      
      原始数组是否改变: 涉及 callback 不确定
      
            let mArr = [1,2,3,4,5]
            
            let mArr_1 = mArr.map((item,index,array) => {
                 return item * item
            })   
            
            console.log(mArr)  => [1,2,3,4,5]
            console.log(mArr_1)  => [1,4,9,16,25]
            
         注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
       
            let mArr_2 = mArr.map(function(item,index,array){
                return item * this.id
            },{id:2})
            
            console.log(mArr_2)  => [2,4,6,8,10]

forEach() （ ES5 ）

      作用: 对数组中的每一项运行给定的函数。无返回值
      
      参数: callback thisArg
      
      参数说明: callback 有三个参数  item（当前项） index（当前索引） array（数组对象本身）
      
      返回值: 无
      
      原始数组是否改变: 涉及 callback 不确定
      
      特别注意: 在所有项都遍历完成前 不能像 for 循环一样 提前终止循环
      
             let foArr = [1,2,3,4,5]
             
             let foArr_1 = forArr.forEach((item,index,array) => {
                 // 不会有返回值 但在这里可以执行某些操作
                 return item * item
             })
             
             console.log(foArr) => [1,4,9,16,25]
             console.log(foArr_1)  => undefined
             
         注意: 该方法的 第二个参数 可选 作用是设定第一个参数的 this 指向 , 如果使用了第二个参数，callback 不能使用箭头函数
         
          let forArr_2 = forArr.forEach(function(item,index,array){
               return item + this.id
          },{id:2})
          
          console.log(foArr)  => [3,4,5,6,7]

reduce() （ ES5 ）

     作用: 从数组的第一项开始，逐步遍历到最后，迭代数组的所有项
     
     参数: callback initialValue
     
     参数说明: 
     
        callback迭代函数，有四个参数（pre,cur,index,array）
        
           pre: 前一个值，（initialValue || 数组第一项 || 上一次迭代结果）
        
           cur: 当前迭代项
        
           index: 当前迭代索引
        
           array: 迭代的原始数组
           
        initialValue: 迭代的基础值，不传基础值是数组第一项
        
     返回值: 数组迭代后，数组的迭代结果
     
     原始数组是否改变: 涉及 callback 不确定
     
           let rArr = [1,2,3]
           
           let sum = rArr.reduce((pre,cue,index,array) => {
               return pre + cur  // 1 + 2 + 3 数组求和
           })
           
           console.log(rArr)  => [1,2,3]
           console.log(sum )  => 6
           
       传 initialValue 基础值的示列
       
           let sum_1 = rArr.reduce((pre,cur,index,array) => {
               return pre + cur  // 10 + 1 + 2 + 3
           },10)
           
           console.log(rArr)  => [1,2,3]
           console.log(sum_1)  => 16
           
           ##### reduce()  （ ES5 ）              
         
     作用: 从数组的第一项开始，逐步遍历到最后，迭代数组的所有项
     
     参数: callback initialValue
     
     参数说明: 
     
        callback迭代函数，有四个参数（pre,cur,index,array）
        
           pre: 前一个值，（initialValue || 数组第一项 || 上一次迭代结果）
        
           cur: 当前迭代项
        
           index: 当前迭代索引
        
           array: 迭代的原始数组
           
        initialValue: 迭代的基础值，不传基础值是数组第一项
        
     返回值: 数组迭代后，数组的迭代结果
     
     原始数组是否改变: 涉及 callback 不确定
     
           let rArr = [1,2,3]
           
           let sum = rArr.reduce((pre,cue,index,array) => {
               return pre + cur  // 1 + 2 + 3 数组求和
           })
           
           console.log(rArr)  => [1,2,3]
           console.log(sum )  => 6
           
       传 initialValue 基础值的示列
       
           let sum_1 = rArr.reduce((pre,cur,index,array) => {
               return pre + cur  // 10 + 1 + 2 + 3
           },10)
           
           console.log(rArr)  => [1,2,3]
           console.log(sum_1)  => 16

reduceRight() （ ES5 ）

     作用: 从数组的最后一项开始，逐步遍历到最后，迭代数组的所有项
     
     参数: callback initialValue
     
     参数说明: 
     
        callback迭代函数，有四个参数（pre,cur,index,array）
        
           pre: 前一个值，（initialValue || 数组第一项 || 上一次迭代结果）
        
           cur: 当前迭代项
        
           index: 当前迭代索引
        
           array: 迭代的原始数组
           
        initialValue: 迭代的基础值，不传基础值是数组第一项
        
     返回值: 数组迭代后，数组的迭代结果
     
     原始数组是否改变: 涉及 callback 不确定
     
         let rightArr = ['h','e','l','l','o']
           
         let str = rightArr.reduceRight((pre,cue,index,array) => {
             return pre + cur  // 从后向前拼接字符串
         })
           
         console.log(rightArr)  => ['h','e','l','l','o']
         console.log(str)  => 'olleh'

find() （ ES6 ）

   作用: 查找数组中第一个符合条件的元素，返回该元素
   
   参数: callback thisArg
   
   参数说明: 参数的使用同上述 forEach every map some filter 方法一致
   
   返回值: 查找到则返回该元素，没有找到返回 undefined
   
   原始数组是否改变: 涉及 callback 不确定
   
         let findArr = [1,2,'a',3,4,9,10]
         
         let findRe = findArr.find((item,index,array) => {
            return item > 4
         })
         
         console.log(findArr)  => [1,2,'a',3,4,9,10]
         console.log(findRe)  => 9

findIndex() （ ES6 ）

   作用: 查找数组中第一个符合条件的元素所在位置的索引，返回该索引值
   
   参数: callback thisArg
   
   参数说明: 参数的使用同上述 forEach every map some filter 方法一致
   
   返回值: 查找到则返回该索引值，没有找到返回 -1
   
   原始数组是否改变: 涉及 callback 不确定
   
   let findIndexArr = [1,2,'a',3,4,9,10]
         
   let findIndexRe = findIndexArr.findIndex((item,index,array) => {
        return item > 4
   })
         
   console.log(findIndexArr)  => [1,2,'a',3,4,9,10]
   console.log(findIndexRe)  => 5

fill() （ ES6 ）

   作用: 用指定的元素，填充数组 从 start（包括） 到 end（不包括）之间的元素，如果该区间内已经有元素，直接替换掉
   
   参数: value startIndex endIndex
   
   返回值: 填充后的数组
   
   原数组是否改变: 是
   
        let fillArr = [1,2,3,4,5]
        
        let fillArr_1 = fillArr.fill('a',2,4)
        
        console.log(fillArr) => [1, 2, 'a', 'a', 5]
        console.log(fillArr_1) => [1, 2, 'a', 'a', 5]

includes() （ ES7 ）

    作用: 判断数组中是否包含指定的元素
    
    参数: searchElement fromIndex
    
    返回值: true or false
    
    原始数组是否改变: 否
    
        let inArr = [1,2,3,4,5,6]
        
        let inArr_1 = inArr.includes(3)
        
        console.log(inArr) => [1,2,3,4,5,6]
        console.log(inArr_1) => true
        
     注意: 这个方法弥补了 indexOf 查看 元素时的一个不足，即查找 NaN 误差
     
        let inArr_2 = [1,2,3,NaN,4,5]
        
        let inArr_3 = inArr_2.includes(NaN)
        let inArr_4 = inArr_2.indexOf(NaN)
        
        console.log(inArr_3) => true  includes 找到了 NaN
        console.log(inArr_4) => -1 indexOf 找不到 NaN

toString() 、 toLocalString()（ ES7 ）

   作用: 调用数组每一项的 toString() 方法，返回的是以逗号分隔的字符串
   
   参数: 无
   
   返回值: 转化后的字符串
   
   原数组是否改变: 否
   
        let stringArr = [1,[1,2,[4]],{name:"caixin"},3]
        
        let stringArr_1 = stringArr.toString()
        let stringArr_2 = stringArr.toLocalString() ? 报错
        
        console.log(stringArr) => [1,[1,2,[4]],{name:"caixin"},3]
        console.log(stringArr_1) => 1,1,2,4,[object Object],3
        console.log(stringArr_2) => ? 报错

join()（ ES5 ）

   作用: 将数组作为字符串返回
   
   参数: 分隔符号 默认 为 ,
   
   返回值: 转换后的字符串
   
   原数组是否改变: 否
   
        let joinArr = [1,'c','a','x',2,[1,[2]]]
        
        let joinArr_1 = joinArr.join()
        
        console.log(joinArr)  => [1,'c','a','x',2,[1,[2]]]
        console.log(joinArr_1)  =>  1,c,a,x,2,1,2

构造函数的方法

Array.from()

   作用: 将类数组转换为数组
   
   参数: arrLike [, mapFn [,thisArg]]
   
   参数说明: 
   
      arrLike: 类数组对象，可以是我们常见的 nodeList arguments、字符串、iterable对象等
      
   返回值: 转换后的数组，如果有 mapFn 则返回结果是经过 mapFn 处理的数组
   
   原类数组是否改变: 不使用 mapFn 则类数组不改变。使用 mapFn 则结果同上述迭代方法中使用 callback 的情况一致
   
       let fromStr = 'caixin'
       
       let fromStr_1 = Array.from(fromStr)
       
       console.log(fromStr)  => 'caixin'
       console.log(fromStr_1)  => ['c','a','i','x','i','n']
      
       let fromStr_2 = 'caixin'
       
       let fromStr_3 = Array.from(fromStr_2,(item,index) => {
          return item.toUpperCase()
       })
       
       console.log(fromStr_2)  => 'caixin'
       console.log(fromStr_3)  => ['C','A','I','X','I','N']
       
    特别注意:
    
       Array.from() 等价于  Array.prototype.slice.call(argument,0)

数组扩展运算符 （ ES6 ）

数组的扩展运算符可以将数组转换为以逗号分割的参数序列

将数组通过扩展运算符转换为参数序列直接传参，无需使用apply转换了

    let kArr = [1,2,3]
    
    Math.min(...kArr)  // Math.min(1,2,3) 
    
    apply 写法
    
    Math.min.apply(null,kArr)

可以用于复制数组和拼接数组

   let kArr_1 = [1,2,3]
   
   let kArr_2 = ['a','b','c']
   
   consle.log([...kArr_1,...kArr_2]) => [1,2,3,'a','b','c']

可以将字符串分解成真正的数组

   let kStr = "caixin"
   
   console.log([...kStr])  => ['c','a','i','x','i',''n]

总结

方法的总结

1、数组的方法无外乎是对数组的增、删、改、查、转换、迭代；增、删、改都会改变原始数组。

2、查、转换的方法不涉及 callback参数 的不会改变原数组，涉及到的则视情况而定。

3、迭代方法因为均会涉及到 callback参数 因此不确定 如果直接在 callback中操作原数组，那原数组肯定会改变；如果不是直接操作原数组，而是操作 callback的item参数时，如果item是基本数据类型则原数组中对应的该项元素不会改变，如果是引用类型则会改变。

4、所有涉及索引的方法，开始位置都是在操作范畴，结束位置都是不包括在操作范围内的。

归类总结

1、按功能归类

创建数组的方法

 1、new Array()  
 
 2、let arr = []
 
 3、Array.of()  

检测数组的方法

 1、Object.prototype.toString.call([]) === "[object,Array]" => true
 
 2、Array.isArray([1,2,3])  => true

常规操作数组

 1、push()
 
 2、pop()
 
 3、unshift()
 
 4、shift()
 
 5、splice()

复制、翻转、排序、拼接、填充数组

 1、copyWithin()
 
 2、reverse()
 
 3、sort()
 
 4、concat()
 
 5、slice()
 
 6、fill()
 
 7、扩展运算符 [...Array1,...Array2]
 
 8、valueOf() => 返回数组本身 

查找数组项

 1、indexOf()
 
 2、lastIndexOf()
 
 3、find()
 
 4、findIndex()
 
 5、includes()

运行给定函数，判断每一项是否符合条件

 1、every()
 
 2、some()

数组迭代循环 在 callback 里做一些操作

 1、filter()
 
 2、map()
 
 3、forEach()

特殊方法 clalback 多个参数 可做一些深入操作

 1、reduce()

转换为字符串操作

 1、toString()
 
 2、toLocalString()
 
 3、join()

将类数组转换为数组

 1、Array.from()
 
 2、数组扩展运算符 [...String] 

语句

 for (let i of Array){}
 
 for (let i in Array){}

2、按版本归类

ES5

 1、let arr = new Array()
 
 2、let arr = []
 
 3、Object.prototype.toString.call([]) === "[object,Array]"
 
 4、push()
 
 5、pop()
 
 6、unshift()
 
 7、shift()
 
 8、splice()
 
 9、reverse
 
 10、sort()
 
 11、concat()
 
 12、slice()
 
 13、indexOf()
 
 14、lastIndexOf()
 
 15、every()
 
 16、some()
 
 17、filter()
 
 18、map()
 
 19、forEach()
 
 20、reduce()
 
 21、toString()
 
 22、toLocalString()
 
 23、valueOf()  => 返回数组本身

ES6 +

 1、Array.of()
 
 2、copyWithin()
 
 3、find()
 
 4、findIndexOf()
 
 5、fill()
 
 6、includes()
 
 7、Array.from()
 
 8、扩展运算符 [...Array] [...String]
 
 9、for (let i of Array){}
 
 10、for (let i in Array){}