JavaScript中常用数组方法以及是否改变原数组的总结

最新推荐文章于 2023-02-04 16:05:44 发布
最新推荐文章于 2023-02-04 16:05:44 发布
阅读量878 收藏 10
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yizhimiaomiaoa/article/details/103088900
版权

整理

1.push():最后一位新增

    var arr = ["hello",true,45,{},"world"];
    console.log(arr.push("123"));       //6
    console.log(arr);                   // ["hello", true, 45, {…}, "world", "123"]
    arr.push(1);                        
    console.log(arr);				    //["hello", true, 45, {…}, "world", "123", 1]

2.unshift():开头一位新增

	var arr = ["hello",true,45,{},"world"];
    console.log(arr.unshift(123));      //6
    console.log(arr);                   //[123, "hello", true, 45, {…}, "world"]
    arr.unshift(1)
    console.log(arr);                  //[1, 123, "hello", true, 45, {…}, "world"]

3.pop():最后一位删除

	var arr = [1,3,5,7,6];
    console.log(arr.pop());     //6  (删除最后一个数字6)
    console.log(arr);           //[1, 3, 5, 7]
    
    arr.pop();                 //(删除最后一个数字7)
    console.log(arr.pop());    //5  (因为在上一行代码已经删除7，输出的时候又删了一个数字得出5)
    
    console.log(arr);         //[1, 3]

4.shift():最后一位删除

    var arr = [1,3,5,7,6];
    console.log(arr.shift());   //1
    console.log(arr);           //[3, 5, 7, 6]
    arr.shift();
    console.log(arr.shift());  //5

5.reserve():数组元素逆序排序

    var arr = ["hello",true,45,{},"world"];
    arr.reverse();
    console.log(arr);       //["world", {…}, 45, true, "hello"]


    var arr2 = [3,6,1,8,12];
    console.log(arr2.reverse());        //[12, 8, 1, 6, 3]

6.concat():合并数组

	var arr1 = ["hello",true,45,{},"world"];
    var arr2 = [3,6,1,8,12];
    console.log(arr1.concat(arr2));     //["hello", true, 45, {…}, "world", 3, 6, 1, 8, 12]
    console.log(arr1);                  //["hello", true, 45, {…}, "world"]

7.slice(a,b):截取a到b，不包含b

	var arr = [34,"a",67,"b","vc","html","hello"];
    console.log(arr.slice(2,6));        //[67, "b", "vc", "html"]
    console.log(arr);                   //[34, "a", 67, "b", "vc", "html", "hello"]

8.splice(a,b,c):截取a，截取b个，替换为c

	var arr = [34,"a",67,"b","vc","html","hello"];
    console.log(arr.splice(2,2,"html"));        //[67, "b"]
    console.log(arr);                           //[34, "a", "html", "vc", "html", "hello"]

    arr.splice(2,2);
    console.log(arr);                          //[34, "a", "html", "hello"]    
    arr.splice(2,0,"html");                    
    console.log(arr);                          //[34, "a", "html", "html", "hello"]
    
    arr.splice(2,2,"html","css","js");        
    console.log(arr);                         //[34, "a", "html", "css", "js", "hello"]

9.sort:排序

	var arr = [5166666,7,369,104,9];
    // sort：默认会按照字符的排序规则，升序
    //     需要传入回调函数，在回调函数身上右接收两个参数，返回这两个参数的差，可以按照数值的排序规则进行排序
    arr.sort(function(a,b){
        return b-a;         //降序
    });
    console.log(arr);       //[5166666, 369, 104, 9, 7]
    arr.sort();
    console.log(arr);       //[104, 369, 5166666, 7, 9]     (按照字符的排序规则升序)

10.indexOf(a,b);

检测数组中是否存在指定数据a，从索引b开始检测，存在返回索引，不存在返回-1

	var arr = ["a","45",67,true,"hello",67,45,25,13,89];
    console.log(arr.indexOf(67));         //2
    console.log(arr);                    //["a", "45", 67, true, "hello", 67, 45, 25, 13, 89]    原数组
    console.log(arr.indexOf("world"));  //-1
    // console.log(arr.indexOf("a"));
    console.log(arr.indexOf(67,3));     //5  从索引3开始检测是否有67
    console.log(arr.indexOf(67,6));    //-1

11.forEach（callback）

