JavaScript数组Array方法介绍，使用示例及ES6拓展

数组定义

有次序和编号的一组值

类似数组对象

函数agruments对象,字符串，DOM元素集

实例属性

Array.prototype.length

length可以赋值，用以改变数组长度

arr.length = 0 //清空数组

实例方法

所有使用的示例中let arr = [1,2,3]

push() pop() 分别在数组尾部添加，删除内容 ,改变原数组

// return array length

let arrLength = arr.push(6,9)

// return remove content

let remove = arr.pop()

shift() unShift() 分别在数组头部删除,添加内容，改变原数组

let remove = arr.shift() // 删除

let arrLength = arr.unshift('a','c',-1) // 添加

slice() 用于截取数组，返回截取到的新数组,也常用于将类似数组对象转换为数组

// none arrgument 返回新数组引用，常用类数组转换

let newArr0 = arr.slcie()

let argArr = Array.prototype.slice.call(arguments)

// one arrgument 从参数位置截取到最后

let newArr1 = arr.slice(1)

// two arrguments 从1参数位置，截取2参数的个数

let newArr2 = arr.slice(1,2)

splice() 截取并添加新元素，改变元素组，返回截取内容

let arr1 = arr.splice(1,2,'a','f')

reverse() 反转数组，改变原数组

arr.reverse()

sort() 默认按字典序排序，也可传函数参自定义排序，改变原数组

arr.sort()

concat() 合并多个数组，返回一新数组

let newArr = arr.concat(['a','g','c'])

join() 数组->字符串

let arrStr = arr.join();

let arrStr = arr.join('-')

indexOf() lastIndexOf() 获取索引

arr.indexOf(2)

valueOf() toString()

arr.valueOf() // [1,2,3]

arr.toSring() // 1,2,3,4

forEach() 无返回，跳过空位[''],不会跳过undefined和null

arr.forEach(function(item){

  item += 1;

})

map() 返回新的一数组对象，跳过空位[''],不会跳过undefined和null

let newArr = arr.map( item => item +=1 )

filter() 返回符合条件的新数组对象

let newArr = arr.filter( item => item > 2 )

forEach() , map() , filter() 的异同

同：三个方法都会对数组进行遍历，参数都是一个回调。

异：

forEach() 无返回
map() 返回一个新数组，若对数组进行操作，该数组是原数组操作后的值组成的数组
filter() 返回一新数组，返回的是符合条件的数组

var numbers = [1, 2, 3];

numbers.map(function (n) {

  return n > 1;

}); // [false,true,true]

numbers.filter(function (n) {

  return n > 1;

}); // [2,3]

numbers.filter(function (n) {

  return n + 1;

}); // [1,2,3]

some() 返回布尔值，只要数组有一项符合条件就为true

let isOk = arr.some( item => item > 2)

every() 返回布尔值，全部符合才会true

let isOk = arr.every( item => item > 2)

ES6拓展内容

拓展运算符

拓展运算符，更像是函数res参数的一种逆运算，基本使用是...[数组],不过也可以是表达式，使用后数组就会拓展开来

const a = [1,2,3]

console.log(...[1,23,2]) // 1,23,2

console.log(...a) // 1,2,3

// 可直接用在函数传参上

function foo(a,b,c){

    return ''+a + b +c

}

console.log(foo(...[1,2,3])) // 123

foo(...[1,2,3]) 相当于 foo(1,2,3)

// 与解构赋值配合

const [first,...others] = [1,2,3,4]

console.log(first) // 1

console.log(others) // 2,3,4

[a,...rest] = others; // a为2，rest为[3,4]

// 字符串转数组

const arrStr = [..."string"] //arrStr为["s","t","r","i","n","g"]

静态方法

Array.from() 将类似数组对象转为数组

// ES6

Array.from(doucment.getElementsByTagName('p'))

// ES5

[].slice.call(document.getElementsByTagName('p'))

Array.of() es6提供的较为统一的将一组值转换为数组的方法

// Array.of()

// 无参数

Array.of() // []

// 一参数

Array.of(5) // [5]

// 多参数

Array.of(1,2,3) // [1,2,3]

// Array()

// 无参数

Array() // []

// 一参数

Array(3) // [,,]

// 多参数

Array(3,2,3) // [3,2,1]

实例方法

find() 返回第一个符合条件的值,参数为回调函数

[1,2,3,4].find((value,index,,arr) => { return value > 2}) // 3

findIndex() 返回第一个符合条件的索引,参数为回调函数

[1,2,3,4].findIndex((value,index,arr) => { return value > 2}) // 2

includes() 返回布尔值表示是否包含指定值，类似String中的

[12,22,3].includes(1) // false

// 可指定第二参数，表示查询的起始位置,0为开始

[12,22,3].includes(12,1) // false

fill() 填充数组，常用于初始化

new Array(6).fill('x')

const arr = ['6',6,1].fill(1)

console.log(arr) // [1,1,1]

copyWithin() 将数组内成员覆盖到其它位置，改变原数组

//copyWithin(target,start,end) 要覆盖的目标位置，起始位置，结束位

let arr = [0,9,8,6];

arr.copyWithin(1,0,2);

console.log(arr) // [0,0,9,6]

flat() 拉平数组，可以把多维数组降维

[1,[2,3],4].flat() // [1,2,3,4]

[1,[2,3,[3.1,3.2]],4].flat() // [1,2,3,[3.1,3.2],4]

// 可有参数指定拉平的次数（降的维次）

[1,[2,3,[3.1,3.2]],4].flat(2) // [1,2,3,3.1,3.2,4]

flatMap() 这个相当于将map()和flat()的结合

// 将数组进行map，如果map的结果有还有数组就flat

[[2,3],[7,6]].flatMap(([a,b]) => { return a + b }) //[5,13]

[[2,3],[7,6]].flatMap(([a,b]) => { return [a + b,'a'] }) //[5,"a",13,"a"]

[[2,3],[7,6]].flatMap(([a,b]) => { return [a + b,'a',['a-1','a-2']] }) // [5,"a",["a-1","a-2"],13,"a",["a-1","a-2"]]

keys() values() entries() keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。