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() 的异同
同:三个方法都会对数组进行遍历,参数都是一个回调。
异:

  1. forEach() 无返回
  2. map() 返回一个新数组,若对数组进行操作,该数组是原数组操作后的组成的数组
  3. 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()是对键值对的遍历。

posted @ 2020-12-20 11:30  会飞的一棵树  阅读(120)  评论(0编辑  收藏  举报