资讯专栏INFORMATION COLUMN

详解JavaScript数组(一)

zhongmeizhi / 682人阅读

摘要:数组不接受参数,从数组末尾移除最后一项返回数组最后一项。队列方法先进先出移除数组中的第一个项,并返回该项。接收任意个参数,在数组前添加任意个项并返回新数组的长度。基于当前数组中的一或多个项创建新数组,不会影响原来数组。

一. 定义方法

有两种方式可以定义一个数组,

构造函数法

使用Array构造函数创建数组,在使用Array构造函数时可以省略new操作符。

 var arr = Array();
 var arr = new Array(); // 创建一个空数组

 var arr = Array(20);
 var arr = new Array(10); // 创建一个 length 长为 10 的数组

 var arr = Array("1", "2", "3");
 var arr = new Array("1", "2", "3"); // 创建一个包含该三项的数组
对象字面量表示法
var arr=["1", "2", "3"];

注意:数组最多能够包含4294967295个项

二. 数组检测

这篇文章有很详细的说明。《在JavaScript中,如何判断数组是数组?》

三. 数组方法 1.转换方法

所有对象都具有toString()toLocaleString()valueOf() 方法;要注意它们之间的区别

var a=[1,2];
console.log(a.toString()); 
console.log(a.toLocaleString());//1,2
console.log(a.valueOf()); //[1, 2]

valueOf:返回数组本身

toString():把数组转换为字符串,并返回结果,每一项以逗号分割

toLocalString():结果与toString()返回的结果相同,但是调用的是toLocalString方法。

LocaleString()会根据你机器的本地环境来返回字符串,而toString()保持着统一的值。

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); //1337,2016/8/25 下午3:06:46,foo

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.LocaleString()会根据你机器的本地环境来返回字符串; 
console.log(str); //1337,Thu Aug 25 2016 15:07:43 GMT+0800 (中国标准时间),foo

使用join()方法,可以设置分隔符

String.join("|");

备注:需要说明一下alert()方法接收字符串参数,在后台调用toString()方法,但对于LocaleString()会调用LocaleString()方法。

2.栈方法

栈(LIFO,后进先出)

a.push()

接受任意数量的参数,逐个推入数组末尾,并返回修改后数组的长度。

var a=[1,2];
var b=a.push(3,4);
console.log(b); //4 数组[1,2,3,4]
b.pop()

不接受参数,从数组末尾移除最后一项,返回数组最后一项。

var a=[1,2];
var b=a.pop();
console.log(b); //2
3.队列方法

LIFO(先进先出)

a.shift()

移除数组中的第一个项,并返回该项。

var a=[1,2];
var b=a.shift();
console.log(b); //1
b.unshift()

unshift() 接收任意个参数,在数组前添加任意个项并返回新数组的长度。备注:IE7及以下返回undefined。

var a=[1,2];
var b=a.unshift(3,4);
console.log(b); //4, 数组为[3,4,1,2]
4.重排序方法 a. sort()

使用时每个数组项调用自身toString()方法转为字符串,再按字符编码升序(非数值大小)排列数组项,因此会出现一种尴尬的事情:

var a=[1,2,3,10,5];
a.sort(); //[1, 10, 2, 3, 5],字符编码排序,10排在1后面

这时我们可以传入一个比较函数。

function compare(a,b){
  if(ab){
      return 1;
    }else{
      return 0;
    }
}
var a=[1,2,3,10,5];
a.sort(compare); //[1, 2, 3, 5, 10]

对于数值类型或通过valueOf()方法返回数值类型的对象数组项,可以使用下面这个函数:

function compare(a,b){
  return a-b;  
}
b.reverse()

反转数组。

var a=[1,2,3,10,5];
a.reverse(); //[5, 10, 3, 2, 1]
5.操作方法 a.concat()

合并数组,传入数组或者参数,不会影响原来的数组。

var a=[1,2,3,4,5];
var a1=[6,7]
var b=a.concat();
var c=a.concat(a1);
var d=a.concat(a1,8,9);
console.log(a);//[1,2,3,4,5]
console.log(b);//[1,2,3,4,5]
console.log(c);//[1,2,3,4,5,6,7]
console.log(d);//[1,2,3,4,5,6,7,8,9]
b.slice()

基于当前数组中的一或多个项创建新数组,不会影响原来数组。

无参数:返回原数组

一个参数:返回从该参数指定位置开始到数组末尾的所有项

两个参数:返回起始和结束之间的项

var a=[1,2,3,4,5];
var b=a.slice();
var c=a.slice(1);
var d=d.slice(1,4);
console.log(a);//[1,2,3,4,5]
console.log(b);//[1,2,3,4,5]
console.log(c);//[2,3,4,5]
console.log(d);//[2,3,4]
c.splice()

可以删除、插入、替换;返回删除的项组成的数组,对原数组造成影响
删除:指定2个参数,要删除的第一项的位置和要删除的项数

var a=[1,2,3,4,5];
var b=a.splice(3,2); //a变为[1, 2, 3]

插入:提供3个参数,起始位置、0、要插入的项

var a=[1,2,3,4,5];
var b=a.splice(3,0,2); //a变为[1, 2, 3, 2, 4, 5]

替换:指定3个参数,起始位置、要删除的项数、要插入的项数(可多项)

var a=[1,2,3,4,5];
var b=a.splice(3,1,2); //a变为[1, 2, 3, 2, 5]
6.位置查找

indexOf()lastIndexOf(),接收两个参数:要查找的项和(可选的)表示起点位置的索引,都返回要查找的项在数组中的位置。

7.迭代方法

every():对数组的每一项运行给定的函数,如果该函数对每一项运行都返回 true,则返回 true,对原函数无影响

some():对数组中的每一项运行给定的函数,如果该函数对任一项返回 true,则返回 true,对原函数无影响

filter():对数组的每一项运行给定函数,返回该函数会返回true的项组成的数组

forEach():对数组中的每一项运行给定函数,无返回值

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

8.缩小方法

reduce()和reduceRight()
传入四个参数:前一个值、当前值、项的索引、数组对象本身。这个函数返回的任何值都会作为第一个参数自动传给下一项,第一次迭代发生在数组的第二项上。

var numbers = [1, 2, 3, 4, 5];
var sum= numbers.reduce(function (pre, cur, index, arr) {
  return pre + cur;
})
alert(sum); // 15
四.参考资料

《JavaScript高级程序设计》

《JavaScript权威指南》

在JavaScript中,如何判断数组是数组?

Object.prototype.toLocaleString()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80196.html

相关文章

  • 【连载】前端个人文章整理-从基础到入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    madthumb 评论0 收藏0
  • 详解js面向对象编程

    摘要:看下面一个例子优点使用构造器函数的好处在于,它可以在创建对象时接收一些参数。按照惯例,构造函数的函数名应始终以一个大写字母开头,以区分普通函数。返回该对象的源代码。使您有能力向对象添加属性和方法。 基本概念 ECMA关于对象的定义是:无序属性的集合,其属性可以包含基本值、对象或者函数。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。 类 在现实生活中,相似的对象之间往往都有...

    lolomaco 评论0 收藏0
  • JavaScript 特殊对象 Array-Like Objects 详解

    摘要:很简单,不是数组,但是有属性,且属性值为非负类型即可。至于属性的值,给出了一个上限值,其实是感谢同学指出,因为这是中能精确表示的最大数字。如何将函数的实际参数转换成数组 这篇文章拖了有两周,今天来跟大家聊聊 JavaScript 中一类特殊的对象 -> Array-Like Objects。 (本文节选自 underscore 源码解读系列文章,完整版请关注 https://githu...

    zhaofeihao 评论0 收藏0
  • javascript reduce详解及应用

    摘要:循环数组每一项数组下标当前调用数组本身可选初始值,作为回调函数第一个参数的默认值,也是每次回调的返回值,见代码首页问题转化为数组首页问题转化后效果这个栗子来自配置路由时遇到的,当时也是优化了好几个版本。 reduce callback(一个在数组中每一项上调用的函数,接受四个参数:)previousValue(上一次调用回调函数时的返回值,或者初始值)currentValue(当前正...

    Cruise_Chan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<