JavaScript高级程序设计(十):数组类型
先导:
访问对象属性使用的都是点表示法。另外,我们还可以使用方括号表示法来访问对象的属性。在使用方括号的时候,应该将要访问的属性以字符串的形式放到方括号中。这两种方法没有什么区别。但是方括号的优点是可以通过变量来访问属性,还可以在属性名中包含导致语法错误的字符,或者属性名使用关键字或保留字,也可以使用方括号的方式来访问。例如:
var person={
"first name":"yang",
"last name":"mie"
}; //访问person的属性 属性中包含了空格,所以使用方括号访问方式
person["first name"]="yang";
数组类型
数组的每一项可以来保存任何类型的数据,数组长度可以自动调整。
一、数组的定义方式
.new Array构造函数
var array=new Array(); .Array构造函数,初始化固定长度
var array1=new Array(); .构造函数时传递包含项
var array2=new Array("red","green","blue"); .省略new构造数组
var array3=Array();
var array4=Array("red"); .使用数组字面量表示法,数组字面量是由一对包含数组项的方括号表示,多个数组项之间用逗号隔开,例如:
var array5=["red","green","blue"];
二、数组的length属性
作用:1、获取数组的长度; 2、通过设置length属性的值,可以从数组的末尾移除项或向数组中新增项
//利用length属性对数组项移除
var colors=["red","green","blue"]; //包含3项的数组
colors.length=; //设置数组的长度为2
colors[]=undefined; //数组第三项就没有值了 //利用length属性对新增数组项
var colors=["red","green"];
colors[colors.length]='blue'; //新增第三项
colors[]='blue';
三、数组的检测方法
如何检测一个数组的方法:1、instanceof() 2.Array.isArray()
var colors=["red","green","blue"];
console.log(colors instanceof Array); //true var colors=["red","green","blue"];
console.log(Array.isArray(colors)); //true
四、数组的转换方法
所有对象都有toString()、toLocaleString()、ValueOf()方法。
调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而调用valueOf()返回的还是数组。
var colors=["red","green","blue"];
console.log(colors.toString()) // 返回字符串:“red,green,blue” 调用每一项的toString()方法 var colors=["red","green","blue"];
console.log(colors.valueOf()); //返回数组:["red", "green", "blue"] var colors=["red","green","blue"];
console.log(colors.toLocaleString()); //返回字符串:red,green,blue 调用每一项的toLoacleString()方法
数组在转换为字符串的时候,默认的情况下都是以逗号分隔的。而是用join()方法,我们就可以使用不同的分隔符来构建这个字符串。join()方法只接受一个参数,即用作分隔符的字符串,然后返回包含数组项的字符串。例如:
var colors=["red","green","blue"];
console.log(colors.join("#")); //返回结果:red#green#blue
五、数组的操作方法
1、实现类似栈行为的方法:push()和pop()。【栈是一种LIFO(last in fist out,后进先出)的数据结构,即最后添加的项最先被移除】
push()可以接受任意数量的参数;pop()方法则从数组末尾移除最后一项。
var colors=["red"];
colors.push("green","blue"); //add 两项
console.log(colors.toString()); //red,green,blue
console.log(colors.length); // colors.pop(); //移除最后一项
console.log(colors.length); //
2、类似队列行为的方法:shift()和unshift()。【队列是FIFO(fist in fist out,先进先出),即从数组的前端对数组项进行操作】
shift():从数组的前端移除第一项并返回该项(移除的第一项值);unshift():从数组的前端新增任意项并返回新增数组的长度。
var colors=["red"];
var item=colors.shift();
console.log(item); //red var colors=["red"];
var length=colors.unshift("green","blue");
console.log(length; //
3、数组的排序方法:reverse()和sort()
reverse()会反转数组项的顺序;sort()方法按照升序排列数组项:sort()会调用每个数组项的toString()转型方法,然后比较所得到的字符串,以确定如何排序。即使这一组都是数值,sort()也会按照字符串进行排序的。
//reverse()数组项的反转
var arr=[,,,,];
arr.reverse(); //[9, 6, 3, 5, 1] 单纯的反转 //sort()按照字符串进行数组排序
var arr=[,,,,];
arr.sort(); //[1, 3, 5, 6, 9] var arr2=[,,,,];
arr2.sort(); // [1, 15, 16, 2, 8] 字符串排序
如何使sort()排序方法使用于大多数据类型呢?sort()可以接受一个比较函数做为参数:
function compare(val1,val2){
if(val1<val2){
return -;
}else if(val1>val2){
return ;
}else{
return ;
}
}
var arr2=[,,,,];
arr2.sort(compare); //[1, 2, 8, 15, 16] 数值按照大小排序,非字符串 修改compare()方法可以实现降序排列
4、操作方法:
A、concat():在原数组的基础重新构建一个新的数组,先将原数组创建一个副本,然后将接收到的参数添加到副本的末尾,并返回副本。传递给concat的参数是一个或多个数组。
原数组的值保持不变。
var colors=["red"];
var colors2=colors.concat("yellow",["blue","green"]); //参数是一个字符串和一个数组,添加到原数组副本的末尾,形成新的数组
//"red","yellow","blue","green"
B、slice():基于当前数组的一项或多项创建一个新的数组。slice()可以接受一个或两个参数,即返回项的起始位置和结束位置。slice()操作不会影响原数组项。
var colors=["red","yellow","blue","green"];
//只有一个参数 起始位置为0
var colors1=colors.slice(); //从第二项到结尾:["yellow", "blue", "green"] //两个参数
var colors2=colors.slice(,); //["blue", "green"]
注意:如果slice()参数中含有一个负数,则用数组长度加上该数来确定相应的位置。例如,在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到结果相同。
C、splice():向数组中部插入项:删除、插入、替换。
删除:可以删除数组任意数量的项,只需指定2个参数:要删除的第一项的位置和删除的项数。
插入:可以向指定位置插入任意数量的项,只需指定3个参数:起始项,0(若大于0的话,是删除原先位置的项数,然后再插入项),要插入的项;
var colors=["red","yellow","blue","green"];
//删除 返回删除的数组
var item=colors.splice(,);
console.log(colors); //["yellow","blue","green"];
console.log(item); //["item"] //插入不删除任一项,返回空数组
var item2=colors.splice(,,"black"); //从第一个位置插入一项
console.log(colors); //["black","red","yellow","blue","green"];
console.log(item2); //(空的) //替换插入
var item3=colors.splice(,,"black","whilte"); //从第二个位置插入二项
console.log(colors); //["red","black","whilte","blue","green"];
console.log(item3); //(空的)
D、位置方法:lastIndexOf()和IndexOf();
lastIndexOf():从数组的末尾开始向前查找;indexOf():从数组的开头开始向后查找。两个方法都返回要查找的项在数组中的最后匹配项的位置,否则返回-1。查找遵循的规则是:全等操作符,即要求查找项必须严格相等。
var nums=[,,,,,,];
console.log(nums.indexOf()); //5(从起始开始向后查询)
console.log(nums.lastIndexOf()); //3(从末尾开始向前查询)
E、迭代方法:every()、 some() 、filter() 、forEach() 、 map()
every() 和some()相似,都用于查询数组中的项是否满足某个条件。
对于every()来说,传入的函数必须对每一项返回true,这个方法才会返回true,否则返回false。
对于some()来说,传入的函数对数组中某一项返回true,该方法就返回true,否则返回false。
var nums=[,,,,,,]; var everRs=nums.every(function(item,index,arr){
return (item>);
});
//返回 false(1<2的,有一项不满足就返回false) var someRs=nums.some(function(item,index,arr){
return (item>);
});
//返回true(有一项满足就返回true)
filter():对数组中的每一项运行给定函数,返回该函数会返回true的项的数组。
map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
forEach():对数组中的每一项运行给定函数,该方法没有返回值。
var nums=[,,,,,,];
//filter():返回所有大于3的数组
var arr=nums.filter(function(item,index,arr){
retrun item>;
});
//[4,5,4,6] //map():数组中每一项加上3,返回运算后的结果数组。
var mapRs=nums.map(function(item,index,arr){
return (item+);
});
//[4,5,6,7,8,7,9] //forEach():本质同for循环数组
nums.forEach(function(item,index,arr){
//执行某些操作,如遍历数组
console.log(item);
});
//1,2,3,4,5,4,6 (数组每一项的输出)
F、缩小方法:reduce()和reduceRight():两个方法都会迭代数组的所有项,然后构建一个最终值返回。reduce()方法从数组的第一项开始,向后遍历;而reduceRight()则是从数组的最后一项开始,向前遍历。 两个方法的函数都会接收4个参数:前一项,当前项,项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。
var nums=[,,,,,,]; var sum=nums.reduce(function(prev,cur,index,arr){
return pev+cur;
});
console.log(sum); //25(返回所有项的和) //reduceRight()遍历所有值得方向相反,其他操作相同。
JavaScript高级程序设计(十):数组类型的更多相关文章
- 读javascript高级程序设计08-引用类型之Global、Math、String
一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...
- javascript 高级程序设计 十二
1.组合使用原型模式和构造函数模式: 由于原型模式创建对象也有它的局限性------有智慧的人就把原型模式和构造函数模式进行了组合. function Person(name, age, job){/ ...
- 读javascript高级程序设计07-引用类型、Object、Array
一.引用类型 ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法. 创建对象实例的方法时是用new 操作符加构造函数:var p=new Person(). 二.Ob ...
- Javascript高级程序设计——基本包装类型
既然js中的基本类型没有属性和方法那么为什么对字符串进行subString()方法可以呢?基本类型不应该没有方法的吗? 这就是基本包装类型啦! ECMAScript提供了三个特殊的引用类型,Boole ...
- JavaScript高级程序设计之Date类型
ECMAScript 中的 Date 类型是在早期 Java 的 java.util.Date 类基础上构建的. Date 类型使用自 UTC (国际协调时间)1970年1月1日午夜(零时)开始经过的 ...
- javascript 高级程序设计 十
理解JS对象(2)创建对象 JS中创建对象的方式有很多,我们把他们统称为模式. 工厂模式: 优点:解决了创建多个相似对象的问题. 缺点:没有解决对象识别问题.(不知道一个实例对象的类型) func ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- javascript高级程序设计学习笔记
javascript高级程序设计,当枕头书已经好久了~zz 现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...
随机推荐
- A Tour of Go Exercise: Maps
Implement WordCount. It should return a map of the counts of each “word” in the string s. The wc.Tes ...
- 数据结构上机实验dfs&&bfs遍历图
#include<stdio.h> #include<string.h> #include<stdlib.h> #include<queue> #inc ...
- 转载 深入理解JavaScript中的this关键字
转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一 ...
- Web- HTML网页颜色大全
按色相的搭配分类 列举一些最为代表常见的颜色值,让你能快速的找到自己想要的代码 红色 #FFFFCC#CCFFFF#FFCCCC #99CCCC#FFCC99#FFCCCC #FF9999#99669 ...
- 按要求编写一个Java应用程序: (1)定义一个类,描述一个矩形,包含有长、宽两种属性,和计算面积方法。 (2)编写一个类,继承自矩形类,同时该类描述长方体,具有长、宽、高属性, 和计算体积的方法。 (3)编写一个测试类,对以上两个类进行测试,创建一个长方体,定义其长、 宽、高,输出其底面积和体积。
package jvxing; public class Jvxing { //成员变量 private double width; private double chang; public doub ...
- HBase 使用场景和成功案例
有时候了解软件产品的最好方法是看看它是怎么用的.它可以解决什么问题和这些解决方案如何适用于大型应用架构,能够告诉你很多.因为HBase有许多公开的产品部署,我们正好可以这么做.本章节将详细介绍一些人们 ...
- 导出cluster log
将所有群集节点的日志导出到 clog 目录下: get-clusterlog -destination c:\clog 只导出前10分钟的群集日志: get-cluster -destination ...
- ZOJ 3822 Domination 期望dp
Domination Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/showProblem ...
- Android ListView快速定位(三)
方法三: android:fastScrollEnabled="true" 这个很简单,只要把属性设置了,就可以起作用了 不过这个滑块比较丑,当然网上也有自定义图片的例子. 参考 ...
- wcf自身作为宿主的一个小案例
第一步:创建整个解决方案 service.interface:用于定义服务的契约(所有的类的接口)引用了wcf的核心程序集system.ServiceModel.dll service:用于定义服务类 ...