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简介 ...
随机推荐
- hdoj 2051 Bitset
Bitset Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- [iOS基础控件 - 1] UI概念
A. UIView 1.概念 属于UIKit框架 屏幕上能看得见摸得着的东西就是UIView,比如屏幕上的按钮.文字.图片 翻译为:视图/控件/组件 UIBut ...
- 关于 JavaScript 数据类型判断
在 JavaScript 中,有 undefined.null.number.string.boolean 五种基本数据类型,另外,有一种复杂数据类型 object ,类似于 C# 中值类型.引用类型 ...
- 3DES一些说明
3DES:是在DES的基础上采用三重DES,即用两个56位的密钥K1,K2,发送方用K1加密,K2解密,再使用K1加密.接收方使用K1解密,K2加密,再使用K1解密, 3DES实现: 主要有CBC,E ...
- [转]SpringMVC日期类型转换问题三大处理方法归纳
http://blog.csdn.net/chenleixing/article/details/45190371 前言 我们在SpringMVC开发中,可能遇到比较多的问题就是前台与后台实体类之间日 ...
- Indesign多媒体富交互插件【MagBuilder】与iOS app 【MagViewer】介绍
[写在前面]进园子有一段时间了,从来都是看别人的文章,自己的一点东西都记在本地笔记里,现在想把一些东西拿来出分享,希望能够认识一些志同道合的朋友和老师. 学习Adobe插件开发的初衷是为了给PS做插件 ...
- iOS利用视频做起始页
一个好的引导页会使得用户体验大大提升,利用视频来做,可以更简单的达到优雅的效果.使用MediaPlayer.framework框架下的AVPlayerLayer,它和Core Animation紧密地 ...
- Android手机中获取手机号码和运营商信息
代码如下: package com.pei.activity; import android.app.Activity; import android.os.Bundle; import androi ...
- 应用:ValueStack
理解ValueStack的基本机制!对各种现象作出解释. ValueStack实际上就是对OGNL的封装,OGNL主要的功能就是赋值与取值,Struts2正是通过ValueStack来进行赋值与取值的 ...
- 使用 Docker 搭建 Java Web 运行环境
黄勇的博客 Docker 是 2014 年最为火爆的技术之一,几乎所有的程序员都听说过它.Docker 是一种“轻量级”容器技术,它几乎动摇了传统虚拟化技术的地位,现在国内外已经有越来越多的公司开始逐 ...