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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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
基于mysql的bbs设计(四)
2006/10/09 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
为什么会有内存对齐
2016/10/10 面试题
卫生标语大全
2014/06/21 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
农村婚庆主持词
2015/06/29 职场文书
德能勤绩工作总结
2015/08/11 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS