前端深入之js篇丨Array数组操作从入门到成神Up Up Up,持续更新中

2019-11-04 admin

写在前面

随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组。

数组基本操作

创建数组

var arr1 = [];  //通过字面量的方式创建一个没有元素的空数组
var arr2 = new Array(); //通过构造函数的方式创建一个空数组
var arr3 = new Array(5); //创建一个有五个元素的数组,此时每个数组元素为undefined
var arr4 = [1,2,3,4,5]; //创建有五个值的数组
var arr5 = [{id:1,name:'不是酸柠檬'},{id:2,name:'no lemon'}]; //创建一个值为对象的数组

数组创建有两种方式,分别是[]字面量方式new Array()构造函数方式,本质上创建方式是一致的,使用字面量的方式要比构造函数的方式简单的多,推荐小伙伴们使用。

数组增加删除

push()、pop()、unshift()和shift()
var arr = [];  //通过字面量的方式创建一个没有元素的空数组
arr[1] = '不是酸柠檬'; //写入第一个元素  ['不是酸柠檬']
arr.push('22岁'); //在数组末尾添加一个元素 ['不是酸柠檬','22岁']
arr.pop(); //删除数组末尾的元素  ['不是酸柠檬']
arr.unshift('22岁'); //在数组头部添加元素 ['22岁','不是酸柠檬']
arr.shift(); //删除数组头部的元素  ['不是酸柠檬']

这里主要介绍到了最基本的两组增加删除元素的方式,分别是push()在数组末尾添加pop()删除末尾元素unshift()在数组头部添加shift()删除头部元素,这是数组中最常用的四个添加删除方法,小伙伴一定要牢记。

splice()
var arr = [0,1,2,3,4,5,6,7];
arr.splice(4); // 从下标为4的元素一直删除到末尾,此时arr为 [0, 1, 2, 3]
arr.splice(1,2); // 从下标为1的元素开始向后删除两个元素,此时arr为 [0, 3]
arr.splice(1,0,[1,2]); // 从下标为1的元素开始向后删除0个元素,并且插入元素'1,2',此时arr为 [0, 1, 2, 3]

splice()是数组操作中很重要的方法,使用splice()可以更为自由的对数组进行相应的增加删除,通过splice()方法也可以很轻松的实现push()、pop()、unshift()和shift()四个方法,小伙伴们可以自己尝试一下,加强对splice()方法的理解。

delete和arr.length()
var skill = ['Vue','React','ES6'];
delete skill[0]; //将第一个元素设为空,不改变数组长度 [empty,'React','angular']
skill.length = 5; //将数组长度设置为5 [empty,'React','angular',empty,empty]
skill.length = 0; //将数组长度设置为0,此时数组置为空 []

这里应该注意deletelength的区别,使用delete操作后的数组元素会被设置为empty不会改变原数组长度。使用length操作后,若设置长度大于原数组长度,则新添的元素设置为empty,若设置长度小于原数组长度,则删除多余元素,并改变数组长度,若设置length为0,则清空数组,使数组长度改变为零。

数组方法

join()
var skill = ['Vue','React','angular'];
skill.join(); //"Vue,React,angular"
skill.join('----'); //"Vue----React----angular"

通过arr.join()可以将数组元素拼接成字符串,并在每个元素中添加指定字符,如不设置,则默认添加逗号。

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

通过arr.reverse()可以将数组中每一个元素调到顺序进行排列。

sort()
var arr = [5,4,3,2,1];
arr.sort(); //[1,2,3,4,5]
var arr1 = ['a','c','e','d','b']
arr1.sort(); ['a','b','c','d','e']

通过arr.sort()可以将数组元素按照顺序进行排列,比如数字先后顺序或者字母排序。但是他并不是按照数字大小顺序来排序的,为了使数组元素能按照数字大小排序,应该按照以下方式来实现。

