潜说js对象和数组


Posted in Javascript onMay 25, 2011
/* 
数组和对象 【JavaScript 权威指南 第五版】 
*/ /* 
对象: 是一个无序属性集合, 每个属性都有自己的名字和值 */ 
/* 创建对象简单方法, 对象直接量 */ 
var obj = {}; 
var obj = {name: 'maxthon'}; 
var obj = {name: {}, text: []}; 
/* 可使用 new 操作符 */ 
var a = new Array(); 
var d = new Date(); 
var r = new RegExp('javascript', 'i'); 
var o = new Object(); // var o = {}; 
/* 注: new 操作符后跟构造函数, 所以 
typeof Array; // 'function' 
typeof Object; // 'function' 
Object 是 Function 的实例. 
Function 是特殊的对象, 也是 Object 的实例. 
*/ 
/* 对象属性 */ 
// 使用 . 符合来存取属性的值. 
// 注:同时可使用 [], 里面使用属性名(可使用变量, 这点特别有用). 
var t = {}; 
t.text = 'hello'; 
t.o = {}; 
t.o.name = 'rd'; 
t.n = []; 
var t = { 
"text": "hello" 
}; 
console.log(t.text); // 'hello'; 
// 补充: 通常使用关键字 var 来声明变量, 但是声明对象属性时, 不能使用 var 声明 

/* 对象枚举 */ 
var F = function () {}; 
F.prototype.name = 'RD'; 
var obj = new F; 
for (var key in obj) { 
console.log(key); // name; 
} 
// 仅枚举对象自身, 不沿原型链向上查 
for (var key in obj) { 
if (obj.hasOwnProperty(key)) { 
console.log(key); // 
} 
} 
/* 注: for in 不能枚举出预定义属性; toString. */ 

/* 检查属性存在性 */ 
window.a = 'rd'; 
console.log(a in window); // true; 
var F = function () {}; 
F.prototype.name = 'RD'; 
var obj = new F; 
console.log('name' in obj); // true; 

var toString = Object.prototype.toString; 
// 如果对象 obj, 含有方法 getName, 则执行它; 
if (obj.getName && toString.call(obj.getName) === '[object Function]') ) { 
obj.getName(); 
} 
// 补充: 
console.log(null == undefined); // true; 
console.log(null !== undefined); // true; 

/* 删除属性 */ 
delete obj.name; 
// 补充: 使用 delete 操作符, 不能删除使用 var 声明的变量; 

/* 作为关联数组的对象 */ 
// 取对象属性: 
obj.name; 
obj['name']; // 这里 name 为字符串. 
// 使用 [] 表示时, 属性名是用字符串来表示的. 那么可 
// 在运行过程中进行添加等操作 
// 注:当此属性是做为变量传递时, 特别有用. 
// 又称 关联数组 
/* 映射: JavaScript 对象把字符串(属性名) 映射成值. */ 
for (var key in obj) { 
console.log(key); // key 属性名, 此处 做为值存在. 
} 

/* 
通用的 Object 属性和方法 
JavaScript 中所有对象都继承自 Object 类; 
1, constructor 属性. 
指向其构造函数. 
*/ 
var F = function () {}; 
var f = new F; 
console.log(f.constructor == F); // true 
// 构造函数的原型存在属性 constructor 指向自己; 
F.prototype.constructor == F; 
// 补充: 
var F = function () {}; 
var G = function () {}; 
G.prototype = new F; 
var g = new G; 
console.log(g.constructor == F); // true; 
console.log(g.constructor == G); // false; 
// 可使用 g instanceof F; 

/* 
2, toString() 方法 
*/ 
{'name': 'maxthon'}.toString(); // '[object Object]' 
/* 数组使用 toString 方法, 把会元素组成字符串, 其它对象会转化为 [object Object]; 
函数使用原始 toString 方法, 会得到函数源码 */ 
['a', 'b', 1, false, ['e','f'], {}].toString(); 
// "a,b,1,false,e,f,[object Object]" 
function t() { 
console.log('test'); 
} 
t.toString(); 
// 源码 
/* 
3, toLocalString(); 
返回对象的一个本地化字符串 
4, valueOf(); 
在转化为基本类型时, 会使用到. valueOf/toString. 
5, hasOwnProperty(); 
6, propertyIsEnumberable(); 
是否可枚举出来; 
7, isPrototyeOf(); 
a.isPrototyeOf(b); 
如果 a 是 b 的原型, 则返回 true; 
*/ 
var o = {}; // new Object; 
Object.prototype.isPrototyeOf(o); // true; 
Object.isPrototyeOf(o); // false; 
o.isPrototyeOf(Object.prototype); // false; 
Function.prototype.isPrototyeOf(Object); // true; 
/* 【闭包是存在函数实例, 垃圾没有回收是存在赋值引用】 */ 

