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 BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
简明json介绍
Sep 28 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
json字符串对象转换代码实例
Sep 28 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常用技巧总结(附函数代码)
2012/02/04 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
javascript中 try catch用法
2015/08/16 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
js html实现计算器功能
2018/11/13 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue实现拖拽效果
2019/12/23 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
动态创建类实例代码
2009/10/07 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python使用pymysql小技巧
2017/06/04 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python中协程用法代码详解
2018/02/10 Python
Python中存取文件的4种不同操作
2018/07/02 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python操作qml对象过程详解
2019/09/26 Python
Python递归函数特点及原理解析
2020/03/04 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
优秀辅导员事迹材料
2014/02/16 职场文书
大学生求职信例文
2014/06/29 职场文书
体育课外活动总结
2014/07/08 职场文书
2014年服务员工作总结
2014/11/18 职场文书
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python