JavaScript数组 十九种常见用法

最新推荐文章于 2022-07-13 17:26:38 发布
最新推荐文章于 2022-07-13 17:26:38 发布
阅读量160 收藏
点赞数
分类专栏： Array js 文章标签： js javascript
誓不光头
本文链接：https://blog.csdn.net/weixin_42408771/article/details/115357323
版权
js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
Array
1 篇文章 0 订阅
订阅专栏

数组常见方法

前言：

自己临时总结，若有遗漏，望留言补充！在coding bug的路上，我与你同在！

1 Arrray.push()

在原数组尾部添加新元素或者新数列；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let pushEl = 3;
            arr.push(pushEl)
            console.log(`newArr:`,arr); // --newArr: (11) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0, 3]
        }

2 Array.pop()

移除数组最后一项，减少数组的length，返回被移除的值

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            arr.pop()
            console.log(`newArr:`,arr); // --newArr: (11) [5, 4, 2, 6, 2, 6, 8, 2, 9]
            console.log(`使用pop方法：`,arr.pop()) // --使用pop方法： 9   因为输出时又使用里一次pop()
        }

3 Array.join()

数组转换成字符串的连接符，默认是逗号 ‘，’；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            arr.join('/')
            console.log(`newArr:`,arr); // --newArr: (11) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0]
            console.log(`使用join：`,arr.join('/')) // --使用join： 5/4/2/6/2/6/8/2/9/0
        }

4 Array.unshift()

unshift:将参数添加到原数组开头，并返回数组的长度 。

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let arr2 = [1];
            arr.unshift();
            arr2.unshift('new');
            console.log(`newArr:`,arr.unshift()); // --newArr: 10   即返回数组长度
            console.log(`使用unshift：`,arr2) // --使用unshift： ["new", 1]   即添加一个元素
        }

5 Array.shift()

移除数组首项，返回删除的元素；若数组时空值，则返回 undefined；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let arr2 = [];
            arr.shift();
            arr2.shift();
            console.log(`newArr:`,arr); // --newArr: (9) [4, 2, 6, 2, 6, 8, 2, 9, 0]
            console.log(`使用shift：`,arr2.shift()) // --使用shift： undefined
        }

6 Array.sort()

数组元素从小到大排列；返回已排列好的数组；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            arr.sort();
            console.log(`newArr:`,arr); // --newArr: (10) [0, 2, 2, 2, 4, 5, 6, 6, 8, 9]
            console.log(`使用sort：`,arr.sort()) // --使用sort： (10) [0, 2, 2, 2, 4, 5, 6, 6, 8, 9]
        }

7 Array.reverse()

数组元素序列反转，返回反转序列数组；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            arr.reverse();
            console.log(`newArr:`,arr); // --newArr: (10) [0, 9, 2, 8, 6, 2, 6, 2, 4, 5]
        }

8 Array.concat()

两个或者多个数组合并成一个新的数组，返回新数组；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let  arr2 = [3,33,333]
            arr.concat(arr2);
            console.log(`newArr:`,arr); // --newArr: (10) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0]  原数组并未改变
            console.log(`使用concat：`,arr.concat(arr2)) // --使用concat： (13) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0, 3, 33, 333]
        }

9 Array.slice()

返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice(startIndex，endIndex)方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。";

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            arr.slice(2, 6);
            console.log(`newArr:`,arr); // --newArr: (10) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0]  原数组并未改变
            console.log(`使用slice：`,arr.slice(2, 6)) // --使用slice： (4) [2, 6, 2, 6]
        }

10 Array.splice()

数组截取、插入和替换。删除：指定 2 个参数：要删除的第一项的位置和要删除的项数。插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。"

删除：Array.splice(deleteStart, deleteItemSum)

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let spliceArr = arr.splice(2, 6);
            console.log(`newArr:`,arr); // --newArr: (4) [5, 4, 9, 0]  原数组已改变，移除里 6 项 [2, 6, 2, 6, 8, 2]
            console.log(`使用splice：`,spliceArr) // --使用splice： (6) [2, 6, 2, 6, 8, 2] 返回已删除的元素组成新数组
        }

插入：Array.splice(startIndex, willDeleteSum, willInsertItems )

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let insertArr = [3,33,333]
            let spliceArr = arr.splice(2, 0, insertArr);
            console.log(`newArr:`,arr); // --newArr: (11) [5, 4, Array(3), 2, 6, 2, 6, 8, 2, 9, 0] 举例中我插入一个数组insertArr
        }

