繁杂的数组 API

JavaScript 数组的API在开发过程中尤为重要。

数组的方法分为,改变自身的数组方法,不改变自身的数组方法,以及遍历数组的方法。

创建数组的方法

数组的构造器 Array

// 对象字面量的写法
const arr1 = []

// Array 构造器方法
const arr2 = Array(5)  // [empty*5] 创建一个数组长度为5的数组

const arr3 = Array(1, 2, 3) // [1, 2, 3]

ES6 新增的构造方法:Array.of 和 Array.from

Array.of

作用:是将参数依次转化成数组的,然后返回这个新数组,不管这个参数是数字还是其他。

它与 Array 构造器功能一致,唯一的区别就是在单个参数的处理上。

Array.of(8); // [8]
Array(8); // [empty × 8]

Array.of(8, 5); // [8, 5]
Array(8, 5); // [8, 5]

Array.of('8'); // ["8"]
Array('8'); // ["8"]

Array.from

作用:是将一个类数组转化成一个数组,只要一个对象有迭代器,就可以转换成数组(返回新数组,不改变原数组)

可以传三个参数,作用分别为:

  1. 类数组对象,必传
  2. 加工函数,新的数组可以经过包装之后,再返回,必须有返回值
  3. this 作用域,表示加工函数的 this 指向
const obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

const arr = Array.from(obj, function (value, index){
  console.log(value, index, this, arguments.length)
  return value.repeat(2)
}, obj)

console.log(arr)

输出结果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMYpTRqL-1615198628238)(C:\Users\63260\Desktop\js\数组API\ArrayFrom.png)]

Array.from 还可以处理,StringSetMap 数据结构

// String
Array.from('abc'); // ["a", "b", "c"]

// Set
Array.from(new Set(['abc', 'def']));  // ["abc", "def"]

// Map
Array.from(new Map([[1, 'ab'], [2, 'de']]));  // [[1, 'ab'], [2, 'de']]

数组的判断方法

const arr = []

console.log(Array.isArray(arr)) // true

console.log(arr instanceof Array)  // true

console.log(arr.constructor === Array)  // true

console.log(Array.prototype.isPrototypeOf(arr))  //true
 
console.log(Object.getPrototypeOf(arr) === Array.prototype)  // true

console.log(Object.prototype.toString.apply(arr) === '[object Array]')  // true

实现一个 Array.isArray 方法

Array.isArray = function(arg) {
    return Object.prototype.toString.apply(arg) === '[object Array]'
}

数组改变自身的方法

改变数组自身的方法,一共有九种,poppushreverseshiftsortspliceunshift,以及ES6新增的 copyWithinfill

pop

删除数组最后一个元素,返回被删除的元素,数组为空返回 undefined

const arr = ['red', 'blue', 'green']

const res1 = arr.pop()
console.log(res1)  // 'green'
console.log(arr)   // ['red', 'blue']

push

在数组后面追加元素,返回的是数组新的 length

const arr = ['red', 'blue', 'green']

const res = arr.push('black', 'white')
console.log(res)  // 5
console.log(arr)  // ['red', 'blue', 'green', 'black', white]

reverse

颠倒元素的位置,改变了原数组,并且返回该数组的引用

const arr = ['red', 'blue', 'green']

const res = arr.reverse()
console.log(res)  // ["green", "blue", "red"]
console.log(arr)  // ["green", "blue", "red"]

shift

删除数组的第一个元素,并返回删除的元素

const arr = ['red', 'blue', 'green']

const res = arr.shift()
console.log(res)  // 'red'
console.log(arr)  // ['blue', 'green']

unshift

将一个或多个元素添加到数组开头,并且返回数组的新长度(length)

const arr = ['red', 'blue', 'green']

const res = arr.unshift('white', 'black')
console.log(res)  // 5
console.log(arr)  // ["white", "black", "red", "blue", "green"]

sort

将数组进行排序,并返回新数组

const arr = ['red', 'blue', 'green']

const res = arr.sort()
console.log(res)  // ["blue", "green", "red"]
console.log(arr)  // ["blue", "green", "red"]

如果是数字

从小到大排序

const arr2 = [3, 5, 1]
const res = arr2.sort((a, b) => a-b)
console.log(res)  // [1, 3, 5]

从大到小排序

const arr2 = [3, 5, 1]
const res = arr2.sort((a, b) => b-a)
console.log(res)  // [5, 3, 1]

splice

传三个参数:

  • 第一个参数为开始索引,必传,如果只穿一个参数则表示,将这个元素后面的所有元素删除掉,如何使负数,从-1开始,删除最后一位,返回出来
  • 第二个参数为删除元素(传几删几个),可选参数
  • 第三个参数为添加的内容(可以传多个元素),可选参数
  • 并且返回被删除内容的数组形式。
