详解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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
再论Javascript的类继承
Mar 05 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
网站域名和主机:Domain.com
2019/04/01 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
总裁秘书岗位职责
2013/12/04 职场文书
关于元旦的广播稿
2014/02/16 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
同事打架检讨书
2015/05/06 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
Python中三种花式打印的示例详解
2022/03/19 Python