创建数组
let arr = []
let arr1 = new Array() // 或 let arr = Array() 方法可以传递一个参数 为数组长度 Array(6)
let arr2 = Array(6)
console.log(arr2.length) //6
// ES6
let arr3 = Array.form({}) // []
let arr4 = Array.of() // []
数组方法
- push(), pop()
- shift(), unshift()
- join()
- sort()
- reverse()
- concat()
- slice()
- splice()
- toString(), toLocaleString()
- indexOf(), lastIndexOf() // ES5
- forEach() // ES5
- filter() // ES5
- map() // ES5
- every() // ES5
- some() // ES5
- reduce(), reduceRight()
- find() //ES6
- findIndex() // ES6
- copyWithin() // ES6
- fill() // ES6
- entries(), keys(), values()
- includes()
- flat(), flatMap()
- Arrya.prototype.sort()
- Array.from() // ES6
- Array.of() // ES6
push(), pop()
push() 在数组的末尾增加一个或多个元素 并返回修改后的长度
let a = []
a.push('hello') // ['hello']
a.push('1', '2') // ['hello', '1', '2']
pop() 删除数组末尾一个元素，返回移除的值
let aPop = a.pop()
console.log(aPop) // 2
console.log(a) // ['hello', '1']
shift(), unshift()
shift() 删除数组的第一项，并返回删除的值
unshift() 将参数添加到数组开头，并返回数组的新长度
let aShift = a.shift() // 'hello'
console.log(a) // ['1']
let aUnshift = a.unshift('2', '3') // 3
console.log(a) // ['2', '3', '1']
jion()
把数组转换称字符串， 然后使用参数链接一起
let aJoin = a.join() // 2,3,1 默认是 ,
let aJoin2 = a.join('-') // 2-3-1
sort()
将数组中的元素排序并返回排序后的数组。
当不带参数调用sort()时， 数组元素以字母表顺序排序
var a = new Array("banana", "orange", "apple")
a.sort() // ["apple", "banana", "orange"]
var b = [22,66,3,33]
b.sort() // [22, 3, 33, 6] 字母顺序表
b.sort(function(a, b) { return a - b }) // [3, 22, 33, 66] // 数值顺序
reverse()
将数组中的元素顺序颠倒， 返回逆序的数组
var a = [1,3,4]
a.reverse() // [4,3,1]
concat()
创建并返回一个新数组， 它的元素包括调用concat()的元素数组的元素和concat()的每个参数
var a = [1,2,3]
a.concat(4, 5) // [1,2,3,4,5]
console.log(a) // [1,2,3]
a.concat([4,5]) // [1,2,3,4,5]
a.concat([4,5], [6,7]) // [1,2,3,4,5,6,7]
a.concat(4, [5,[6, 7 ]]) // [1,2,3,4,5, [6,7]]
slice()
返回指定数组的一个片段或子数组 参数包头不包尾
var a = [1,2,3,4,5]
a.slice(0,3) // [1,2,3]
a.slice(4) // [4,5]
a.slice(1, -1) // [2,3,4]
a.slice(-3, -2) // [3]
splice()
在数组中插入或删除元素的通用方法。不同于slice()和concat() splice()会修改调用的数组
var a = [1,2,3,4,5,6,7,8]
a.splice(4) // 返回[5,6,7,8] a: [1,2,3,4]
a.splice(1,2) // [2, 3] a:[1,4]
splice的第一个参数指定插入或删除的起始位置，第二个参数指定了要从数组中删除的个数。如果省略第二个参数 则是从起始点开始到结尾全部删除，紧随其后的任意参数指定了需要插入到数组中的元素
toString() toLocaleString()
将其每个元素转化为字符串，并且输出用逗号分隔的字符串
var a = [1,3,4]
a.toString() // 1,3,4
toLocaleString()是toString()的本地化版本
indexOf(), lastIndexOf()
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf() 返回某个指定的字符串值在字符串中最后出现的位置
var a = [1,2,3,2,4]
a.indexOf(2) // 1
a.lastIndexOf(2) // 3
a.indexOf(2, 2) // 3 第二个参数是从Array 索引的起始位置, 默认 0
数组的遍历
- for循环
var arr = [1,2,3,4]
for (let i = 0; i < arr.length; i++ ){
console.log(arr[i]) // 1,2,3,4
}
for循环有break语句 可以在循环过程中跳过(continue)某一项或者退出(break)
- forEach()
从头到尾为数组的每个元素执行一次指定的函数
arr.forEach(function(item) {
console.log(item) // 1;2;3;4;
})
function 回调参数 当前遍历数组内容, 索引和 数组本身
arr.forEach(function(item, index, arr) {
console.log(item, index, arr) // 1, 0 , [1, 2, 3, 4]; 2, 1, [1, 2, 3, 4]; 3, 2, [1, 2, 3, 4]; 4 3 [1, 2, 3, 4]
})
arr.forEach((item, index, array) => array[index] = item * 2)
arr // [2, 4, 6, 8]
forEach()没有break语句， 如果想要终止 必须把forEach()方法放在一个try块中，并抛出异常。
- map()
map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，包含改函数的返回值
a = [1,2,3]
b = a.map(x => x*2)
b // [2,4,6]
- filter()
filter()方法返回的数组元素是调用数组的一个子集。传递的函数用来逻辑判定，该函数返回true或false。
a = [1,2,3,4,5]
b = a.filter(x => x > 2)
b // [3,4,5]
- every()和some()
every()和some()方法返回数组的逻辑判定。它们对数组元素进行指定的函数进行判定，返回true或false
every():当数组中所有元素都满足判定函数才会返回true
some():当数组中只要又一个元素满足判定函数就返回true
a = [1,2,3,4]
a.every(x => x < 10) // true 全部满足条件
a.every(x => x >2) // false 有一个未满足
a.some(x => x > 3) // true 有一个满足
a.some(x => x > 10) // false 没有一个满足
- reduce()和reduceRight()
使用指定的函数将数组元素进行组合，生成单个值。
var a = [1,2,3,4,5]
var sum = a.reduce((x, y) => x + y, 0) // 15 数组求和
var product = a.reduce((x, y) => x * y, 1) // 120 数组求积
var max = a.reduce((x, y) => x > y ? x : y) // 5 数组求最大值
reduce需要两个参数，第一个是执行简化操作的函数，化简函数就是用某种方法把两个值组成一个值，并返回。第二个（可选）的参数是一个传递给函数的初始值。默认为数组的第一个元素
化简函数的参数和forEach(), map()使用的函数不同。es5默认操作函数的值为(数组元素， 元素索引， 和数组本身)。
化简函数的第一个参数是到目前为止的化简操作累计的结果。第一次调用函数时，第一个参数是一个初始值，他就是传递给reduce()的第二个参数。在接下来调用中，这个值就是上次一化简函数的返回值。当不指定初始值的时候，它使用数组的第一个元素为初始值。
在空数组上不带初始值调用reduce()会导致类型错误异常。如果给初始值，那么会直接返回初始值，而不会调用化简函数
redcueRight()的工作原理和reduce()一样，不同的是它从右到左处理数组
不推荐的方法
- for in
为Object设计 之所以能够遍历数组 是因为数组的构造函数是Object
支持 continue 和 break
var a = [1,2,3,4]
for (let i in arr) {
console.log(i, arr[i]) // 0 1, 1 2, 2 3, 3 4
}
arr.a = 7
for (let i in arr) {
console.log(i, arr[i]) // 0 1, 1 2, 2 3, 3 4, a 7. for in 会把对象属性遍历出来
}
es6
for of
遍历可遍历的对象, 不只是数组,Object. 可以遍历出这两个常规对象之外的对象, 自定义结构-
Array.prototype.from
方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
伪数组:- 具有length属性
- 根据索引储存数据
- 不能调用数组的方法
- 可遍历
比如: function中的 arguments, class 选择器获取的结果. NodeList
如果伪数组想使用数组的方法, 需要把伪数组转化为数组
// ES5转换方法
let arr = [].slice.call(arguments)
let imgs = [].slice.call(document.querySelectorAll('img'))
// Array.prototype.from
let args = Array.from(arguments)
let imgs = Array.from(document.querySelectAll('img'))
Array.from(arrayLike, mapFn, this) // arrayLike 伪数组, 遍历方法, 函数指向的this
// 遍历方法 对每个元素进行处理，将处理后的值放入返回的数组。
生成一个新的数组
// es5
let array = Array(5)
let array = []
// es6
let arr = Array.from({length: 5})
// 初始化值为1
// es5 需要进行循环赋值
// es6
let arr = Array.from({length: 5}, () => 1)
arr // [1, 1, 1, 1, 1]
- Array.prototype.of
用于将一组值，转换为数组。
// 将传入的所有的值转换为数组
Array.of(1, 1, 1, 1, 1) // [1,1,1,1,1 ]
Array.of(3) // [3]
Array.of(3).length // 1
// es5 的 Array
Array() // []
Array(1,2,3) // [1,2,3]
Array(3) // [,,]
- Array.prototype.fill
fill方法使用给定值，填充一个数组。
fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
let arr = Array(5).fill(1)
arr // [1,1,1,1,1]
arr.fill(2, 1, 3)
arr // [1, 2, 2, 1, 1]
- find() 和 findIndex()
找出第一个符合条件的数组成员, 遍历所有成员执行函数, 第一个返回true之后返回该成员,没有找到则返回undefined
[1,2,3,4,5].find(n => n > 2) // 3
[1,2,3,4,5].find((val, index, arr) => n > 2) // 3 三个参数 当前的值、当前的位置和原数组
findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。