深入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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
Zend Guard使用指南及问题处理
2015/01/07 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
jQuery中last()方法用法实例
2015/01/06 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
Javascript复制实例详解
2016/01/28 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
校园安全演讲稿
2014/05/09 职场文书
片区教研活动总结
2014/07/02 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
校运会班级霸气口号
2015/12/24 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python