javascript入门之数组[新手必看]


Posted in Javascript onNovember 21, 2016

一、定义数组。

定义数组有两个方法:

1、var arr1 = [];

//定义一个空数组

2、var arr2 = [1,2,3,"str1","str2"];

//定义一个有5个元素的数组。

3、var arr3 = new Array(3);

//定义一个空数组

4、var arr4 = new Array(1,2,3,"str1","str2");

//定义一个指定长度为5的数组。

二、数组元素的读和写。

arr[0];

//读取第一个数组元素

arr[0] = "str1";

//改变数组第一个元素的值。

三、稀疏数组。

稀疏数组表示从0 开始不连续索引的数组。通常数组的length代表元素中元素个数,如果数组是稀疏的,length属性值将大于元素的个数。

in 操作符用于检测元素在某位置是否存在元素,注意undefined也算存在。

如:var a1 = [,,];

var a2 = new Array(3);

0 in a1;

//true,因为a[0]有undefined元素

0 in a2;

//false,a2在索引0处没有元素

四、数组长度

length属性用于标志数组的长度

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

arr.length;

//5 arr数组有5个元素

五、数组元素的添加和删除

push:

//在数组的末尾添加一个元素

var arr = [1,2,3];

arr.push(4,5);

//arr变为[1,2,3,4,5]

delete: //删除数组某个位置的元素

var arr = [1,2,3]

delete arr[1]

//arr变为[1,,3]

1 in arr

//false

六、数组的遍历

数组的遍历通常使用for语句来实现

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

for(var i = 0.i<arr.length;i++){

if(!a[i]) continue;

//跳过null,undefined和不存在的元素

}

七、多维数组

多维数组就是数组里的元素还是数组

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

  arr[1][1];

// 5

八、数组方法

1、 join()

用于将数组中所有元素都转化为字符串 并连接在一起,还可以自定义连接字符

var arr = [1,2,3];

arr.join();

// => "1,2,3"

arr.join("==");   // => "1==2==3";

2、 reverse()

用于将数组元素的顺序颠倒

var arr = [1,2,3];

arr.reverse();

//arr数组变为[3,2,1]

3、 sort();

 //用于对数组内的元素进行排序。可以传入一个函数用作排序,如果为空,则按字母顺序排序。undifined元素排到最后

var arr = [1,2,3];

a.sort(function(a,b){

return a-b; //排序标准 负数 0 正数,比较结果先返回小的那个 

});

//arr数组的值为[1,2,3]

如果第二个条件变为b-a则结果为[3,2,1]

  4、concat()

//用于组合一个新的数组,返回一个新的数组

var arr = [1,2,3]

arrnew = arr.concat(4,5)

//arrnew数组为[1,2,3,4,5]

arrnew1 = arr.concat([4,5],[6,7]);

//arrnew1数组为[1,2,3,4,5,6,7]

  5、slice()

//用于返回数组指定区间的元素组成的数组,如果输入一个参数,则是从这个参数到结束之间的数组。两个参数就是,第一个参数是起始位置,第二个参数是个数。

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

var arr1 = arr.slice(2);

//[3,4,5]

var arr2 = arr.slice(1,3); //[2,3]

 6、splice()

删除或者添加元素。会改变原数组本身,相当于C#中的引用(ref),原数组是删除的元素组成的数组,返回值是剩下的元素组成的数组。

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

var arr1 = arr.splice(1,3);

//arr为[2,3,4],返回的数组arr1为[1,5]

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

var arr3 = arr2.splice(2,0,'a','b');

//从第2位开始删除,删除两个元素,然后从该位置插入'a','b';arr2为[],因为没有删除任何元素,arr3[1,2,'a','b',3,4,5]

  7、 push()与pop()

在数组尾部添加或删除一个元素,添加时返回之为最后一个添加的元素,删除时。返回值为删除的那个元素。

push()

函数在数组尾部添加一个元素。

pop()

函数删除数组的最后一个元素。

var arr = [1,2,3]

arr.push(4);

//arr为[1,2,3,4]

var arr1 = [1,2,3]

arr.pop();

 //arr1为[1,2]

  8、unshift()和shift()

