详解JS数组方法


Posted in Javascript onNovember 20, 2021

一、会修改原数组

1.push():

(在数组结尾处)向数组添加一个新的元素

push() 方法返回新数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

2.pop():

方法从数组中删除最后一个元素

可以接收pop()的返回值,是被弹出的值"Mango"

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

3.shift():

删除首个数组元素

可以接收删除的值

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

4.unshift():

(在开头)向数组添加新元素

返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

5.splice():

用于向数组添加新项

第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组

也可以通过设置参数来删除数组中元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
//["Banana","Orange","Lemon","Kiwi","Apple","Mango"]
 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
//["Orange", "Apple", "Mango"]

6.sort():

以字母顺序对数组进行排序

如果是对数字进行排序,则需要注意。 "25" 大于 "100",因为 "2" 大于 "1"。我们通过一个比值函数来修正此问题。

sort()也可以通过修改比较函数来排序对象数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); 
 var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});//升序
points.sort(function(a, b){return b - a});//降序
points.sort((a, b)=>{return b - a});//箭头函数
 var cars = [
    {type:"Volvo", year:2016},
    {type:"Saab", year:2001},
    {type:"BMW", year:2010}
]
cars.sort(function(a, b){return a.year - b.year});//比较年份(数字)
cars.sort(function(a, b){//比较类型(字符串)
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

7.reverse():

反转数组中的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

二、不修改原数组

1.toString():

把数组转换为数组值(逗号分隔)的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.toString())
//Banana,Orange,Apple,Mango

2.join():

可将所有数组元素结合为一个字符串。

它的行为类似 toString(),但是还可以规定分隔符

var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.join(" * "))
//Banana * Orange * Apple * Mango

3.concat():

通过合并(连接)现有数组来创建一个新数组。可以连接多个

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
 var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

4.slice() :

方法用数组的某个片段切出新数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);//从第一个到最后
//["Orange", "Lemon", "Apple", "Mango"]
 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);//从第一个到第三个(不包括3)
//["Orange", "Lemon"]

5.map():

将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(x => x*2)//简写的箭头函数
//arr= [1, 2, 3, 4, 5]   原数组保持不变
//newArr = [2, 4, 6, 8, 10] 返回新数组

6.forEach():

将数组中的每个元素执行提供的函数,没有返回值,注意和map方法区分

let arr = [1, 2, 3, 4, 5]
arr.forEach(x => {
    console.log(2*x)
    //return x*2 返回值没有用,此函数没有返回值
})

7.filter():

此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回。函数里面写的是条件!!!

let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(value => value >= 3 )
//或者
let newArr = arr.filter(function(value) {return value >= 3} )
console.log(newArr)
//[3,4,5]

8.every():

此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false

let arr = [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4
const isLessThan6 => value => value < 6
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true

9.some():

此方法是将所有元素进行判断返回一个布尔值,如果存在元素满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false

let arr= [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4
const isLessThan6 = value => value > 6
arr.some(isLessThan4 ) //true
arr.some(isLessThan6 ) //false

10.reduce():

此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)  
 console.log(sum) //sum = 15  相当于累加的效果
//与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作的

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Javascript 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
JS 实现分页打印功能
May 16 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
详解Vue slot插槽
Nov 20 #Vue.js
详解Vue router路由
Nov 20 #Vue.js
Ajax异步刷新功能及简单案例
Nov 20 #Javascript
关于JavaScript轮播图的实现
Nov 20 #Javascript
JavaScript的function函数详细介绍
JavaScript文档对象模型DOM
Nov 20 #Javascript
四十九个javascript小知识实用技巧
Nov 20 #Javascript
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP检测用户语言的方法
2015/06/15 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python验证身份证信息实例代码
2019/05/06 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
快递业务员岗位职责
2014/01/06 职场文书
五一劳动节活动总结
2015/02/09 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python