前端原生【数组】Array

数组创建

Array 对象用于在单个的变量中存储多个值。
Array 数组表示有序数据的集合，对象是无序数据的集合，如果数据的顺序很重要，就用数组，否则就用对象。

JavaScript 中创建数组的方法有两种方式，综合考虑推荐第二种方式。

使用 Array 构造函数：

var arr1 = new Array() //创建一个空数组 []
var arr2 = new Array(4) // 创建一个包含4项元素的数组
var arr2 = new Array('lily', 'bob', 'tom') //创建一个包含3个元素的数组

使用数组字面量表示方法：

var arr4 = [] //创建一个空数组
var arr5 = [20] //创建一个包含1项的数组
var arr6 = ['lily', 'bob', 'tom'] //创建一个包含3个元素的数组

🔔 注意：JavaScript 中数组的 length 属性是可以修改的，看下面的示例：

var arr = ['lily', 'bob', 'tom'] //创建一个包含3个元素的数组
arr[arr.length] = 'sean' //在下标为3处（也就是数组尾部）添加一项"sean"
arr.length = arr.length - 1 //通过length属性将数组的最后一项删除

合理利用数组的 length 可以达到很多意想不到的效果
数组也是对象，是引用类型
实例的数组对象的 __proto__ 指向了 Array.prototype 的构造函数
Array.__proto__ 指向了匿名函数 anonymous() 它的 __proto__最终又指向了 Object

reduce 方法

reduce() 是数组的归并方法，该方法有返回值与 forEach()、map()、filter() 等迭代方法一样都会对数组每一项进行遍历，但是 reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的。

释义：不断的减少数组元素，最终的到一个结果，类似于递归。

语法：

arr.reduce(function(prev,next,index,arr){
...
}, init);
//参数一：回调函数
//回调函数的参数1：初始值或之前值（必须）
//回调函数的参数2：当前值（必须）
//回调函数的参数3：当前索引值（可选）
//回调函数的参数4：当前数组（可选）
//回调函数返回值：返回的值作为下一次迭代的初始值
//参数二：初始值（可选）如果缺省，初始值为数组的第一项

四个参数：

prev：表示上一次调用回调时的返回值，或者初始值 init。
next：表示当前正在处理的数组元素下一个意思。
index：表示当前正在处理的数组的元素的索引，如提供 init 值，则索引为 0,否则索引从 1 开始。
init 表示初始值初始值可以是[] 可以是{} 也可以是任意，初始值参数可选。

常用参数一般为第一个和第二个。

栗：先提供一个原始数组

var arr = [3, 9, 4, 3, 6, 0, 9]

数组项之和

var sum = arr.reduce(function (prev, next) {
  return prev + next
}, 0)

由于传入了初始值 0，所以开始时 prev 的值为 0，next 的值为数组第一项 3，相加之后返回值为 3 作为下一轮回调的 prev 值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

求数组最大值

var max = arr.reduce(function (prev, next) {
  return Math.max(prev, next)
})

由于未传入初始值，所以开始时 prev 的值为数组第一项 3，cur 的值为数组第二项 9，取两值最大值后继续进入下一轮回调。

数组去重

var newArr = arr.reduce(function (prev, cur) {
  prev.indexOf(cur) === -1 && prev.push(cur)
  return prev
}, [])

实现的基本原理如下：

① 初始化一个空数组
② 将需要去重处理的数组中的第 1 项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中
③ 将需要去重处理的数组中的第 2 项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
④ ……
⑤ 将需要去重处理的数组中的第 n 项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
⑥ 将这个初始化数组返回

将二维数组转换成一维数组

var arrMix = [
  [1, 2],
  [3, 4],
  [5, 6],
]
var arr = arrMix.reduce(function (prev, curr) {
  return prev.concat(curr)
})
console.log(arr) //[1, 2, 3, 4, 5, 6]

将将 cookie 和 search 以对象的形式显示