数组的专属遍历方法，在回调函数身上又有三个参数,该项的值，该项的索引，数组本身

	var arr = ["a","45",67,true,"hello",67,45,25,13,89];
    var f = arr.forEach(function(val,idx,self){
        console.log(val);       //a  "45"  67.......
        console.log(idx);      //0 1 2 3 4 ......
        
    })
    console.log(f)      //undefined        无返回值
    console.log(arr);   //原数组

    //var arr = ["a","45",67,true,"hello",67,45,25,13,89];
   // var f = arr.forEach(function(val,idx,self){
   //    return val + "a"
   // })
   // console.log(f)      //数组的每一个都加上a

12.map

不是专门用来遍历，但是可以实现遍历，格式同forEach
主要功能：用来获取数组中的数据，并返回成新的数组

	var m = arr.map(function(val,idx,self){
        // console.log(val,idx,self)
        return val + "a";
    })
    console.log(arr);   // ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89]
    console.log(m);     // ["aa", "45a", "67a", "truea", "helloa", "67a", "45a", "25a", "13a", "89a"]

13.filter

不是专门用来遍历，但是可以实现遍历，格式同forEach
主要功能：过滤，回调函数每次返回值为true，会将这个遍历到的值放到新数组中，在filter结束后，返回这个数组，如果为false则跳过

	var f = arr.filter(function(val,idx,self){
        return typeof val === "string";
    })
    console.log(f);     // ["a", "45", "hello"]

14.some

检测数组中是够满足指定条件，如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行，如果没有满足条件的元素，则返回false（不会对空数组就行检测）

	var f = arr.some(function(val){
        if(val == 67){
            return val;
        }
    })
    console.log(f);     //true


    var f = arr.some(function(val){
        if(val == "cvb"){
            return val;
        }
    })
    console.log(f);     //false
    console.log(arr);   //["a", "45", 67, true, "hello", 67, 45, 25, 13, 89]

15.every

判断数组中是否每个元素都满足条件条件，全部满足返回true，有一个不满足返回false

	var f = arr.every(function(val){
        if(val == 67){
            return val;
        }
    })
    console.log(f);;        //false
    console.log(arr);       //["a", "45", 67, true, "hello", 67, 45, 25, 13, 89]

16.reduce

reduce(callbackfn,[initslValue])，入参方式从右往左
reduce()方法接受callback函数，这个函数包含四个参数
preValue:上一次调用返回的值，或者是提供的初始值
curValue：数组中当前被处理的数组项
index，当前数组项的数组中的索引值
array：调用array（）方法的数组

//1、求数组各项和
    var arr = [1,2,3,0,4,5];
    var sum = arr.reduce(function(pre,cur){
        return pre + cur;
    })
    console.log(sum);       //16

//2、取最大值
    var max = arr.reduce(function(pre,cur){
        return Math.max(pre,cur);
    })
    console.log(max);       //5

//3.数组去重
    var norepeat = arr.reduce(function(pre,cur){
        pre.indexOf(cur) === -1 && pre.push(cur);
        return pre;
    },[])
    console.log(norepeat);      //[1,2,3,0,4,5,1]

//还可以求阶层（pre*cur），就幂次方（pre**cur）

//4.将二维数组转换成一维数组
    var arr1 = [[1,2],[3,4]];
    var str = arr1 .reduce(function(prev,cur){
        return prev.concat(cur);
    })
    console.log(str);       //[1,2,3,4]

17.reduceRight

reduceRight(callbackfn,[initslValue])，和reduce()方法基本一样，但是入参方式从左往右

//1、求和 
   var arr = [1,2,3,0,4,5,1];
    var sum = arr.reduceRight(function(pre,cur){
        return pre + cur;
    })
    console.log(sum);       //16

//2、求最大值
    var max = arr.reduceRight(function(pre,cur){
        return Math.max(pre,cur);
    })
    console.log(max);       //5

//3、数组去重，倒序
    var norepeat = arr.reduceRight(function(pre,cur){
        pre.indexOf(cur) === -1 && pre.push(cur);
        return pre;
    },[])
    console.log(norepeat);      //[1, 5, 4, 0, 3, 2]

//还可以求阶层（pre*cur），就幂次方（pre**cur）

//4.将二维数组转换成一维数组
    var arr1 = [[1,2],[3,4],[7,8]];
    var str = arr1 .reduceRight(function(prev,cur){
        return prev.concat(cur);
    })
    console.log(str);       //[7, 8, 3, 4, 1, 2]

18.join

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

//1、join方法的参数不传或者传入undefined会默认用逗号分隔。

    var arr1 = [1,2,3,4];
    var arr2 = [];
    arr2 = arr1.join(undefined);
    console.log(arr2);      //1,2,3,4
    console.log(arr1);      //[1, 2, 3, 4]
