深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)


Posted in Javascript onDecember 01, 2015

继承是OO语言中的一个最为人津津乐道的概念。 许多OO语言都支持两种继承方式:接口继承和实现继承。 接口继承只继承方法签名,而实现继承则继承实际的方法。 如其所述,由于函数没有签名,在ECMAScript中无法实现接口继承。 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

1.使用对象字面量定义对象

var person={};

使用这种方式创建对象时,实际上不会调用Object构造函数。

开发人员更喜欢对象字面量的语法。

2.有时候需要传递大量可选参数的情形时,一般来讲使用对象字面量来封装多个可选参数。

3.对象属性的点表示法与方括号表示法的区别

(1)功能上:两者没区别

(2)但是方括号的有点是可以通过变量来访问属性

例如:

var person={
  name:"Nic"
}

点表示法:person.name

方括号表示法:var prop=“name”;
                        person[prop]

(3)还有一个优点是:

如果属性名中包含会导致语法错误的字符或者关键字,保留字时候,使用方括号不会错

例如:person["first name"]="OK";

(4)通常,建议使用点表示法

4.创建数组的问题

var colors=[1,2,]    //不要这样。这样会创建一个包含2个或3个项的数组
var opy=[,,,,,]    //不要这样。这样会创建一个包含5个或6个项的数组

这是因为IE8及之前的版本在实现数组字面量方面有bug

使用字面量创建数组时,不会调用Array构造函数

5.如果设置某个值的索引超过了数组现有项数。

如:var color=[1,2,3]

color[3]时,数组会自动增加到该索引值加1的长度

这时,color[3]的值就是undefined

6.数组的length不只是只读的。通过设置length该属性,可以不断向数组末尾添加新项。

7.数组转换成字符串 toString() join()

array.toString()  //返回以逗号分隔的字符串
array.valueOf()  //返回的还是数组
array.join(",")  //也可以

8.数组的栈方法 push() pop()

栈是一种数据结构,也就是最新添加的项最早被移除(后进先出)。而栈中项的插入和移除,只发生在一个位置--栈的顶部。
ECMAScript提供了push()与pop()方法来实现这种栈。

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

pop() 方法用于删除并返回数组的最后一个元素。

例子:

var arr=[];
var count=arr.push('a','b');  //count=2
arr.push('c');
var item=arr.pop();  //移除最后一项 c item=c 并且改变数组长度

9.队列方法 shift() unshift()

队列数据的访问规则是先进先出
ECMAScript提供了shift()来实现。
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

10.重排序方法 sort() reverse()

ECMAScript提供了sort()与reverse()来实现。

sort()会调用每个数组项的tostring()方法,比较得到的字符串来排序。

11.数组的拼接 concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

12.slice() 方法可从已有的数组中返回选定的元素。 

13.位置方法:indexOf()与lastIndexOf()

14.迭代方法

ECMAScript5定义了下列5种方法,该5种方法都接收三个参数:数组项的值,该项在数组中的位置,数组对本身                                       

every(),filter(),forEach(),map(),some()

例子:

var num=[1,2,3,4];
var res=num.every(function(item,index,array){
  return (item>2)
})  //false  必须每一项都大于2,才返回true
var res=num.some(function(item,index,array){
  return (item>2)
})  //true 只要有一个大于2,就返回true
var res=num.filter(function(item,index,array){
  return (item>2)
})  //[3,4]   
var res=num.forEach(function(item,index,array){
  return (item>2)
})  //[1,4,9,16]

javascript 数组对象中的迭代方法

/* javascript 数组对象中的迭代方法 
 * ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象【可选】。 


 * 进行迭代的函数接受三个参数,第一个是数组中要进行迭代的元素的值,第二个是数组候总要进行迭代的元素的位置,第三个是迭代数组本身。 


* 1. every()  对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true 
 * 2. filter() 对数组中的每一项运行给定的函数,返回该函数返回true的项组成的数组。 
 * 3. forEach() 对数组中的每一项运行给定的函数,这个方法没有返回值 
 * 4. map()   对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组 
 * 5. some()  对数组中的每一项运行给定的函数,如果该函数对任意一项返回true,则返回true 
 * 
 * 这些迭代方法支持的浏览器有,IE9+,Firefox2+,Safari3+,Opera 9.5+,chrome 
 */ 
var num = [1,2,3,4,5,6,7,8,9]; 
var everyResult = num.every(function(item, index, array) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(everyResult); 
var someResult = num.some(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(someResult); 
var filterResult = num.filter(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(filterResult); 
var mapResult = num.map(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(mapResult); 
var forEachResult = num.forEach(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(forEachResult);
Javascript 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
BootStrap 导航条实例代码
May 18 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
js跨域请求数据的3种常用的方法
Dec 01 #Javascript
jQuery插件实现多级联动菜单效果
Dec 01 #Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 #Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
Vue渲染函数详解
2017/09/15 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python创建文本文件的简单方法
2020/08/30 Python
python中类与对象之间的关系详解
2020/12/16 Python
个人找工作自荐信格式
2013/09/21 职场文书
无故旷工检讨书
2014/01/26 职场文书
运动会通讯稿200字
2014/02/16 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
档案管理员岗位职责
2015/02/12 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电