0
点赞
收藏
分享

微信扫一扫

【JavaScript】常用的数组方法汇总(含ES6数组方法)


常用的字符串方法汇总(含ES6字符串方法)

目录

  • ​​一、 ES5 中的数组方法​​
  • ​​1. shift()​​
  • ​​2. pop()​​
  • ​​3. splice()​​
  • ​​4. slice()​​
  • ​​5. concat()​​
  • ​​6. every()​​
  • ​​7. join()​​
  • ​​8. push()​​
  • ​​9. unshift()​​
  • ​​10. reverse()​​
  • ​​11. sort()​​
  • ​​12. toString()​​
  • ​​13. forEach()​​
  • ​​14. map()​​
  • ​​15. reduce()​​
  • ​​二、ES6 中的数组方法​​
  • ​​1. from()​​
  • ​​2. of()​​
  • ​​3. copyWithin()​​
  • ​​4. find()​​
  • ​​5. findIndex()​​
  • ​​6. fill()​​
  • ​​7. entries()、keys() 、 values()​​
  • ​​8. includes()​​
  • ​​9. flat()​​
  • ​​10. flatMap()​​

在说这些方法之前,先说一些这些方法的分类,他们可以分为两种:类方法和实例方法。这两种方法在使用时是不一样的。

  • 类属性(静态属性):通过类直接访问,不需要声明类的实例来访问
  • 类方法(静态方法):通过类直接访问,不需要声明类的实例来访问
  • 实例属性(动态属性):不能通过类直接访问,需要通过该类声明的实例才能访问
  • 实例方法(动态方法):不能通过类直接访问,需要通过该类声明的实例才能访问

类属性和类方法:

Person = function(){}
Persion.sex = "woman"; //类属性

Person.eat= function(){ //类方法
  alert("eat");
}
var person = new Person();

Person.sex;//静态属性
Person.eat();//静态方法

实例属性和实例方法:

Person = function(){}
Person.prototype.age = 10; //实例属性

Person.prototype.dance = function(){ //实例方法
  alert("dance");
}
var person = new Person();
person.age; //实例属性
person.dance(); //实例方法

简单来说就是,在原型上定义的方法要实例化对象之后才能调用。

一、 ES5 中的数组方法

首先看看ES5中常用的数组方法有哪些:

方法

描述

是否改变原数组

shift()

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


pop()

删除并返回数组的最后一个元素。


push()

向数组的末尾添加一个或更多元素,并返回新的长度。


unshift()

向数组的开头添加一个或更多元素,并返回新的长度。


join()

把数组的所有元素放入一个字符串。

元素通过指定的分隔符进行分隔


toString()

把数组转换为字符串,并返回结果。


slice()

从某个已有的数组返回选定的元素。


splice()

删除元素,并向数组添加新元素。


concat()

连接两个或更多的数组,并返回结果。


sort()

对数组的元素进行排序。


reverse()

颠倒数组中元素的顺序。


every()

用于检测数组所有元素是否都符合指定条件。


forEach()

用于调用数组的每个元素,并将元素传递给回调函数。


map()

方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。


1. shift()

定义: shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

返回值: 该方法返回数组原来的第一个元素的值。如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。

注意: 该方法会改变原数组

2. pop()

定义: pop() 方法用于删除并返回数组的最后一个元素。

返回值: 该方法返回数组原来的最后一个元素的值。如果数组是空的,那么 pop() 方法将不进行任何操作,返回 undefined 值。

注意: 该方法会改变原数组

3. splice()

定义: splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

语法:

arrayObject.splice(index,howmany,item1,.....,itemX)

参数如下:

  • ​index​​ :必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • ​howmany​​ :必需。要删除的项目数量。如果设置为 0,则不会删除项目。
  • ​item1, ..., itemX​​ :可选。向数组添加的新项目。

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

返回值: 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

注意: 该方法会改变原数组

4. slice()

定义: slice() 方法可从已有的数组中返回选定的元素。

语法:​arrayObject.slice(start,end)​

参数如下:

  • ​start​​ :必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
  • ​end​​ :可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素

返回值: 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

注意: 该方法并不会修改数组,而是返回一个子数组。

5. concat()

定义: concat() 方法用于连接两个或多个数组。

语法:

arrayObject.concat(arrayX,arrayX,......,arrayX)

其参数如下:

  • arrayX:必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个

返回值: 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

注意: 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

6. every()

定义: every() 方法用于检测数组所有元素是否都符合指定条件。

语法:

array.every(function(currentValue,index,arr), thisValue)

其参数如下:

  • ​function(currentValue, index,arr)​​​ :必须。函数,数组中的每个元素都会执行这个函数
    函数参数:
  • ​currentValue​​:必须。当前元素的值
  • ​index​​:可选。当前元素的索引值
  • ​arr​​:可选。当前元素属于的数组对象
  • ​thisValue​​:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”

返回值: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。

注意: 该方法不会改变原始数组。并且不会对空数组进行检测。

7. join()

定义: join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法:​arrayObject.join(separator)​

其中参数如下:

  • separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

返回值: 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

8. push()

定义: push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

返回值: 把指定的值添加到数组后的新长度。

注意: push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

9. unshift()

定义: unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

返回值: 把指定的值添加到数组前的新长度。

