js数组的方法

这篇具有很好参考价值的文章主要介绍了js数组的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


一、push()&&pop() unshift()&&shift()

1、push():向数组的末尾添加一个或多个元素,并返回新的长度

		let arr=['html','css','js']
        let len=arr.push('vue');
        console.log(arr);// ['html', 'css', 'js', 'vue']
        console.log(len);//4

2、pop():删除并返回数组的最后一个元素

		let arr=[1,2,3,4,5]
        let r=arr.pop(5)
        console.log(arr);//[1, 2, 3, 4]
        console.log(r);//5

3、unshift():向数组的开头添加一个或多个元素,并返回新的长度

 		let arr = ['html', 'css', 'js']
        let  ln= arr.unshift('vue');
        console.log(arr);// ['vue', 'html', 'css', 'js']
        console.log(ln);//4

4、shift():删除并返回数组的第一个元素

		let arr = [1, 2, 3, 4, 5]
        let r = arr.shift(1)
        console.log(arr);//[ 2, 3, 4,5]
        console.log(r);//1

二、splice():可进行增,删,改操作

			语法:arr.splice(start,deleteNum,item)
			start:开始的下标
			deleteNum:要删除元素数量
			item:要插入数组的元素

1、增:splice(start,0,item):向数组内添加/插入元素,并返回空数组

 		let arr = ['html', 'css', 'js']
        arr.splice(1,0,'vue')
        console.log(arr);// ['html', 'vue', 'css', 'js']
        console.log(arr.splice(1, 0, 'vue'));//[]

2、删:splice(start,deleteNum):删除元素,并返回包含删除元素的数组

		let arr=[1,2,3,4,5,6]
        let a=arr.splice(0,3)
        console.log(arr);//[4,5,6]
        console.log(a);//[1,2,3]

3、改:splice(start,deleteNum,item) :从start下标开始,删除几个,并在该位置添加item。返回包含删除元素的数组。

		let arr=[1,2,3]
        let a=arr.splice(0,2,6,7)
        console.log(arr);//[6, 7, 3]
        console.log(a);//[1, 2]

三、slice()

slice(start,end):返回的是被截取(删除的元素),不影响原数组。

		start开始下标,end结束下标。从start下标开始截取,一直到end结束,不包括end。
		let arr=[1,2,3,4,5,6]
        let a=arr3.slice(0,2)
        console.log(arr);//[1, 2, 3, 4, 5, 6]
        console.log(a);//[1,2]

四、concat()&&join()

1、concat():可以把两个数组里的元素拼接成一个新的数组,返回拼接后的新数组

		let arr=[1,2,3]
        let arr1=[4,5,6]
        let newArr=arr.concat(arr1)
        console.log(newArr);//[1, 2, 3, 4, 5, 6]

2、 join():数组转字符串,参数默认为逗号分隔符

		let arr=[5,6,7,8]
        console.log(arr.join());//5,6,7,8
        console.log(arr.join(';'))//5;6;7;8
        console.log(arr);//[5,6,7,8]

五、查

1、indexOf(ele,start):用来查找元素在数组中第一次出现的位置,没找到返回-1。

	ele:要查找的元素,start:可选的整数参数。规定在数组中开始检索的位置

2、lastIndexOf(ele,start):从数组的末尾开始向前查找,没找到返回-1

		let arr = [1, 2, 3, 4, 5,4,2]
        console.log(arr.indexOf(7));//-1
        console.log(arr.indexOf(4));//3
        console.log(arr.indexOf(2));//1
        console.log(arr.indexOf(4,2));//3
        console.log(arr.lastIndexOf(7));//-1
        console.log(arr.lastIndexOf(4));//5
        console.log(arr.lastIndexOf(2));//6

3、includes(ele,start) 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

		ele:要查找的元素
		start:可选的整数参数。规定在数组中开始检索的位置,如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
		ES6新增
		let arr1=[1,2,3,4,5,4,2]
        console.log(arr.includes(3));//true
        console.log(arr.includes(6));//false
        console.log(arr.includes(3,-1));//false
        console.log(arr.includes(3,-6));//true

4、find(function(currentValue,index,arr){}) 返回数组内符合条件的第一个值

		当前的值(currentValue)、当前的位置(index)、原数组(arr)
		Es6新增
    	let arr2=[4,5,6,7,8,1,2]
        let fResult=arr2.find(function(currentVal,index,arr2){
            return currentVal>5
        })
        let fResult1 = arr2.find(function (currentVal, index, arr2) {
                return currentVal >8
            })
        console.log(fResult);//6
        console.log(fResult1);//undefined

