先导:

  访问对象属性使用的都是点表示法。另外,我们还可以使用方括号表示法来访问对象的属性。在使用方括号的时候,应该将要访问的属性以字符串的形式放到方括号中。这两种方法没有什么区别。但是方括号的优点是可以通过变量来访问属性,还可以在属性名中包含导致语法错误的字符,或者属性名使用关键字或保留字,也可以使用方括号的方式来访问。例如:

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高级程序设计(十):数组类型的更多相关文章

  1. 读javascript高级程序设计08-引用类型之Global、Math、String

    一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...

  2. javascript 高级程序设计 十二

    1.组合使用原型模式和构造函数模式: 由于原型模式创建对象也有它的局限性------有智慧的人就把原型模式和构造函数模式进行了组合. function Person(name, age, job){/ ...

  3. 读javascript高级程序设计07-引用类型、Object、Array

    一.引用类型 ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法. 创建对象实例的方法时是用new 操作符加构造函数:var p=new Person(). 二.Ob ...

  4. Javascript高级程序设计——基本包装类型

    既然js中的基本类型没有属性和方法那么为什么对字符串进行subString()方法可以呢?基本类型不应该没有方法的吗? 这就是基本包装类型啦! ECMAScript提供了三个特殊的引用类型,Boole ...

  5. JavaScript高级程序设计之Date类型

    ECMAScript 中的 Date 类型是在早期 Java 的 java.util.Date 类基础上构建的. Date 类型使用自 UTC (国际协调时间)1970年1月1日午夜(零时)开始经过的 ...

  6. javascript 高级程序设计 十

    理解JS对象(2)创建对象   JS中创建对象的方式有很多,我们把他们统称为模式. 工厂模式: 优点:解决了创建多个相似对象的问题. 缺点:没有解决对象识别问题.(不知道一个实例对象的类型) func ...

  7. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  8. 读javascript高级程序设计-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  9. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

随机推荐

  1. Theme使用的几点注意事项

    Theme.Holo主题在android4.0 及其以上不需要任何支持包,继承Activity即使用,但google不推荐该用法 Theme.Material主题在android5.0及其以上不需要依 ...

  2. uml 在需求分析阶段的应用

    上一篇博客写了uml在软件开发过程中的应用,这以篇要详细介绍一下UML在需求分析过程中的应用. 以机房收费系统为例进行讲解,先介绍一个该系统. 首先该系统的用户分为三个等级,一般用户,操作员,管理员, ...

  3. linux添加ssh用户

    正好有朋友问,就转过来分享下. 转自:http://blog.sina.com.cn/s/blog_6fc583e70100n6rm.html 测试环境:CentOS 5.5 1.添加用户,首先用ad ...

  4. BZOJ 1878: [SDOI2009]HH的项链 离线树状数组

    1878: [SDOI2009]HH的项链 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  5. 17周 oj 比較大小 类模板

    /*声明一个类模板,利用它分别实现两个整数. 浮点数和字符的比較,求出大数和小数. 说明:在类模板外定义各成员函数. 输入两个整数.两个浮点数和两个字符 从大到小输出两个整数.两个浮点数和两个字符 * ...

  6. android134 360 07 归属地查询

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  7. careercup-中等难题 17.2

    17.2 设计一个算法,判断玩家是否赢了井字游戏. 解法: 假设这个检查某人是否赢得了井字游戏的函数为HasWon,那么我们第一步要向面试官确认, 这个函数是只调用一次,还是要多次频繁调用.如果是多次 ...

  8. JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本

    一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...

  9. AT-Fragment

    关于Fragment的粗略翻译 英文版api地址:Fragment(自备梯子) Fragment    类概述(Class Overview):        Fragment是一种可以替换Activ ...

  10. about semget

    flags must include read,write,execute permission. for examples: semget( 3333, 1, IPC_CREAT | IPC_EXC ...