一、数组简介

    JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可以随着数据的添加而自动增长以扩容纳新增数据。

 

二、数组的操作

1.创建

		//创建一个空数组
var arr = [];
var arr2 = [1,true,new Date()];
arr2.length = 2;
alert(arr2); //true

 

2.pop和push方法

     push(): 向数组的末尾添加一个或更多元素,并返回新的数组长度。

     pop(): 删除数组末尾元素,并把它返回。

		     /*
* push(): 向数组的末尾添加一个或更多元素,并返回新的长度。
* pop(): 删除并返回数组最后一个元素。
*/
var arr = [];
var length = arr.push(1,2,true,"abc");
alert(arr); //1,2,true,abc
alert(length); //4 var a = arr.pop();
alert(arr); //1,2,true
alert(a); //abc

 

3.shift和unshift方法

     shift(): 删除并返回数值的第一个元素。

     unshift(): 向数组的开头添加一个或多个元素,并返回新的数组长度。

            /*
* shift(): 删除并返回数组的第一个元素
* unshift(): 向数组的开头添加一个或更多元素,并返回新的长度。
*/
var arr = [1,true,"abc"];
var a = arr.shift();
alert(a);//1
alert(arr);//true,abc
var length = arr.unshift("A","B");
alert(length);//4
alert(arr);//A,B,true,abc
</script>

 

4.splice()和slice()

      splice()

     解释: 向/从数组中添加/删除项目,然后返回被删除的内容。

     语法: arr.splice(index,num,item1,item2,...,itemN);

参数 描述
index 必需。整数,规定了要操作的位置。
num 必须。要删除的数量,如果为0,则不会删除。
item 可选。向数组添加新的一项。
			var arr = ["AAA","BBB","CCC","DDD","EEE"];
var newArr = arr.splice(1,1);
alert(newArr);//BBB
alert(arr);//AAA,CCC,DDD,EEE
arr.splice(1,0,"111","222");
alert(arr); //AAA,111,222,CCC,DDD,EEE

 

     slice()

     解释: 向已有的数组中返回选定的元素。

     语法: arr.slice(start,end);

参数 描述
start 必需。规定从何处开始选取。
end 可选。规定从何处结束选取。

    注意: 该方法并不会修改数组而是返回一个子数组,如果想删除数组中的一段元素,用splice()。

			var arr = ["AAA","BBB","CCC","DDD","EEE"];
var newArr = arr.slice(1,3);
alert(newArr);//BBB,CCC
alert(arr);//AAA,BBB,CCC,DDD,EEE

 

5.concat()

     解释: 该方法用于多个数组或元素,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

     语法: arr.concat(arr1,arr2,...,arrN);

     参数: 可以是具体值也可以是数组对象。

			var arr = ["AAA","BBB","CCC"];
var newArr = arr.concat("DDD","EEE");
alert(newArr); // AAA,BBB,CCC,DDD,EEE
alert(arr); // AAA,BBB,CCC
var arr2 = ["111","222"];
var newArr2 = arr.concat(arr2);
alert(newArr2); // AAA,BBB,CCC,111,222
alert(arr); // AAA,BBB,CCC

 

6.join()

     解释: 用于把数组中的所有元素放入一个字符串,元素是通过指定分隔符进行分割。

     语法: arr.join(separator)

     参数: 可选,指定要使用的分隔符,如果省略就使用逗号分隔。

			var arr = ["AAA","BBB","CCC"];
var a = arr.join("-");
alert(a); // AAA-BBB-CCC
alert(arr); // AAA,BBB,CCC

 

7.reverse()

     该方法用于颠倒数组元素的位置,会改变原来的数组。

			var arr = ["AAA","BBB","CCC"];
arr.reverse();
alert(arr); // CCC,BBB,AAA

 

8.sort()

     解释: 用于对数组的元素进行排序。

     语法: arr.sort(sortby)

     参数: 规定排序顺序必须是函数。

     注意:

           (1)数组在原数组上进行排序,不生成副本。

           (2)如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序。

			var arr = ["AAA","DDD","EEE","BBB","CCC"];
arr.sort();
alert(arr); // AAA,BBB,CCC,DDD,EEE var arr2 = [1,11,22,2,3,4,44,6];
arr2.sort();
alert(arr2); //1,11,2,22,3,4,44,6 function numFormat(a,b){
return a - b;
}
arr2.sort(numFormat);
alert(arr2); // 1,2,3,4,6,11,22,44

 

三、数组新特性

1.位置方法

indexOf(): 返回某个指定的值在数组首次出现的位置索引。

lastIndexOf(): 从后查找,返回当前值的索引位置。

			var arr = [1,2,3,4,5,4,3,2,1];
//1个参数: 参数是值,返回索引位置
var index = arr.indexOf(4);
//两个参数:第一个表示起始位置,第二个参数还是值
var index2 = arr.indexOf(4,4);
//从后往前查找,返回索引位置
var index3 = arr.lastIndexOf(2);
alert(index); //3
alert(index2); //5
alert(index3); //7

 

2.迭代的方法

(1)every

    对数组的每一项运行给定函数,如果该函数对每一项都返回true,这个方法都返回true,否则就返回false。即检测数组的每一项是否符合条件。

   

			var arr = [1,2,3,4,5,4,3,2,1];
var result = arr.every(function(item,index,array){
return item > 2;
});
alert(result); //false

 

(2)some

    对数组中的每一项运行给定函数,只要传入函数对数组中的某一项返回true,就会返回true。即检测数组中是否某些有符合条件的。

    

			var arr = [1,2,3,4,5,4,3,2,1];
var result = arr.some(function(item,index,array){
return item > 2;
});
alert(result); //true

 