5、findIndex() 返回数组内符合条件的第一个值,默认返回的是索引,如果没有符合条件的元素返回 -1,Es6

		let arr2=[4,5,6,7,8,1,2]
		let result=arr2.findIndex(function(currentVal,index,arr2){
            return currentVal>5
        })
        let result1 = arr2.findIndex(function (currentVal, index, arr2) {
                return currentVal > 8
            })
        console.log(result);//2
        console.log(result1);//-1

六、排序和数组反转

1、sort()排序

方法用于对数组的元素进行排序文章来源地址https://www.toymoban.com/news/detail-771883.html

		let arr=[1,300,150,2]
        let newArr=arr.sort()
        console.log(newArr);//[1, 150, 2, 300]
        console.log(arr);//[1, 150, 2, 300]  
此时数组并没有按照数字大小顺序排序,而是按照字符编码顺序进行排序,要是完成排序,要使用排序函数
		let arr=[1,300,150,2]
        function sortNumber(a, b) { return a - b }//升序
        function decreaseNumber(a,b){return b - a}//降序
        let arr1=arr.sort(sortNumber)
        console.log(arr1);//[1, 2, 150, 300]
        let arr2=arr.sort(decreaseNumber)
        console.log(arr2);//[300, 150, 2, 1]

2、reverse()数组反转

		let arr = [1, 300, 150, 2]
        console.log(arr.reverse());//[2, 150, 300, 1]
        console.log(arr);//2, 150, 300, 1]

七、迭代(不改变原数组)

	  ele : 必需。当前元素
	  index: 可选。当前元素的索引值。
	  arr :  可选。当前元素所属的数组对象。
	  thisArg: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值

1.some():数组中只要有一个元素通过了函数测试,就会返回true,否则返回false

	1.some()不会对空数组进行检测,不会改变原始数组,收到空数组返回false
	2.语法:arr.some(function(ele,index,arr){},thisArg)
		let arr=[4,5,6,7,8,9]
        let boo=arr.some(function(ele,index,arr){
            return ele>5
        })
        console.log(boo);//true
        let boo1=arr.some(function(ele,index,arr){
            return ele<4
        })
        console.log(boo1);//false

2.every(): 数组中只有所有元素通过了函数测试,才返回true,否则返回false

	1.语法:arr.every(function(ele,index,arr){},thisArg)
	2.every()不会对空数组进行检测,不会改变原始数组,收到空数组返回true
		let arr=[4,5,6,7,8,9]
		let result=arr.every(function(ele,index,arr){
            return ele>5
        })
        console.log(result);//false
        let result1=arr.every(function(ele,index,arr){
            return ele<10
        })
        console.log(result1);//true

3.forEach():没有返回值,只用来操作数据

	语法:arr.forEach(function(ele,index,arr){},thisArg)
		let arr=[7,8,9,6,2,1,3]
        arr.forEach(function(ele,index,arr){
            if(ele>5){
                console.log(ele);//7 8  9 6
            }
        })

4.map():返回一个新数组

	语法:arr.map(function(ele,index,arr){},thisArg)
	let arr=[7,8,9,6,2,1,3]
	let newArr=arr.map(function(ele,index,arr){
            return ele*2
        })
        console.log(newArr);//[14, 16, 18, 12, 4, 2, 6]

5.filter():过滤数组成员,返回过滤后的新数组,遍历数组时将返回值为true的元素放在新数组中,如果没有符合条件的元素则返回空数组。

  语法:arr.filter(function(ele,index,arr){},thisArg)
		let arr=[7,8,9,6,2,1,3]
		let newArr1=arr.filter(function(ele,index,arr){
            return ele>7
        })
        console.log(newArr1);//[8, 9]

八、reduce()&&reduceRight()【待完善】

1、reduce():从左到右处理数组的每个成员,最终累计为一个值

	语法:arr.reduce(function(total , cur , index , arr){}, initialValue)
	total :必需。初始值, 或者计算结束后的返回值。
	cur :必需。当前元素。
	index :可选。当前元素的索引。
	arr:可选。当前元素所属的数组对象。
	initialValue:可选。传递给函数的初始值。
			var arr = [1, 2, 3, 4, 5];
            var result = arr.reduce(function (total, cur, index, arr) {
                console.log("total:" + total + ",cur:" + cur + ",index:" + index);
                return total + cur;
            });
            console.log(result);//15         

