Javascript对象之【Array对象】

数组用于在变量中存储多个值。
本篇文章作为Array对象的温习笔记，包含3个数组属性和30个数组方法。
文章示例中MZPP为 民族品牌 拼音首写字母大写。

一、数组属性

• constructor
  返回数组对象的原型函数。

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
console.log(MZPPS.constructor) // ƒ Array() { [native code] }

• length
  设置或返回数组元素的个数。

// 设置数组长度
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.length = 4
console.log(MZPPS.length) // 4
console.log(MZPPS) // ["HUAWEI", "BYD", "MAOTAI", empty]
console.log(MZPPS[3]) // undefined

// 返回数组长度
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
console.log(MZPPS.length) // 3

• prototype
  向数组对象添加属性或者方法。

// 添加属性
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
Array.prototype.love = 'forever'
console.log(MZPPS) // ['HUAWEI', 'BYD', 'MAOTAI']
console.log(MZPPS.love) // forever

// 添加方法
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
Array.prototype.ILoveMZPPS = function() {
    for (let i = 0, len = this.length; i < len; i++) {
        this[i] = 'I love ' + this[i]
    }
}
MZPPS.ILoveMZPPS()
console.log(MZPPS) // ["I love I love I love HUAWEI", "I love I love BYD", "I love I love MAOTAI"]

二、数组方法

方法按照字母先后顺序列出。

• concat()
  连接两个或更多的数组，并返回结果。

  • 语法

  array1.concat(array2, array3, ...)
  

  • 参数
    参数为必填，可以是数组对象，也可以是具体的值。

  • 返回值
    返回一个新的数组。

  • 举例

  // 传入数组对象
  const MZPPS1 = ['HUAWEI', 'BYD', 'MAOTAI']
  const MZPPS2 = ['CHANGAN']
  const MZPPS = MZPPS1.concat(MZPPS2)
  console.log(MZPPS) // ["HUAWEI", "BYD", "MAOTAI", "CHANGAN"]
  
  // 传入具体的值
  const MZPPS1 = ['HUAWEI', 'BYD', 'MAOTAI']
  const MZPPS = MZPPS1.concat('CHANGAN')
  console.log(MZPPS) // ["HUAWEI", "BYD", "MAOTAI", "CHANGAN"]
  

• copyWithin()（ES6新增）
  从数组的指定位置拷贝元素到数组的另一个指定位置中。

  • 语法

  array.copyWithin(targetIndex, startIndex, endIndex)
  

  • 参数
    • targetIndex: 必需，复制到制定位置索引
    • startIndex：可选，复制元素的开始位置索引，默认0
    • endIndex：可选，复制元素的结束位置索引，默认a r ray.length。负值表示从后往前。
  • 返回值
    被修改后的原数组。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.copyWithin(1) // ["HUAWEI", "HUAWEI", "BYD"]
  MZPPS.copyWithin(1,0) // ["HUAWEI", "HUAWEI", "BYD"]
  MZPPS.copyWithin(1,0,1) // ["HUAWEI", "HUAWEI", "BYD"]
  MZPPS.copyWithin(1,0,2) // ["HUAWEI", "HUAWEI", "BYD"]
  MZPPS.copyWithin(2,0,1) // ["HUAWEI", "BYD", "HUAWEI"]
  MZPPS.copyWithin(1,0,-1) // ["HUAWEI", "HUAWEI", "BYD"]
  

• entries()（ES6新增）
  返回数组的可迭代对象。

  • 语法

  array.entries()
  

  • 参数
    无。
  • 返回值
    数组迭代对象。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  // 1.解构遍历
  for(let [index, value] of MZPPS.entries()) {
      console.log(index, value)
  }
  // 0 "HUAWEI"
  // 1 "BYD"
  // 2 "MAOTAI"
  
  // 2.使用entries返回的迭代器遍历
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const iterator = MZPPS.entries()
  let isDone = false
  do{
      const nextI = iterator.next()
      isDone = nextI.done
      console.log(nextI.value)
  } while (!isDone)
  // [0, "HUAWEI"]
  // [1, "BYD"]
  // [2, "MAOTAI"]
  

