首页 web前端 js教程 JavaScript的数组使用集合

JavaScript的数组使用集合

Mar 14, 2018 am 10:27 AM
javascript js 集合

这次给大家带来JavaScript的数组使用集合,JavaScript数组使用集合的注意事项有哪些,下面就是实战案例,一起来看一下。

1.join() 将数组中的所有元素转化为字符串并连接在一起

var a=[1,2,3,4];
a.join(); //"1,2,3,4"
登录后复制

2.reverser() 将数组中的元素颠倒顺序,返回逆序的数组。

var a[1,2,3,4];
a.reverse(); //[4,3,2,1]
登录后复制

3.sort() 将数组中的元素排序并返回排序后的数组。
当不带参数调用sort()时,数组元素以字母表顺序排序。

var a=['ant','Bug','cat','Dog'];
a.sort(); //["Bug", "Dog", "ant", "cat"]
a.sort(function(s,t){
   var s1=s.toLowerCase();
   var t1=t.toLowerCase();   if(s1<t1) return -1;   if(s1>t1) return 1;   return 0});//["ant", "BUg", "cat", "Dog"]
登录后复制

4.concat() 创建并返回一个新数组,它的元素包括调用concat()的原始数组的元素和concat()的每个参数。如果这些参数中的任何一个自身是数组,则连接的是数组元素,而非数组本身。

var a=[1,2,3];a.concat(4,5);// [1, 2, 3, 4, 5]a.concat([4,5]);// [1, 2, 3, 4, 5]a.concat([4,5],[6,7]);// [1, 2, 3, 4, 5, 6, 7]a.concat([4,5],[6,[8,7]]);// [1, 2, 3, 4, 5, 6,[8,7]]
登录后复制

5.slice() 返回指定数组的一个片段或子数组。它的两个参数分别指定了片段的开始和结束的位置。返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定的位置之间的所有数据元素。
如果只指定一个参数,返回的数组包含从开始位置到数组结尾的所有元素。
如果参数中出现负数,它表示相对于数组中最后一个元素的位置。例如:参数-1指定了最后一个元素,而-3指定了倒数第三个元素。
注意,slice()不会修改调用的数组。

var a=[1,2,3,4,5];a.slice(0,2);//[1, 2]a.slice(3);//[4, 5]a.slice(1,-1);//[2, 3, 4]a.slice(-3,-2);//[3]
登录后复制

6.splice() 在数组中插入或删除元素的通用方法。不同于slice()和concat(),splice()会修改调用的数组。注意:splice()和slice()拥有非常相似的名字,但它们的功能却又本质的区别。
splice()能够从数组中删除元素,插入元素到数组中或者同事完成这两种操作。在插入或删除点之后的数组元素会根据需要增加或减小它们的索引值,因此数组的其他部分仍然保持连续。splice()的第一个参数指定了插入和(或)删除的起始位置。第二个参数指定了应该从数组中删除的元素的个数,如果省略第二个参数,从起始点开始到数组结尾的所有元素都将被删除。splice()返回一个由删除元素组成的数组,或者如果没有删除元素就返回一个空数组。

var a=[1,2,3,4,5,6,7,8];a.splice(4);//返回[[5, 6, 7, 8]],a是[1, 2, 3, 4]a.splice(1,2)//返回[2, 3],a是[1, 4, 5, 6, 7, 8]a.splice(1,1);//返回[2],a是 [1, 3, 4, 5, 6, 7, 8]
登录后复制

7.push()和pop()
push()向数组尾部添加一个或多个元素。
pop()删除数组的最后一个元素。

8.unshift()和shift()
unshift()向数组头部添加一个或多个元素。
shift()删除数组的第一个元素。

9.toString()和toLocaleString()

[1,2,3].toString();//"1,2,3"[1,[2,&#39;c&#39;]].toString();//"1,2,c"
登录后复制

toLocaleString()是toString()方法的本地化版本。它调用元素的toLocaleString()方法将每个数组元素转换为字符串,并使用本地化分隔符将这些字符串连接起来生成最终的字符串。

10.forEach()从头至尾遍历数组,为每个元素调用指定的函数。
传递的函数做为forEach()的第一个参数,然后forEach()使用三个参数调用该函数:数组元素,元素的索引和数组的本身。

