👾 笔记 | JavaScript 数组
一、Array 的构造器
用于创建一个新的数组，通常推荐使用对象字面量的方式创建一个数组：var a = []
ES6 新增的构造器方法：Array.of 和 Array.from
1. Array.of 静态方法
用于将参数依次转化为数组中的一项，然后返回这个新数组，而不管它是数字还是其他的类型。
const arr1 = Array.of(8.0)
const arr2 = Array(8.0)
console.log(arr1) // [ 8 ]
console.log(arr2) // [ <8 empty items> ]
const arr3 = Array.of(8.0, 5)
const arr4 = Array(8.0, 5)
console.log(arr3) // [ 8, 5 ]
console.log(arr4) // [ 8, 5 ]
const arr5 = Array.of('8')
const arr6 = Array('8')
console.log(arr5) // [ '8' ]
console.log(arr6) // [ '8' ]
2. Array.from 静态方法
基于其他对象创建新数组，即从一个类似数组的可迭代对象中创建一个新的数组实例。
！！！注意，此实例为浅拷贝的数组实例
方法参数：
- 类似数组的可迭代对象 (必选)
- 加工函数。新生成的数组会经过该函数的加工再返回 (可选)
- this作用域。加工函数执行时 this 的值 (可选)
const obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 }
const newArray = Array.from(obj, function (value, index) {
console.log('value，index，this，arguments.length... ')
console.log(value, index, this, arguments.length)
// 必须指定返回值，否则返回 undefined
// repeat() 方法字符串复制指定次数。
return value.repeat(2)
}, obj)
console.log(newArray) // [ 'aa', 'bb', 'cc' ]
// 不指定 this 加工函数可以是箭头函数
const newArray1 = Array.from(obj, (value) => value.repeat(3))
console.log(newArray1) // [ 'aaa', 'bbb', 'ccc' ]
// 只要拥有迭代器的对象都可以
// String
const StringArray = Array.from('abc') // [ 'a', 'b', 'c' ]
// Set
const SetArray = Array.from(new Set(['abc', 'def'])) // [ 'abc', 'def' ]
// Map
const MapArray = Array.from(new Map([
[1, 'ab'],
[2, 'cd']
])) // [ [ 1, 'ab' ], [ 2, 'cd' ] ]
二、Array 的判断
Array.isArray 静态方法，用来判断一个变量是否为数组类型，在排除 Array.isArray 该方法之后，至少有五种方法判断是否为数组:
- instanceof
- instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
- constructor
- Object 实例的 constructor 数据属性返回一个引用，指向创建该实例对象的构造函数。注意，此属性的值是对函数本身的引用，而不是一个包含函数名称的字符串。
- Object.prototype.isPrototypeOf
- isPrototypeOf() 方法用于检查一个对象是否存在于另一个对象的原型链中。
- Object.getPrototypeOf
- Object.getPrototypeOf() 静态方法返回指定对象的原型（即内部 [[Prototype]] 属性的值）。
- Object.prototype.toString
- toString() 方法返回一个表示该对象的字符串。该方法旨在重写（自定义）派生类对象的类型转换的逻辑。
const array = []
// 1.instanceof
console.log(array instanceof Array)
// 2.constructor
console.log(array.constructor === Array)
// 3.Object.prototype.isPrototypeOf
console.log(Array.prototype.isPrototypeOf(array))
// 4.Object.getPrototypeOf
console.log(Object.getPrototypeOf(array) === Array.prototype)
// 5.Object.prototype.toString
console.log(Object.prototype.toString.call(array) === '[object Array]') // call(), apply()都行
// 6.Array.isArray
console.log(Array.isArray(array))
三、Array 改变自身的方法
- pop
- push
- reverse
- shift
- sort
- splice
- unshift
- copyWithin
- fill
array = [1, 2, 3, 4, 5]
// copyWithin
console.log(array.copyWithin(0, 2, 5)) // [3, 4, 5, 4, 5]
// fill
console.log(array.fill(99, 1, 2)) // [3, 99, 5, 4, 5]
// 题目，输入下面四个参数，输出 [ 1, 2, 2, 3, 5, 6 ]
let nums1 = [1, 2, 3, 0, 0, 0]
let m = 3
let nums2 = [2, 5, 6]
let n = 3
const merge = (nums1, m, nums2, n) => {
nums1.splice(m)
nums2.splice(n)
nums1.push(...nums2)
nums1.sort((a, b) => a - b)
return nums1
}
console.log(merge(nums1, m, nums2, n)) // [ 1, 2, 2, 3, 5, 6 ]
四、Array 不改变自身的方法
- conact
- join
- slice
- toString
- toLocateString
- indexOf
- lastIndexOf
- toSource (未形成标准的,只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法)
- includes (ES7 新增方法)
const array = [-0, 1, 2, NaN]
console.log(array.includes(+0)) // true includes忽略了0的正负
console.log(array.includes(NaN)) // true
// 注意：slice不会改变自身，splice会改变自身
五、Array 遍历方法
- forEach
- every
- some
- filter
- map
- reduce
- reduceRight
ES6 新增方法：
- entries
- find
- findIndex
- keys
- values
// 数组 array = [1,2,3,4] 求和
const array = [1, 2, 3, 4]
let sum = 0
// forEach
array.forEach(i => { sum += i })
console.log('forEach:sum...' + sum) // forEach:sum...10
sum = 0
// map
array.map(i => { sum += i })
console.log('map:sum...' + sum) // map:sum...10
// reduce
sum = array.reduce((p, v) => p + v)
console.log('reduce:sum...' + sum) // reduce:sum...10
// reduceRight
sum = array.reduceRight((p, v) => p + v)
console.log('reduceRight:sum...' + sum) // reduceRight:sum...10
// 题目，使用 reduce 拼接 name，输出 inslog1,inslog2,inslog3&inslog4
const nameArray= [
{ name: 'inslog1' },
{ name: 'inslog2' },
{ name: 'inslog3' },
{ name: 'inslog4' }
]
let stringName = nameArray.reduce((p, v, i, arr) => {
if (i === 1) {
return p.name + ',' + v.name
} else if (i === arr.length - 1) {
return p + '&' + v.name
} else {
return p + ',' + v.name
}
})
console.log(stringName) // inslog1,inslog2,inslog3&inslog4
总结
-
改变自身的方法:
ES5及以前: pop, push, reverse, shift, sort, splice, unshift
ES6/7/8: copyWithin, fill
-
不改变自身的方法:
ES5及以前: concat, join, slice, toString, toLocateString, indexOf, lastIndexOf
ES6/7/8: includes, toSource
-
遍历方法 (不改变自身):
ES5及以前: forEach, every, some, filter, map, reduce, reduceRight
ES6/7/8: entries, find, findIndex, keys, values
❧
