个人博客

Appearance

Array 类型 ​

数组类型

创建方式--3 种 ​

1、 字面量方式 ​

js
var arr = [1, 2, 3]

console.log(typeof arr); // object console.log(arr instanceof Array); //true console.log(Object.prototype.toString.call(arr)); //[object Array]

1、 最后一个只是一个,的时候 IE8-计算此长度，其他不支持。 ​
js
// BUG :
var arr = [1, 2, ,]
console.log(arr.length) // chrome 3个 ; IE9+ : 3个 ; IE8- : 4个
2、 空的默认值为 undefined ​
js
console.log(arr[2]) //undefined

2、 构造函数 ​

构造函数创建数组的时候，如果只有一个参数，且为正整数，那么此参数为数组的长度。 其他或者多参数的时候，每个参数为数组的每个值。

js
var arr1 = new Array(1, 2, 3, 4, 5)
var arr2 = new Array(10)
console.log(arr1) // [1,2,3,4,5]
console.log(arr2) // [undefined,.... 10个]

console.log(typeof arr1) // object
console.log(arr1 instanceof Array) //true
console.log(Object.prototype.toString.call(arr1)) //[object Array]

2、 Array.of() ​

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

： IE 不支持，其他支持 ​
js
var arr3 = Array.of(1, 2, 3, 4)
console.log(typeof arr3)
console.log(arr3 instanceof Array)
console.log(Object.prototype.toString.call(arr3))

console.log(Array.of(10)) //[10]
console.log(Array.of(10, "12", undefined, null)) //[10, "12", undefined, null]

console.log(new Array(10)) // [undefined * 10]

if (!Array.of) {
  Array.of = function () {
    return Array.prototype.slice.call(arguments)
  }
}

1. 静态方法 ​

  • Array.from() 将类数组转换成数组
  • Array.of() 创建数组
  • Array.isArray() 检测参数是否是数组类型(类数组不算数组)

1.1 Array.isArray(); ​

检测参数是否是数组类型(类数组不算数组)

js
var boolean = Array.isArray(arr)
入参： ​
  • arr ：检测的数组
出参： ​
  • boolean ：是否是数组
​
1、 不能检测类数组。 ​
： IE9+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
console.log(Array.isArray("asdas")) //false
console.log(Array.isArray([])) //true
console.log(Array.isArray({ 0: 0, 1: 1, length: 2 })) //false

// profill
if (!Array.isArray) {
  Array.isArray = function (obj) {
    return Object.prototype.toString.call(obj) === "[Object,Array]"
  }
}

1.2 Array.from(); ​

将一个类数组或者可迭代对象转化为一个新的数组

js
var newArr = Array.from(arrayLike [,mapFun])
入参： ​
  • arrayLike ：类数组对象
  • mapFun : 新数组中的每个元素会执行该回调函数。
  • thisArg : 执行回调函数 mapFn 时 this 对象。
出参： ​
  • newArr ：数组
： IE9+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
var arrLike = { 0: 0, 1: 1, length: 2 }

console.log(Array.from(arrLike)) // [0, 1]
console.log(Array.from({ 0: 0, 1: 1, 4: 4, length: 2 })) // [0, 1]
console.log(Array.from("12345")) // ["1", "2", "3", "4", "5"]
console.log(Array.from(new Set([1, 2, 3, 2]))) // [1, 2, 3]

创建一个 1-n 数组 ​

