【js基础】js数组方法总结

摘要：补充语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为上下文，其作用和一样，确保你的回调函数使用指定的。

补充：

JavaScript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”（context），其作用和 bind(..) 一样，确保你的回调函数使用指定的 this。

function foo(el) {
 console.log( el, this.id );
}
var obj = {
 id: "awesome"
};
// 调用 foo(..) 时把 this 绑定到 obj
[1, 2, 3].forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome

不改变原数组
需要一个函数作为参数， 依次处理数组内每个元素，并返回新的值，无返回值则为undefined
使用所有的返回值组成新的数组

console.log(["a","b","c"].map((elem, index) => {
    console.log(elem, index)
    /*a 0
    *b 1
    *c 2
    */
    if (elem === "a") return "this is a"
}))// (3) ["this is a", undefined, undefined]  

不改变原数组
需要一个函数作为参数， 依次便利每一个值，根据返回值生成新数组
返回真值 便利到的元素添加至新数组

console.log([ , 1, "", 2, undefined, 3, null, 4, 0, false, 5, true, 6, new Date()].filter((elem, index) => {
    console.log(elem, index)
    return elem
})) // [1, 2, 3, 4, 5, true, 6, Tue Nov 28 2017 08:29:52 GMT+0800 (中国标准时间)]

语言太苍白，show you code
数组的every，和some方法，可参考下面两个函数实现的功能

const every = (fun, arr) => {
    for (let i = 0; i = arr.length; i ++) {
        if (!fun(arr[i], i)) return false    // 有结果为false, 立即返回false，不再继续遍历
    }
}
const some = (fun, arr) => {
    for (let i = 0; i < arr.length; i ++) {
        if (fun(arr[i], i)) return true      // 有结果为true, 立即返回true，不再继续遍历
    }
}

[0,1,2,3,4].filter(function (i) {if (i < 2){return 1}})  //[0, 1]

功能描述参考下面代码

const reduce = (fun, arr, start) => {
    arr = arr.slice()
    start = start === undefined ? arr.shift() : start
    for (let i = 0; i < arr.length; i++) {   // 从左往右
        start = fun(start, arr[i])
    }
    return start
}
const reduceRight = (fun, arr, start) => {
    arr = arr.slice()
    start = start === undefined ? arr.pop() : start
    for (let i = arr.length - 1; i >= 0; i--) {   // 从右往左
        start = fun(start, arr[i])
    }
    return start
}

返回某个指定的变量在数组中首次出现的位置

const a = {}
const b = [0, {}, 2, 3, "4", 4, 5, a, 4]
console.log(b.indexOf(a)) // 7
console.log(b.indexOf(4)) // 5
console.log(b.indexOf(4, "6")) // 8
console.log(b.indexOf("4")) // 4

返回某个指定的变量在数组中最后一次出现的位置

const a = {}
const b = [0, {}, 2, 3, "4", 4, 5, a, 4]
console.log(b.lastIndexOf(a)) // 7
console.log(b.lastIndexOf(4)) // 8
console.log(b.lastIndexOf(4, "6")) // 5
console.log(b.lastIndexOf("4")) // 4

将数组拼接为字符串．

const b = [0, {}, 2, 3, "4", 4, 5, 4]
console.log(b.join()) // 0,[object Object],2,3,4,4,5,4
console.log(b.join(",")) // 0,[object Object],2,3,4,4,5,4   同b.join()
console.log(b.join("分割符")) //0分割符[object Object]分割符2分割符3分割符4分割符4分割符5分割符4

const a = [new Date(), null, undefined,[1, 2,3], [1, 2, 3], [[11, 12, 13], [21, 22, {a: [1,2,3]}]], {a: 1}]
console.log(a.join())      //Mon Nov 27 2017 15:39:01 GMT+0800 (中国标准时间),,,1,2,3,1,2,3,11,12,13,21,22,[object Object],[object Object]
console.log(a.toString())  //Mon Nov 27 2017 15:41:00 GMT+0800 (中国标准时间),,,1,2,3,1,2,3,11,12,13,21,22,[object Object],[object Object]
const testelema = new Date()
const testelemb = {}
const testelemc = []
testelema.toString = e => 1
testelemb.toString = e => 2
testelemc.toString = e => 3
console.log([testelema, testelemb, testelemc].join("-----"))   //1-----2-----3


const notfunction = {}
notfunction.toString = 1212
console.log([notfunction].join())  //Uncaught TypeError: Cannot convert object to primitive value

个人猜测，join会依次调用数组内元素的toString方法，并拼接成字符串，没有toString方法的元素返回空""，类似

const join = 
    (arr, delimiter = ",") => 
        arr.reduce((last, next) => {
            if (next === null || next === undefined) {
                return last + delimiter
            } else {
                if (typeof next.toString !== "function") {
                    throw new Error(`Cannot convert $ {typeof next}to primitive value `)
                }
                return last + delimiter + next.toString()
            }
        }, "")
        .replace(delimiter, "")

