史上最全JavaScript数组对象详解(二)
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
史上最全JavaScript数组对象详解(二)相关推荐
- centos7中ps显示的内容_值得收藏,史上最全Linux ps命令详解
原标题:值得收藏,史上最全Linux ps命令详解 一.程序员的疑惑 大概在十多年前,我当时还是一个产品经理.由于一些工作的原因,需要向运维工程师学习一些linux常用命令. 当使用linux ps这 ...
- 史上最全的IP地址详解,速来get
史上最全的IP地址详解 白在了解虚拟机网络之前,我们首先得了解ip地址是什么? 1.简单局域网的构成 局域网:一般称为内网 简单局域网的构成:交换机.网线.PC(其他IT终端) 交换机:用来组建内网的 ...
- 史上最全YYModel的使用详解
原文链接:http://www.jianshu.com/p/25e678fa43d3 demo链接:https://github.com/walkertop/YYModel---Demo 插件链接:h ...
- 史上最全JavaScript数组去重的十种方法(推荐)
一.前言: 我们在实际工作中,或者在面试找工作时,都会用到或者被问到一个问题,那就是"数组如何去重".是的,这个问题有很多种解决方案,看看下面的十种方式吧! 二.数组去重方式大汇总 ...
- 史上最全JavaScript数组方法
一.以下是不改变数组本身的方法 1.concat()用于合并两个或多个数组 const a = ['你是','什么'] const b = ['牛马'] const c = a.concat(b) c ...
- 史上最全交叉熵损失函数详解
在我们自学神经网络神经网络的损失函数的时候会发现有一个思路就是交叉熵损失函数,交叉熵的概念源于信息论,一般用来求目标与预测值之间的差距.比如说我们在人脑中有一个模型,在神经网络中还有一个模型,我们需要 ...
- 史上最全jmeter逻辑控制器案例详解
在jmeter中逻辑控制器可以控制采样器(samplers)的执行顺序.由此可知,控制器需要和采样器一起使用,否则控制器就没有什么意义了.放在控制器下面的所有的采样器都会当做一个整体,执行时也会一起被 ...
- 广成子:值得收藏-史上最全Linux ps命令详解
From 闻茂泉(广成)AliDataOps 一.程序员的疑惑 大概在十多年前,我当时还是一个产品经理.由于一些工作的原因,需要向运维工程师学习一些linux常用命令.当使用linux ps这个十 ...
- 呕心沥血集齐史上最全 JavaScript最实用工具函数大全,建议收藏!
为元素添加on方法 Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = functio ...
最新文章
- 面试题如何实现一个IOC容器
- php去除html属性,PHP如何去掉所有HTML标签?
- jq输出文本_如何用 Linux 命令行工具解析和格式化输出 JSON | Linux 中国
- apache将请求转发到到tomcat应用
- c++ xml 解析“后直接跟值问题
- JUnit-4.12使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误
- GraphQL 、flask-graphql、Graphene| 一种配得上凡尔赛的API框架
- [转载] java中接口(interface)详解
- k8s 命令 重启_k8s基本命令
- opipe--一款基于java的自定义“命令”管道
- MQ发送的消息都到了死信队列中了
- IT程序员编程工具利器-辅助编程神器
- 中国最具声望16所大学,国际排名逐个数~
- Latex algorithm Input Output
- Microsemi Libero SoC 教程2 (点亮LED闪烁)
- CentOS 7查看源代码
- 【相册】华为手机调用系统相册的问题
- 计算机网络——单播、多播(组播)、广播
- uboot环境下mmc操作_uboot mmc命令详解
- 十大股票资讯网站排名 炒股资讯网站排行榜 炒股必看的资讯网站推荐