var data=[1,2,3,4,5];//计算数组元素的和值var sum=0;
data.forEach(function(value){
sum+=value
});  
sum //15//每个数组元素的值加1data.forEach(function(value,index,arr){
arr[index]=value+1;
});
data  //[2, 3, 4, 5, 6]
登录后复制

11.map()将调用的数组的每个元素传递给指定的函数,并返回一个数组,它包含函数的返回值
注意:传递给mao()的函数应该有返回值。map()返回的是新数组,不修改原来的数组。如果原来的数组是稀疏数组,返回的也是相同方式的稀疏数组,它们具有相同的长度,相同的缺失元素。

var a=[1,2,3];var b=a.map(function(value){return value*value;
});
b// [1, 4, 9]
登录后复制

12 filter()返回符合条件的数组元素

var a=[1,2,3,5];var b=a.filter(function(value){return value>2;
});
b  // [3, 5]
登录后复制

13.every()和some()
数组的逻辑判定,它们对数组元素应用指定的函数进行判定,返回true或false。
every()即数组中所有元素都符合筛选条件,则返回true.
some()即数组中存在元素符合筛选条件,则返回true;

var a =[1,2,3,4,5];
a.every(function(value){return value<10;
})  //true a中所有元素都小于10a.every(function(value){return value%2===0;
});//false a中不是所有元素都是偶数a.some(function(value){return value%2===0;
})//true a中存在偶数
登录后复制

reduce()和reduceRight()
使用指定的函数将数组元素进行组合,生成单个值。
reduce()需要两个参数。
第一个是执行化简操作的函数。化简函数的任务就是用某种方法把两个值组合或化简为一个值,并返回化简后的值。第二个(可选)参数是一个传递给函数的初始值。
reduceRight()和reduce()使用方法一致,不同的是它按照数组索引从高到低(从右向左)处理数组。

var a=[1,2,3,4,5];var sum=a.reduce(function(x,y){return x+y;},0);
sum //15  数组求和var max=a.reduce(function(x,y){return x>y?x:y});
max // 5求最大值
登录后复制

indexOf()和lastIndexOf()
indexOf()第一个符合条件的值的索引,如果没有,返回-1
lastIndexOf()最后一个符合条件的值的索引,如果没有,返回-1

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Require.js详解

怎样实现node连接mysql的方法

JS的正则表达式如何使用

Javascript的单例模式

以上是JavaScript的数组使用集合的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

为何在Go语言中难以实现类似集合的功能? 为何在Go语言中难以实现类似集合的功能? Mar 24, 2024 am 11:57 AM

在Go语言中难以实现类似集合的功能,是一个困扰许多开发者的问题。相比其他编程语言如Python或Java,Go语言并没有内置的集合类型,如set、map等,这给开发者在实现集合功能时带来了一些挑战。首先,让我们来看一下为何在Go语言中难以直接实现类似集合的功能。在Go语言中,最常用的数据结构是slice(切片)和map(映射),它们可以完成类似集合的功能,但

PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

js和vue的关系 js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系:1、JS作为Web开发基石;2、Vue.js作为前端框架的崛起;3、JS与Vue的互补关系;4、JS与Vue的实践应用。

Laravel 集合中的 Where 方法实用指南 Laravel 集合中的 Where 方法实用指南 Mar 10, 2024 pm 04:36 PM

Laravel集合中的Where方法实用指南在Laravel框架的开发过程中,集合(Collection)是一个非常有用的数据结构,它提供了丰富的方法来操作数据。其中,Where方法是一个常用的筛选方法,能够根据指定条件来过滤集合中的元素。本文将介绍Laravel集合中Where方法的使用,通过具体的代码示例来演示其用法。1.基本用法Where方法的

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

Java Iterator 与 Iterable:迈入编写优雅代码的行列 Java Iterator 与 Iterable:迈入编写优雅代码的行列 Feb 19, 2024 pm 02:54 PM

Iterator接口Iterator接口是一个用于遍历集合的接口。它提供了几个方法,包括hasNext()、next()和remove()。hasNext()方法返回一个布尔值,指示集合中是否还有下一个元素。next()方法返回集合中的下一个元素,并将其从集合中删除。remove()方法从集合中删除当前元素。以下代码示例演示了如何使用Iterator接口来遍历集合:Listnames=Arrays.asList("John","Mary","Bob");Iterator

See all articles