2、reduceRight():从右到左处理数组的每个成员,最终累计为一个值

   语法:arr.reduceRight(function(total , cur , index , arr){}, initialValue)

到了这里,关于js数组的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 【JS】js数组分组,javascript实现数组的按属性分组

    项目代码中有很多时候需要按一定的条件实现按属性分组 你可以使用JavaScript的 Array.prototype.reduce() 方法来将数组分组。这是一种高级的方法,它可以将数组元素组合成一个单值。在这种情况下,你可以使用它来把数组元素放到一个对象中,其中对象的键是分组的条件,值是所

    2023年04月08日
    浏览(14)
  • js 对象数组中查找指定对象的下标并插入新的对象

    例: 我们想查找元素 { id: 2, name: ‘bar’ } 的索引位置,可以这样写: 我们想查找元素 id == 2 的索引位置,可以这样写: 在查找到指定对象的下标后,插入一个新的对象。 例: 我们想在查找到的位置插入一个新的对象 { id: 4, name: ‘qux’ },可以这样写: 我们就会得到:

    2024年02月15日
    浏览(10)
  • 前端Javascript | 数组值随机选择函数

    为了解决 postman 传参数据定制化,需要写一点前置脚本,有用到随机选取数组中的值来造数据。

    2024年02月07日
    浏览(12)
  • 【javascript】js获取数组中数值最大的数

    一、借助apply()的参数,获得最大值 由于max()里面参数不能为数组,所以借助apply(funtion,args)方法调用Math.max(),function为要调用的方法,args是数组对象,当function为null时,默认为上文,即相当于apply(Math.max,arr) 二、借助call()的参数,获得最大值 call()与apply()类似,区别是传入参数

    2024年02月11日
    浏览(8)
  • 重生前端之我在javascript敲代码(03-数组)

    重生前端之我在javascript敲代码(03-数组)

    一. 数组(重点) 思考:如何保存一个班级的所有学生的姓名? 回答:一种方法利用前面学习过的知识,则每一条信息都需要一个变量去保存,缺点是这样做很麻烦,而且容易出错,又不合理;另一种方法就是利用数组。 概念:数组是存储一系列值的变量集合,可以存储多

    2024年04月11日
    浏览(14)
  • jQuery.js - 前端必备的Javascript库

    jQuery.js - 前端必备的Javascript库

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 jQuery.js 是什么? jQuery是一个快速简洁、免费开源易用的JavaScript框架, 倡导写更少的代码,做更多的事情 。它封装JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,以及我们开发中常用到的操作DOM的API,优化HTML文

    2024年02月05日
    浏览(47)
  • web前端网页插入视频的方法

    在Web前端开发中,插入视频文件主要有两种标准方法,即使用HTML5的`video`标签和在必要时配合JavaScript或现代框架(如React、Vue等)进行更复杂的控制。以下是如何使用HTML5 `video` 标签的基本步骤:   ```html !-- 简单的HTML5视频标签示例 -- video controls width=\\\"640\\\" height=\\\"360\\\"   !-- 提供

    2024年03月16日
    浏览(10)
  • javascript常用的数组方法

    本文档统计了数组的常用方法,其中有参数可能不完整.请转至mdn查看 a.语法: delete arr[2] b.描述 删除数组的某一项的内容,或者说将某一项的内容置为空, c.返回值 d.特点 改变原数组,长度不发生变化 a.语法 arr.push(1,2,5) b.描述 向数组末尾追加 一个 或 多个 元素 c.返回值 追加元素

    2024年02月02日
    浏览(10)
  • JavaScript数组-方法大全

    一、数组的3种创建方式 二、数组常用方法        方法名                                  功能    原数组是否改变       concat()      合并数组,并返回合并之后的数据       n       join()      使用分隔符,将数组转为字符串并返回     n       pop()      删除最

    2024年02月03日
    浏览(10)
  • JavaScript数组所有方法集合

    JavaScript数组所有方法集合

    ##方法 1、concat 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组 2、copyWithin 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度 3、entries 返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对 4、ever

    2024年02月16日
    浏览(9)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包