替换与插入相似，插入中第二个参数是删除的项数，相当于插入之前先删除；这里就不举例了；

11 Array.indexOf()

接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let changeArr = arr.indexOf(2, 3);
            let orArr = arr.indexOf(100, 0);
            console.log(`使用indexOf：`,changeArr,orArr) // --使用indexOf： 4 -1  存在返回下标index  否则返回-1
        }

12 Array.lastIndexOf()

接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。 ";参考Array.indexOf()

13 Array.forEach()

对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值,每次运行完返回undefined。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；对应的数组索引，数组本身。";
返回undefined：

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let changeArr = 
            arr.forEach((item) => {
                return item;
            });
            console.log(`newArr:`,arr); // --newArr: (10) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0]
            console.log(`使用forEach：`,changeArr) // --使用forEach： undefined
        }

基本用法：

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let changeArr = [];
            arr.forEach((item) => {
                return changeArr.push(item*item);
            });
            console.log(`newArr:`,arr); // --newArr: (10) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0]
            console.log(`使用forEach：`,changeArr) // --使用forEach： (10) [25, 16, 4, 36, 4, 36, 64, 4, 81, 0]
        }

14 Array.filter()

“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。注意写法，写法不同输出结果不同，以下我举例三个以及一个错误写法…有｛｝必须有return；没｛｝则没return；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let changeArr = 
            arr.filter((item) => {
                return item > 2;
            });
            // 类型 一
            let type1 = arr.filter( item => item > 5);
            // 类型 二
            let type2 = arr.filter( item => { item > 5});
            // 类型 三 
            let type3 = arr.filter( item => { return item > 5});
            // 类型 四 
            // let type4 = arr.filter( item => return item > 5); //---->错误写法
            console.log(`newArr:`,arr); // --newArr: (10) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0]
            console.log(`使用filter：`,changeArr) // --使用filter： (6) [5, 4, 6, 6, 8, 9]
            console.log(`类型 一：`,type1); // --类型 一： (4) [6, 6, 8, 9]
            console.log(`类型 二：`,type2);// --类型 二： []
            console.log(`类型 三：`,type3);// --类型 三： (4) [6, 6, 8, 9]
        }

15 Array.map()

返回一个新的数组，数组元素则是经过函数调用后的元素；

testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let arrObject = [{
                a:1,
                b:2,
                c:3,
                d:4,
                e:5
            }];
            let changeArr =  arrObject.map(item => {
                item.a = 6;
                item.b = 7;
                return {...item}
            })
            console.log(`原数组:`,arrObject); // --原数组: [{a: 6, b: 7, c: 3, d: 4, e: 5}]
            console.log(`使用map：`,changeArr) // --使用map：[{a: 6, b: 7, c: 3, d: 4, e: 5}]
        }

16 Array.some()

判断数组中存在一项则返回true；否则为false

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let arrObject = [{
                a:1,
                b:2,
                c:3,
                d:4,
                e:5
            }];
            let changeArr =  arrObject.some(item => item.a)
            console.log(`原数组:`,arrObject); // --原数组:不变
            console.log(`使用some：`,changeArr) // --使用some： true
        }

17 Array.every()

判断数组中每一项都满足则为true，否则为false；

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let arrObject = [{
                a:1,
                b:2,
                c:3,
                d:4,
                e:5
            }];
            let changeArr =  arrObject.every(item => item.a == 10)
            console.log(`原数组:`,arrObject); // --原数组:不变
            console.log(`使用every：`,changeArr) // --使用every： false
        }

18 Array.includes()

判断数组是否包含某一元素，与indexOf相似，区别在于includes()可以判断NaN；

testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0,NaN];
            let arrObject = [{
                a:1,
                b:2,
                c:3,
                d:4,
                e:5
            }];
            let changeArr =  arr.includes(NaN)
            console.log(`原数组:`,arrObject); // --原数组:不变
            console.log(`使用includes：`,changeArr) // --使用includes： true
        }

19 Array.reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 方法接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce() 的数组。便于记忆，
即reduce(previous, current，currentIndex，Array)；以下举例常规用法：
·求和：

		testArray(){
            let arr = [5,4,2,6,2,6,8,2,9,0];
            let arrObject = [{
                a:1,
                b:2,
                c:3,
                d:4,
                e:5
            }];
            // 数组求和 
            let total = arr.reduce( (previous, current) => {
                return previous + current
            })
            console.log(`原数组:`,arr); // --原数组:不变
            console.log(`数组求和total:`,total) // --数组求和total: 44
        }

·二维数组改一维数组

		testArray(){
            let arr = [[5,4],[2,6],[2,6],[8,2],[9,0]];
            // 二维数组改一维数组
            let concat = arr.reduce( (previous, current) => {
                return previous.concat(current)
            })
            console.log(`原数组:`,arr); // --原数组: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
            console.log(`二维数组改一维数组:`,concat) // --二维数组改一维数组: (10) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0]
        }

·计算数组中元素出现的次数：

		testArray(){
            let arr = [5, 4, 2, 6, 2, 6, 8, 2, 9, 0];
            let names = ['Tonny','Alice','Bruce','Hero','Tonny','Tonny','Alice','Hero'];
            // 计算数组中每个元素出现的次数
            let concat = names.reduce( (previous, current) => {
                current in previous ? previous[current]++ : previous[current] = 1;
                return previous;
            },{});
            let numberCount = (arr, value) => arr.reduce( (previous, current) => {
                return value == current ? previous + 1 : previous + 0;
            },0);
            let number = numberCount(arr, 2);
            console.log(`原数组:`,arr,names); // --原数组: (10) [5, 4, 2, 6, 2, 6, 8, 2, 9, 0] (8) ["Tonny", "Alice", "Bruce", "Hero", "Tonny", "Tonny", "Alice", "Hero"]
            console.log(`计算数组中每个元素出现的次数:`,concat) // --计算数组中每个元素出现的次数: {Tonny: 3, Alice: 2, Bruce: 1, Hero: 2}
            console.log(`计算数组Arr中2的出现次数：`,number) // --计算数组Arr中2的出现次数： 3
        }

·数组去重：

		testArray(){
            let arr = [5, 4, 2, 6, 2, 6, 8, 2, 9, 0];
            // 数组去重 方法一
            let number = arr.sort().reduce( (previous, current) => {
                previous.length === 0 || previous[previous.length - 1] !== current ? previous.push(current) : '' ;
                return previous;
            },[])
            // 数组去重  方法二
            let setNum = Array.from( new Set(arr));  // es6 拓展运算符
            console.log(`原数组:`,arr); // --原数组: (10) [0, 2, 2, 2, 4, 5, 6, 6, 8, 9]
            console.log(`去重后的数组 方法一`,number) // --去重后的数组 方法一 (7) [0, 2, 4, 5, 6, 8, 9]
            console.log(`去重后的数组 方法二`,setNum) // --去重后的数组 方法一 (7) [0, 2, 4, 5, 6, 8, 9]
        }

常见用法！

夕尧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript数组方法reduce基本用法和数组去重
weixin_41258179的博客
03-13 446
reduce 定义和用法 array.reduce(function(total, currentValue, currentIndex, arr), initialValue) reduce接收一个函数作为累加器，必须接收两个参数，把结果和数组的下一个元素做累积计算
JavaScript数组各种常见用法实例分析
10-23
在实际应用中，JavaScript数组的使用方法远不止这些，还包括filter、map、reduce、forEach等高级操作，这些操作能让我们以函数式编程的方式对数组进行处理，从而编写出更为简洁、高效的代码。 需要注意的是，...
JavaScript中的数组应用
qq_37493515的博客
03-18 286
一、数组： 定义：数据的集合，可以存储多个单元的数据 数组中的数据单元,可以是任意形式的数据内容(数组,对象,函数) 1、字面量： var 变量 == [数据1，数据2，数据3，.....]; 在[]中括号中各个数据用逗号隔开， 2、数组的嵌套： var 变量 == [数据1，数据2，数据3，[数据1，数据2，数据3，.....]，[数据1，数据2，数据3，.....]，[数据1，数据2，数据3...
12种JavaScript中最常用的数组操作整理汇总
web前端开发
02-18 262
来源 |https://www.fly63.com/数组是最常见的数据结构之一，我们需要绝对自信地使用它。在这里，我将列出 JavaScript 中最重要的几个数组常用操作片段，包括数组...
JS-数组的常用内置功能
m0_63973769的博客
07-13 53
join() 数组转字符串 push() 数组末尾添加元素 返回新的长度pop() 删除数组最后一个元素 返回删除的元素 shift() 删除数组第一个元素 返回删除的元素unshift() 数组开头添加元素 返回新的长度 sort() 对数组元素按编码排序reverse() 颠倒元素顺序 concat() 连接数组 slice(start , end) 截取 不包含endsplice(index , howmany , item1,.....,itemX) 添加/删除项目 返回含有被删
Qt入门－下拉列表框QComboBox类
热门推荐
xgbing
07-20 14万+
QComboBox是QT GUI中的下拉列表框。 class Q_GUI_EXPORT QComboBox : public QWidget { Q_OBJECT 常用方法和属性： （1）addItems void addItems ( const QStringList & texts ) 在QComboBox的最后添加一项。 （2）count int count
JavaScript数组排序的六种常见算法总结
11-19
在JavaScript中，数组排序是常见的操作，涉及到多种不同的算法，每种算法有着不同的效率和适用场景。本文将总结六种常见的排序算法，并提供相应的代码示例。 首先，我们来看看希尔排序（Shell Sort），这是一种改进...
JavaScript数组及常见操作方法小结
10-16
JavaScript数组及常见操作方法小结 JavaScript数组是一种非常重要的数据结构，它可以存储多个数据项， arrays are used to store multiple values in a single variable。数组可以是数字、字符串、对象、函数等类型...
JavaScript数组去重的五种方法
11-26
以下将详细介绍五种常见的JavaScript数组去重方法： 1. **删除后面重复的**： ```javascript function ov(arr) { for (var i = 0; i ; i++) { for (var j = i + 1; j ; j++) { if (arr[i] === arr[j]) { arr....
JavaScript数组去重的两种方法推荐
10-22
本文将介绍两种常用的JavaScript数组去重方法，并解释其工作原理。 第一种方法是利用数组的`indexOf`方法实现去重。具体操作如下：创建一个空数组`result`作为去重后的结果，然后遍历原数组，使用`indexOf`方法检查...
Qt关于tabwidget的使用及注意事项
逍遥游的博客
11-12 5万+
Qt关于tabwidget的使用及注意事项 版本说明 版本 作者 日期 备注 0.1 loon 2018.11.12 初稿 目录 文章目录Qt关于tabwidget的使用及注意事项版本说明目录一、需求和目的二、了解QTabWIDget类及用法1、详细描述2、注意事项三、使用实例四、最后 一、需求和目的 在一个界面上实现多窗口除了之前所说的MDI这种形式，还有比较常用的就是使用...
使用qDebug()函数调试
染指年华
10-21 6万+
使用qDebug()函数，它可以把调试信息直接输出到控制台上。  输出到控制台上有两种方式：       (1) 将字符串当做参数传给qDebug()函数。(这种方法可以不用添加头文件#include<QDebug>)       (2) 使用流输出的方法输出多个字符串。（需要添加 #include<QDebug>头文件） 例： main.cpp #inclu...
QComboBox使用方法，QComboBox详解
wangminshe89
02-22 6569
fromComboBox = QComboBox() 添加一个 combobox fromComboBox.addItem(rates) 添加一个下拉选项 fromComboBox.addItems(["%d years" % x for x in range(2, 26)]) 从序列中添加 fromComboBox.setMaxVisibleItems(10) #设置最...
动力节点——数组（十九）
qq_36440274的博客
01-24 386
一，数组的概述 1，定义 数组就是存储相同数据类型的多个元素的容器。 2，特点 A，数组是一个容器，装东西数据使用。 B，数组中的数据必须是相同的数据类型。 C，数组中在定义时可存储数据的个数一旦固定，则不能再被改变。 3，数组的定义： 数组元素类型[]    数组名称    或者    数组元素类型    数组名称[] 4，数组的初始化
QT ComBoBox的简单应用
大存的博客
12-01 6万+
一显示效果 二编辑界面如下 三 在mainwindow.h中声明槽函数 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include #include namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT
reduce用法
weixin_41292470的博客
08-01 219
简介 定义和用法： reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值 array.reduce(function(total, currentValue, currentIndex, arr), initialValue); /* total: 必需。初始值, 或者计算结束后的返回值。 currentValue： 必需。当前元素。 cu...
Qt 之 PathView中currentIndex的“坑”
Captain--Jack
12-19 1万+
QT的PathView这个控件使用起来很不错，用起来简单，而且效果也不错。 但是最近发现它里面有个较为“坑”的地方，就是在使用它的onCurrentIndexchanged这个槽的时候。 比如当前的currentIndex为0，count为5，当你把它的currentIndex设置为2，这时候onCurrentIndexchanged这个槽会执行多少次呢？ 代码如下： import QtQ
currentIndex
weixin_43206442的博客
09-04 1111
<ul> <li v-for="(item,index) in movies" @click="changeColor(index)" :class="{active:currentIndex===index}"> {{item}}---{{index}} </li> </ul> el:'#app', data:{ movies: ['七龙珠', '柯南', '你是我的荣耀'], currentIndex: 0 , }, method
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值