项目中常用的instance methods总结（实例方法操作）

项目中常用的instance methods总结（数组操作）

1. 在现实开发中，我们通常都说vue开发，除了vue使用外归根到底底层还是对js的熟练操作。以下是总结了js中常用的instance methods
2. 他们都是实例方法，不是静态方法

重点注意

• 输入、输出是什么
• 是否改变原数组
• 所有方法最终指向的原型对象都是Array.prototype

实例方法	简单描述	输入	输出	是否改变原数组	可做操作（操作或场景）
concat()	拼接	数组 / 值	新数组	×	数组拼接（上划加载更多、checkbox多选）、数组复制
push()	末尾添加	值	新数组的长度	√	数组拼接
unshift()	开头添加	值	新数组的长度	√	在数组开头添加一个或多个元素并返回新的长度，可采用push()+reverse()达到相同效果（浏览器历史记录）
splice()	删除、替换	（idx， number， el）	被删除的元素数组	√	删除（删除特定位置的元素）、替换
shift()	开头删除	/	当前删除的元素值	√	移除数组的第一个元素并返回（取消选择前面一个）
some()	查找至少一个合法条件	callBackFn	boolean	×	查找（至少一个元素符合，立刻返回）
filter()	筛选	callBackFn	符合条件的新数组	×	查找（筛选）
find()	查找第一个元素	callBackFn	第一个符合条件的元素	×	查找第一个符合条件的元素
every()	查找所有元素是否符合条件	callBackFn	boolean	×	判断所有元素是否都符合条件
map()	数组处理	callBackFn	新数组	×	对数组的每个元素执行指定操作并返回结果
reduce()	——	callBackFn	累加值	×	累加或聚合数组中的值
includes()	包含	值	boolean	×	检查数组是否包含特定值
slice()	片段截取	（start-idx， end-idx）	包含选取片段的新数组	×	选取数组的一部分

const arr = [1,2,2,4,4,3,3,6]
​
// Array instance methods
​
/*
   add
   -----
   push：末尾插入新元素，返回最新数组的长度，修改原数组
   unshift: 头部插入新元素，返回最新数组长度，修改原数组
*/
console.log('------------------push')
const result01 = arr.push(100)
console.log('this is result01, it will return a new array length:', result01)
console.log('it will change the original arr data:', arr)  // [1,2,2,4,4,3,3,6,100]
console.log('get the arr last element:', arr[arr.length - 1])   //  100
​
console.log('------------------unshift')
const result04 = arr.unshift(1)
console.log('this is result04, it will return a new array length', result04)
console.log('it will change original arr data:', arr)
​
/*
  delete
  -----
  pop: 删除最后一个el，返回被删除元素，修改原数组
  shift：删除第一个el，返回被删除元素，修改原数组
*/
console.log('------------------pop')
const result02 = arr.pop()
console.log('this is result02, it will return the deleted element:', result02)  // 100
console.log('it will change the original arr data', arr) 
​
console.log('------------------shift')
const result03 = arr.shift()
console.log('this is result03, it will return the deleted element', result03)   // 1
console.log('it will change the original arr data', arr)
​
​
/*
  read：查找
  -----
  find：找到第一个符合的元素，返回该元素
  some：至少有一个符合返回true
  every：所有元素符合返回true
  filter：过滤符合条件的元素，返回新数组
*/
console.log('------------------find')
const tempFn = (item) => item < 3
const tempFn2 = (item) => item > 5
const tempFn3 = (item) => item > 10
const result05 = arr.find(tempFn)
const result06 = arr.find(tempFn2)
const result07 = arr.find(tempFn3)
console.log('this is the first legal element', result05)  // 返回第一个元素1，因为第一个就是<3
console.log('this is the first legal element', result06)
console.log('this is the first legal element', result07)  // 找不到返回undefined
​
console.log('------------------some')
const result08 = arr.some(tempFn)
console.log('this is result08:',result08) // true
​
console.log('------------------every')
const result09 = arr.every(tempFn)
console.log('this is result09:',result09) // false
​
​
/*
  slice：截取片段，返回新数组
  arr: [1,2,2,4,4,3,3,6]
*/
console.log('------------------splice')
const result10 = arr.slice(0, 4)
const result11 = arr.slice(0, 100)
const result12 = arr.slice(0, -1)
const result13 = arr.slice(-2)
console.log('this is result10:', result10)
console.log('this is result11:', result11)   // 超过最大arr长度，则全部返回
console.log('this is result12:', result12)   // endIndex为负数，从后面到这数，也就是从倒数第二个开始到第一个位
console.log('this is result13:', result13)   // 没有给到起始位置所以从倒数第三个开始到最后
console.log(arr)

对应输出：

"------------------push"
"this is result01, it will return a new array length:" 9
"it will change the original arr data:" // [object Array] (9)
[1,2,2,4,4,3,3,6,100]
"get the arr last element:" 100
​
​
"------------------unshift"
"this is result04, it will return a new array length" 10
"it will change original arr data:" // [object Array] (10)
[1,1,2,2,4,4,3,3,6,100]
​
​
"------------------pop"
"this is result02, it will return the deleted element:" 100
"it will change the original arr data" // [object Array] (9)
[1,1,2,2,4,4,3,3,6]
​
​
"------------------shift"
"this is result03, it will return the deleted element" 1
"it will change the original arr data" // [object Array] (8)
[1,2,2,4,4,3,3,6]
​
​
"------------------find"
"this is the first legal element" 1
"this is the first legal element" 6
"this is the first legal element" undefined
​
​
"------------------some"
"this is result08:" true
​
​
"------------------every"
"this is result09:" false
​
​
"------------------splice"
"this is result10:" // [object Array] (4)
[1,2,2,4]
"this is result11:" // [object Array] (8)
[1,2,2,4,4,3,3,6]
"this is result12:" // [object Array] (7)
[1,2,2,4,4,3,3]
"this is result13:" // [object Array] (2)
[3,6]
​
​
// [object Array] (8)
[1,2,2,4,4,3,3,6]