注意: unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。该方法不创建新的创建,而是直接修改原有的数组。

10. reverse()

定义: reverse() 方法用于颠倒数组中元素的顺序。

返回值: 该方法会返回颠倒顺序后的数组

注意: 该方法会改变原来的数组,而不会创建新的数组。

11. sort()

定义: sort() 方法用于对数组的元素进行排序。

语法:​arrayObject.sort(sortby)​

其中参数如下:

  • sortby 可选。规定排序顺序。必须是函数。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。

返回值: 返回排序后的数组

注意: 数组在原数组上进行排序,不生成副本。

12. toString()

定义: toString()方法可把数组转换为字符串,并返回结果。

返回值: arrayObject 的字符串表示。数组中的元素之间用逗号分隔。返回值与没有参数的 join() 方法返回的字符串相同。

注意: 当数组用于字符串环境时,JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下,需要显式地调用该方法。

13. forEach()

定义: forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

语法:

array.forEach(function(currentValue, index, arr), thisValue)

其参数如下:

  • ​function(currentValue, index,arr)​​​ :必须。函数,数组中的每个元素都会执行这个函数
    函数参数:
  • ​currentValue​​:必须。当前元素的值
  • ​index​​:可选。当前元素的索引值
  • ​arr​​:可选。当前元素属于的数组对象
  • ​thisValue​​:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”

注意: 该方法没有返回值,不会修改原数组

14. map()

定义: map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

返回值: map() 方法按照原始数组元素顺序依次处理元素。

语法:

array.map(function(currentValue, index, arr), thisValue)

其参数如下:

  • ​function(currentValue, index,arr)​​​ :必须。函数,数组中的每个元素都会执行这个函数
    函数参数:
  • ​currentValue​​:必须。当前元素的值
  • ​index​​:可选。当前元素的索引值
  • ​arr​​:可选。当前元素属于的数组对象
  • ​thisValue​​:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”

注意: 该方法没有返回值,不会修改原数组

注意: map() 不会对空数组进行检测,并且不会改变原始数组。

15. reduce()

定义: reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。该方法可以作为一个高阶函数,用于函数的 compose。

使用方法: 【JavaScript】数组reduce()方法的妙用

注意: reduce() 对于空数组是不会执行回调函数的。

二、ES6 中的数组方法

再来看看ES6中的数组方法:

方法

描述

是否改变原数组

from()

将类数组转化为真正的数组

/

of()

用于将一组值,转换为数组


copyWithin()

当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员)


find()

返回第一个符合条件的数组成员


findIndex()

返回第一个符合条件的数组成员的位置


fill()

使用给定值,填充一个数组


entries()

用于遍历数组,遍历键名


keys()

用于遍历数组,遍历键值


values()

用于遍历数组,遍历键值对


includes()

判断数组中是否包含给定的值


flat()

数组扁平化


flatMap()

数组扁平化


1. from()

定义: Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});

// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}

Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种 Unicode 字符,可以避免 JavaScript 将大于\uFFFF的 Unicode 字符,算作两个字符的 bug。

function countSymbols(string) {
return Array.from(string).length;
}

注意: 该方法产生的数组是一个拷贝的值,不会改变原类数组对象。

2. of()

定义: Array.of()方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组

返回值: 返回参数值组成的数组。如果没有参数,就返回一个空数组。

注意: 该方法返回的是新的Array实例

3. copyWithin()

定义: 该方法会在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。

语法:

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

  • target(必需):从该位置开始替换数据。如果为负值,表示倒数。
  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束,复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

注意: 该方法会修改当前数组。

4. find()

定义: 该方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5

语法:

arr.find(callback[, thisArg])

其参数如下:

  • callback:在数组每一项上执行的函数,接收 3 个参数:
  • element:当前遍历到的元素。
  • index:可选,当前遍历到的索引。
  • array:可选,数组本身。
  • thisArg:可选,执行回调时用作this 的对象。

注意: find方法不会改变数组。

5. findIndex()

定义: 数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2

其语法和find()方法一样。

注意: findIndex()方法不会改变数组。

6. fill()

定义: fill方法使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

语法:

arr.fill(value[, start[, end]])

其参数如下:

  • value:用来填充数组元素的值。
  • start :可选,起始索引,默认值为0。
  • end :可选,终止索引,默认值为 this.length。

返回值: 返回修改过的数组

注意: 该方法会修改原数组。

7. entries()、keys() 、 values()

这三个方法都用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历values()是对键值的遍历entries()是对键值对的遍历

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

8. includes()

定义: includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true

语法:

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

其参数如下

  • searchElement 必须。需要查找的元素值。
  • fromIndex 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

返回值: 布尔值。如果找到指定值返回 true,否则返回 false。

9. flat()

定义: flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法:

var newArray = arr.flat([depth])

其参数如下:

  • depth :可选,指定要提取嵌套数组的结构深度,默认值为 1。如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

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

返回值: 一个包含将数组与子数组中所有元素的新数组。

注意: 该方法不会改变原数组

10. flatMap()

定义: flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。flatMap()只能展开一层数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员、当前数组成员的位置(从零开始)、原数组。

arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg])

flatMap()方法还可以有第二个参数,用来绑定遍历函数里面的this。

注意: 该方法不会改变原数组


举报

相关推荐

0 条评论