JS-这篇文章带你弄懂JavaScript数组

array.jpg

基本上每种编程语言中都存在数组这种数据类型,而且地位都很重要。在JavaScript中数组更是编程的核心武器之一,对于数组的知识了解的越多越好,越深入越好。

虽然我之前已经写过很多关于数组的文章,比如JS-判断变量是否为数组求探讨:Java和JavaScript数组的性能
JS-数组sort方法用的是哪种排序算法。但是我觉得数组的内容太多了,今天进行一次梳理,希望能把数组说清楚。

1.数组的创建

方式1:构造函数

var array = new Array();
var array = new Array(7);//指定数组长度为7

优点:可以指定数组的长度。
缺点:
1.代码多。
2.new属于强引用,该变量不会被GC回收,会一直占用内存。

方式2:直接量

var array = [];
var array = [1,2,3,4];

优点:写法简洁方便。

数组在内存中是分两部分存放的,一部分是栈式结构,存储各个元素的内存地址。另一部分是堆式结构,存放真实的元素。详情参考我的另一篇文章求探讨:Java和JavaScript数组的性能。

除了上面的一维数组,还有二维数组以及多维数组,不同类型的数组发挥着不同的功能。

2.数组的原生API

为了方便开发,JavaScript数组提供了很多好用的API。我来和大家一一介绍。

(1) push 和 pop
push和pop应该放到一起,push将元素加到数组的尾部,pop将元素从数组的尾部删除。

push:接收任意数量的元素,把它们添加到数组尾部,返回值为修改后数组的长度。

var array = [1,2,3,4];
var result = array.push(5,6,7);
console.log(result);//7
console.log(array.length);//7
console.log(array.toString());//1,2,3,4,5,6,7

pop:删除数组末尾的最后一项,返回值是移除的元素。

var array = [1,2,3,4];
var result = array.pop();
console.log(result);//4
console.log(array.length);//3
console.log(array.toString());//1,2,3

(2) unshift 和 shift

unshift:将参数添加到数组的头部,返回值是修改后数组的长度。

var array = [1,2,3,4];
var result = array.unshift(5,6,7);
console.log(result);//7
console.log(array.length);//7
console.log(array.toString());//5,6,7,1,2,3,4

shift:删除数组头部的第一项,返回值是移除的元素。

var array = [1,2,3,4];
var result = array.shift();
console.log(result);//1
console.log(array.length);//3
console.log(array.toString());//2,3,4

(3) join

jion将数组的元素连接成一个字符串,接受的唯一参数是分隔符,如果省略的话,默认使用逗号作为分隔符。

var array = [1,2,3,4];
var result = array.join();
var result1 = array.join("-");
console.log(result);//1,2,3,4
console.log(result1);//1-2-3-4

(4) sort
sort方法值得详细说说,因为sort的使用场景很多。

sort()方法接受一个比较函数的参数,根据比较函数的返回值确定排序。如果不传入比较函数,JavaScript会先将数组的元素转换为字符串类型,并依照ASCII码的值升序排列。

var array = [1,2,3,4,11];
console.log(array.sort().toString());//1,11,2,3,4

传入比较函数参数时,若比较函数返回的值为true则交换两个元素的位置,否则不交换。

var array = [1,2,3,4,11];
console.log(array.sort(function(a,b){return a-b}).toString());//1,2,3,4,11

sort函数使用的是插入和快排混合的排序算法,或者说优化的快速排序算法。如果元素个数小于等于10则使用插入排序,因为插入排序此时的效率更高。如果元素个数超过10个则使用快速排序。

除此之外,JavaScript还会先把undefined,null先拿出来,不参与排序,进一步提升效率。

(5) indexOf

它可以接收两个参数:要查找的项和查找起点的索引。返回值是查找内容在数组中的索引位置,如果没有找到则返回-1。

用这个方法判断元素是否在数组中很是方便,但是需要注意indexOf在判断时使用的是全等“===”,所以注意数据类型。

var array = [1,2,3,4];
console.log(array.indexOf(2));//1
console.log(array.indexOf("2"));//-1

(6) every 和 some

every和some都需要传入一个判断函数。

every判断是否每一个元素在判断函数中都返回true,如果某个元素的判断为false,则不再继续判断返回false;

some判断是否有一个元素在判断函数中返回true。如果某个元素判断为true,则不再继续判断返回true;

var array = [1,2,3,4];
console.log(array.every(function(x){return x<3}));//false
console.log(array.some(function(x){return x<3}));//true

(7) map, reduce和 filter

map是将数组中的每个元素都按照传入的函数转换为新的元素,并返回新的数组。

var array =[1,2,3,4];
var newArray = array.map(function(x){return x+1});
console.log(newArray.toString());//2,3,4,5

reduce是聚合操作,将每一个元素按照传入的函数操作,生成最终的结果。reduce的传入函数可以获得四个参数,前一个元素,当前元素,当前元素索引,数组。

var array =[1,2,3,4];
var result= array.reduce(function(pre,current,index,array){return pre+current});
console.log(result);//10

filter是筛选函数,返回符合筛选函数的数组。

var array =[1,2,3,4];
var newArray = array.filter(function(x){return x>2});
console.log(newArray.toString());//3,4

(7)其他API

contract:连接两个数组。
reverse:倒序翻转数组。
forEach:循环数组中的每一个元素。

如果文章中有理解不正确的地方,欢迎大家帮忙雅正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • 第三章 类型、值和变量 1、存取字符串、数字或布尔值的属性时创建的临时对象称做包装对象,它只是偶尔用来区分字符串值...
    坤少卡卡阅读 626评论 0 1
  • 数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。 JavaScript...
    劼哥stone阅读 1,125评论 6 20
  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,960评论 0 16
  • 原来有文章说 ruby速度慢,rails太臃肿。 最近学习了spring boot之后,才发现。ruby最大的坏处...
    jimxl阅读 295评论 0 0
  • 没有故事,不成童年。童年的那些故事是色彩斑斓的记忆,伴随终生。之恩每天晚上睡前的必修功课就是听“凯叔讲故事”,听得...
    岳老师阅读 916评论 0 0