搜索
首页web前端js教程六种JS数组使用方法实例总结
六种JS数组使用方法实例总结Jul 20, 2018 pm 03:20 PM
js数组

在js学习的过程中,js数组的方法的学习是必须要掌握的,这里我总结了一下js数组中常用的方法,大家相互学习一下。话不多说,让我们来直接进入到正文学习。

一、js对象继承的方法

数组是一种特殊的对象,继承了对象Object的toString()、toLocaleString()和valueOf()方法

1.toString()

toString方法返回由数组中每个值的字符串形式拼接而成的一个以符号分割的字符串于不使用参数的join()返回的字符串相同

[1,2,3].toString()//'1,2,3'
['a','b','c'].toString()//'a,b,c'
[1,[2,3]].toString()//'1,2,3'

2.toLocaleString()

toLocaleString()是toString()的本地化版本,在常态下,和toString()返回一样,在数字到达3位数以上,为自动格式化、还可以格式化日期

var a = 3333; a.toLocaleString()//3,333
var b = new Date; b.toLocaleString()//2018/7/13 下午3:43:39

3.valueOf()

valueOf()在对于数组对象的时候返回本身

var a = [1,2,3]; a.valueOf()//[1,2,3];
a.valueOf() instanceOf() Array//true

二、js数组转换法

1.join()

Array.join()是Array.split()的逆向操作,前者是将数组以参数单位(默认为逗号)合并成一个字符串,后者是把字符串切割成数组。支持数组与类数组,不支持对象

var a = [1,2,3,4,5]; a.join()//'1,2,3,4,5'
var b = [1,undefined,2,null,3]; b.join()//'1,,2,,3'
var c = Array.prototype; c.join.call('hello','-')//'h-e-l-l-o'
var d = {1:'a',2:'b',length:3}; d.join()//'a,b'
var e = {1:'a',2:'b'}; e.join()//''

三、js数组数据结构操作方法

数组的数据结构分为栈结构(后进后出)和队列结构(先进先出)

栈结构(后进后出):

1.push()

push()是把任意数量的参数逐个添加在末尾,改变原有数组,修改数组长度并返回

var a = [1,2]; a.push('11,22') - a//3 - [1,2,33,44]
var b = [3,4]; a.push([33.44]) - a//2 - [1,2,[33,44]]
Array.prototype.push.apply(a,b)//[1,2,3,4]
Array.prototype.push.call(a,b)//[1,2,[3,4]]

push()也可以往对象中添加参数。添加后对象会变成数组对象,新加入的元素的键对应数组的索引,并且对象有一个length属性

var c = {}; Array.prototype.push.call(c,1)//{0:1,length:1}

2.pop()

pop()把数组中最后一项移除,返回数组长度、然后修改数组长度改变原有数组

var a = [1,2,3]; a.pop() - a//3 - [1,2];
//如果数组本身是空数组,则返回undefined
var b = []; b.pop()//undefined

队列结构(前进前出):

1.shift()

shift()移除数组中第一项,返回移除的元素,然后修改数组长度改变数组

var a = [1,2,3]; a.shift() - a//1 - [2,3];

2.unshift()

unshift()在数组的起始位置添加任意参数修改数组长度,返回数组长度改变数组

var a = [1,2,3]; a.unshift(4,5) - a//5 - [1,2,3,4,5]

四、js数组排序方法

1.reverse()

reverse()用于反转数组的顺序,修改原数组,并返回当前数组

 var a = [1,2,4,3,5]; a.reverse()// [5,3,4,2,1];

2.sort()

sort()默认情况下是改变数组为升序排序,sort会默认的调用每个数组项toString()

var a = [1,2,3,4,5]; a.sort() //[1,2,3,4,5]
var b = [1,2,12,13]; c.sort() //[1,12,13,2]
var c = [1,2,'1a','2b']; c.sort() //[1,'1a',2,'2b'];

如果数组中含有undefined,则undefined会排到尾部

var d = [1,3,undefined,2]; d.sort() //[1,2,3,undefined]

如果sort有参数的时候(参数必须是一个函数);如果函数return的值是正数或者第一个参数减去第二个参数,则为正序,否则为反序。如果存在字符串,则会为最小。按照顺序放到起始位置