var cookie = 'k1=v1; k2=v2; k3=v3; k4=v4'
var search = 'k1=v1&k2=v2&k3=v3&k4=v4'

// cookie
sum = cookie.split('; ').reduce((prev, next) => {
  var nx = next.split('=')
  var pv = nx[0]
  var value = nx[1]
  // 设置对象的键=值
  // 因为有reduce方法的遍历 所以下面让他们键值对一一对应就可以了
  prev[pv] = value
  return prev
}, {}) // 初始化值是一个对象

console.log(sum)
// ---------------- 分割线 ---------------
// search
vum = search.split('&').reduce((prev, next) => {
  var nx = next.split('=')
  var pv = nx[0]
  var value = nx[1]
  // 设置对象的键=值
  // 因为有reduce方法的遍历 所以下面让他们键值对一一对应就可以了
  prev[pv] = value
  return prev
}, {}) // 初始化值是一个对象

console.log(vum)

类似方法：reduceRight()

该方法用法与 reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

every 方法

🔔 注意：every() 用于判断数组中的每一项元素是否都满足条件，返回一个布尔值。

栗：

var arr = [1, -2, 3, 4, -5]

需求：将数组中的每一项翻倍。

var isEvery = arr.every(function (item, index, array) {
  return item > 0
})
console.log(isEvery) // false

可以看到：
every() 可以传入一个匿名回调函数作为参数，而该匿名函数有含有三个参数：

数组遍历时的当前元素 item;
数组遍历时的当前元素的索引 index;
正在遍历的数组 array。

示例中是要判断数组 arr 中的元素是否都大于 0 为正数，很显然不是，所以该方法最终返回 false。

补充：方法除了传递一个匿名函数作为参数之外，还可以传第二个参数，该参数用于指定匿名函数内的 this 指向。

栗：单个参数：

// 只传一个匿名函数
arr.forEach(function (item, index, array) {
  console.log(this) // window
})

栗：两个参数：

// 传两个参数
arr.forEach(function (item, index, array) {
  console.log(this) // [1, -2, 3, 4, -5]
}, arr)

some 方法

🔔 注意：some() 用于判断数组中是否存在满足条件的元素，返回一个布尔值。

栗：

var arr = [1, -2, 3, 4, -5]

需求：将数组中的每一项翻倍。

var isSome = arr.some(function (item, index, array) {
  return item < 0
})
console.log(isSome) // true  元素中有小于0的元素存在

可以看到：
some() 可以传入一个匿名回调函数作为参数，而该匿名函数有含有三个参数：

数组遍历时的当前元素 item
数组遍历时的当前元素的索引 index
正在遍历的数组 array

该方法与 every() 类似，示例中是要判断数组 arr 中是否存在负数元素，很显然存在，所以该方法最终返回 true。

补充：方法除了传递一个匿名函数作为参数之外，还可以传第二个参数，该参数用于指定匿名函数内的 this 指向

栗：

单个参数：

// 只传一个匿名函数
arr.forEach(function (item, index, array) {
  console.log(this) // window
})

两个参数：

// 传两个参数
arr.forEach(function (item, index, array) {
  console.log(this) // [1, -2, 3, 4, -5]
}, arr)

splice 方法

🔔 注意：splice()：替换、删除功能 3 个参数

第一个值是索引号
第二个值时删除的个数
第三个值是要替换的值

如果不写第三个要替换的值；就是删除，如果后面的 2 个参数不写会从指定下标往后一直删除到底，当出现第 3 个参数的时候，第 2 个参数就是要被替换的个数，第 3 个参数的个数如果大于第 2 个参数设定的个数，对应替换掉第 2 个参数的个数以后，第 3 个参数多余的参数会继续在被替换的参数后面进行添加。

删除：可以删除任意数量的项，需要 2 个参数：
1. 要删除的第一项的位置下标（索引号）
2. 要删除的个数
插入：可以向指定位置插入任意数量的项，需要 3n 个参数：
1. 要插入的的任意数量的项一个或多个
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需要指定 3 个参数：：
1. 起始位置
2. 要删除的项数
3. 要插入的任意数量的项