shift(),unshift()与push(),pop()只不过,是在数组头部操作而非尾部。

shift()

在数组头部移除一个元素,返回值为被删元素。

unshift() 在数组头部添加一个元素,返回组为最后一个添加的元素。

var arr = [1,2,3];

var a = arr.shift();

//arr变为[2,3] a为1

var arr1 = [1,2,3];

var b = arr1.unshift([4,5]);

//arr1变为[4,51,2,3],b为4

返回最后一个添加的,先添加5再添加4

9、toString()和toLocaleString()

将数组转化为字符串

var arr = [1,2,3]

arr.toString();

//生成"1,2,3"

与不使用任何参数的join()是一样的。

二、ECMAScript中的数组方法

1、forEach()

forEach() 从头到尾遍历数组,为每个元素调用指定的函数。

    var arr = [1, 2, 3, 4, 5];
        var sum = 0;
        arr.forEach(function (value) {
            sum = sum + value;
        });
        document.write(sum);

//sum最终为15

2、map()

map()方法将调用的数组的每个元素传递给指定的函数,并返回一个数组。

    var arr = [1, 2, 3, 4, 5];
        var arr1 = arr.map(function (value) {
            return value + 1;
        });
        document.write(arr1.join()); //arr1为[2,3,4,5,6]

3、filter()

filter()过滤,返回的元素是调用数组的一个子集,过滤掉不符合条件的元素。

        var arr = [1, 2, 3, 4, 5, 6];
        var arr1 = arr.filter(function (i) { return i % 2 == 0 });
        document.write(arr1.join());

//arr1为[2,4,6]

 

4、every()和some()

every()当且仅当数组里的所有元素调用判定函数都返回true,它才返回true。第一次返回false就停止遍历。

some()当数组里存在一个元素调用判定函数返回true,它就返回true。第一次返回true就停止遍历。

        var arr = [1, 2, 3, 4, 5, 6];
        var a = arr.every(function (x) { return x > 3; });
        var b = arr.some(function(y){ return y > 3; });
        document.write("a的值是:" + a);

//a的值是false,a中不是所有元素大于3
        document.write("b的值是:" + b);

//b的值是true,b中存在元素大于3

5、reduce()和reduceRight()

reduce()

将数组中的元素以指定函数进行组合,生成单个值,第一个参数是简化操作函数,第二个参数是传递给函数的初始值。最后结果是初始值再按组合函数与最后结果计算一次。第二个参数即初始值可以省略,当初始值省略就直接从第一个元素开始计算。

        var arr = [1, 2, 3, 4, 5, 6];
        var count = arr.reduce(function (x, y) { return x + y; },0);
        document.write(count);

 reduceRight();

与reduce()唯一的不同就是它从右至左选择元素进行计算。

6、indexOf()和lastInsexOf()

 indexOf()

indexOf()从头至少尾返回找到的第一个元素的索引。

 lastIndexOf()

lastIndexOf()倒序查找元素,返回第一个找到元素的索引。

        var arr = [1, 2, 3, 2, 1];
        var i = arr.indexOf(2);

//从头至尾搜索,第一次遇见2是arr[1],因此返回1
        var j = arr.lastIndexOf(2);

//从尾至头搜索,第一次遇见2是arr[3],因此返回3
        document.write(i + "<br/>");
        document.write(j);

 7、Array.isArray();

//判定一个对象是否数组对象

        var arr = [1, 2, 3];
        var str = "str1";
        document.write(Array.isArray(arr));

//返回true arr是数组对象
        document.write(Array.isArray(str));

//返回false str是字符串,并非数组对象
 

Javascript 相关文章推荐
js函数返回多个返回值的示例代码
Nov 05 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 #Javascript
javascript中Number的方法小结
Nov 21 #Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 #Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 #Javascript
详解js中call与apply关键字的作用
Nov 21 #Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 #Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 #Javascript
You might like
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
linux中cd命令使用详解
2015/01/08 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
用js重建星际争霸
2006/12/22 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
同学会邀请书大全
2014/01/12 职场文书
军神教学反思
2014/02/04 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
战马观后感
2015/06/08 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL