filter、map、forEach

filter

1. filter() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
2. 注意： filter() 不會對空數(shù)組進(jìn)行檢測。
3. 注意： filter() 不會改變原始數(shù)組。

語法：array.filter(function(currentValue,index,arr), thisValue)

參數(shù)說明

• currentValue：必須。當(dāng)前元素的值
• index：可選。當(dāng)前元素的索引值（下標(biāo)）
• arr：可選。當(dāng)前元素屬于的數(shù)組對象
• thisValue：可選。對象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

map

1. map() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
2. map() 方法按照原始數(shù)組元素順序依次處理元素。
3. 注意： map() 不會對空數(shù)組進(jìn)行檢測。
4. 注意： map() 不會改變原始數(shù)組。

語法：array.map(function(currentValue,index,arr), thisValue)

參數(shù)說明

• currentValue：必須。當(dāng)前元素的值
• index：可選。當(dāng)前元素的索引值
• arr：可選。當(dāng)前元素屬于的數(shù)組對象
• thisValue：可選。對象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue，或者傳入 null、undefined，那么回調(diào)函數(shù)的 this 為全局對象。

forEach

1. forEach() 方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。
2. 注意: forEach() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

語法：array.forEach(function(currentValue, index, arr), thisValue)

參數(shù)說明

• currentValue：必須。當(dāng)前元素
• index：可選。當(dāng)前元素的索引值。
• arr：可選。當(dāng)前元素所屬的數(shù)組對象。
• thisValue：可選。傳遞給函數(shù)的值一般用 "this" 值。如果這個參數(shù)為空， "undefined" 會傳遞給 "this" 值。

舉個例子：

export default {
  name: 'Array',
  components: {},
  data() {
    return {
      array: [
        { label: '數(shù)組1', value: 234 },
        { label: '數(shù)組2', value: 854 },
        { label: '數(shù)組3', value: 12 },
        { label: '數(shù)組4', value: 410 }
      ],
      target: []
    }
  },

  computed: {},

  created() {},

  methods: {
    filter() {
      this.target = this.array.filter((item, index, arr) => {
        return item.value > 400
      }, this)
      console.log(this.target)
      // [ { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組4", "value": 410 } ]
      console.log(this.array)
      // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
    },
    map() {
      this.target = this.array.map((item, index, arr) => {
        return item.value * 2
      }, this)
      console.log(this.target)
      // [ 468, 1708, 24, 820 ]
      console.log(this.array)
      // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
    },
    forEach() {
      this.array.forEach((item, index, arr) => {
        item.value = item.value * 2
      }, this)
      console.log(this.target)
      // []
      console.log(this.array)
      // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
    }
  }
}

find、findIndex

find

1. find() 方法返回通過測試（函數(shù)內(nèi)判斷）的數(shù)組的第一個元素的值。
2. find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
   • 當(dāng)數(shù)組中的元素在測試條件時(shí)返回 true 時(shí), find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。
   • 如果沒有符合條件的元素返回 undefined
3. 注意: find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的。
4. 注意: find() 并沒有改變數(shù)組的原始值。

語法：array.find(function(currentValue, index, arr),thisValue)

• currentValue：必需。當(dāng)前元素
• index：可選。當(dāng)前元素的索引值
• arr：可選。當(dāng)前元素所屬的數(shù)組對象
• thisValue：可選。 傳遞給函數(shù)的值一般用 "this" 值。如果這個參數(shù)為空， "undefined" 會傳遞給 "this" 值。

findIndex

1. findIndex() 方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素位置。
2. findIndex() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
   • 當(dāng)數(shù)組中的元素在測試條件時(shí)返回 true 時(shí), findIndex() 返回符合條件的元素的索引位置，之后的值不會再調(diào)用執(zhí)行函數(shù)。
   • 如果沒有符合條件的元素返回 -1
3. 注意: findIndex() 對于空數(shù)組，函數(shù)是不會執(zhí)行的
4. 注意: findIndex() 并沒有改變數(shù)組的原始值。

語法：array.findIndex(function(currentValue, index, arr), thisValue)

• currentValue：必需。當(dāng)前元素
• index：可選。當(dāng)前元素的索引值
• arr：可選。當(dāng)前元素所屬的數(shù)組對象
• thisValue：可選。 傳遞給函數(shù)的值一般用 "this" 值。如果這個參數(shù)為空， "undefined" 會傳遞給 "this" 值。

舉個例子：

find() {
  this.target = this.array.find((item, index, arr) => {
    return item.value > 400
  })
  console.log(this.target)
  // { "label": "數(shù)組2", "value": 854 }
  console.log(this.array)
  // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
},
findIndex() {
  this.target = this.array.findIndex((item, index, arr) => {
    return item.value > 400
  })
  console.log(this.target)
  // 1
  console.log(this.array)
  // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
}

push、pop、shfit、unshift

定義和區(qū)別請看下面的總結(jié)

舉個例子：

push() {
  console.log(this.array.push(123, 43)) // 6
  console.log(this.array) // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 }, 123, 43 ]
},
pop() {
  console.log(this.array.pop()) // {label: "數(shù)組4", value: 410}
  console.log(this.array) // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 } ]
},
unshift() {
  console.log(this.array.unshift(123, 43)) // 6
  console.log(this.array) // [ 123, 43, { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
},
shift() {
  console.log(this.array.shift()) // {label: "數(shù)組1", value: 234}
  console.log(this.array) // [ { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
}

splice、slice

splice

1. 用于添加或刪除數(shù)組中的元素。
2. 注意：這種方法會改變原始數(shù)組。

返回值

1. 如果僅刪除一個元素，則返回一個元素的數(shù)組。 如果未刪除任何元素，則返回空數(shù)組。

語法：array.splice(index,howmany,item1,.....,itemX)

• index：必需。規(guī)定從何處添加/刪除元素。該參數(shù)是開始插入和（或）刪除的數(shù)組元素的下標(biāo)，必須是數(shù)字。
• howmany：可選。規(guī)定應(yīng)該刪除多少元素。必須是數(shù)字，但可以是 "0"。如果未規(guī)定此參數(shù)，則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素。
• item1,.....,itemX：可選。要添加到數(shù)組的新元素

slice

1. slice() 方法可從已有的數(shù)組中返回選定的元素。
2. slice() 方法可提取字符串的某個部分，并以新的字符串返回被提取的部分。
3. 注意： slice() 方法不會改變原始數(shù)組。

語法：array.slice(start, end)

• start：可選 。
  • 規(guī)定從何處開始選取。
  • 如果是負(fù)數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置。
  • 如果該參數(shù)為負(fù)數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個元素開始提取。
  • slice(-2) 表示提取原數(shù)組中的倒數(shù)第二個元素到最后一個元素（包含最后一個元素）。
• end：可選。
  • 規(guī)定從何處結(jié)束選取。
  • 該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。
  • 如果沒有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。
  • 如果該參數(shù)為負(fù)數(shù)， 則它表示在原數(shù)組中的倒數(shù)第幾個元素結(jié)束抽取。
  • slice(-2,-1) 表示抽取了原數(shù)組中的倒數(shù)第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數(shù)第二個元素）。

舉個例子：

splice() {
  this.target = this.array.splice(1, 2)
  // [ { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 } ]
  console.log(this.array)
  // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組4", "value": 410 } ]

  this.target = this.array.splice(1)
  // [ { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
  console.log(this.array)
  // [ { "label": "數(shù)組1", "value": 234 } ]

  this.target = this.array.splice(2, 2, 123, 456)
  // [ { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
  console.log(this.array)
  // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, 123, 456 ]
},
slice() {
  this.target = this.array.slice(1, 3)
  // [ { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 } ]
  console.log(this.array)
  // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]

  this.target = this.array.slice(1)
  // [ { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
  console.log(this.array)
  // [ { "label": "數(shù)組1", "value": 234 }, { "label": "數(shù)組2", "value": 854 }, { "label": "數(shù)組3", "value": 12 }, { "label": "數(shù)組4", "value": 410 } ]
}

indexOf、lastIndexOf