/* 
数组: 有序的、值的集合; 
每个值, 也叫元素, 对应一个下标; 
下标是从 0 开始; 
数组中值, 可以为任何类型. 数组, 对象, null, undefined. 
*/ 
// 创建. 
var arr = []; 
var arr = new Array(); 
var t = ''; 
var arr = [1,2,3, null, undefined, [], {}, t]; 
/* 使用 new 操作符创建数组的3种情况: */ 
var arr = new Array(); // [], 和直接量相同 
var arr = new Array(5); // 长度为 5; []直接量是无法做到的. 
console.log(arr); // []; JavaScript 引擎会无视 undefined; 
var arr = new Array('5'); // 值为 ['5']; 
var arr = new Array('test'); // 值为 ['test']; 
/* 相关实例 */ 
var s = [1, 2, 3]; 
s[5] = 'a'; 
console.log(s); 
[1, 2, 3, undefined, undefined, 'a'] 

/* 数组的读和写 */ 
value = array[0]; 
a[1] = 3.14; 
i = 2; 
a[i] = 3; 
a[a[i]] = a[0]; 
// 数组 -> 对象 -> 属性 
array.test = 'rd'; 
// 数组下标大于等于 0, 并且小于 2的32次方 减 1 的整数. 
// 其它值, JavaScript 会转化成字符串, 做为对象属性的名字, 不再是下标. 

var array = []; 
array[9] = 10; // array 长度会变成 10; 
// 注: JavaScript 解释器只给数组下标为 9 的元素分配内存, 其它下标无. 
var array = []; 
array.length = 10; // 添加 array 的长度; 
array[array.length] = 4; 

/* 删除数组元素 */ 
// delete 运算符把一个数组元素设置为 undefined 值, 但是元素本身还是存在的. 
// 真正删除, 可以使用: Array.shift();【删除第一个】 Array.pop();【删除最后一个】 Array.splice();【从一个数组中删除一个连续范围】 或修正 Array.length 长度; 
/* 相关实例 */ 
var a = [1, 2, 3]; 
delete a[1]; 
console.log(a); // [1, undefined, 3]; 
/* 补充: JavaScript 权威指南 第五版 59页 
由 var 声明的变量是永久性的, 也就是说, 用 delete 运算符来删除这些变量将会引发错误. 
但: 在开发者工具里面, 是可以删除的. 而在网页中, 正如书上所写. 
*/ 

/* 数组长度 */ 
[].length; 

/* 遍历数组 */ 
var array = [1, 2, 3, 4, 5]; 
for (var i = 0, l = array.length; i < l; i++) { 
console.log(array[i]); 
} 
array.forEach(function (item, index, arr) { 
console.log(item); 
}); 
/* 截取或增长数组: 修正 length 长度, 前面已提过 */ 
/* 多维数组 */ 
[[1], [2]] 
/* 数组方法 */ 
// join 
var array = [1, 2, 3, 4, 5]; 
var str = array.join(); // 1,2,3,4,5 
var str = array.join('-'); // 1-2-3-4-5 
// 注: 此方法与 String.split() 方法相反; 
// reverse(); 
var array = [1, 2, 3, 4, 5]; 
array.reverse(); // [5, 4, 3, 2, 1] 
// 注:修改原数组; 
// sort(); 
var array = [1, 3, 2, 4, 5, 3]; 
array.sort();// [1, 2, 3, 3, 4, 5]; 
/* 注: 数组中存在未定义元素, 把这些元素放到最后 */ 
/* 同时可自定义排序, sort(func); 
func 接收两个参数, 如果第一个参数应该位于第二个参数之前, 那么比较函数将返回一个小于0的数, 相反, 返回大于0的数. 相等, 返回0; 
*/ 
array.sort(function (a, b) { 
return b - a; 
}); 
// 实例: 按奇数到偶数, 并且从小到大排序 
[1, 2, 3, 4, 5, 6, 7, 2, 4, 5, 1].sort(function (a, b) { 
if (a % 2 && b % 2) { 
return a - b; 
} 
if (a % 2) { 
return -1; 
} 
if (b % 2) { 
return 1; 
} 
return a - b; 
}); 