js
// 创建一个1-n的数组
function createNArr(n) {
  if (typeof n !== "number" || n <= 0) return []
  return Array.from({ length: n }, function (val, index) {
    return index + 1
  })
}
console.log(createNArr(10)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

数组合并去重 ​

js
// 数组合并去重
var arr = [1, 2, 3],
  arr2 = [2, 4, 5]

function concatArrAndCombine() {
  var newArr = [].concat.apply([], arguments)
  return Array.from(new Set(newArr))
}

console.log(concatArrAndCombine(arr, arr2)) //[1, 2, 3, 4, 5]
console.log(concatArrAndCombine(arr, arr2, [6, 1, 3])) // [1, 2, 3, 4, 5, 6]

1. 静态方法 ​

  • Array.from() 将类数组转换成数组
  • Array.of() 创建数组
  • Array.isArray() 检测参数是否是数组类型(类数组不算数组)

1.3 Array.of(); ​

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

js
var arr = Array.of(10, "12", undefined, null)
入参： ​
  • val1... ：数组各下标值
出参： ​
  • arr ：创建的数组
： IE9+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
console.log(Array.of(10)) //[10]
console.log(Array.of(10, "12", undefined, null)) //[10, "12", undefined, null]

console.log(new Array(10)) // [undefined * 10]

if (!Array.of) {
  Array.of = function () {
    return Array.prototype.slice.call(arguments)
  }
}

​

1、 当只有一个参数，且参数的类型为正整数的时候， new Array(10) 创建的是一个长度为 10 的所有值为 undefined 的数组，二 Array.of(10)仍然是创建长度为 1 的数组[10] ​
2、 Array.of() ES6 新方法，IE8-不支持 ​

2. 转换方法 ​

  • arr.toString()
  • arr.toLocaleString()
  • arr.valueOf()

2.1 arr.toString(), arr.toLocaleString() ​

其继承于 Object 对象， 返回其数组每一个元素调用自身的 toString 或者 toLocalString 方法，然后再将各个元素以，隔开生成字符串。其作用跟 ar.join(",")一样

js
var arr = arr.toString()
​
1、 null,undefined,[] 调用 toString(),toLocaleString()等作为''空字符串处理 。 ​
： IE 支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  toString,toLocaleString  -----------------")

console.log([].toString()) // '' 空字符串
var arr = [1, 2, 3, 4]
console.log(arr.toString()) //  "1,2,3,4"
console.log(arr.toLocaleString()) // "1,2,3,4"

var arr1 = [
  1,
  {
    toString: function () {
      return "toString"
    },
    toLocaleString: function () {
      return "toLocaleString"
    },
  },
  null,
  undefined,
  [],
  function () {},
]
console.log(arr1.toString()) // 1,toString,,,,function (){}
console.log(arr1.toLocaleString()) // 1,toLocaleString,,,,function (){}
console.log(arr1.join(",")) // 1,toString,,,,function (){}

// 可以重写数组的toString方法
Array.prototype.toString = function () {
  return this.join("-")
}
var arr = [1, 2, 3, 4]
console.log(arr.toString()) //  "1-2-3-4"

2.2 arr.valueOf() ​

返回数组对象本身，并不会调用各个值的 valueOf()方法。

： IE 支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  valueOf  -----------------")
var arr = [1, 2, 3, null, undefined, [], function () {}, true, "", /\d+/, 4]
console.log(arr.valueOf()) //  [1, 2, 3, null, undefined, Array(0), ƒ, true, "", /\d+/, 4]
var arr1 = [
  1,
  2,
  3,
  {
    valueOf: function () {
      return "valueOf"
    },
  },
  4,
]
console.log(arr1.valueOf()) //[1, 2, 3, {…}, 4]\

console.log(typeof []) // 'object'
console.log(typeof new Array(5)) // 'object'
console.log(typeof Array.of(1, 2, 3)) // 'object'

3. 堆栈方法 ​

  • arr.push()
  • arr.pop()
  • arr.shift()
  • arr.unshift()

3.1 arr.push() ​

将一个或多个元素添加到数组的末尾，并返回新数组的长度。

js
var arr = arr.push(str)
​
1、 对于非数组的对象类型数据，push 可以通过 Array.prototype.push.apply()的方式 生成类数组。 ​
2、 其类数组添加 只关心 length 属性的值，如果 length 不存在或者不为 number 类型则 生成一个 length:0 的属性。 ​
： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  push  -----------------")
var arr = [1, 2, 3]
console.log(arr.push(4, 5)) // 5返回的是新数组的长度
console.log(arr) //  [1, 2, 3, 4, 5] 修改了原数组

var obj = {}
console.log(Array.prototype.push.apply(obj, [4, 5, 6])) // 3
console.log(obj) // {0: 4, 1: 5, 2: 6, length: 3}

数组的合并 ​

js
// 数组的合并
var arr = [1, 2, 3]
console.log(Array.prototype.push.apply(arr, [4, 5, 6])) // 6
console.log(arr) // [1, 2, 3, 4, 5, 6]

var arrLike = {
  0: 0,
  1: 1,
  length: 3,
}
console.log(Array.prototype.push.apply(arrLike, [4, 5, 6])) // 6
console.log(arrLike) // {0: 0, 1: 1, 3: 4, 4: 5, 5: 6, length: 6}  缺少2的值  可见push直接调用length属性 然后再后面添加

3.2 arr.pop() ​

从一个数组的末尾去除一个元素，返回去除的元素。 空数组返回 undefined。

js
arr[arr.length - 1] === arr.pop()
​
1、 其跟 push()一样同样可以作用域对象，且只关注与 length 属性。 ​
： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  pop  -----------------")
var arr = [1, 2, 3, 4]
console.log(arr.pop()) // 4
console.log(arr) // [1,2,3]
console.log(Array.prototype.pop.apply(arr)) // 3
console.log(arr) // [1,2]
console.log([].pop()) // undefined

var arrLike = {
  0: 0,
  1: 1,
  length: 3,
}
console.log(Array.prototype.pop.apply(arrLike)) // undefined
console.log(arrLike) // {0: 0, 1: 1, length: 2}
console.log(Array.prototype.pop.apply(arrLike)) // 1
console.log(arrLike) // {0: 0,  length: 1}

3.3 arr.unshift() ​

将一个或多个元素添加到数组的开头，并返回新数组的长度。

js
var length = arr.unshift(str)
` ​
1、 其跟 push()一样同样可以作用域对象，且只关注与 length 属性。 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  unshift  -----------------")
var arr = [1, 2, 3]
console.log(arr.unshift(4, 5)) // 5返回的是新数组的长度
console.log(arr) //  [4, 5, 1, 2, 3] 修改了原数组

// 数组的合并
var arr = [1, 2, 3]
console.log(Array.prototype.unshift.apply(arr, [4, 5, 6])) // 6
console.log(arr) // [4, 5, 6, 1, 2, 3]

var arrLike = {
  0: 0,
  1: 1,
  4: 4,
  length: 3,
}
console.log(Array.prototype.unshift.apply(arrLike, [4, 5, 6])) // 6
console.log(arrLike) // {0: 4, 1: 5, 2: 6, 3: 0, 4: 1, length: 6}  缺少2的值  可见unshift直接调用length属性 然后按照length获取0-length的属性，修改其属性为 key + length ,如果原来有会被覆盖。

var obj = {}
console.log(Array.prototype.unshift.apply(obj, [4, 5, 6])) // 3
console.log(obj) // {0: 4, 1: 5, 2: 6, length: 3}
var obj1 = { 0: 1 }
console.log(Array.prototype.unshift.apply(obj1, [4, 5, 6])) // 3
console.log(obj1) // {0: 4, 1: 5, 2: 6, length: 3}

3.4 arr.shift() ​

从一个数组的开头去除一个元素，返回去除的元素。 空数组返回 undefined。

js
arr[0] === arr.unshift()
` ​
1、 其跟 unshift()一样同样可以作用域对象，且只关注与 length 属性。 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  shift  -----------------")
var arr = [1, 2, 3, 4]
console.log(arr.shift()) // 4
console.log(arr) // [2,3,4]
console.log(Array.prototype.shift.apply(arr)) // 3
console.log(arr) // [3,4]
console.log([].shift()) // undefined

var arrLike = {
  0: 0,
  1: 1,
  4: 4,
  length: 3,
}
console.log(Array.prototype.shift.apply(arrLike)) // 0
console.log(arrLike) // {0: 1, 4: 4, length: 2}     下标为4的没有修改  length范围内的下边都减去了1
console.log(Array.prototype.shift.apply(arrLike)) // 1
console.log(arrLike) // {4: 4, length: 1}

4. 排序方法 ​

  • arr.reserve()
  • arr.sort()

4.1 arr.reserve() ​

将数组中元素的位置颠倒,并返回颠倒后的数组。

js
var newArr = arr.reserve()
` ​
1、 Array.prototype.reserve.apply()同样可以作用域类数组。 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
var arr = [1, 2, 3, 4]
console.log(arr.reverse()) // [4,3,2,1]
console.log(arr) // [4,3,2,1]

var arrLike = {
  0: 1,
  1: 1,
  3: 3,
  5: 5,
  length: 4,
}
console.log(Array.prototype.reverse.apply(arrLike)) //{0: 3, 2: 1, 3: 1, 5: 5, length: 4}
console.log(arrLike) //{0: 3, 2: 1, 3: 1, 5: 5, length: 4}

4.2 arr.sort() ​

按照给定的函数对数组进行排序，并返回排序后的数组。

js
var newArr = arr.reserve()
` ​
1、如果没有指定规则，那么就按照每个项 toString()方法转成字符串，然后按照升序就行排序。 ​
2、如果有规则，那么 compare(arg1,arg2) ​
    升序：  arg1 < arg2 => -1
    降序：  arg1 < arg2 => 1
    想前面比后面小返回-1 前面比后面大 1
3、 可以作用于类数组，但是也只作用于 length 之内的属性 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
var arr = [1, 2, 3, 11]
console.log(arr.sort()) // [1,11,2,3]   //不是【1,2,3,11】
console.log(
  arr.sort(function (arg1, arg2) {
    // 升序  [1,2,3,11]
    if (arg1 < arg2) {
      return -1
    }
    if (arg1 == arg2) {
      return 0
    }
    if (arg1 > arg2) {
      return 1
    }
  })
)

var arrLike = {
  0: {
    name: "张三",
    value: 0,
  },
  1: {
    name: "李四",
    value: 2,
  },
  2: {
    name: "王五",
    value: 1,
  },
  5: {
    name: "赵六",
    value: -1,
  },
  length: 3,
}

console.log(
  [].sort.call(arrLike, function (arg1, arg2) {
    if (arg1.value < arg2.value) {
      return -1
    }
    if (arg1.value == arg2.value) {
      return 0
    }
    if (arg1.value > arg2.value) {
      return 1
    }
  })
) //{0: {name: "张三", value: 0} , 1: {name: "王五", value: 1}, 2: {name: "李四", value: 2}, 5: {name: "赵六", value: -1} length: 3}

5. 操作方法 ​

  • arr.concat()
  • arr.splice()
  • arr.slice()

5.1 arr.concat() ​

数组的合并，返回合并后的数组,但是不会改变现有的数组。

js
var newArr = arr.concat(arr1[,arr2,arr3...]);
` ​
1、 不能作用于类数组。 ​
2、 参数可能为数组也可以为值。 浅拷贝 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  concat  -----------------")
var arr = [1, 2, 3]

console.log(arr.concat([4, 5, 6])) //[1, 2, 3, 4, 5, 6]
console.log(arr.concat(7, 8)) // [1, 2, 3, 7, 8]
console.log(arr.concat([4, 5, 6], [7, 8])) // [1, 2, 3, 4, 5, 6, 7, 8]

console.log(Array.prototype.concat.call(arr, [1, 2])) //[1, 2, 3, 1, 2]
console.log(Array.prototype.concat.call(arr, { 0: 0, 1: 1, 3: 3, 5: 5, length: 4 })) //[1, 2, 3, {…}] 不能作用于类数组

5.2 arr.slice() ​

返回一个从开始到结尾（不包含结尾）的新数组，原来数组不变，浅拷贝。

js
var newArr = arr.slice(beginIndex[,endIndex]);
入参： ​
  • beginIndex ：拷贝开始位置的索引，如果是负数 则当做 beginIndex + length (包含)，再小于 0 则为 0，如果大于数组长度则为数组的长度
  • endIndex : 拷贝结束位置的索引(没有的话就是字符串结尾)，规则跟开始位置一样
js
// 可见 可以为负数或者大于 length
//     如果为 负数 则 val + length
//          -> 如果再为负数则  为0
//     如果大于 length ,则当做length
console.log([0, 1, 2, 3, 4, 5].slice(-3)) // [3, 4, 5]            === (3)
console.log([0, 1, 2, 3, 4, 5].slice(-9)) // [0, 1, 2, 3, 4, 5]   === (0)
console.log([0, 1, 2, 3, 4, 5].slice(-3, -1)) // [3, 4]               === (3,5)
console.log([0, 1, 2, 3, 4, 5].slice(-9, -8)) // []                   === (0,0)
console.log([0, 1, 2, 3, 4, 5].slice(-9, 9)) // [0, 1, 2, 3, 4, 5]   === (0,6)
出参： ​
  • newStr ：拷贝的新数组
` ​
1、 可以作用于类数组。 ​
2、 浅拷贝 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  slice  -----------------")
var arr = [1, 2, 3]

console.log(arr.slice(0, 2)) //[1, 2]
console.log(arr.slice(1)) // [2,3]

console.log(Array.prototype.slice.call(arr, 0, 2)) // [1, 2]
console.log(Array.prototype.slice.call(arr, 1)) // [2,3]
var arrLike = {
  0: {
    name: "张三",
    value: 0,
  },
  1: {
    name: "李四",
    value: 2,
  },
  2: {
    name: "王五",
    value: 1,
  },
  5: {
    name: "赵六",
    value: -1,
  },
  length: 3,
}
console.log(Array.prototype.slice.call(arrLike, 1)) // [{name : '李四', value: 2},{name : '王五', value: 1}]
var newArr = Array.prototype.slice.call(arrLike, 1)
newArr[0].name = "李四1"
console.log(arrLike[1].name) // '李四1'

5.3 arr.splice() ​

通过删除现有元素和/或添加新元素来更改一个数组的内容。 返回删除的内容数组没有返回[]

js
 var deleteArr = arr.splice(startIndex[,deleteNum[,addItem...]])
入参： ​
  • startIndex : 删除或者添加新元素的开始下标
  • deleteNum : 从开始下标删除元素的个数
  • addItem : 从开始下标添加的新元素
出参： ​
  • deleteArr ：删除的数组
` ​
1、 可以作用于类数组。 ​
2、 包含 startIndex 下标的元素进行删除 和 之前插入 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  splice  -----------------")
var arr = [1, 2, 3]

console.log(arr.splice(1, 1, 4, 5)) //从下标为1的地方开始删除一个元素，然后再依次插入4,5   [2]
console.log(arr) //  [1,4,5,3]
// 从第二个元素处插入6,7
var arr = [1, 2, 3, 4]
arr.splice(2, 0, 6, 7)
console.log(arr) //  [1,2,6,7,3,4]
//  从第二个元素开始删除后面所有的元素
var arr = [1, 2, 3, 4]
console.log(Array.prototype.splice.call(arr, 2, arr.length - 2)) // [3, 4]
console.log(arr) //  [1,2]

var arrLike = {
  0: {
    name: "张三",
    value: 0,
  },
  1: {
    name: "李四",
    value: 2,
  },
  2: {
    name: "王五",
    value: 1,
  },
  5: {
    name: "赵六",
    value: -1,
  },
  length: 3,
}
console.log(Array.prototype.splice.call(arrLike, 1, 1)) // [{name : '李四', value: 2}]
console.log(arrLike) // 没有李四了。

6. 位置方法 ​

  • arr.indexOf()
  • arr.lastIndexOf()
  • arr.find() (ES6)
  • arr.findIndex() (ES6)
  • arr.includes() (ES6)

6.1 arr.indexOf() ​

返回数组中 === 匹配的第一个元素的索引

js
var index = arr.indexOf(str)
入参： ​
  • str : 搜索的值
出参： ​
  • index ：第一个匹配的下标 没有返回 -1
` ​
1、 使用的 === 所以 +0 === -0 NaN !== NaN 不是 Object.is()。 ​
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  indexOf  -----------------")

var arr = [1, 2, 3, undefined, null, "1", +0, -0, NaN]

console.log(arr.indexOf("1")) // 5
console.log(arr.indexOf(+0)) // 6
console.log(arr.indexOf(-0)) // 6
console.log(arr.indexOf(NaN)) // -1

6.2 arr.lastIndexOf() ​

数组从后向前查找 返回 === 匹配的第一个元素的索引

js
 var index = arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
入参： ​
  • searchElement : 搜索的值
  • fromIndex : 从此位置开始逆向查找
出参： ​
  • index ：第一个匹配的下标 没有返回 -1
` ​
1、 使用的 === 所以 +0 === -0 NaN !== NaN 不是 Object.is()。 ​
2、 formIndex 的规则是 如果在 0 -> length-1,正常； 大于 length -1 则等于 length -1 ; 为负数 则 fromIndex + length ,如果再为负数，则为 0 ​
js
var arr = [0, 1, 2, 3, 4, 5, 3, 2]
console.log(arr.lastIndexOf(2)) //7     == (2)
console.log(arr.lastIndexOf(2, 5)) //2     == (2,5)
console.log(arr.lastIndexOf(2, 20)) //7     == (2,7)
console.log(arr.lastIndexOf(2, -3)) //2     == (2,5)
console.log(arr.lastIndexOf(2, -11)) //-1    == (2,0)
` ： IE5+ ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 ​
js
console.log("--------------  lastIndexOf  -----------------")

var arr = [1, 2, 3, "1", undefined, null, "1", +0, -0, NaN]

console.log(arr.lastIndexOf("1")) // 6
console.log(arr.lastIndexOf(+0)) // 8
console.log(arr.lastIndexOf(-0)) // 8
console.log(arr.lastIndexOf(NaN)) // -1

6.2 arr.find()，arr.fineIndex() ​

按照测试函数去匹配元素，find() 返回第一个匹配的元素的值，没有返回 undefined findIndex 返回第一个匹配的值的下标，没有返回-1

js
 var index = arr.find(testFun [,thisArg])
入参： ​
  • testFun : testFun(match,index,sourceArr){return true} 匹配函数
    • match : 当前遍历的值
    • index : 当前遍历的下标
    • sourceArr : 源数组
  • thisArg : 函数 this 的指向
出参： ​
  • index ：find 返回查找的值,findIndex() 返回查找值的下标
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
console.log("--------------  find，findIndex  -----------------")

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

console.log(
  arr.find(function (match, index, sourceArr) {
    if (match === 2) {
      return true
    }
  })
) // 2 找到匹配的元素  但是我们不知道其下标

console.log(
  arr.find(function (match, index, sourceArr) {
    if (index === 10) {
      return true
    }
  })
) // 没有找到  undefined

console.log(
  arr.findIndex(function (match, index, sourceArr) {
    if (match === 2) {
      return true
    }
  })
) // 1 找到匹配的元素 返回的是其下标
console.log(
  arr.findIndex(function (match, index, sourceArr) {
    if (index === 10) {
      return true
    }
  })
) // -1 没有返回 -1

6.2 arr.includes() ​

判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

js
var boolean = arr.includes(searchElement, fromIndex)
入参： ​
  • searchElement : 搜索的值
  • fromIndex : 从此位置开始逆向查找
出参： ​
  • boolean : 是否包含该值
​
1、 NaN 和 正负 0 的问题 ​
  • Object.is(NaN,NaN)为 true
  • NaN === NaN 为 false
  • arr.includes(NaN) 为 true
js
console.log("--------------  includes  -----------------")
var arr = [0, NaN, undefined, +0]

console.log(arr.includes(+0)) // true
console.log(arr.includes(-0)) // false
console.log(arr.includes(null)) // false
console.log(arr.includes(undefined)) // true
console.log(arr.includes(NaN)) // true
console.log(arr.includes("0")) // true
2、 如果小于 0 或者不是 Number 则为 0 ，如果大于 length 则 为 length 永远为 false ​
js
console.log([1, 2, 3, 4, 1, 2, 5, 6].includes(3, -4)) //false
console.log([1, 2, 3, 4, 1, 2, 5, 6].includes(3, -18)) //true
console.log([1, 2, 3, 4, 1, 2, 5, 6].includes(3, 9)) //false
console.log([1, 2, 3, 4, 1, 2, 5, 6].includes(3, "0")) //true
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​

7. 迭代方法 ​

  • arr.every() 对数组中每一项运行给定的函数，如果函数每一项都返回 true,则结果返回 true，否则返回 false。
  • arr.filter() 对数组中每一项运行给定的函数，返回函数返回值为 true 的项组成的数组。
  • arr.some() 对数组中每一项运行给定的函数，如果函数中有一项返回值为 true，则结果返回 true，否则返回 false。
  • arr.forEach() 对数组中每一项运行给定的函数进行遍历，
  • arr.map() 对数组中每一项运行给定的函数，返回函数返回结果组成的数组
  • arr.entries() (ES6)
  • arr.values() (ES6)
  • arr.keys() (ES6)
  • arr.fill() (ES6)

7.1 arr.every() ​

对数组中每一项运行给定的函数，如果函数每一项都返回 true,则结果返回 true，否则返回 false。

js
 var boolean = arr.every(testFun[, thisArg])
入参： ​
  • testFun : testFun(match,index,sourceArr){return true} 匹配函数
    • match : 当前遍历的值
    • index : 当前遍历的下标
    • sourceArr : 源数组
  • thisArg : 函数 this 的指向
出参： ​
  • index ：是否数组中每一个值执行函数都返回 true
` ​
1、 在遍历开始的时候遍历数组的长度就已经决定，在遍历中更改数组的长度不会影响遍历次数。 ​
2、 在遍历到指定下标的元素时才获取此位置的值，所以后面的值受前面修改的影响。 ​
3、 一旦返回值不是 true 则立即中断遍历。 ​
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
console.log("--------------  every  -----------------")
var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.every(function (match, index, sourceArr) {
    if (match <= 10) {
      return true
    }
  })
) //true
console.log(
  arr.every(function (match, index, sourceArr) {
    console.log(match) // 1 ,2, 3,5  后面的1 10没有输出 可见 一旦返回值不是true则立即中断遍历
    if (match <= 4) {
      return true
    }
  })
) //false
console.log(
  [].every(function () {
    return false
  })
) //true
//  在遍历开始的时候遍历数组的长度就已经决定，在遍历中更改数组的长度不会影响遍历次数。
//  在遍历到指定下标的元素时才获取此位置的值，所以后面的值受前面修改的影响
var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.every(function (match, index, sourceArr) {
    console.log(match) // 1 ,2,3,4,1,10
    if (index == 2) {
      arr[3] = 4
    }
    if (index === 5) {
      arr.push(10, 11, 12)
    }
    return true
  })
)
var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.every(function (match, index, sourceArr) {
    console.log(match) // 1 ,2,3,5,1,10
    if (index == 2) {
      arr = [1, 2, 3]
    }
    return true
  })
)

7.2 arr.some() ​

对数组中每一项运行给定的函数，如果函数中有一项返回值为 true，则结果返回 true，否则返回 false。

js
 var boolean = arr.some(testFun[, thisArg])
入参： ​
  • testFun : testFun(match,index,sourceArr){return true} 匹配函数
    • match : 当前遍历的值
    • index : 当前遍历的下标
    • sourceArr : 源数组
  • thisArg : 函数 this 的指向
出参： ​
  • boolean ：是否数组中存在一个 true
` ​
1、 在遍历开始的时候遍历数组的长度就已经决定，在遍历中更改数组的长度不会影响遍历次数。 ​
2、 在遍历到指定下标的元素时才获取此位置的值，所以后面的值受前面修改的影响。 ​
3、 一旦返回值不是 true 则立即中断遍历。 ​
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
console.log("--------------  some  -----------------")
var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.some(function (match, index, sourceArr) {
    if (match >= 10) {
      return true
    }
  })
) //true
console.log(
  arr.some(function (match, index, sourceArr) {
    console.log(match) // 1 ,2, 3,5  后面的1 10没有输出 可见 一旦返回值是true则立即中断遍历
    if (match >= 4) {
      return true
    }
  })
) //false
console.log(
  [].some(function () {
    return true
  })
) //false
//  在遍历开始的时候遍历数组的长度就已经决定，在遍历中更改数组的长度不会影响遍历次数。
//  在遍历到指定下标的元素时才获取此位置的值，所以后面的值受前面修改的影响
var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.some(function (match, index, sourceArr) {
    console.log(match) // 1 ,2,3,4,1,10
    if (index == 2) {
      arr[3] = 4
    }
    if (index === 5) {
      arr.push(10, 11, 12)
    }
    return false
  })
)
var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.some(function (match, index, sourceArr) {
    console.log(match) // 1 ,2,3,5,1,10
    if (index == 2) {
      arr = [1, 2, 3]
    }
    return false
  })
)

