潜说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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
javascript this详细介绍
Sep 19 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
微信小程序异步处理详解
Nov 10 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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下载远程文件类(支持断点续传)
2008/11/14 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
取得父标签
2006/11/14 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
如何手写简易的 Vue Router
2020/10/10 Javascript
Python字符编码判断方法分析
2016/07/01 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python中的unittest框架实例详解
2021/02/05 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
Android面试题及答案
2015/09/04 面试题
社区平安建设汇报材料
2014/08/14 职场文书
高考学习决心书
2015/02/04 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
士兵突击观后感
2015/06/16 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python