const arr = ['red', 'blue', 'green']

const res = arr.splice(1, 1)
console.log(res)  // ['blue']
console.log(arr)  // ['red', 'green']
const res = arr.splice(1, 1, 'white', 'black')
console.log(res)  // ['blue']
console.log(arr)  // ["red", "white", "black", "green"]
const arr = ['red', 'blue', 'green']

const res = arr.splice(-1)
console.log(res)  // ['green']
console.log(arr)  // ['red', 'blue']

copyWithin

浅拷贝数组的一部分复制到同一个数组的另一个位置(覆盖数组的原来的位置),并返回这个新数组,不会改变数组的长度

const arr = ['red', 'blue', 'green']

const res = arr.copyWithin(0, 1, 2)
console.log(res)  // ["blue", "blue", "green"]
console.log(arr)  // ["blue", "blue", "green"]

传三个参数:

  • 第一个参数是要覆盖添加的位置索引
  • 第二个参数是复制开始的位置
  • 第三个参数是复制结束的位置,但不包含结束位置的元素

fill

用一个固定元素,填充数组,可选起始位置和终止位置,并且返回一个新的数组

const arr = ['red', 'blue', 'green']

const res = arr.fill(6, 1, 2)
console.log(res)  // ["red", 6, "green"]
console.log(arr)  // ["red", 6, "green"]

const res1 = arr.fill(6)
console.log(res)  // [6, 6, 6]

传三个参数:

  • 第一个参数,表示用来填充数组的值
  • 第二个参数,表示索引开始填充的位置,可选传入的参数
  • 第三个参数,表示索引结束的位置,不包含结束位置索引的位置,可选传入的参数

出一道题目

给你两个有序整数数组 nums1 和 nums2,请你将 nums2 合并到 nums1 中,使 nums1 成为一个有序数组。
输入:
nums1 = [1,2,3,0,0,0]; m = 3
nums2 = [2,5,6]; n = 3
输出: [1,2,2,3,5,6]

let nums1 = [1,2,3,0,0,0], nums2 = [2,5,6], m =3, 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
}

nums1 = merge(nums1, m, nums2, n)
console.log(nums1)   // [1, 2, 2, 3, 5, 6]

不改变数组自身的方法

不改变数组自身的方法,分别有:concat join slice toString toLocaleString indexOf lastIndexOf toSource(未形成标准) includes

concat

用于连接数组或值,并且返回一个新的数组,不改变原数组

const arr = ['red', 'blue', 'green']

const res = arr.concat('white', ['black', 'yellow'])
console.log(res)  // ["red", "blue", "green", "white", "black", "yellow"]
console.log(arr)  // ['red', 'blue', 'green']

join

可以将数组(或者类数组),根据传入的指定字符,连接成字符串,如果不传,则用逗号分开,并且返回连接的字符串,不改变原数组

const arr = ['red', 'blue', 'green']

const res = arr.join()
console.log(res)   // red,blue,green
console.log(arr)   // ['red', 'blue', 'green']

const res1 = arr.join('')
console.log(res1)  // redbluegreen

const res2 = arr.join('-')
console.log(res2)  // red-blue-green

slice

将一个数组根据这个数组的索引开始和结束位置,剪切成一个新的数组,并且返回这个新数组,不改变原数组

const arr = ["red", "blue", "green", "yellow"]

const res = arr.slice(1, 3)
console.log(res)  // ["blue", "green"]
console.log(arr)  // ["red", "blue", "green", "yellow"]

const res1 = arr.slice(1)
console.log(res1)  // ["blue", "green", "yellow"]

传参方式:

  • 不传参,表示默认从零开始,到最后一个索引(包含最后一个元素)
  • 传一个参数表示索引开始的位置,如果是负数,从-1开始,则取出最后一位元素,以数组的形式返回
  • 传两个参数表示索引结束的位置,但是不包含结束位置索引的元素,如果开始结束都为负数,如slice(-2, -1),则表示取出数组的倒数第二位元素

toString

将数组元素转换成以逗号连接的字符串,并且返回这个字符串,不改变原数组,和 join() 方法相似

const arr = ["red", "blue", "green", "yellow"]

const res = arr.toString()
console.log(res)  // red,blue,green,yellow
console.log(arr)  // ["red", "blue", "green", "yellow"]

toLocaleString

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串以逗号连接在一起。

const array= [{name:'zz'}, 123, "abc", new Date()];

const str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23

indexOf

是否能找到该元素的索引值,找不到返回 -1,找到则返回对应的索引值。

const arr = ["red", "blue", "green", "yellow"]

const res = arr.indexOf('blue')
console.log(res)  // 1

const res1 = arr.indexOf('white')
console.log(res1)  // -1

const res2 = arr.indexOf('green', 2)
console.log(res2)  // 2