将数组中的元素颠倒顺序
该方法会直接改变原数组

const b = [true,"1",2,3,4,5]
b.reverse()
console.log(b.join())

将数组的元素按照一定规则排序
该方法会直接改变原数组
参数类型必须为function
无参数的时候数组元素默认按照字母表顺序排序.

let b = [0,"a", 3,"3", 4,5,false]
console.log(b.sort().join()) //0,3,3,4,5,a,false

b = [0,"a", 3,"3", 4,5,false]
console.log(b.sort((elema, elemb) => {
    console.log(elema, elemb)
    /*
    * 0 "a"
    * a 3
    * 3 "3"
    * 3 4
    * 4 5
    * 5 false
    */
    console.log(typeof elema, typeof elemb)  //虽然上面打印出的字符串变量有的没有带引号，但是类型没错
    /*
    * number string
    * string number
    * number string
    * string number
    * number number
    * number boolean
    */
}).join())  //0,a,3,3,4,5,false  如果作为sort参数的方法，无返回值，则排序结果与不带参数相同

b = [10,"a",false, "20","11", 4,9]
console.log(b.sort((elema, elemb) => {
    if (typeof elema === "string" && typeof elemb === "number") {
        return -1   // 返回小于0的数则 elema在前  elemb在后 
    } else if (typeof elema === "number" && typeof elemb === "string") {
        return 1    // 返回大于0的数 则 elema在后  elemb在前
    }
    return 0; // 默认返回0   不加return 0结果一样
}).join()) // a,10,false,20,11,4,9   将字符串排在数字前面

拼接数组
返回新数组，不改变原数组

const a = [1, 2, {a: 3}]
const b = a.concat([1,2,3,4])
console.log(b) //(7) [1, 2, {…}, 1, 2, 3, 4]
const c = a.concat([[1,2,3,4]])
console.log(c) // (4) [1, 2, {…}, Array(4)]
console.log(a) // (3) [1, 2, {…}]
const d = a.concat() 
console.log(d) // (3) [1, 2, {…}]      可以使用concat进行浅拷贝
d[0] = 10
console.log(d) // (3) [10, 2, {…}]
console.log(a) // (3) [1, 2, {…}]
d[2].a = 10
console.log(a[2].a)  //10

返回数组的一个片段
返回新数组，不改变原数组
使用slice复制数组也是浅拷贝
两个参数时，包含序号为前一个参数的元素，不包含序号为后一个参数的元素
前一个参数默认为0
后一个参数默认为数组长度

const a = [0,1,2,3,4,5,6,7]
console.log(a.slice()) // (8) [0, 1, 2, 3, 4, 5, 6, 7]
console.log(a.slice(0)) // (8) [0, 1, 2, 3, 4, 5, 6, 7]
console.log(a.slice(0, a.length)) // (8) [0, 1, 2, 3, 4, 5, 6, 7]
console.log(a.slice(2))  // (6) [2, 3, 4, 5, 6, 7]
console.log(a.slice(2, a.length)) // (6) [2, 3, 4, 5, 6, 7]
console.log(a.slice(2, 3)) // [2]
console.log(a.slice(2, 4)) // (2) [2, 3]
console.log(a.slice(-2))  // (2) [6, 7]
console.log(a.slice(-2, a.length))  // (2) [6, 7]
console.log(a.slice(2, a.length - 1))  //(5) [2, 3, 4, 5, 6]
console.log(a.slice(2, - 1))   // (5) [2, 3, 4, 5, 6]

从数组中删除元素、插入元素、或者同时完成这俩种操作.
splice直接修改数组

let a = [0,1,2,3,4,5,6,7]
a.splice()
console.log(a)  // (8) [0, 1, 2, 3, 4, 5, 6, 7]
a = [0,1,2,3,4,5,6,7]
a.splice(0)
console.log(a)  // []
a = [0,1,2,3,4,5,6,7]
a.splice(0, a.length)
console.log(a)  // []
a = [0,1,2,3,4,5,6,7]
a.splice(0, 1)
console.log(a)  // []

push和pop
unshift和shift;
toString和toLocaleString

这是一个我想不到应用场景的方法
大概我以后也很少用到
把数组自己的一部分复制到另一部分
参考如下代码

const copyWithin = (arr, target, start = 0, end = arr.length) => {
    const copy = arr.slice()
    start = start < 0 ? (start + arr.length) : start
    end = end < 0 ? (end + arr.length) : end
    for (let i = start; i < end; i ++) {  // 拷贝内容不包括end    end 小与 start 什么操作都不做且不报错
        arr[target + i - start] = copy[i]   // copyWithin修改原数组
    }
}

直接上polyfill

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, "find", {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError(""this" is null or not defined");
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== "function") {
        throw new TypeError("predicate must be a function");
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    }
  });
}

未完待续