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打开新窗口的2种方式
Apr 18 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
vue实现记事本功能
Jun 26 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
两个php日期控制类实例
2014/12/09 PHP
php分页查询的简单实现代码
2017/03/14 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
axios学习教程全攻略
2017/03/26 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python实现的计算器功能示例
2018/04/26 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
phpquery中文手册
2021/03/18 PHP
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
领导检查欢迎词
2014/01/14 职场文书
联欢晚会主持词
2014/03/25 职场文书
质量标语大全
2014/06/12 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
雨花台导游词
2015/02/06 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技