// concat() 方法. 合并数组, 但不深度合并 
var a = [1, 2, 3]; 
a.concat(4, 5); // [1, 2, 3, 4, 5] 
a.concat([4, 5]); // [1, 2, 3, 4, 5] 
a.concat([4, 5], [8, 9]); // [1, 2, 3, 4, 5, 8, 9] 
a.concat([4, 5], [6, [10, 19]]); // [1, 2, 3, 4, 5, 6, [10, 19] ] 

// slice() 方法. 源数组不改变. 
var a = [1, 2, 3, 4, 5]; 
a.slice(0, 3); // [1, 2, 3] 
a.slice(3); // [4, 5]; 
a.slice(1, -1); // [2, 3, 4] 
a.slice(1, -1 + 5) 
a.slice(1, 4); 
a.slice(-3, -2); // [3] 
a.slice(-3 + 5, -2 + 5); 
a.slice(2, 3); 
/* 注: 
不包括第二个参数指定的元素. 
负值转化为: 负值 + 数组长度 
*/ 
// splice(pos[, len[, a, b]]) 方法. 删除指定位置开始后, 指定长度元素, 再缀加元素; 
// 返回删除元素组成的数组. 原数组改变. 
var a = [1, 2, 3, 4, 5, 6, 7, 8]; 
a.splice(4); // [5, 6, 7, 8]; 此时 a: [1, 2, 3, 4] 
a.splice(1, 2); // [2, 3]; 此时 a: [1, 4]; 
a.splice(1, 1); // [4]; 此时 a: [1]; 
var a = [1, 2, 3, 4, 5]; 
a.splice(2, 0, 'a', 'b'); // [1, 2, 'a', 'b', 3, 4, 5] 
a.splice(2, 2, [1, 2], 3); // ['a', 'b']; 此时 a: [1, 2, [1, 2], 3, 3, 4, 5] 
/* 注: 
第二个参数后的参数, 直接插入到处理数组中。 
第一个参数可为负数. 
*/ 

// push() 方法和pop() 方法. 
// push() 可以将一个或多个新元素附加到数组的尾部, 然后返回数组新长度; 
// pop() 删除数组中的最后一个元素, 减少数组的长度, 返回它删除的值. 
// 注:两个方法都在原数组上修改, 而非生成一个修改过的数组副本. 
var stack = []; 
stack.push(1, 2); // stack: [1, 2]; return 2; 
stack.pop(); // stack: [1]; return 2; 删除的元素值 
stack.push(3); // stack: [1, 3]; return 2; 
stack.pop(); // stack: [1]; return 3; 删除的元素值 
stack.push([4, 5]); // stack: [1, [4, 5]]returm 2; 
stack.pop(); // stack: [1]; return [4, 5]; 删除的元素值 
// unshift() 方法和 shift() 方法. 同上, 从数组头开始. 

// toString() 方法和 toLocalString() 
[1, 2, 4].toString(); // 1,2,3; 
['a', 'b', 'c'].toString(); // 'a,b,c'; 
// 和无参数的 join 方法相同. 

/* jsapi 新添方法:map, every, some, filter, forEach, indexOf, lastIndexOf, isArray */ 

/* 类似数组的对象 */ 
arguments 
document.getElementsByTagName();
Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 #Javascript
javascript中万恶的function实例分析
May 25 #Javascript
js 页面关闭前的出现提示的实现代码
May 25 #Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 #Javascript
IE6/7/8/9不支持exec的简写方式
May 25 #Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 #Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 #Javascript
You might like
如何把PHP转成EXE文件
2006/10/09 PHP
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php格式化时间戳
2016/12/17 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python里dict变成list实例方法
2019/06/26 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
python使用smtplib模块发送邮件
2020/12/17 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
学前教育学生自荐信范文
2013/12/31 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
请假条应该怎么写?
2019/06/24 职场文书