//2、
    arr2 = arr1.join("、");
    console.log(arr2);      //1、2、3、4

总结

序号数组方法功能返回值是否改变原数组
1push数组的尾部添加一个元素返回添加元素后数组长度是
2unshift数组首部添加一个元素返回添加元素后数组长度是
3pop删除数组尾部一个元素返回删除的元素是
4shift删除数组第一个元素返回删除的元素是
5reserve数组元素逆序排列，不创建新的数组返回逆序后的数组是
6concat创建并返回一个新的数组，注意参数是数组返回原数组和参数数组合并后的新数组否
7slice（a,b）排序，默认按照字符的规则做升序返回排序后的数组是
8splice(a,b,c)在数组中插入或删除元素的通用方法，能同时删除和插入，删除a到b,替换为c返回删除的元素组成的数组是
9sort排序，默认按照字符的规则做升序返回排序后的数组是
10indexof（a,b,c）检测是否含指定数据返回索引值，没有则返回-1否
11forEach（callback）forEach(functhion(val,idx,self )遍历数组返回数组的值、数组的索引数组本身（n次）否
12map将调用的数组的每个元素传递给指定的函数，并返回一个新数组，这个数组包含该函数的返回值函数返回值组成的新数组否
13filter过滤，比较函数返回true或false返回调用数组的一个子集否
14some遍历，检测数组中是否有符合条件的数据有ture,无false否
15every遍历，检测数组中是否有所有数据都符合条件全部都是ture,一个不是false否
16reduce迭代数组的所有项，然后构建一个最终返回值（左向右）函数处理的结果否
17reduceRight迭代数组的所有项，然后构建一个最终返回值（右向左）函数处理的结果否
18join数组转字符返回字符串否
特立独行的喵喵
关注
js中数组常用方法总结（推荐）
10-17
这个方法不会改变原数组。 示例代码： ```javascript let arr = [1, 2, 3, 4, 5]; const isBigEnough = value => value >= 3; let newArr = arr.filter(isBigEnough); console.log(newArr); // [3, 4, 5] ``` 3. ...
js判断前后两个数组是否发生变化
最新发布
CHENC0518的博客
04-03 833
【代码】js判断前后两个数组是否发生变化。
js监听数组的变化
qq_41672008的博客
06-25 1万+
js监听数组的变化 最近在造轮子的时候遇到了这么一个问题，那就是数组在调用内部方法的时候怎么才可以监听到数组发生了变化，举个例子：假设一个数组调用了一个push方法，如果才可以知道数组调用了push方法，怎么去监听呢？？？ 如果是直接调用数组内部的方法，那么不会监听到数组的变动，为此可以进行改造，代码如下： // 获取Array的原型，并创建一个新的对象指向这个原型 const arrayMethods = Object.create(Array.prototype) // 创建一个新的原型，这就是改造
JS中检测数组的四种方法
weixin_54904533的博客
04-01 1261
今天和大家分享一下 JS 中检测是不是数组的四种方法。 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例，数组也是一种对象所以也可以利用 instaceof 来进行判断。 let arr = [1, 2, 3]; console.log(arr.instanceof(Array)); // true 这种方法在只有一个全局作用域的环境下是可以的，但是如果一个网页中包含多个框架，那么就会存在不同的全局环境，不同的环境 Array 构造函数是不同的...
数组的比较是否前后发生改变
Shaoyouiqng的博客
01-21 1590
数组值的比较 在开发的过程中，我们经常会碰到这样的比较数组值的一个比较，我这次开发的背景是，如果前后数组没有发生改变，则不弹框，但是如果变化了就要弹框提醒是否保存 当然处理，直接比较是不对的，我们需要把他转化对象或者json形式，最简单的就是转化为json形式进行比较，当然，如果你的数组是一维的纯属组的话，你直接可以Array.toString()或者join(’,’)进行转化，但是碰到数组对象...
reduce详情
llj1028的博客
02-04 370
reduce reduce详情 reduce的使用方法 reduce参数值的含义
谈谈JavaScript数组常用方法总结
10-20
- `concat()` 方法用于合并两个或多个数组，不会改变原数组。 ```javascript var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var mergedArr = arr1.concat(arr2); console.log(mergedArr); // 输出 [1, 2, 3, 4...
javascript中数组的多种定义方法和常用函数简介
10-25
5. concat()：此函数用于连接两个或多个数组，返回一个新数组，并不会改变原数组。 6. slice()：此函数返回数组的一个子集，可以通过指定开始和结束位置参数来选择需要提取的部分。 7. reverse()：此函数将数组中...
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
10-20
在JavaScript中，数组和字符串是两种基本的数据类型，它们各自具有一系列的方法来执行各种操作。正确理解和掌握这些方法对于编写高效和优雅的代码至关重要。 首先，让我们来看看字符串（String）对象的方法。 1. ...
JavaScript数组方法总结分析
10-22
JavaScript提供了一系列数组操作的方法，用于处理数组元素的增删改查、数组转换以及其他常用操作。下面是JavaScript数组方法的总结分析： 1. 普通方法： - join()：将数组中的所有元素连接成一个字符串，并返回这...
reduce()方法详解
热门推荐
乐夫天命兮的博客
05-02 2万+
定义和用法 reduce() 方法将数组缩减为单个值。 reduce() 方法为数组的每个值（从左到右）执行提供的函数。 函数的返回值存储在累加器中（结果/总计）。 注释：对没有值的数组元素，不执行 reduce() 方法。 注释：reduce() 方法不会改变原始数组。 语法 array.reduce(function(total, currentValue, currentIndex, arr), initialValue) 参数值 参数 描述 function(total, curren
遍历数组的一些方法
W936438835的博客
12-09 320
1、reduce语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。 callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValu
JavaScript-reduce()方法
am_xiao_hui的博客
05-25 518
reduce() ​ 1. reduce()是典型的函数式编程的方法，它不会改变原数组的元素，而是产生一个新的数组，几乎可以用reduce方法解决所有数组处理问题，filter和map方法都可当作是reduce的特殊实现，该方法类似于for循环，却不等同于for循环，是更加简洁的编程方式。 2. 接收两个参数:第一个参数：function(a,b) a:上一次reduce后的结果； b:原数组中...
数组中的reduce方法
adobe2333的博客
07-01 484
reduce相当于一个累计器，将累计器逐个作用在数组元素上，把上一次输出的值作为下一次输入的值。它接收两个参数，第一个参数callback为回调函数（必选），第二个参数initialValue为初始值（可选）。 回调函数接收4个参数：total 回调函数返回的累积值（必选），value 当前处理的数组元素（必选），index 当前数组元素的索引值（可选），array 调用reduce()的数组（可选）。回调函数第一次执行时，如果调用reduce()时提供了initialVa...
js数组改变和不改变原数组的方法
cszhaomeng的博客
10-14 1997
不会改变原来数组的有： concat()—连接两个或更多的数组，并返回结果。 every()—检测数组元素的每个元素是否都符合条件。 some()—检测数组元素中是否有元素符合指定条件。 filter()—检测数组元素，并返回符合条件所有元素的数组。 indexOf()—搜索数组中的元素，并返回它所在的位置。 join()—把数组的所有元素放入一个字符串。 toString()—把数组转换为字符串...
js常用函数
AAA138171的博客
07-03 395
这是我整理的一些js常用函数，有需要的可以看看 // push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 push() // pop() 方法用于删除数组的最后一个元素并返回删除的元素 pop(); // shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 shift() // unshift() 方法可向数...
详解JavaScript的数组，JS数组方法大全
wfly blog
09-21 708
什么是数组 数组是值得有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。 js的数组是无类型的，数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组。 数组元素的索引不一定要连续，元素之间可以有空隙，叫做稀疏数组 。 每个数组都具有一个length属性。 针对非稀疏数组，length属性就是数组元素的个数，针对稀疏数组，元素的length属性比所...
JavaScript数组求和（各数组方法一一实现）
林飞的梦呓
04-27 5531
实现数组求和的方法 基础知识回顾 push():向数组末尾添加一个或多个元素 unshift(): 向数组的开头添加一个或多个元素 pop(): 删除数组最后一个元素 shift(): 删除数组第一个元素 sort(): 给数组排序 reverse(): 颠倒数组项在数组中的位置 concat(): 合并数组 slice(): 指定的位置开始删除指定的数组项，并且将删除的数组项构建成一个...
JS：数组 reduce 方法
大空翼 つばさ
10-19 2222
reduce arr.reduce(function(res,cur,ind,arr){ return something },initRes) reduce可以接受两个参数，reduce接受的第一个参数是一个方法，该方法可以接受四个参数，第一个参数为上一次函数调用的返回值（第一次调用时默认是数组的第一个元素），第二个参数为当前被遍历的元素，第三个参数为当前遍历元素的下标，第四个参数...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值