function sortNumber(a,b){
  return b-a
}
var e = [1,2,3]; e.sort(sortNumber)//[3,2,1]; 
var f = ['1a',1,'2b',2,3]; f.sort()//['1a','2b',3,2,1];

如果sort参数是函数返回的是一个随机正负数,则会随机数组书序

function sortRandom(a,b){
  return Math.random()-0.5
}
var g = [1,2,3,4,5]; g.sort(sortRandom)//[2,1,5,4,3](此为随机顺序)

3.concat()

concat()方法是基于当前数组创建一个新数组然后把接收的参数放到末尾,不影响原数组

var a = [1,2]; b = [3,4]; a.concat - a//[1,2,3,4] - [1,2];五.创建子数组方法

4.slice()

slice()方法截取参数第一位起始位置,和第二位终止位数。并创建一个新的数组。如果没有参数,那就是全部截取

var a = [1,2,3,4,5];a.slice(2,4)//[3,4,5]
var a = [1,2,3,4,5];a.slice(2)//[3,4,5]
var a = [1,2,3,4,5];a.slice(-3)//[3,4,5] 
var a = [3,4,5];a.slice()//[3,4,5]

五.js数组删改方法

1.splice()

splice()接收三个参数,第一个参数是位置必填的,第二个参数是要删除的数量必填,如果只有一个参数,则全部删除数组、第二个参数以后都是是新增项目选填。返回的是被删除的数组

var a = [1,2,3]; a.splice(2,0,1)-a//[]-[1,2,1,3];
var b = [1,2,3]; a.splice(2,1,1)-a//[3]-[1,2,1];
var c = [1,2,3]; a.splice(2)-a//[1,2,3]-[]
var d = [1,2,3]; a.splice(2,1,4,5)-a//[3]-[1,2,4,5]

2.indexOf()

indexOf()返回是第一个参数首次出现的位置,当有第二个参数n的出现的时候,返回的是,从第n个元素之前的元素不计算是否首次出现

var a = ['a','b','c',a,2,3]; a.indexOf('a')//0
var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//4
var a = ['a','b','c',1,2,3]; a.indexOf('a',-5)//0

3.lastIndexOf()

lastIndexOf()于indexOf()不同的就是:从右往左查

var a = ['a','b','c',a,2,3]; a.indexOf('a')//4
var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//0
var a = ['a','b','c',a,2,3]; a.indexOf('a',-1)//0

六.js数组归并的方法

1.reduce()

reduce()方法第一个参数是将指定的函数数组进行循环遍历以自定义的形式组合,生成单个值。参数接收四个(初始变量,当前变量,当前索引,原数组对象),reduce的第二个参数是指定一个参入的初始值。

var a = [1,2,3,4,5];
a.reduce(function(x,y){return x+y}) // 15
a.reduce(function(x,y){return x+y},3)//18

2.reduceRight()

reduceRight()于reduce()不同在于索引值由高到低的

a.reduce(function(x,y){console.log(x,y);return x+y},0)
// 5,4 9,3 12,2 14,1 15,0

七.js数组迭代方法

1.map()

map()给函数数组的每一项运行指定的的函数,并返回每次函数调用的结果组成数组

var a = [1,2,3]; a.map(function(item,index,arr){return item*2})
//[2,4,6]
var b = ['aa','bb','cc'];
a.map(function(item,index,b){return this[item]})
//['aa','bb','cc'];

map()日常中多用于去解析对象中的属性

var c = {[name:1,value:2],[name:11,value:22]}
c.map(function(item){return item.name})//[1,11]

2.forEach()

forEach()给函数数组的每一项运行指定的函数(于map()对比不同于没有返回值)。forEach()可接受第二参数,用来改变this的指向。

var a = {
    name:'111',
    arr:[1,2,3],
    value:function(){
        console.log(this);
        this.arr.forEach(function(){
        console.log(this);
        })
    }
}//循环外this指向value方法,循环内指向a对象
var b = {
  name:'111',
  arr:[1,2,3],
  value:function(){
    console.log(this);
    this.arr.forEach(function(){
      console.log(this);
    },this)
  }
}//全文的this全部都指向对象a

3.filter()

