JavaScript 数组方法解析与实现

Array的操做方法

1. unshift()

arrayObject.unshift(newelement1,newelement2,....,newelementX)

• 向数组开头添加一个或多个元素，并返回新的长度
• 改变原数组

let arr = [1,2,3]
  let len = arr.unshift(1)
  console.log(len) // 4
  console.log(arr)  // [1, 1, 2, 3]
复制代码

2. shift()

arrayObject.shift()

• 删除数组第一个元素，并返回删除的元素自己
• 若是数组为空，则不修改素组，返回undefined
• 改变原数组

let arr = [1,2,3]
  console.log(arr.shift()) // 1
  console.log(arr) // [2, 3]
复制代码

3. push()

arrayObject.push(newelement1,newelement2,....,newelementX)

• 向数组末尾添加一个或多个元素，并返回新长度
• 改变原数组

let arr = [1,2,3]
  console.log(arr.push(1,2)) // 5
  console.log(arr) // [1, 2, 3, 1, 2]
复制代码

4. pop()

arrayObject.pop()

• 删除数组最后一个元素，并返回删除元素自己
• 若是数组为空，则不修改数组，并返回undefined
• 改变原素组

let arr = [1,2,3]
  console.log(arr.pop()) // 3
  console.log(arr) // [1, 2]
  console.log([].pop()) // undefined
复制代码

5. concat()

arrayObject.concat(arrayX,arrayX,......,arrayX)

• 合并两个或多个数组，返回合并后的数组
• 不改变原数组

let arr1 = [1,2,3], arr2 = [4,5,6], arr3 = [7]
  console.log(arr1.concat(arr2, arr3)) // [1, 2, 3, 4, 5, 6, 7]
  console.log(arr1) // [1, 2, 3]
复制代码

6. splice()

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

• 删除数组指定位置长度的元素，或添加一个、多个元素，返回删除元素
• 添加元素可选
• 改变原数组

let arr1 = [1,2,3]
  console.log(arr1.splice(1,2)) // [2, 3]
  console.log(arr1) // [1]
  console.log(arr1.splice(1,0,2,3)) // []
  console.log(arr1) // [1, 2, 3]
复制代码

7. slice()

arrayObject.slice(start,end)

• 截取数组指定开始和结束下边的元素，并返回结果元素数组
• end可选
• 不改变原数组

let arr1 = [1,2,3]
  console.log(arr1.slice(1, 2)) // [2]
  console.log(arr1.slice(1)) // [2, 3]
  console.log(arr1) // [1, 2, 3]
复制代码

8. sort()

arrayObject.sort(sortby)

• 对数组进行排序，返回排序后的数组
• 改变原数组

let arr1 = [2,1,3]
  console.log(arr1.sort()) // [1, 2, 3]
  console.log(arr1) // [1, 2, 3]
复制代码

！注意

因为sort()方法是分别调用元素的toString()方法，本质上是比较字符串，于是会出现如下状况

let arr1 = [3,10,2]
 console.log(arr1.sort()) // [10, 2, 3]
 console.log(arr1) // [10, 2, 3]
复制代码

这是由于'10'和'2'会先比较'1',于是10在最前，改进方法以下，编写一个比较函数

• 交换返回值的意思是让更小的值排位更靠前

let arr1 = [3,10,2]
 console.log(arr1.sort(compare)) // [2, 3, 10]
 console.log(arr1) // [2, 3, 10]
 function compare(value1, value2) { 
   if (value1 < value2) { 
       return -1; 
   } else if (value1 > value2) { 
       return 1; 
   } else { 
       return 0; 
   } 
} 
复制代码

9. reverse()

arrayObject.reverse()

• 反转数组，返回反转后的数组
• 改变原数组

let arr1 = [1, 2, 3]
  console.log(arr1.reverse()) // [3, 2, 1]
  console.log(arr1) // [3, 2, 1]
复制代码

10. join()

arrayObject.join(separator)