7.3 arr.filter() ​

对数组中每一项运行给定的函数，返回函数返回值为 true 的项组成的数组。

js
 var arr = arr.filter(testFun[, thisArg])
入参： ​
  • testFun : testFun(match,index,sourceArr){return true} 匹配函数
    • match : 当前遍历的值
    • index : 当前遍历的下标
    • sourceArr : 源数组
  • thisArg : 函数 this 的指向
出参： ​
  • arr ： 数组中执行函数返回值为 true 的值组成的新数组
` ​
1、 在遍历开始的时候遍历数组的长度就已经决定，在遍历中更改数组的长度不会影响遍历次数。 ​
2、 在遍历到指定下标的元素时才获取此位置的值，所以后面的值受前面修改的影响。 ​
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
console.log("--------------  filter  -----------------")

var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.filter(function (match, index, sourceArr) {
    if (match >= 4) {
      return true
    }
  })
) // [5,10]

7.4 arr.map() ​

对数组中每一项运行给定的函数，返回函数返回结果组成的数组

js
 var arr = arr.map(testFun[, thisArg])
入参： ​
  • testFun : testFun(match,index,sourceArr){return true} 匹配函数
    • match : 当前遍历的值
    • index : 当前遍历的下标
    • sourceArr : 源数组
  • thisArg : 函数 this 的指向
出参： ​
  • arr ： 数组中执行函数返回值组成的新数组

1、 在遍历开始的时候遍历数组的长度就已经决定，在遍历中更改数组的长度不会影响遍历次数。

2、 在遍历到指定下标的元素时才获取此位置的值，所以后面的值受前面修改的影响。

： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6)
js
console.log("--------------  map  -----------------")

var arr = [1, 2, 3, 5, 1, 10]
console.log(
  arr.map(function (match, index, sourceArr) {
    return match + match
  })
) //  [2, 4, 6, 10, 2, 20]

7.5 arr.forEach() ​

对数组中每一项运行给定的函数进行遍历

js
undefined = arr.map(testFun[, thisArg])
入参： ​
  • testFun : testFun(match,index,sourceArr){return true} 匹配函数
    • match : 当前遍历的值
    • index : 当前遍历的下标
    • sourceArr : 源数组
  • thisArg : 函数 this 的指向
出参： ​
  • undefined ： 没有返回值
` ​
1、 原数组中值为 empty 的项会被自动过滤(即 ,, 或者 delete 删除的项,值为 undefined 的不会被过滤) ​
2、 没有生成数组的拷贝，但是原始数组的长度已确定。 ​
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
var arr = [1, 2, 3, 5, 1, 10]
// 数组的copy
var newArr = []
arr.forEach(function (match, index, sourceArr) {
  newArr.push(match)
})

