原文地址:js数组学习整理

常用的js数组操作方法及原理

1、声明数组的方式

var colors = new Array();//空的数组

var colors = new Array(3); //长度为3

var colors = new Array('red','blue');//初始化

  

其中,在声明数组的时候,去掉new操作符,也可以。

还有一种初始化数组的方式,使用数组字面量表示法 。

数组字面量由一对包含数组项的方括号表示,多个数组项之间用逗号隔开。

var colors = [ 'red', 'blue'];

var colors = [];

  

2、数组的length , 不是只读的,可以用它来增删数组。

var color = ['red', 'blue', 'green'];

color.length = 2;

alert(color[2]); // undefined,说明这个值已经不存在了

  

增加数组项

var colors = ['red','blue'];

colors[colors.length] = 'green';

  

3、检测数组

如果只有一个全局的环境,可以用

if( value instanceof Array ){  }

  

但如果一个网页中有框架,就会有多个全局环境,那么Array构造函数就会有多个,此时用

Array.isArray(value);//IE9+

4、转换方法(将数组转化为字符串)

所有对象都有toLocalString()、toString()、这2个方法返回以逗号分隔的字符串,它们的原理分别是循环数组,将数组的每一项分别使用toLocalString()、toString()方法后,拼接成字符串。

join()方法是可以指定分隔的符号来返回字符串。如果在join()中不指定分隔符,默认为逗号。

如果数组中的一项值是null,或者undefined,使用join(),toLocalString()、toString()方法返回的是以空字符串表示该项。

valueOf()返回的还是数组

5、向数组中添加或取出值(栈方法,队列方法)

var colors = [];

colors.push('red'); // 返回数组长度 1

colors.pop(); //返回数组最后一项red

  

这2个方法都是像栈一样的形式,直接操作最后的元素,也就是后来的元素。

还有2种方法像队列一样的形式操作数组,shift,unshift

var colors = ['red', 'blue'];

colors.shift(); // 返回的是数组第一项red

colors.unshift('green'); // 返回数组长度3

  

取值操作pop(),shift(),会返回一个值

push(),unshift(),会返回添加以后的数组长度。

6、排序方法

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

color.reverse(); // 反转数组 4,3,2,1

color.sort(); //默认是升序排列 1,2,3,4

//但如果colors = [1, 2, 3, 15];使用sort时会返回 1, 15, 2 ,3

  

sort();方法会对数组的每一项进行toString()。所以最后得到的数组每一项字符串。所以会出现那样的结果。

但sort()接收一个比较方法的函数作为参数,那我们可以自定义一个compare函数

//自定义升序

function compare(v1, v2){

if(v1 < v2)

return -1;

else if(v1 > v2)

return 1;

else

return 0;

}

var values = [0, 1, 3, 15]

values.sort(compare); //返回1,2,3,15

  

7、操作方法(concat,slice,splice)

这里concat和slice方法都不会直接操作原数组,而是返回一个新的数组,原数组不会改变。

var colors = ['red', 'blue'];

var a = ['green'];
alert(colors.concat(a));//['red', 'blue', 'green']
alert(colors); //['red', 'blue']

  

slice很像python切割字符串。

var colors = ['red', 'blue', 'green'];

colors.slice(1);//返回[blue,green]

colors.slice(1,3);//返回['blue']

  

slice()如果传入一个负值,则用数组长度加上这个值,对应的就是等价的值

//如果数组长度为5

slice(-2, -1); 与 slice(3, 4);相等

  

