创建数组

如果你习惯了用 new 来实例化对象的形式,那么在js中一定会疑惑,可选的参数数量代表的意义截然不同。

new Array(size);//传一个参数的时候分两种情况,size是正整数时代表数组的长度;size是其它非数字类型代表的是初始化有一个元素的数组;非正整数的尝试豪无意义

new Array(element1, element2[, ...]);//两个以上的参数代表数组元素列表

实际更常用的是: var arr = [];//使用字面量的形式直接定义

数组长度

js数组的长度属性length不是只读的属性,你可以通过修改一个数组的length值来控制其元素的个数。控制元素的策略是当length设定值比当前实际值小的时候,会舍去多余的元素;当设定值大于当前实际值的时候,会填充多个空值(undefined),这个特性使得在修改数组大小的时候非常方便。

var arr = [1,2,3,4,5];

arr.length = 3;//此时arr:[1,2,3]

arr.length = 6;//此时arr:[1,2,3,,,]

数组拼接 concat

多个数组的拼接方法是 concat ,调用方式为 array1.concat(item1, item2[, ...]),其中item既可以是数组又可以是其它值,item若为数组,则展开其值和array1内容拼接到一起,其它则直接拼接。

单从字面上看会误以为所有的item都会拼接到array1的末尾,但实际上该方法并不修改array1的值,而是将array1作为数组片段和其它提供的item片段拼接后返回一个新的数组。

如果想要达到修改array1的目的,只需一个赋值操作即可。array1 = array1.concat(item1, item2[, ...]);

数组元素的连接 join

join 方法返回按指定分隔符分隔,连接到一起的所有元素,默认分隔符为逗号。调用方式为 arr.join(separator),若元素当中的值为 null、undefined 或者空字符串的值在join后都当作空字符串处理

移除数组第一个元素 shift

arr.shift() 方法移除第一个元素,返回该元素,数组为空返回 undefined。

移除数组末尾元素 pop

arr.pop() 方法移除数组中最后一个元素,返回该元素,数组为空返回 undefined。

添加新元素到数组开始 unshift

unshift插入指定元素到数组的开始位置,返回该数组。

arr.unshift(item1, item2[, ...]),可以一次按参数序列的顺序插入多个值,若item为数组不会被展开

添加新元素到数组末尾 push

push方法将新元素添加到数组中,返回数组的新长度值。

arr.push(item1, item2[, ...]),可以一次按参数序列的顺序添加多个值,若item为数组不会被展开

反转元素的顺序 reverse

arr.reverse() 方法将数组元素位置进行反转,方法执行后原数组会被修改。

数组片段截取 slice

arr.slice(start, [end]) 方法返回数组的一个截取片段。从数组下标 start 开始到 end 结束,不包括end

var arr = [0,1,2,3,4,5,6];

arr.slice(2, 6);//[2,3,4,5]

 
start 和 end 可以为负值,取值的意义为与数组长度 length 之和即 start+length 或者 end+length 。

arr.slice(-5, 6);//[2,3,4,5] 可以理解为从倒数第5个至正数第6个

arr.slice(2, -1);//[2,3,4,5] 可以理解为从第2个至倒数第1个
 

end 省略时代表截取到数组的末尾, start 和 end 都省略时返回一个arr的拷贝。

arr.slice(0);//[0,1,2,3,4,5,6],起始索引 0 可省略
 

最终取值 start 小于 end。

arr.slice(6, 3);//[],使用slice截取数组片段之前一定要验证start<end,否则这种返回结果会产生非常隐蔽的bug

数组中移除或插入元素 splice

arr.splice(start, deleteCount, item1, item2[, ...]),从数组中 start 下标开始移除 N 个元素,如果需要可以在移除的元素位置上插入新元素列表,返回值是一个由被移除的元素组成的数组。

当只插入新元素时,设定 deleteCount 值为 0 即可该方法会动态改变原数组内容。
 
 
数组元素排序 sort
 
arr.sort(sortFunction),可选的排序方法sortFuction接受两个数组元素作为参数,对数组的元素进行排序,返回排序后的数组,该方法会动态改变数组内容。
 
不提供排序方法时数组中的元素按照ASCII字符顺序升序排列
 
['1',1,0,2,'abc','aba'].sort(); //返回[ 0, '1', 1, 2, 'aba', 'abc' ]
 
若提供了sortFunction(x, y) 则必须返回以下值之一:
  • 负值,如果所传递的第一个参数比第二个参数小。
  • 零,如果两个参数相等。
  • 正值,如果第一个参数比第二个参数大。

sortFunction 提供了一个比较两个任意类型数组元素大小的方法, 返回正数时则参数 x 会排在 y 的后边,返回负数时相反,比对所有元素后完成排序。

既然排序依据的是该函数的返回值,那么具体的排序规则就可以灵活的计算。
 
纯数字型元素的数组排序:
 
[2, 6, 1, 4, 3, 5].sort(function(x, y){
     return x - y;
});
 
//正序:[1, 2, 3, 4, 5, 6]
 
[2, 6, 1, 4, 3, 5].sort(function(x, y){
     return y - x;
});
 
//倒序:[6, 5, 4, 3, 2]
 
排序方法的关键在于返回值的计算方式,所以对于非数字型的数组元素也可以方便的进行排序
 
[ {name: 'jim', age: 12}, {name: 'susan', age: 8}, {name: 'jack', age: 14} ].sort(function(x, y){
     return x.age - y.age;//按年龄正序
});

//[ { name: 'susan', age: 8 }, { name: 'jim', age: 12 }, { name: 'jack', age: 14 } ]

javascript数组方法鉴赏一的更多相关文章

  1. JavaScript数组方法--every、some、fill

    接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...

  2. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  3. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  4. JavaScript 数组方法处理字符串 prototype

    js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...

  5. 2018.2.27 JavaScript数组方法应用

    JavaScript数组方法应用 1.找出元素item在给定数组arr中的位置 function indexOf(arr,item){ return arr.indexOf(item); } func ...

  6. JavaScript数组方法详解

    JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...

  7. JavaScript数组方法速查,32个数组的常用方法和属性

    JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...

  8. JavaScript数组方法大集合

    JavaScript数组方法集合 本文总结一下js数组处理用到的所有的方法.自己做个笔记. 数组方法 concat() 合并两个或多个数组 concat()能合并两个或者多个数组,不会更改当前数组,而 ...

  9. 一站式超全JavaScript数组方法大全

    一站式JavaScript数组方法大全(建议收藏) 方法一览表 详细操作 本人总结了JavaScript中有关数组的几乎所有方法(包含ES6之后新增的),并逐一用代码进行演示使用,希望可以帮助大家! ...

随机推荐

  1. Vim光标移动

    最近全面转换开发到Mac OS下,用MacVim作为IDE.记录一些Vim基本操作给自己备忘. 此次所说的都是在common-mode(c-mode,在Vim又名normal-mode,就是刚进入vi ...

  2. jquery1.9学习笔记 之选择器(基本元素三)

    标签选择器("element") 描述: 选择所有与给出标签名相匹配的元素. 同功能的JS原生方法:getElementByTagName() 例子:  查找每个div元素. &l ...

  3. 关于python27 中文编码

    本博文已移致独立博客:www.pubwin2009.net 传送门:http://www.pubwin2009.net/index.php/pubwin/42.html 看了网上好多的资料,以前一直不 ...

  4. 比如在vi中按ctrl+z

    比如在vi中按ctrl+z有个命令可以恢复会话,我忘了,大家谁记得?   分享到: 对我有用[0] 丢个板砖[0] 引用 | 举报| 编辑 删除 管理 回复次数:8   hellwolf hellwo ...

  5. Java学习笔记--StringTokenizer的使用

    拓展:Pattern.split替代String.split http://www.cnblogs.com/gnivor/p/4386978.html StringTokenizer是一个用来分隔St ...

  6. Swift 总结使用问号(?)和感叹号(!)-备用

    在使用可选类型和可选链时,多次使用了问号(?)和感叹号(!),但是它们的含义是不同的,下面我来详细说明一下. 1. 可选类型中的问号(?) 声明这个类型是可选类型,访问这种类型的变量或常量时要使用感叹 ...

  7. DOCKER,需要进入生产实践

    先玩起... 以下初级问题的解决: docker -dINFO[0000] +job serveapi(unix:///var/run/docker.sock) INFO[0000] WARNING: ...

  8. Linux更换python版本 (转载)

    安装完CentOS6.5(Final)后,执行#Python与#python -V,看到版本号是2.6,而且之前写的都是跑在python3.X上面的,3.X和2.X有很多不同,有兴趣的朋友可以参考下这 ...

  9. Java IO 概述

    输入和输出-数据源和目标媒介 术语“输入”和“输出”有时候会有一点让人疑惑.一个应用程序的输入往往是另一个应用程序的输出.那么OutputStream流到底是一个输出到目的地的流呢,还是一个产生输出的 ...

  10. (转)iOS7界面设计规范(8) - UI基础 - 术语和措辞

    讨厌周一,讨厌一周.今天中午交互组聚餐,却很开心:大家都是很厉害的人,你可以感到他们身上的能量,可以感到有些什么东西正在推着自己尽力向前走.这是一种很健康的状态,同时也很难得,自然越发需要珍惜.从无到 ...