插入的项数不必与删除的项数相等

🔔 注意：splice() 方法始终都会返回一个数组，该数组中包含从原数组中删除的项，如果没有删除任何项，则返回一个空的数组。

栗：先申明一个数组：

var arr = [1, 3, 5, 7, 9, 11]

删除：

var arr = [1, 3, 5, 7, 9, 11]
var arrRemoved = arr.splice(0, 2)
console.log(arrRemoved) // [1,3]  被删除的 从0个开始 删除两个
console.log(arr)

插入：

var arrRemoved2 = arr.splice(2, 0, 4, 6)
console.log(arr) // [1,3,4,6,5,7,9,11]; 在下标2的位置删除0个插入4和6
console.log(arrRemoved2)

替换：

var arrRemoved3 = arr.splice(1, 1, 2, 4)
console.log(arr) // [1,2,4,5,7,9,11]
console.log(arrRemoved3)

🔔 注意：这里把下标为 1 的项替换一个， 2 替换了当前的下标为 1 的项， 4 是添加到当前被替换下标的后面。

sort 方法

🔔 注意： sort() 按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。

在排序时，sort() 方法会调用每个数组项的 toString() 转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort() 方法比较的也是字符串，因此会出现以下的这种情况：

栗：

var arr1 = ['a', 'c', 'd', 'b']
console.log(arr1.sort()) //["a","b","c","d"]
var arr2 = [12, 24, 51, 3]
console.log(arr2.sort()) //[12,24,3,51]
console.log(arr2) //[12,24,3,51]  (原数组被改变)

上述数组中元素的值没有按照大小进行排序，为了解决上述问题，sort() 方法可以接收一个回调函数，通过回调函数来进行数组大小排序。

var arr = [10, 222, 63, 35, 17, 12, 43]
arr.sort((m, n) => m - n)
console.log(arr) // (7) [10, 12, 17, 35, 43, 63, 222] 从小大大排序
arr.sort((m, n) => n - m)
console.log(arr) // [222, 63, 43, 35, 17, 12, 10] 从大到小排序

拓展：如果需要任何包含简单值的数组排序（字符串，数组混合），代码如下：

var m = ['ac', 'cca', 'efe', 'adg', 1, 2, 3, 6, 7, 8, 4, 9]
m.sort(function (a, b) {
  if (a === b) {
    return 0
  }
  if (typeof a === typeof b) {
    return a < b ? -1 : 1
  }
  return typeof a < typeof b ? -1 : 1
})
console.log(m)
// [1, 2, 3, 4, 6, 7, 8, 9, "ac", "adg", "cca", "efe"]

拓展：数组对象的利用 sort 排序：

var s = [
  { first: 'Joe', last: 'Besser' },
  { first: 'Moe', last: 'Howord' },
  { first: 'Joe', last: 'DeRita' },
  { first: 'Shemp', last: 'Howord' },
  { first: 'Larry', last: 'Fine' },
  { first: 'Curly', last: 'Howord' },
]
var by = function (name, minor) {
  return function (o, p) {
    var a, b
    if (o && p && typeof o === 'object' && typeof p === 'object') {
      a = o[name]
      b = p[name]
      if (a === b) {
        return typeof minor === 'function' ? minor(o, p) : 0
      }
      if (typeof a === typeof b) {
        return a < b ? -1 : 1
      }
      return typeof a < typeof b ? -1 : 1
    } else {
      throw {
        name: 'Error',
        message: '报错了',
      }
    }
  }
}
s.sort(by('last', by('first')))
console.log(s)

// 0: {first: "Joe", last: "Besser"}
// 1: {first: "Joe", last: "DeRita"}
// 2: {first: "Larry", last: "Fine"}
// 3: {first: "Curly", last: "Howord"}
// 4: {first: "Moe", last: "Howord"}
// 5: {first: "Shemp", last: "Howord"}
// length: 6
// __proto__: Array(0)