• every()（ES6新增）
  检测数值元素的每个元素是否都符合条件。

  • 语法

  array.every(function(currentItem, index, arr), thisValue)
  

  • 参数
    • function: 必须，数组中每个元素都会执行该检测函数
      a. currentItem: 必须，当前元素
      b. index: 可选，当前元素索引
      c. arr: 可选，当前元素属于的数组对象
    • thisValue: 可选，用作检测函数this的值
  • 返回值
  • 举例

  // 不传第二个参数
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const isLen_3 = MZPPS.every(function(currentItem, index, arr){
      // 由于HUAWEI的length==6，所以第一次就退出循环，返回false
      console.log(currentItem) // HUAWEI
      console.log(index) // 0
      console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"]
      console.log(this) // window对象
      return currentItem.length == 3
  })
  // isLen_3 == false
  
  // 传第二个参数
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const isLen_3 = MZPPS.every(function(currentItem, index, arr){
      // 由于HUAWEI的length==6，所以第一次就退出循环，返回false
      console.log(currentItem) // HUAWEI
      console.log(index) // 0
      console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"]
      console.log(this) // ["HUAWEI", "BYD", "MAOTAI"]
      return currentItem.length == 3
  }, MZPPS)
  // isLen_3 == false
  

• fill()
  使用一个固定值来填充数组。

  • 语法

  array.fill(value, start, end)
  

  • 参数
    • value：必须，填充的固定值
    • start：可选，开始填充位置，默认0
    • end：可选，结束填充位置(开区间)，默认array.length
  • 返回值
    填充后的原数组。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.fill('CHANGAN') // ["CHANGAN", "CHANGAN", "CHANGAN"]
  MZPPS.fill('CHANGAN', 1) // ["HUAWEI", "CHANGAN", "CHANGAN"]
  MZPPS.fill('CHANGAN', 1, 1) //  ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.fill('CHANGAN', 1, 2) //  ['HUAWEI', 'CHANGAN', 'MAOTAI']
  MZPPS.fill('CHANGAN', 1, 3) //  ['HUAWEI', 'CHANGAN', 'CHANGAN']
  

• filter()（ES6新增）
  检测数值元素，并返回符合条件所有元素的数组。

  • 语法

  array.filter(function(currentValue,index,arr), thisValue)
  

  • 参数
    • function：必须，每个元素都执行该过滤函数
      a. currentValue: 必须，当前元素
      b. index: 可选，当前元素索引
      c. arr：可选，当前元素所在数组
    • thisValue: 可选，用作过滤函数this的值
  • 返回值
    满足过滤函数的新数组。
  • 举例

  // 不传第二个参数
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const newArr = MZPPS.filter(function(currentItem, index, arr){
      console.log(currentItem) // HUAWEI BYD MAOTAI
      console.log(index) // 0 1 2
      console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"]
      console.log(this) // window对象
      return currentItem.length == 3 // 只有BYD的length==3
  })
  console.log(newArr) // ['BYD']
  
  // 传第二个参数
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const newArr = MZPPS.filter(function(currentItem, index, arr){
      console.log(currentItem) // HUAWEI BYD MAOTAI
      console.log(index) // 0 1 2
      console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"]
      console.log(this) // ['HUAWEI', 'BYD', 'MAOTAI']
      return currentItem.length == 3 // 只有BYD的length==3
  }, MZPPS)
  console.log(newArr) // ['BYD']
  

• find()
  返回符合传入测试（函数）条件的数组元素。

  • 语法

  array.find(function(currentValue, index, arr),thisValue)
  

  • 参数
    • function: 必须，每个元素都需要执行的判断函数（返回符合条件的元素后，其他元素不再执行）
      a. currentValue: 必须，当前元素
      b. index：可选，当前元素索引
      c. arr: 可选，当前元素所在数组
    • thisValue: 可选，用作判断函数的this值
  • 返回值
    符合判断函数条件的一个元素。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD','BMW', 'MAOTAI']
  const findItem = MZPPS.find(function(currentValue, index, arr){
      return currentValue.length == 3
  })
  console.log(findItem) // BYD
  