传参:

  • 第一个参数为,要搜索的值
  • 第二个参数,在那个索引开始搜索,如果是负数,从-1开始往后搜索

lastIndexOf

indexOf 相反,表示从数组最后一个元素开始查找,返回数组索引

includes

判断数组中是否包含某个元素,返回 Boolean值,有则返回 true ,没有返回 false

查找方式和传参与 indexOf 相似

const array = [-0, 1, 2];

console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true

const array = [NaN];
console.log(array.includes(NaN)); // true

数组的遍历

不会改变自身遍历的方法分别有,forEach every some filter map reduce reduceRight entries find findIndex keys values

forEach

对数组的每一元素,执行一次给定的函数,不改变原数组,可以将值赋值给新变量,该方法也没有返回值。

var array = [1, 3, 5];
var obj = {name:'aa'};

var sReturn = array.forEach(function(value, index, array){
  array[index] = value;
  console.log(this.name); // 'aa' 被打印了三次, this指向obj
},obj);

console.log(array);   // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为undefined
### every

用来检测数组里所有元素,是否都能符合条件,或者通过某个指定函数的测试。返回一个 Boolean 值。

const arr = [3, 5, 7, 13, 9]

const res = arr.every((item, index, array) => {
  return item < 20
})
console.log(res)  // true

const res1 = arr.every((item, index, array) => {
  return item < 10
})
console.log(res1)  // false

some

用来检测数组中的元素,是不是至少有1个元素,能符合条件,或者通过某个指定函数的测试。返回的是一个 Boolean 值。(可以用来检测数组中是否存在某个值)

const arr = [3, 5, 7, 13, 9]

const res = arr.some((item, index, array) => {
  return item === 5
})
console.log(res)  // true

filter

将符合条件的元素,放入一个新数组,并且返回这个新数组。

const arr = [3, 5, 7, 13, 9]

const res = arr.filter((item, index, array) => {
  return item > 10
})
console.log(res)

检索字符串

const color = ['red', 'blue', 'yellow', 'black', 'white', 'green']
function selColor (ele) {
  return color.filter(item => {
    return item.toLowerCase().indexOf(ele.toLowerCase()) !== -1
  })
}

console.log(selColor('bl'))  // ["blue", "black"]
console.log(selColor('e'))   // ["red", "blue", "yellow", "white", "green"]

map

对数组中的每一个元素进行重新包装之后,再返回一个新数组。

const arr = [3, 5, 7, 13, 9]

const res = arr.map((item, index, array) => {
  return item * 2
})
console.log(res)  // [6, 10, 14, 26, 18]

reduce

数组中的每个元素执行相加(升序执行),最后返回元素相加的和。

const res = arr.reduce((acc, cur, idx, src) => {
  acc += cur
  return acc
}, 0)
console.log(res)  // 37

参数代表:

  1. Accumulator (acc) (累计器)
  2. Current Value (cur) (当前值)
  3. Current Index (idx) (当前索引)
  4. Source Array (src) (源数组)

将二维数组转成一维数组

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
);
console.log(flattened)  // [0, 1, 2, 3, 4, 5]

计算数组中每个元素出现的个数

const color = ['red', 'black', 'black', 'white', 'green', 'red']
const newColor = color.reduce((acc, cur) => {
  if(cur in acc) {
    acc[cur]++
  }else {
    acc[cur] = 1
  }
  return acc
}, {})
console.log(newColor)  // {red: 2, black: 2, white: 1, green: 1}

数组去重

const arrs = [3, 5, 6, 3, 6, 8, 9]
const res = arrs.reduce((pre, cur) => {
  if(pre.indexOf(cur) === -1) {
    pre.push(cur)
  }
  return pre
}, [])
console.log(res)

reduceRight

reduce 相似,但是从后往前累加。

find

返回数组中符合条件的第一个元素的值,没有返回 undefined

const arr = [3, 5, 7, 13, 9]

const res = arr.find((item, index, array) => {
  return item > 10
})
console.log(res)   // 13

findIndex

find 相似,不过返回的是数组的索引(index),没有返回 -1

return acc
}, {})
console.log(newColor) // {red: 2, black: 2, white: 1, green: 1}


数组去重

```js
const arrs = [3, 5, 6, 3, 6, 8, 9]
const res = arrs.reduce((pre, cur) => {
  if(pre.indexOf(cur) === -1) {
    pre.push(cur)
  }
  return pre
}, [])
console.log(res)

reduceRight

reduce 相似,但是从后往前累加。

find

返回数组中符合条件的第一个元素的值,没有返回 undefined

const arr = [3, 5, 7, 13, 9]

const res = arr.find((item, index, array) => {
  return item > 10
})
console.log(res)   // 13

findIndex

find 相似,不过返回的是数组的索引(index),没有返回 -1

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值