var arr1 = [1, 2, , , 3, undefined, 4, 5]
delete arr1[1]
console.log(arr1) // [1, empty × 3, 3, undefined, 4, 5]
var newArr = []
arr1.forEach(function (match, index, sourceArr) {
  newArr.push(match)
})
console.log(newArr) // [1, 3, undefined, 4, 5]   //empty的项过滤了

7.6 arr.entries()、arr.keys()、arr.values() ​

返回一个键值对/键/值 的遍历器对象(Iterator)

js
Array Iterator = arr.entries()
出参： ​
  • Iterator ： 返回一个迭代器对象 不能通过 forEach 编译 需要 for of
` ​
1、 其返回的是一个迭代器对象，而不是数组 ​
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
console.log("--------------  entries  -----------------")

var arr = [1, 2, 3, 4]
console.log(arr.entries()) // Array Iterator {}
for ([key, value] of arr.entries()) {
  console.log(key + "-------" + value)
}

for (var key of arr.keys()) {
  console.log(key) // 0,1,2,3
}
// chrome 66
console.log(arr.values())
for (var value of arr.values()) {
  console.log(value) // 1,2,3,4
}

7.7 arr.fill() ​

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

js
var newArr = arr.fill(value[,startIndex[,endIndex]]);
入参： ​
  • value : 填充的值
  • startIndex : 填充开始下标（包含）
  • endIndex : 填充结束下标(不包含)
出参： ​
  • newArr ： 返回一个新的数组
` ​
1、 包含开始 不包含结尾 ​
2、 规则：如果下标为 负数 则 index + length ；如果下标不为数字 则转换成 0, 如果大于 length 则转成 length ​
` ： IE 不支持 ，Opera 支持，Chrome 支持，FF 支持，Edge 支持 (ES6) ​
js
var arr = [1, 2, 3, , , 4]
console.log(arr.fill(10)) //[10,10,10,10,10,10] 6位
console.log([1, 2, 3, , , 4].fill(10, 1, 3)) //[1,10,10,,,4]
console.log([1, 2, 3, , , 4].fill(10, 1, -3)) //[1,10,10,,,4]
console.log([1, 2, 3, , , 4].fill(10, 1, -9)) //[1,2,3,,,4]
console.log([1, 2, 3, , , 4].fill(10, NaN, 3)) //10,10,10,,,4]
创建一个值全为 6 的 6 位数组 ​
js
// 创建一个 值全为6 的6位数组
console.log([].fill.call({ length: 6 }, 6)) //[ 6, 6, 6, 6, 6, 6 ]

`

1、 迭代方法 其匹配函数的参数统一为 function(value,index.sourceArr ){}

2、 every()、some() 一个是 每一个都为 true 一个是 只要一个返回 true； 其都是只要存在不满足的条件如 every()返回 false 则下面的不再遍历

3、 filter()、map()用于过滤数组，filter()为生成一个 callback()函数返回值为 true 的值的新数组，而 map()是 callback()函数的返回值组成新数组。

4、 forEach() 不再关注返回值，只进行遍历，但是其遇到 空的项则自动跳过(,, , delete arr[2])。

5、 entries()、keys()、values() 返回的是一个 Iterator 对象 不是数组

6、 fill() 填充数组