JavaScript数组常用方法总结

她左右 等级 586 1 0
标签: 数组Javascript

数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会

下面对数组常用的操作方法做一个归纳

下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响

  • push()

  • unshift()

  • splice()

  • concat()

push()

push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度

let colors = []; // 创建一个数组  
let count = colors.push("red", "green"); // 推入两项  
console.log(count) // 2  

unshift()

unshift()在数组开头添加任意多个值,然后返回新的数组长度

let colors = new Array(); // 创建一个数组  
let count = colors.unshift("red", "green"); // 从数组开头推入两项  
alert(count); // 2  

splice

传入三个参数,分别是开始位置、0(要删除的元素数量)、插入的元素,返回空数组

let colors = ["red", "green", "blue"];  
let removed = colors.splice(1, 0, "yellow", "orange")  
console.log(colors) // red,yellow,orange,green,blue  
console.log(removed) // []  

concat()

首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组

let colors = ["red", "green", "blue"];  
let colors2 = colors.concat("yellow", ["black", "brown"]);  
console.log(colors); // ["red", "green","blue"]  
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]  

下面三种都会影响原数组,最后一项不影响原数组:

  • pop()

  • shift()

  • splice()

  • slice()

pop()

pop() 方法用于删除数组的最后一项,同时减少数组的length 值,返回被删除的项

let colors = ["red", "green"]  
let item = colors.pop(); // 取得最后一项  
console.log(item) // green  
console.log(colors.length) // 1  

shift()

shift()方法用于删除数组的第一项,同时减少数组的length 值,返回被删除的项

let colors = ["red", "green"]  
let item = colors.shift(); // 取得第一项  
console.log(item) // red  
console.log(colors.length) // 1  

splice()

传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组

let colors = ["red", "green", "blue"];  
let removed = colors.splice(0,1); // 删除第一项  
console.log(colors); // green,blue  
console.log(removed); // red,只有一个元素的数组  

slice()

slice() 用于创建一个包含原有数组中一个或多个元素的新数组,不会影响原始数组

let colors = ["red", "green", "blue", "yellow", "purple"];  
let colors2 = colors.slice(1);  
let colors3 = colors.slice(1, 4);  
console.log(colors)   // red,green,blue,yellow,purple  
concole.log(colors2); // green,blue,yellow,purple  
concole.log(colors3); // green,blue,yellow  

即修改原来数组的内容,常用splice

splice()

传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响

let colors = ["red", "green", "blue"];  
let removed = colors.splice(1, 1, "red", "purple"); // 插入两个值,删除一个元素  
console.log(colors); // red,red,purple,blue  
console.log(removed); // green,只有一个元素的数组  

即查找元素,返回元素坐标或者元素值

  • indexOf()

  • includes()

  • find()

indexOf()

返回要查找的元素在数组中的位置,如果没找到则返回-1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];  
numbers.indexOf(4) // 3  

includes()

返回要查找的元素在数组中的位置,找到返回true,否则false

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];  
numbers.includes(4) // true  

find()

返回第一个匹配的元素

const people = [  
    {  
        name: "Matt",  
        age: 27  
    },  
    {  
        name: "Nicholas",  
        age: 29  
    }  
];  
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}  

二、排序方法

数组有两个方法可以用来对元素重新排序:

  • reverse()

  • sort()

reverse()

顾名思义,将数组元素方向排列

let values = [1, 2, 3, 4, 5];  
values.reverse();  
alert(values); // 5,4,3,2,1  

sort()

sort()方法接受一个比较函数,用于判断哪个值应该排在前面

function compare(value1, value2) {  
    if (value1 < value2) {  
        return -1;  
    } else if (value1 > value2) {  
        return 1;  
    } else {  
        return 0;  
    }  
}  
let values = [0, 1, 5, 10, 15];  
values.sort(compare);  
alert(values); // 0,1,5,10,15  

三、转换方法

常见的转换方法有:

join()

join() 方法接收一个参数,即字符串分隔符,返回包含所有项的字符串

let colors = ["red", "green", "blue"];  
alert(colors.join(",")); // red,green,blue  
alert(colors.join("||")); // red||green||blue  

四、迭代方法

常用来迭代数组的方法(都不改变原数组)有如下:

  • some()

  • every()

  • forEach()

  • filter()

  • map()

some()

对数组每一项都运行传入的函数,如果有一项函数返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];  
let someResult = numbers.every((item, index, array) => item > 2);  
console.log(someResult) // true  

every()

对数组每一项都运行传入的函数,如果对每一项函数都返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];  
let everyResult = numbers.every((item, index, array) => item > 2);  
console.log(everyResult) // false  

forEach()

对数组每一项都运行传入的函数,没有返回值

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];  
numbers.forEach((item, index, array) => {  
    // 执行某些操作  
});  

filter()

对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];  
let filterResult = numbers.filter((item, index, array) => item > 2);  
console.log(filterResult); // 3,4,5,4,3  

map()

对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];  
let mapResult = numbers.map((item, index, array) => item * 2);  
console.log(mapResult) // 2,4,6,8,10,8,6,4,2  
收藏
评论区

相关推荐

JS排序算法
引子 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements JavaScript. 当年,想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript(原名LiveScript),如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域(C/C 的大神们不要打
What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
JavaScript基础加ES6语法
JavaScript 一、什么是JavaScript 当下最流行的脚本语言,在世界上的所有浏览器中都有js的身影,是一门脚本语言,可以用于我们与web站点和web应用程序的交互,还可以用于后台服务器的编写,例如node.js 二、语法特点 基于对象和事件驱动的松散型,解释型语言 单线程异步 三、JavaScript作用 页面的交
对 JavaScript 中事件循环的理解​
一、是什么 JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事 为什么要这么设计,跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删除 DOM ,另一个添加 DOM,此时浏览器该如何处理? 为了解决单
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n
一篇文章带你了解JavaScript错误处理
大家好,我是前端进阶者。执行JavaScript代码时,可能会发生意想不到的错误。错误可以是程序员编写的编码错误,由于输入错误引起的错误以及其他不可预见的事情。因此,为了处理错误,JavaScript提供了4个关键字。一、JavaScript try ... catch语句try语句允许定义一个代码块,该代码块在执行时将进行错误测试,catch如果try块中
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写