var arr = [55555,44,3333,222,11111];
arr.sort(); //[11111, 222, 3333, 44, 55555]  按照数字先后顺序,并没有对比大小
arr.sort((a,b)=>{
    return a-b;  //数字由小到大进行排列   [44, 222, 3333, 11111, 55555]
})
arr.sort((a,b)=>{
    return b-a;  //数字由大到小进行排列    [55555, 11111, 3333, 222, 44]
})
concat()
var arr = [1,2,3];
arr.concat(4,5); // [1, 2, 3, 4, 5]
arr.concat([4,5]); // [1, 2, 3, 4, 5]
arr.concat([4,5],[6,7]); // [1, 2, 3, 4, 5, 6, 7]
arr.concat(4,[5,[6,7]]); // [1, 2, 3, 4, 5, [6, 7]]

通过arr.concat()可以将字符添加到数组元素中,也可以将其他数组添加到当前数组中,但如果是嵌套数组,concat()默认不会对它进行扁平化处理。

slice()
var arr = [1,2,3,4,5];
arr.slice(0,3); // [1, 2, 3]  从下标为0的元素开始的三个元素
arr.slice(3); // [4, 5]  从下标为3的元素开始到结束的元素

通过arr.slice()可以对数组进行查询,如果传入两个参数(x,y),则意义为从下标x开始,向后数y个元素;如果传入一个参数(x),则意义为从下标x开始一直到末尾的所有元素。

filter()、every()和some()
var arr = [1,2,3,4,5];
var resarr1 = arr.filter((x)=>{
    return x>3;
}); // [4, 5]  筛选数组元素大于3的结果
var resarr2 = arr.filter((x)=>{
    return x%2==0;
}); // [2, 4]  筛选数组元素中的偶数

通过arr.filter()可以对数组进行带条件的筛选,在filter()里面写入相应条件,这里要注意执行arr.filter()会返回一个数组,我们需要定义一个新数组来接收它。

var arr = [1,2,3,4,5];
arr.every((x)=>{
    return x>3;
}); // false  arr数组中不是每一项都大于3,返回false
arr.every((x)=>{
    return x>0;
}); // false  arr数组中每一项都大于0,返回true
arr.some((x)=>{
    return x>3;
}); // false  arr数组中存在一项大于3,返回true

这一组方法是用来判断数组中有没有相应值的,arr.every()判断的值必须所有都满足条件才会返回true,而arr.some()判断的值只需要有一项满足就会返回true。

reduce()
var arr = [1,2,3,4,5];
var sum = arr.reduce((x,y)=>{
    return x+y   //0+1+2+3+4+5 =》 15
},0)
var product = arr.reduce((x,y)=>{
    return x*y  //1*2*3*4*5 => 120
})
var max = arr.reduce((x,y)=>{
    return (x>y)?x:y  //5
})

arr.reduce()方法会对传入的数组元素进行组合,如例子中的x和y,在每个方法中的返回值会注入到x中,然后继续与下一个y值进行操作,所有操作完成后返回最终结果,这个方法有第二个参数用来设置默认值到x,但默认值不是必填项。

为了方便小伙伴理解,我把代码中sum当做例子来进行拆解

  • (x=0,y=1) => 0+1=1
  • (x=1,y=2) => 1+2=3
  • (x=3,y=3) => 3+3=6
  • (x=6,y=4) => 6+4=10
  • (x=10,y=5) => 10+5=15
  • 此时便利完所有数组元素,返回值15

结论

今天我们一起学习了数组操作的常用方法,知识点比较多,也没有太多连贯性,但是这些方法在我们的日常工作中会经常用到,希望你能够多加练习,深入理解这些方法,你的前端水平一定会更上一层楼的。

关于数组的操作方法还有很多没有写到,这篇文章将会持续更新,有需要的小伙伴可以点赞收藏,在我更新之后就可以及时来阅读学习啦!

结语

以上就是本文章的全部内容了,如果有不正确的地方欢迎指正。

感谢您的阅读,如果感觉有用不妨点赞/转发。

前端深入系列是一个踩坑系列,是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结,在此记录分享出去,同时也是对自我技能的一个反思和追问。

前端路漫,踩坑不断。

前端深入系列持续更新中……

以上2019-11-04。

[转载]原文链接:https://segmentfault.com/a/1190000020900153

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78818.html

文章标题:前端深入之js篇丨Array数组操作从入门到成神Up Up Up,持续更新中

相关文章
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
回到顶部