史上最全JavaScript数组对象详解（二）

忘是亡心i 2023-02-11 10:18 2阅读 0赞

## JavaScript数组对象详解（二） ##

上一篇博客我们讲到了JavaScript数组对象的创建，访问和属性，接下来一篇博客主要讲一下JavaScript数组对象的方法及使用。说到数组的方法，主要分为两大部分，一部分是ES6以前的数组方法，一部分是ES6新增的方法。

#### 1.ES6之前的方法 ####

var arr1 = [1, 2, 3];
        var arr2 = ["a", "b", "c"];
        var arr3 = ["张三", "李四", "王五", "赵六"];
        var arr4 = ["a", "b", "c", "a", "b", "c", "a", "b", "c"];
        // 数组的方法
        // concat() 连接两个或更多的数组，并返回新的数组，不改变原数组。
        console.log(arr1.concat(arr2, arr3));
        console.log(arr1);
        
        // indexOf() 搜索数组中的元素，并返回它第一次出现所在的索引值。如果检索不到，返回-1。
        console.log(arr1.indexOf(0));
        console.log(arr2.indexOf("a"));
        
        // lastIndexOf() 搜索数组中的元素，并返回它最后出现的索引值。
        console.log(arr4.indexOf("a"));
        console.log(arr4.lastIndexOf("a"));
        
        // isArray() 判断对象是否为数组。
        console.log(Array.isArray(arr1));
        
        // join() 把数组的所有元素放入一个字符串。将数组转换为字符串
        console.log(arr3.join());
        
        // pop() 删除数组的最后一个元素并返回删除的元素。改变原数组
        console.log(arr4.pop());
        console.log(arr4);
        
        // push() 向数组的末尾添加一个或更多元素，并返回新的长度。改变原数组
        console.log(arr4.push("hello", "China"));
        console.log(arr4); 
        
        // shift() 删除并返回数组的第一个元素。 改变原数组
        console.log(arr4.shift());
        console.log(arr4); 
        
        // unshift() 向数组的开头添加一个或更多元素，并返回新的长度。改变原数组
        console.log(arr4.unshift("hello", "World"));
        console.log(arr4);
        
        // reverse() 反转数组的元素顺序。 反向排列 改变原数组
        console.log(arr1.reverse());
        console.log(arr1);
        
        // slice(开始的索引,结束的索引) 选取数组的的一部分，并返回一个新数组。留头不留尾 不改变原数组
        console.log(arr4.slice(1, 3));
        console.log(arr4);
        
        // splice(起始的索引,截取的长度,添加的新元素) 从数组中 添加 或删除元素。返回新数组 改变原数组 在指定位置添加元素
        // console.log(arr4.splice(1,6));
        console.log(arr4.splice(1, 6, "red", 'green', "blue"));
        console.log(arr4);
    
        var nums = [1, 2, 3, 11, 22, "a", "B", "b", "c", "A"];
        // sort() 对数组的元素进行排序。 字典
        console.log(nums.sort());
        console.log(nums.sort(function (a, b) { 
            return a - b
        })); //升序
        console.log(nums.sort(function (a, b) { 
            return b - a
        })); //降序
        
        
        // forEach(function(value,index,arr){}) 数组每个元素都执行一次回调函数。
        nums.forEach(function (val, index, arr) { 
            // console.log(val,index,arr);
            console.log(val);
        })
        // for(var i=0;i<nums.length;i++){ 
        // console.log(nums[i])
        // }
        
        // map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
        console.log(aNum2.map(Math.abs));
        
        var aNum = [18, 20, 22, 30];
        // every() 检测数值元素的每个元素是否都符合条件。
        aNum.every(function (num) { 
            console.log(num > 0)
        })
        
        // some() 检测数组元素中是否有元素符合指定条件。
        aNum.some(function (num) { 
            console.log(num > 20)
        })
        
        console.log(aNum.some(function (num) { 
            return num > 30
        }))
        
        // filter() 检测数值元素，并返回符合条件所有元素的数组。
        console.log(aNum.filter(function (num) { 
            return num > 0;
        }))
        
        
        var aNum2 = [1.2, 1.8, 2.0, 4.3];
        // reduce(function(total,val){}) 将数组元素计算为一个值（从左到右）。
        console.log(aNum2.reduce(function (sum, val) { 
            sum += val;
            return sum;
        }))
    
        // reduceRight() 将数组元素计算为一个值（从右到左）。
        console.log(aNum2.reduceRight(function (sub, val) { 
            sub -= val;
            return sub;
        }))
        
        // toString() 把数组转换为字符串，并返回结果。
        console.log(aNum2.toString());
    
        // valueOf() 返回数组对象的原始值。
        console.log(aNum2.valueOf())