针对对象数组对象的排序：

function createCom(propertyName) {
  return function (object1, object2) {
    var v1 = object1[propertyName]
    var v2 = object2[propertyName]
    return v1 < v2 ? -1 : 1
  }
}

var data = [
  {
    name: 'zhangsan',
    age: 28,
  },
  {
    name: 'bizhen',
    age: 20,
  },
]
data.sort(createCom('name'))
console.log(data[0].name) // bizhen

data.sort(createCom('age'))
console.log(data[0].age) // 20

filter 方法

🔔 注意：filter() 用于筛选数组中满足条件的元素，返回一个筛选后的新数组。

栗：先声明一个数组：

var arr = [1, -2, 3, 4, -5]

需求：将数组中的每一项翻倍。

var minus = arr.filter(function (item, index, array) {
  return item < 0
})
console.log(minus) // [-2, -5]

可以看到：map()可以传入一个匿名回调函数作为参数，而该匿名函数有含有三个参数：

数组遍历时的当前元素 item；
数组遍历时的当前元素的索引 index；
正在遍历的数组 array。

示例中是要筛选出数组 arr 中的所有负数，所以该方法最终返回一个筛选后的新数组 [-2, -5]。

补充：方法除了传递一个匿名函数作为参数之外，还可以传第二个参数，该参数用于指定匿名函数内的 this 指向。

栗：单个参数

// 只传一个匿名函数
arr.forEach(function (item, index, array) {
  console.log(this) // window
})

栗：两个参数

// 传两个参数
arr.forEach(function (item, index, array) {
  console.log(this) // [1, -2, 3, 4, -5]
}, arr)

indexOf 方法和 lastIndexOf()方法

此方法字符串和数组都可用 indexOf(): 有返回值，返回当前项所在下标位置此方法接收两个参数：

要查找的项；
（可选的）表示查找起始点位置的索引：其中，从数组的开头（位置 0）开始向后查找。也可以理解为数组中元素第一次出现的位置。

lastIndexOf: 有返回值，接收两个参数：

要查找的项；
（可选的）表示查找起始点位置的索引：其中，从数组的开头（位置 0）开始向后查找。也可以理解为数组中元素最后一次出现的位置；

🔔 注意：这两个方法都会返回要查找的项在数组中的位置，在没找到的情况下返回-1，在比较第一个参数与数组中的每一项时，会使用全等操作符。

var arr = [1, 3, 5, 7, 7, 5, 3, 1]
console.log(arr.indexOf(5)) // 2
console.log(arr.lastIndexOf(5)) // 5
console.log(arr.indexOf(5, 2)) // 2 从下标为2的位置开始找
console.log(arr.lastIndexOf(5, 4)) // 2 从下标为4的位置开始找
console.log(arr.indexOf('5')) // -1 不存在返回-1

concat 方法

🔔 注意： concat() 将参数添加到原数组中有返回值。

这个方法会创建当前数组一个副本，然后将接受到的参数添加到这个副本末尾，参数可以是一个或多个数值或字符串或数组，最后返回新构建的数组。在没有给 concat() 方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr = [1, 3, 5, 7]
var arrCopy = arr.concat(9, [11, 13])
console.log(arrCopy) //[1,3,5,7,9,11,13]
console.log(arr) //[1,3,5,7](原数组未被修改)

从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的个项添加到数组中。但是如果传入的是一个二维数组呢？