filter()给函数数组的每一项运行指定的函数,并返回制定规则返回True的项的数组。该方法多用于查询,第二个参数值指定this指向

var a = [1,2,3];a.filter(function(item){return item>1)//[2,3];

4.some()

filter()给函数数组的每一项运行指定的函数进行筛选,如果都返回false,则返回false。反之则返回true

a = [1,2,3,4,5];
a.some(function(item){return item === 3;})//true
a.some(function(item){return item === 6;})//false

5.every()

every()给函数数组的每一项运行指定的函数进行筛选,如果有返回false,则返回false。反之如果全部返回true,则返回true;空数组会返回true

a = [1,2,3,4,5];
a.every(function(item){return item === 3;})//false
a.every(function(item){return item < 6;})//true

相关推荐:

JS中数组重排序方法

js数组方法

以上是六种JS数组使用方法实例总结的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
es6 数组怎么移除元素es6 数组怎么移除元素Jan 11, 2023 pm 03:51 PM

方法:1、用shift()删除第一个元素,语法“数组.shift()”;2、用pop()删除最后一个元素,语法“数组.pop()”;3、用splice()删除任意位置的元素,语法“数组.splice(位置,个数)”;4、用length删除尾部的N个元素,语法“数组.length=原数组长度-N”;5、直接赋予空数组“[]”来清空元素;6、用delete删除指定下标的一个元素。

js获取数组长度的方法js获取数组长度的方法Jun 20, 2023 pm 05:33 PM

在 JS 中获取数组长度非常简单,每个数组都有一个 length 属性,该属性返回数组的最大长度,即其值等于最大下标值加 1。由于数字下标必须小于 2^32-1,所以 length 属性最大值等于 2^32-1。下面代码定义了一个空数组,然后为下标等于 100 的元素赋值,则 length 属性返回 101。因此,length 属性不能体现数组元素的实际个数。

javascript如何将字符串转为数组javascript如何将字符串转为数组Nov 23, 2022 pm 07:28 PM

3种转换方法:1、使用split(),可将给定字符串拆分为字符串数组,语法“str.split(分隔符,数组最大长度)”;2、利用扩展运算符“...”,可迭代字符串对象,将其转为字符数组,语法“[...str]”;3、使用Array.from(),可将字符串转为数组,语法“Array.from(str)”。

js数组可以转化成php数组吗js数组可以转化成php数组吗Jun 02, 2023 am 10:06 AM

js数组可以转化成php数组,其操作方法是:1、建立php示例文件;2、使用语法“JSON.stringify()”将js数组转化为JSON格式的字符串;3、使用语法“json_decode()”将JSON格式字符串转为PHP数组,此处添加了参数true,表示将JSON格式字符串转换成PHP关联数组。

js数组删除某个元素有几种方法js数组删除某个元素有几种方法Aug 02, 2023 am 10:09 AM

js数组删除某个元素有4种方法,分别是:1、使用splice;2、使用filter;3、使用pop方法和shift;4、使用delete关键字。

JS数组排序:sort()方法怎么用JS数组排序:sort()方法怎么用Dec 27, 2023 pm 03:40 PM

JavaScript的Array.prototype.sort()方法用于对数组的元素进行排序。此方法是就地排序,也就是说,它修改原始数组,而不是返回一个新的排序数组。默认情况下,sort()方法按照字符串Unicode码点值进行排序。这意味着它主要用于字符串和数字的排序,而不是用于对象或其他复杂数据类型的排序。

JavaScript怎么求数组长度和元素之和JavaScript怎么求数组长度和元素之和Sep 20, 2022 pm 02:11 PM

JavaScript中,可利用length属性来获取数组长度,语法“数组对象.length”;可使用reduce()或reduceRight()函数来求元素之和,语法“arr.reduce(function f(pre,curr){return pre+cur})”或“arr.reduceRight(function f(pre,curr){return pre+cur})”。

js数组怎么转为php数组js数组怎么转为php数组Mar 22, 2023 am 11:24 AM

在web开发中,由于JavaScript(JS)和PHP是两种最为常用的编程语言,因此数组在开发过程中是不可避免的。针对这种情况,很多时候我们需要将JS数组转为PHP数组。实现这种功能的方法有很多,下面将一一介绍。

See all articles

热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.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。