• 以指定字符分割数组，返回分割后的字符串
• 若参数不填，则默认以','为分割符
• 不改变原数组

let arr1 = [1,2,3]
  console.log(arr1.join()) // 1,2,3
  console.log(arr1.join('!')) // 1!2!3
  console.log(arr1) // [1, 2, 3]
复制代码

Array的遍历方法

1. forEach()

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

• 遍历数组每个元素，并在回调函数中处理
• 不改变原数组

let arr = [1,2,3], newArr = []
  arr.forEach(item => newArr.push(++item))
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3, 4]
复制代码

2. map()

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

• 遍历数组每一项，并返回操做后的数组
• 不改变原数组
• thisValue 绑定回调函数的this上下文

let arr = [1,2,3], newArr = []
  newArr = arr.map(function (item, index, array) {
    console.log(this) // {a: 1}
    return ++item
  }, {a: 1})
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3, 4]
复制代码

3. filter()

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

• 遍历数组每一项，并在回调中处理，返回符合条件的新数组
• 不改变原数组

let arr = [1,2,3], newArr = []
  newArr = arr.filter(item => item >=2)
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3]
复制代码

4. every()

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

• 遍历数组每一项，经过回调判断是否符合条件
• 如有一项不符合，则返回false，不继续执行；若所有符合则返回true
• 不改变原数组

let arr = [1,2,3], newArr = []
  let isTrue = arr.every(item => item > 0)
  console.log(arr) // [1, 2, 3]
  console.log(isTrue) // true
复制代码

如何判断是否为Array

isArray()

let arr = [1, 2, 3]
  Array.isArray(arr) // true
复制代码

instanceof

• 判断被检测对象是非为构造函数的实例
• 原理：左侧被检测对象的原型链上是否包含右侧构造函数的prototype属性

let arr = [1, 2, 3]
  arr instanceof Array // true
复制代码

constructor

• constructor 属性返回对象的构造函数, 数组对象的构造函数为Array

let arr = [1, 2, 3]
  arr.constructor === Array // true
  arr.constructor // ƒ Array() { [native code] }
复制代码

不一样对象的constructor

function f () {}
   console.log([].constructor)    // ƒ Array() { [native code] }
   console.log({}.constructor)    // ƒ Object() { [native code] }
   console.log(f.constructor)     // ƒ Function() { [native code] }
   console.log((123).constructor) // ƒ Number() { [native code] }
   console.log('123'.constructor) // ƒ String() { [native code] }
   console.log(true.constructor)  // ƒ Boolean() { [native code] }
复制代码

手动实现Array的方法

Array.map()

自己用法：

Array.map(function(item, index, arr){}, thisValue)

• 返回处理后的新数组
• map自己接受两个参数，一个函数，一个对象上下文
• 函数内三个参数分别为：元素自己，元素下标、原数组
• 对象上下文的做用是绑定函数的this指向

实现原理：

Array.prototype.map = function (fn, context) {
    let newArray = []
    for(let i=0;i<this.length;i++){
        // 经过call()来绑定回调函数的上下文
        newArray.push(fn.call(context, this[i], i, this)) 
    }
    return newArray
}
复制代码

• fn为回调函数，context为传入的对象上下文
• 咱们给fn使用call()来绑定fn的上下文，call当即执行，并将执行结果push到新数组中

Array.filter()

自己用法：

Array.filter(function(item, index ,array){}, thisValue)

• 返回符合条件的新数组
• map自己接受两个参数，一个函数，一个对象上下文
• 函数内三个参数分别为：元素自己，元素下标、原数组
• 对象上下文的做用是绑定函数的this指向

实现原理：

Array.prototype.filter = function (fn, context) {
    let newArray = []
    for (let i=0;i<this.length;i++) {
        if(fn.call(context, this[i], i, this)) {
            newArray.push(this[i])
        }
    }
    return newArray
}
复制代码

• 由于fn.call(···)返回是布尔类型，因此要先进行判断，若为真则添加到新数组中