(3)filter

    对数组的每一项运行给定函数,如果返回true,那么把这些返回true的项组成新数组返回过去。即筛选出数组符合条件的项,组成新数组。

    

			var arr = [1,2,3,4,5,4,3,2,1];
var result = arr.filter(function(item,index,array){
return item > 2;
});
alert(result); //3,4,5,4,3

 

(4)map

    对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。即让数组通过计算产生一个新的数组。

   

			var arr = [1,2,3,4,5,4,3,2,1];
var result = arr.map(function(item,index,array){
return (item * 2);
});
alert(result); //2,4,6,8,10,8,6,4,2

 

(5)forEach

     对数组中的每一项都运行给定函数,该方法没有返回值。本质上和for循环迭代数组一样。

    

			var arr = [1,2,3,4,5,4,3,2,1];
arr.forEach(function(item,index,array){
//执行某些操作
alert(item);
});

3.缩小的方法

(1)reduce

     该方法会迭代数组的所有项,然后构建一个最终的返回值,这个方法是从第一项开始,逐个遍历到最后。

			var arr = [1,2,3,4,5];
var result = arr.reduce(function(pre,cur,index,array){ return pre + cur;
});
alert(result); //15

    第一次执行回调函数,pre是1,cur是2。第二次,pre是3,cur是3。这个过程会持续把数组中的每一项都访问一遍,最后返回结果。

 

(2)reduceRight

     该方法会迭代数组的所有项,然后构建一个最终的返回值,这个方法是从最后一项开始,逐个遍历到第一项。

			var arr = [1,2,3,4,5];
var result = arr.reduceRight(function(pre,cur,index,array){ return pre + cur;
});
alert(result); //15

     第一次执行回调函数,pre是5,cur是4。第二次,pre是9,cur是3。这个过程会持续把数组中的每一项都访问一遍,最后返回结果。

     使用reduce()还是reduceRight(),主要取决于从哪头开始遍历数组,其他完全一样。

JavaScript基础学习(三)—数组的更多相关文章

  1. JavaScript 基础 学习(三)

    JavaScript 基础 学习(三) 事件三要素 ​ 1.事件源: 绑定在谁身上的事件(和谁约定好) ​ 2.事件类型: 绑定一个什么事件 ​ 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...

  2. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  3. JavaScript 基础 学习 (一)

    JavaScript 基础 学习 获取页面中的元素的方法 作用:通过各种方式获取页面中的元素 ​ 比如:id,类名,标签名,选择器 的方式来获取元素 ​ 伪数组: ​ 长的和数组差不多,也是按照索引排 ...

  4. JavaScript基础(三)

    十三.JS中的面向对象 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...

  5. 48.javascript基础学习

    javascript基础学习:   http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...

  6. JavaScript 基础学习(二)js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  7. JavaScript 基础 学习 (四)

    JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 ​ 元素.on事件类型 = null ​ 因为赋值的关系,所以给事件赋值为 null 的时候 ​ 事件触发的时候,就没有事件处理 ...

  8. Python入门基础学习 三

    Python入门基础学习 三 数据类型 Python区分整型和浮点型依靠的是小数点,有小数点就是浮点型. e记法:e就是10的意思,是一种科学的计数法,15000=1.5e4 布尔类型是一种特殊的整形 ...

  9. Python基础学习三

    Python基础学习三 1.列表与元组 len()函数:可以获取列表的元素个数. append()函数:用于在列表的最后添加元素. sort()函数:用于排序元素 insert()函数:用于在指定位置 ...

随机推荐

  1. CLOSE_WAIT TIME_WAIT

    TCP状态转移要点    TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不会被释放.网络服务器程序要同时 ...

  2. EFcore与动态模型

    在开发商城系统的时候,大家会遇到这样的需求,商城系统里支持多种商品类型,比如衣服,手机,首饰等,每一种产品类型都有自己独有的参数信息,比如衣服有颜色,首饰有材质等,大家可以上淘宝看一下就明白了.现在的 ...

  3. 智能打印SDK---官方博客

    (开源准备:开源为百度云打包开源,GIT太慢,SVN没有免费的,TFS有免费的也慢的要命) 开源地址:http://pan.baidu.com/s/1miobLoO 电子商务越来越成熟,提供的服务越来 ...

  4. 读书笔记 effective c++ Item 10 让赋值运算符返回指向*this的引用

    一个关于赋值的有趣的事情是你可以将它们链在一起: int x, y, z; x = y = z = ; // chain of assignments 同样有趣的是赋值采用右结合律,所以上面的赋值链被 ...

  5. Spark_总结四

    Spark_总结四 1.Spark SQL     Spark SQL 和 Hive on Spark 两者的区别?         spark on hive:hive只是作为元数据存储的角色,解析 ...

  6. alisql安装步骤

    卸载原有自带的Mysql yum remove mysql-libs   安装依赖包 yum install centos-release-scl devtoolset-4-gcc-c++ devto ...

  7. NDK 开发(Android.mk配置)

         在我写这篇文章的时候,Android Studio已经是2.3版本了,已经集成CMake 编译工具, 用户只需在 新建项目的时候,添加选项(Include C++ support),Andr ...

  8. Vue学习之路---No.2(分享心得,欢迎批评指正)

    昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2. ...

  9. Struts2学习笔记①

    Struts2 学习笔记① 所有的程序学习都从Hello World开始,今天先跟着书做一个HW的示例. Struts2是一套MVC框架,使用起来非常方便,接触到现在觉得最麻烦的地方是配置文件.我的一 ...

  10. 3359: [Usaco2004 Jan]矩形

    3359: [Usaco2004 Jan]矩形 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 8  Solved: 5[Submit][Status] ...