splice(‘起始位置’, ‘删除数量'[, ‘代替值’]);它是直接操作原数组,以数组形式返回被操作的元素

var colors = ['red', 'green', 'blue'];

colors.splice(1, 1); // 返回[‘green’] ,而原数组为[red, blue]

colors.splice(1, 0, 'yellow'); //返回一个空数组 ,而原数组为[red,yellow,green,blue]

  

8、位置方法(indexOf, lastIndexOf)

indexOf(‘要查找的项'[, ‘查找起点的索引’])返回数组值的索引,从第一个值开始查找、 lastIndexOf则相反。

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

num.indexOf(3); //返回2

num.indexOf(3, 3); //返回-1,表示该值不存在

  

【全文完】

js数组学习整理的更多相关文章

  1. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  2. JS数组方法整理(附使用示例)

    整理目前所用过的数组方法,学习了新增的es6方法. 1.arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2, is 8.3,4,5] console.lo ...

  3. js数组基础整理

    首页: 主要整理了一下数组中常用的一些基础知识,代码都是自己手敲,有不对的地方希望能指出,目前只有4篇,后续会不断的增加这一板块. 由于少于100字不能发所以把一些最基本的创建数组也写上. // 创建 ...

  4. js数组常用方法整理

    学疏才浅,若有不对的地方,希望大家可以帮忙指正出来. 1. Array.push(),向数组的末尾添加一个或多个元素,并返回新的数组长度.原数组改变. 2. Array.pop(),删除并返回数组的最 ...

  5. JS 数组 学习笔记

    什么是数组 数组(array)是按次序排列的一组值.每个值的位置都有编号(从0开始),整个数组用方括号表示.本质上数组属于一种特殊的,由Array构造出来的对象,typeof运算符返回数组的类型是 o ...

  6. !!对python列表学习整理列表及数组详细介绍

    1.Python的数组分三种类型:(详细见 http://blog.sina.com.cn/s/blog_6b783cbd0100q2ba.html) (1) list 普通的链表,初始化后可以通过特 ...

  7. [学习笔记]JS 数组Array push相关问题

    前言: 今天用写了一个二维数组,都赋值为零,然后更新其中一个值,结果和预期是不一样,会整列的相同位置都是同一个值. 1.用Chrome的控制台样例如下: arrs[2][2] =1的赋值,竟然是三个数 ...

  8. js 数组常用的操作函数整理

    平时多做企业应用开发,抱着实用为主,对前端技术理解得比较肤浅,下面就是肤浅地对 js 数组的属性和方法及对它操作的 jquery 方法做些记录: js 数组是 js 内建的一个非常强大数据类型,由于 ...

  9. JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...

随机推荐

  1. 你必须知道的EF知识和经验

    注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式. 推荐MiniProfiler插件 工欲善其事,必先利其器. 我们使用EF和在很大程度提高了开发速度,不过随之带来的 ...

  2. Fis3的前端工程化之路[三大特性篇之资源定位]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  3. 【AR实验室】ARToolKit之制作自己的Marker/NFT

    0x00 - 前言 看过example后,就会想自己动动手,这里改改那里修修.我们先试着添加自己喜欢的marker/nft进行识别. 比如我做了一个法拉利的marker: 还有网上找了一个法拉利log ...

  4. 图片访问实时处理的实现(nodejs和php)

    我在访问时光网.网易云音乐等网站时,发现将它们页面中的一些图片URL修改一下就可以得到不同尺寸的图片,于是思考了其实现方案,我的思路是:URL Rewrite + 实时处理 + 缓存,对用户请求的UR ...

  5. 百度MIP移动页面加速——不只是CDN

    MIP是用CDN做加速的么?准确答案是:是,但不只是. MIP全称Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案.MIP从前端渲染和页面网络传输两方面进行优化, ...

  6. 小白解决CENTOS7错误:Cannot find a valid baseurl for repo: base/7/x86_6

    刚入手的MacBook想着学点东西,本汪还是决定玩玩CentOS服务器,安装好了VirtualBox + CentOS. 打开一看,懵逼了!命令行! 行吧,先装个图形界面: $sudo yum gro ...

  7. 探索ASP.NET MVC5系列之~~~2.视图篇(上)---包含XSS防御和异步分部视图的处理

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  8. 从零开始编写自己的C#框架(25)——网站部署

    导航 1.关掉访问保护 2.发布网站 3.复制网站到服务器 4.添加新网站 5.设置网站访问权限 6.设置文件夹访问权限 7.控制可更新文件夹执行权限 8.设置“应用程序池”.net版本与模式 9.附 ...

  9. PHP之使用网络函数和协议函数

    使用其他Web站点的数据 <html> <head> <title> Stock Quote From NASDAQ </title> </hea ...

  10. 【HanLP】资料链接汇总

    Java中调用HanLP配置 HanLP自然语言处理包开源官方文档 了解HanLP的全部 自然语言处理HanLP 开源自由的汉语言处理包主页 GitHub源码 基于hanLP的中文分词详解-MapRe ...