#### 2.ES6中中新增的方法 ####

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        // copyWithin(target,start,end) 从数组的指定位置拷贝元素到数组的另一个指定位置中。
        console.log(arr.copyWithin(0, 3, 5));
    
        // entries() 返回数组的可迭代对象。
        // console.log(nums.entries().next().value);
        // keys() 返回数组的可迭代对象，包含原始数组的键(key)。
        // console.log(nums.keys().next().value);
        
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        // fill(val,start,end) 使用一个固定值来填充数组。
        console.log(arr.fill("a", 0, 1));
    
    
        // find() 返回第一个符合传入测试（函数）条件的数组元素。
        console.log(aNum.find(function (num) { 
            return num > 19;
        }));
        
        // findIndex() 返回符合传入测试（函数）条件的数组元素索引。
        console.log(aNum.findIndex(function (num) { 
            return num > 19;
        }));
        
        // includes() 判断一个数组是否包含一个指定的值。
        console.log(aNum.includes(17));
        
        // from(object,function) 通过给定的 对象 中创建一个数组。
        console.log(Array.from([1, 2, 3]));

**总结：**

*  数组的方法不仅仅是知道每个方法是什么意思，最主要的是要知道每个方法操作完后返回值是什么。
 *  数组中pop(),push(),shift(),unshift()这四个方法是经常再面试的时候会被问到的，记忆技巧(键盘上有shift键，向上，所以这两个代表开头，p开头的:屁股，所以代表末尾，单词长的代表添加，单词短的的代表删除)。(手动偷笑)
 *  还要区分开slice()和splice()的区别。
 *  最后要知道其实ES6中新增的一些方法主要是数组的一些迭代。其实ES5中的forEach(),map(),every(),some(),filter()都是数组的迭代。下面一篇博客会讲这集中迭代方法的区别。

**视频讲解链接：  
https://www.bilibili.com/video/BV1St4y1C73g**

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关史上最全ThreadLocal 详解

ThreadLocal叫做线程变量，意思是ThreadLocal中填充的变量属于当前线程，该变量对其他线程而言是隔离的，也就是说该变量是当前线程独有的变量。ThreadL...

骑猪看日落/ 2024年05月23日 22:16/ 0 赞/ 138 阅读

相关 ByteBuddy（史上最全）

ByteBuddy（史上最全）文章很长，建议收藏起来慢慢读！ [总目录博客园版][Link 1] 为大家准备了更多的好文章！！！！推荐：尼恩Java面试宝典（持

小鱼儿/ 2024年04月08日 13:30/ 0 赞/ 165 阅读

相关史上最全 SpringBoot 注解详解

> 欢迎大家关注我的公众号【老周聊架构】，Java后端主流技术栈的原理、源码分析、架构以及各种互联网高并发、高性能、高可用的解决方案。一、注解(annotations)列

缺乏、安全感/ 2023年05月21日 10:17/ 0 赞/ 108 阅读

相关 JavaScript数组去重（12种方法，史上最全）

JavaScript数组去重（12种方法，史上最全）转载自：[https://segmentfault.com/a/1190000016418021?utm\_sour

- 日理万妓/ 2023年02月21日 06:21/ 0 赞/ 36 阅读

相关史上最全JavaScript数组对象详解（二）

JavaScript数组对象详解（二）上一篇博客我们讲到了JavaScript数组对象的创建，访问和属性，接下来一篇博客主要讲一下JavaScript数组对象的方法及使

忘是亡心i/ 2023年02月11日 10:18/ 0 赞/ 3 阅读

相关史上最详细JavaScript数组对象详解（一）

JavaScript数组对象详解（一）今天我们来聊一下JavaScript中的数组对象。什么是数组，字面意思就是数据的组合(分组)，简单来说就是用单独的一个变量来储

浅浅的花香味﹌/ 2023年02月11日 10:18/ 0 赞/ 23 阅读

相关史上最全Javascript 面试题答案

近年来，从事JavaScript的程序员越来越多，JavaScript的曝光率也越来越高，如果你想转行试试JavaScript，不妨收下这份面试题及答案，没准用得上。当然，如果

Bertha 。/ 2022年06月17日 07:16/ 0 赞/ 347 阅读

相关 linux命令详解，史上最全！！！

linux常用命令总结，欢迎转载![偷笑][titter.gif] 一.咿咿呀呀阶段首先先教你们四个热键，学会这四个键，收益一辈子。 Tab按键---命令补齐功能

柔情只为你懂/ 2022年05月25日 13:19/ 0 赞/ 363 阅读

相关 JavaScript数组去重（12种方法，史上最全）

数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。在真实[的

忘是亡心i/ 2022年04月13日 09:59/ 0 赞/ 214 阅读

相关史上最全JavaScript数组去重的十种方法（推荐）

一、前言：我们在实际工作中，或者在面试找工作时，都会用到或者被问到一个问题，那就是“数组如何去重”。是的，这个问题有很多种解决方案，看看下面的十种方式吧！二、数组去重方

青旅半醒/ 2022年04月11日 12:51/ 0 赞/ 205 阅读