• findIndex()
  返回符合传入测试（函数）条件的数组元素索引。

  • 语法

  array.findIndex(function(currentValue, index, arr), thisValue)
  

  • 参数
    • function: 必须，每个元素都需要执行的判断函数（返回符合条件的元素后，其他元素不再执行）
      a. currentValue: 必须，当前元素
      b. index：可选，当前元素索引
      c. arr: 可选，当前元素所在数组
    • thisValue: 可选，用作判断函数的this值
  • 返回值
    符合判断函数条件的一个元素的索引。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD','BMW', 'MAOTAI']
  const findIndex = MZPPS.findIndex(function(currentValue, index, arr){
      return currentValue.length == 3
  })
  console.log(findIndex) // 1
  

• forEach()（ES6新增）
  数组每个元素都执行一次回调函数，空数组不执行。

  • 语法

  array.forEach(function(currentValue, index, arr), thisValue)
  

  • 参数
    • function: 必须，每个元素都需要执行的判断函数（返回符合条件的元素后，其他元素不再执行）
      a. currentValue: 必须，当前元素
      b. index：可选，当前元素索引
      c. arr: 可选，当前元素所在数组
    • thisValue: 可选，用作判断函数的this值
  • 返回值
    无。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.forEach(function(currentValue, index, arr){
      console.log(currentValue) // 依次为 HUAWEI BYD MAOTAI
      console.log(index) // 依次为 0 1 2
      console.log(arr) // 三次['HUAWEI', 'BYD', 'MAOTAI']
  })
  

• from()
  通过给定的对象中创建一个数组。

  • 语法

  Array.from(object, mapFunction, thisValue)
  

  • 参数
    • object: 必须，要转化为数组的对象
    • mapFunction: 可选，数组中每个元素要执行的判断函数
      a. currentValue: 必须，当前元素
      b. index: 可选，当前元素索引
    • thisValue: 可选，执行函数的this值
  • 返回值
    新的数组对象，每个值为mapFunction的判断返回值，true 或者 false。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const newArr = Array.from(MZPPS, function(currentValue, index){
      console.log(currentValue)
      console.log(index)
      console.log(arr)
      return currentValue.length == 3
  })
  console.log(newArr) // [false, true, false]
  

• includes()
  判断一个数组是否包含一个指定的元素。

  • 语法

  arr.includes(searchElement, fromIndex)
  

  • 参数
    • searchElement: 必须，要查找的元素
    • fromIndex: 可选，查找开始的位置索引，默认0，负数为从后向前查找(开区间)
  • 返回值
    true 或者 false。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.includes('BYD') // true
  MZPPS.includes('BYD', 2) // false
  MZPPS.includes('BYD', -1) // 开区间，返回false
  MZPPS.includes('BYD', -2) // true
  

• indexOf()
  搜索数组中的元素，并返回它所在的位置，从前向后所有。

  • 语法

  array.indexOf(item,start)
  

  • 参数
    • item: 必须，要搜索的元素
    • start: 搜索开始的位置
  • 返回值
    搜索到元素的位置索引。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.indexOf('BYD') // 1
  MZPPS.indexOf('BYD', 1) // 1
  MZPPS.indexOf('BYD', 2) // -1
  

• isArray()
  判断对象是否为数组。

  • 语法

  Array.isArray(obj)
  

  • 参数
    • obj: 必须，要判断的对象
  • 返回值
    true 或 false。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  Array.isArray(MZPPS) // true
  Array.isArray('CHANGAN') // false
  

• join()
  把数组的所有元素放入一个字符串。

  • 语法

  array.join(separator)
  

  • 参数
    • separator: 必须，链接分隔符，不传参数默认为逗号
  • 返回值
    分隔字符链接的字符串，原数组不变。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.join() // HUAWEI,BYD,MAOTAI
  MZPPS.join('-') // HUAWEI-BYD-MAOTAI
  

• keys()（ES6新增）
  返回数组的可迭代对象，包含原始数组的键(key)。

  • 语法

  array.keys()
  

  • 参数
    无。
  • 返回值
    可迭代对象（迭代器）。
  • 举例

  // 解构遍历
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const iterator = MZPPS.keys()
  for(let key of iterator){
      console.log(key) // 依次输出 0 1 2
  }
  
  // 迭代器next遍历
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const iterator = MZPPS.keys()
  let isDone = false
  do {
      const iteratorNext = iterator.next()
      isDone = iteratorNext.done
      console.log(iteratorNext.value)
  } while(!isDone)
  

