js数组的方法和扩展运算符

简介: js数组的方法和扩展运算符

示例使用的数组

var arr = [1, 2, 3];

ES5 数组方法

不改变原数改变原数组

函数

说明

示例

Array.isArray()

判断一个值是否为数组

Array.isArray(arr); // true

valueOf()

返回数组本身

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

toString()

返回数组的字符串形

arr.toString(); // "1,2,3"

join()

返回数组成员拼接后的字符串,默认逗号分隔

arr.join("-"); // "1-2-3"

concat()

返回一个多个数组合并后的新数组

arr.concat([4, 5], 6); // [1, 2, 3, 4, 5, 6]

slice()

返回切片后的新数组

arr.slice(start, end);

forEach()

遍历数组的所有成员

arr.forEach((element, index, arr)=> {return element;});

map()

映射新数组

arr.map((element, index, arr)=> {return element;});

filter()

返回过滤后的新数组

arr.filter((element)=> {return true;});

some()

一个为true就返回true

arr.some((element, index, arr)=> {return true;});

every()

所有为true才返回true

arr.every((element, index, arr)=> {return true;});

reduce()

从左到右处理

arr.reduce((total, element, index, arr)=> {return total + element;});

reduceRight()

从右到左处理

arr.reduceRight((total, element, index, arr)=> {return total + element;});

indexOf()

开头查找元素,没有返回-1

arr.indexOf(1); // 0

lastIndexOf()

尾部查找元素,没有返回-1

arr.lastIndexOf(1); //0


改变原数组

函数

说明

示例

push()

数组尾部添加元素,并返回数组长度

arr.push(1, 2); // 5

pop()

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

arr.pop(); // 3

unshift()

数组头部添加元素,并返回数组长度

arr.unshift('a'); //4

shift()

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

arr.shift(); // 1

reverse()

返回颠倒顺序后的数组

arr.reverse(); // [3, 2, 1]

splice()

删除数组成员,并添加的数组成员,返回被删除的元素

arr.splice(start, deleteCount, ...itmes)

sort()

数组排序

arr.sort(); //[1, 2, 3]


ES6 数组方法

函数

说明

示例

Array.from()

类数组转换成数组

Array.from('123'); // ["1", "2", 3"]

Array.of()

将一组值,转换为数组

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

copyWithin()

返回替换后的数组

arr.copyWithin(target, start, end)

find()

查找元素,没有返回undefined

arr.find((item)=>item===1)

findIndex()

查找元素位置,没有返回-1

arr.findIndex((item)=>item===1)

fill()

填充一个数组

[1, 2, 3].fill(0); // [0, 0, 0]

entries()

返回键值对

arr.entries()

keys()

返回键

arr.keys()

values() 返回值

arr.values()

 

includes()

是否包含给定的值

arr.includes(1); // true


扩展运算符

(1)函数调用

// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);

(2)复制数组

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

(3)合并数组

// ES5
[1, 2].concat([4, 5])
// ES6
[1, 2, ...[4, 5]]

(4)解构赋值

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

参考

JS Array对象的方法总结(ES5 与 ES6) 二

相关文章
|
11天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
6天前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
17 2
JavaScript基础知识-数组的遍历
|
6天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
13 2
JavaScript基础知识-方法
|
6天前
|
JavaScript 前端开发
JavaScript基础知识-数组的练习
关于JavaScript基础知识中数组操作的练习,主要介绍了如何从一个包含Person对象的数组中过滤出成年人(年龄达到18岁及以上)并将他们放入一个新的数组中。
15 1
JavaScript基础知识-数组的练习
|
6天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
9 1
JavaScript基础知识-数组的常用方法
|
6天前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
10 1
JavaScript基础知识-数组基于索引访问
|
6天前
|
JavaScript 前端开发
JavaScript基础知识-数组的定义方式
本文介绍了JavaScript中数组的多种定义方式。
8 1
JavaScript基础知识-数组的定义方式
|
11天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
11天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
4天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法