// 传入二维数组
var arr = [1,3,5,7];
var arrCopy2 = arr.concat([9,[11,13]);
console.log(arrCopy2);           //[1,3,5,7,9,Array[2]]
console.log.log(arrCopy2[5]);    //[11,13]

上述代码中，arrCopy2 数组的第五项是一个包含两项的数组，也就是说 concat 方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些是数组，那么也就会把这一数组当作一项添加到 arrCopy2 中。

slice 方法

slice() 方法有返回值，不修改原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组，即地址都指向了同一个对象。

🔔 注意： slice() 返回从指定开始下标到结束下标之间的项组成的新数组，含前不含后。

接收一或两个参数：即要返回项的起始和结束位置。

一个参数的情况下：返回从该参数指定位置开始到当前数组末尾所有项。
两个参数的情况下：返回起始和结束位置之间的项——但不包括结束位置的项。

var arr = [1, 3, 5, 7, 9, 11]
var arrCopy = arr.slice(1)
var arrCopy2 = arr.slice(1, 4)
var arrCopy3 = arr.slice(1, -2) //  最后一个是-1
var arrCopy4 = arr.slice(-4, -1) // 从后往前 -4到-1之间不含后
console.log(arr) // [1,3,5,7,9,11] (原数组没变)
console.log(arrCopy) // [3,5,7,9,11]
console.log(arrCopy2) // [3,5,7]
console.log(arrCopy3) // [3,5,7]
console.log(arrCopy4) // [5,7,9]

上面示例注意：处理负数之间两种思路

思路一：

当为负数的时候，-1代表最后一个 -2依次往前推，-1到-4之间 从右往前推，第二个参数是-1，最后一个，因 `slice()` 方法含前不含后原则，就是-4到-1之间。

思路二：

给所有的负数，加上数组的长度 然后进行截取 比如上面数组长度为6,1到-2 那么-2加上数组长度6 就是4 就是1-4之间，下面-4到-1各加6 就是-2到5之间。

延伸：还有一个基本相似的方法 substring 该方法跟 slice 方法唯二的区别就是：

substring 方法不接受负数。
substring 方法只会寻找两个参数从小到大去截取就算参数写成 substring(6,3)它实际执行还是从 substring(3,6)去进行截取！

reverse 方法

🔔 注意： reverse() 翻转数组顺序更新数组返回值可省略。

var arr = [13, 24, 51, 3]
console.log(arr.reverse()) //[3,51,24,13]
console.log(arr) //[3,51,24,13](原数组改变)

push 和 pop 方法

🔔 注意：返回值可选，返回值是长度或者删除的数值，不用返回值直接更新原数组。

push() 方法：可以接受任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后的数组长度
pop()方法：数组末尾移除最后一项，减少数组的 length 值，

var arr = ['lily', 'lucy', 'tom']
var count = arr.push('jack', 'sean')
console.log(count) //5  返回的是数组的长度
console.log(arr) // ["lily","lucy","tom","jack","sean"] 返回添加后新的数组
var item = arr.pop()
console.log(item) //sean   返回移除的最后一项
console.log(arr) //["lily","lucy","tom","jack"]

总结：

添加的方法 push unshift 返回值是新的长度不用返回值得到的是更新后的数组。
删除方法 pop shift 返回值是被删除的那个元素，不用返回值得到是更新后的数组。

unshift 和 shift 方法

🔔 注意：返回值可选，返回值是添加或者删除的数值，不用返回值直接更新原数组。

unshift() 方法：将参数添加到数组开头，并返回数组新的长度。
shift() 方法：删除原数组的第一项，并返回删除元素的值，如果数组为空返回 undefined。

var arr = ['lily', 'lucy', 'tom']
var count = arr.unshift('jack', 'sean')
console.log(count) //5  返回数组的长度
console.log(arr) //["jack","sean","lily","lucy","tom"] 返回新的数组
var item = arr.shift()
console.log(item) //jack   返回移除的第一项
console.log(arr) //["sean","lily","lucy","tom"]

总结：

添加的方法 push unshift 返回值是新的长度，不用返回值得到的是更新后的数组。
删除方法 pop shift 返回值是被删除的那个元素，不用返回值得到是更新后的数组。

join 方法

🔔 注意：join() 将数组的元素组起一个字符串，以这个字符串为分隔符，省略的话则用默认逗号为分隔符，该方法只接受一个参数：分隔符，有返回值。

var arr = [1, 2, 3]
console.log(arr.join()) // 1,2,3
console.log(arr.join('-')) // 1-2-3
console.log(arr) // [1,2,3]（原数组不变)

通过 join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串。

function repeatString(str, n) {
  return new Array(n + 1).join(str)
}
console.log(repeatString('abc', 3)) //abcabcabc
console.log(repeatString('Hi', 5)) //HiHiHiHiHi

📣 当然更好的办法可以参考 es6 语法新增的 repeat()方法！

forEach 方法

🔔 注意：forEach() 用以遍历数组方法无返回值。

栗：先申明一个数组：

var arr = [1, -2, 3, 4, -5]

需求：将数组中的每一项翻倍。

arr.forEach(function (item, index, array) {
  array[index] = item * 2
})
console.log(arr) // [2,-4,6,8,-10]

可以看到：
forEach() 可以传入一个匿名回调函数作为参数，而该匿名函数有含有三个参数：

数组遍历时的当前元素 item；
数组遍历时的当前元素的索引 index；
正在遍历的数组 array。

有了这三个参数，可以方便我们做很多事情，比如说示例当中将每一项数组元素翻倍，这时需要用到第一个参数 item。但是，仅仅只是将 item 乘以 2 可不行，我们还得将其赋值给原来的数组，这时我们就得用到后面两个参数 index 和 array。

根据上述可知，array[index] 是全等于 item 的。

arr.forEach(function (item, index, array) {
  console.log(array[index] === item) // true
})

🔔 注意：一般计算的时候，我们更推荐使用 map() 方法代码更精简，并 map 有返回值，具体参考 map 方法。

补充：方法除了传递一个匿名函数作为参数之外，还可以传第二个参数，该参数用于指定匿名函数内的 this 指向。

栗：单个参数：

// 只传一个匿名函数
arr.forEach(function (item, index, array) {
  console.log(this) // window
})

栗：两个参数：

// 传两个参数
arr.forEach(function (item, index, array) {
  console.log(this) // [1, -2, 3, 4, -5]
}, arr)

map 方法

🔔 注意：map() 用于遍历数组，返回处理之后的新数组，有返回值。

栗：先申明一个数组：

var arr = [1, -2, 3, 4, -5]

需求：将数组中的每一项翻倍。

var newArr = arr.map(function (item, index, array) {
  return item * 2
})
console.log(newArr) // [2,-4,6,8,-10]

可以看到：
map() 可以传入一个匿名回调函数作为参数，而该匿名函数有含有三个参数：

数组遍历时的当前元素 item；
数组遍历时的当前元素的索引 index；
正在遍历的数组 array。

该方法与 forEach() 的功能类似，只不过map() 具有返回值，会返回一个新的数组，这样处理数组后也不会影响到原有数组。

补充：方法除了传递一个匿名函数作为参数之外，还可以传第二个参数，该参数用于指定匿名函数内的 this 指向。

栗：单个参数：

// 只传一个匿名函数
arr.forEach(function (item, index, array) {
  console.log(this) // window
})

栗：两个参数：

// 传两个参数
arr.forEach(function (item, index, array) {
  console.log(this) // [1, -2, 3, 4, -5]
}, arr)

前端原生【数组】Array

CHENY

数组创建

reduce 方法

every 方法

some 方法

splice 方法

sort 方法

filter 方法

indexOf 方法和 lastIndexOf()方法

concat 方法

slice 方法

reverse 方法

push 和 pop 方法

unshift 和 shift 方法

join 方法

forEach 方法

map 方法

其他文章

解读 webpack 打包后js

前端原生【对象】Object

前端原生【数组】Array

CHENY

数组创建

reduce 方法

every 方法

some 方法

splice 方法

sort 方法

filter 方法

indexOf 方法 和 lastIndexOf()方法

concat 方法

slice 方法

reverse 方法

push 和 pop 方法

unshift 和 shift 方法

join 方法

forEach 方法

map 方法

其他文章

解读 webpack 打包后js

前端原生【对象】Object

indexOf 方法和 lastIndexOf()方法