• lastIndexOf()
  搜索数组中的元素，并返回它最后出现的位置，从后向前搜索。

  • 语法

  array.lastIndexOf(item,start)
  

  • 参数
    • item: 必须，要搜索的元素
    • start: 可选，搜索开始的位置，默认array.length
  • 返回值
    搜索到元素最后出现的位置索引，搜索不到返回-1。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'BYD', 'MAOTAI']
  MZPPS.lastIndexOf('BYD') // 2
  MZPPS.lastIndexOf('BYD', 1) // 从索引为1的位置向前搜索，1
  MZPPS.lastIndexOf('BYD', 0) // -1
  

• map()（ES6新增）
  通过指定函数处理数组的每个元素，并返回处理后的数组。

  • 语法

  array.map(function(currentValue,index,arr), thisValue)
  

  • 参数
    • function: 必填，每个元素都要执行的处理函数。
      a. currentValue: 必须，当前元素
      b. index: 可选，当前元素索引
      c. arr: 当前元素所在数组
    • thisValue: 可选，制定数据处理函数的this值
  • 返回值
    数据处理函数执行后的新数组，原数组不变。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const newArr = MZPPS.map(function(currentValue, index, arr){
      console.log(index) // 依次输出 0 1 2
      return `I love ${currentValue}`
  })
  console.log(newArr) // ["I love HUAWEI", "I love BYD", "I love MAOTAI"]
  

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

  • 语法

  array.pop()
  

  • 参数
    无。
  • 返回值
    删除的元素。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.pop() // MAOTAI
  

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

  • 语法

  array.push(item1, item2, ..., itemX)
  

  • 参数
    • item1, item2, ..., itemX: 必须，要添加的元素
  • 返回值
    添加之后数组的长度。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.push('CHANGAN') // 4
  

• reduce()（ES6新增）
  将数组元素计算为一个值（从左到右）。

  • 语法

  array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  

  • 参数

    • function: 必须，所有元素都执行的计算函数。
      a. total: 必须，计算后的值
      b. currentValue: 必须，当前元素值
      c. currentIndex: 可选，当前元素索引
      d. arr: 可选，当前元素所在数组
    • initialValue: 可选，传递给计算函数的初始值

  • 返回值
    计算结果。

  • 举例

  // 不传初始值, 会将第一个值作为初始值
  const numbers = [1, 2, 3, 4]
  const total = numbers.reduce(function(total, currentValue, currentIndex, arr){
      console.log(currentIndex) // 依次输出 1 2 3
      console.log(arr) // [1, 2, 3, 4]
      return total + currentValue
  })
  console.log(total) // 10
  
  // 初始值为20
  const numbers = [1, 2, 3, 4]
  const total = numbers.reduce(function(total, currentValue, currentIndex, arr){
      console.log(currentIndex) // 依次输出0 1 2 3
      console.log(arr) // [1, 2, 3, 4]
      return total + currentValue
  }, 20)
  console.log(total) // 30
  

• reduceRight()（ES6新增）
  将数组元素计算为一个值（从右到左）。

  • 语法

  array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
  

  • 参数
    • function: 必须，所有元素都执行的计算函数。
      a. total: 必须，计算后的值
      b. currentValue: 必须，当前元素值
      c. currentIndex: 可选，当前元素索引
      d. arr: 可选，当前元素所在数组
    • initialValue: 可选，传递给计算函数的初始值
  • 返回值
    计算后的值。
  • 举例

  // 不传初始值, total默认为0
  const numbers = [1, 2, 3, 10]
  const total = numbers.reduce(function(total, currentValue, currentIndex, arr){
      console.log(currentIndex) // 依次输出 1 2 3
      console.log(arr) // [1, 2, 3, 4]
      return total - currentValue
  })
  console.log(total) // -14
  
  // 初始值为20
  const numbers = [1, 2, 3, 10]
  const total = numbers.reduce(function(total, currentValue, currentIndex, arr){
      console.log(currentIndex) // 依次输出0 1 2 3
      console.log(arr) // [1, 2, 3, 4]
      return total - currentValue
  }, 20)
  console.log(total) // 4
  