indexOf

1. indexOf() 方法可返回?cái)?shù)組中某個指定的元素位置。
2. 該方法將從頭到尾地檢索數(shù)組，看它是否含有對應(yīng)的元素。
3. 開始檢索的位置在數(shù)組 start 處或數(shù)組的開頭（沒有指定 start 參數(shù)時(shí)）。
4. 如果找到一個 item，則返回 item 的第一次出現(xiàn)的位置。開始位置的索引為 0。如果在數(shù)組中沒找到指定元素則返回 -1。

語法： array.indexOf(item,start)

• item：必須。查找的元素。
• start：可選的整數(shù)參數(shù)。
  • 規(guī)定在數(shù)組中開始檢索的位置。
  • 它的合法取值是 0 到 stringObject.length - 1。
  • 如省略該參數(shù)，則將從字符串的首字符開始檢索。

lastIndexOf

1. lastIndexOf() 方法可返回一個指定的元素在數(shù)組中最后出現(xiàn)的位置，從該字符串的后面向前查找。
2. 如果要檢索的元素沒有出現(xiàn)，則該方法返回 -1。
3. 該方法將從尾到頭地檢索數(shù)組中指定元素 item。
4. 如果找到一個 item，則返回 item 從尾向前檢索第一個次出現(xiàn)在數(shù)組的位置。
5. 數(shù)組的索引開始位置是從 0 開始的。
6. 如果在數(shù)組中沒找到指定元素則返回 -1。

語法：array.lastIndexOf(item,start)

• item：必須。規(guī)定需檢索的字符串值。
• start：可選的整數(shù)參數(shù)。
  • 規(guī)定在數(shù)組中開始檢索的位置。
  • 它的合法取值是 0 到 stringObject.length - 1。
  • 如省略該參數(shù)，則將從字符串的首字符開始檢索。

舉個例子：

// arrays: ['sss', 'err', 'sfs', 'fghdj', 'sfs', 'dshx'],
indexOf() {
  this.target = this.arrays.indexOf('sfs') // 2
},
lastIndexOf() {
  this.target = this.arrays.lastIndexOf('sfs') // 4
}

some、every

some

1. 用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。
2. some() 方法會依次執(zhí)行數(shù)組的每個元素：
   • 如果有一個元素滿足條件，則表達(dá)式返回true , 剩余的元素不會再執(zhí)行檢測。
   • 如果沒有滿足條件的元素，則返回false。
3. some() 不會對空數(shù)組進(jìn)行檢測。
4. some() 不會改變原始數(shù)組。

語法： array.some(function(currentValue,index,arr),thisValue)

• currentValue：必須。當(dāng)前元素的值
• index：可選。當(dāng)前元素的索引值
• arr：可選。當(dāng)前元素屬于的數(shù)組對象
• thisValue：可選。對象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

every

1. 用于檢測數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供）。
2. every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素：
   • 如果數(shù)組中檢測到有一個元素不滿足，則整個表達(dá)式返回 false ，且剩余的元素不會再進(jìn)行檢測。
   • 如果所有元素都滿足條件，則返回 true。
3. every() 不會對空數(shù)組進(jìn)行檢測。
4. every() 不會改變原始數(shù)組。

語法： array.every(function(currentValue,index,arr), thisValue)

• currentValue：必須。當(dāng)前元素的值。
• index：可選。當(dāng)前元素的索引值。
• arr：可選。當(dāng)前元素屬于的數(shù)組對象。
• thisValue：可選。對象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

舉個例子：

// arrays: ['sss', 'err', 'sfs', 'fghdj', 'sfs', 'dshx'],
some() {
  this.target = this.arrays.some((item, index, arr) => item === 'sfs') // true
},
every() {
  this.target = this.arrays.every((item, index, arr) => item === 'sfs') // false
}

總結(jié)

1. filter、map、forEach的區(qū)別

2. find、findIndex的區(qū)別

3. push、pop、shfit、unshift的區(qū)別

4. splice、slice的區(qū)別

5. indexOf、lastIndexOf的區(qū)別

6. some、every 的區(qū)別