• reverse()
  反转数组的元素顺序。

  • 语法

  array.reverse()
  

  • 参数
    无。
  • 返回值
    反转后的数组。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.reverse() // ["MAOTAI", "BYD", "HUAWEI"]
  

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

  • 语法

  array.shift()
  

  • 参数
    无。
  • 返回值
    删除的元素。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.shift() // HUAWEI
  

• slice()
  选取数组的一部分，并返回一个新数组。

  • 语法

  array.slice(start, end)
  

  • 参数
    • start: 可选，选取开始的位置，负数从后向前选取
    • end: 可选，选取结束位置，负数从后先前选取，开区间
  • 返回值
    选取后的新数组。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.slice(0, 1) // ['HUAWEI']
  MZPPS.slice(1, 1) // []
  MZPPS.slice(-1) // ['MAOTAI']
  

• some()（ES6新增）
  检测数组元素中是否有元素符合指定条件。

  • 语法

  array.some(function(currentValue, currentIndex, arr){}, thisValue)
  

  • 参数
    • function: 必填，每个元素都要执行的处理函数。
      a. currentValue: 必须，当前元素
      b. index: 可选，当前元素索引
      c. arr: 当前元素所在数组
    • thisValue: 可选，指定当前检测函数的this值
  • 返回值
    有一个以上元素满足检测函数则返回true,否则返回false。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const hasSome = MZPPS.some(function(currentValue, currentIndex, arr){
      console.log(currentIndex) // 依次输出(当找到一个满足检测函数的值则返回t rue,其他元素不再执行检测函数) 0 1
      console.log(arr) // 输出两次['HUAWEI', 'BYD', 'MAOTAI']
      return currentValue.length == 3
  })
  console.log(hasSome) // true
  

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

  • 语法

  array.sort(sortfunction)
  

  • 参数
    • sortfunction: 可选，排序函数，缺省为升序
  • 返回值
    排序后的数组。
  • 举例

  // 缺省
  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.sort() // ["BYD", "HUAWEI", "MAOTAI"]
  
  //升序
  const MZPPS = [1, 3, 2]
  MZPPS.sort(function(a, b){
      return a - b
  })
  console.log(MZPPS) // [1, 2, 3]
  
  //倒序
  const MZPPS = [1, 3, 2]
  MZPPS.sort(function(a, b){
      return b - a
  })
  console.log(MZPPS) // [3, 2, 1]
  

• splice()
  从数组中添加或删除元素。

  • 语法

  array.splice(index,howmany,item1,.....,itemX)
  

  • 参数
    • index: 必须，添加或者删除的开始位置索引
    • howmany: 可选，必须为数字，规定删除的元素个数，如果为0，则不删除，如果缺省，则删除从index开始到数组结尾的所有元素
    • item1,.....,itemX: 可选，要添加的元素
  • 返回值
    如果删除元素，则返回包含删除元素的数组，元素组被改变。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const deletedE = MZPPS.splice(2, 1, 'CHANGAN')
  console.log(deletedE) // ["MAOTAI"]
  console.log(MZPPS) // ["HUAWEI", "BYD", "CHANGAN"]
  

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

  • 语法

  array.toString()
  

  • 参数
    无。
  • 返回值
    数组所有元素永逗号链接的字符串, 原数组不变。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.toString()
  

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

  • 语法

  array.unshift(item1,item2, ..., itemX)
  

  • 参数
    • item1,item2, ..., itemX: 可选，要添加的元素，缺省返回数组长度
  • 返回值
    添加后数组的长度，改变原数组。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  const a = MZPPS.unshift('CHANGAN')
  console.log(a) // 4
  

• valueOf()
  返回数组对象的原始值。

  • 语法

  array.valueOf()
  

  • 参数
    无。
  • 返回值
    原始值。
  • 举例

  const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
  MZPPS.valueOf() // ['HUAWEI', 'BYD', 'MAOTAI']