【追寻javascript高手之路03】javascript对象大乱斗

前言

昨天咱们学习了下javascript中函数的参数与做用域的东东，如今回过头来看，其实都是与函数相关的，因此javascript中的函数仍然是王道，咱们今天大概会发二篇或者三篇博客一块儿来巩固咱们的javascript吧！

PS：各位，阿里失败啦，这个事情没必要关心啦......我下周再找工做了

object 类型

咱们有两种方式可定义一个对象：

1 var object = {};
2 var object = new Object();

PS：根据对象字面量建立的对象不会调用Object构造函数

javascript中的对象相似于咱们的hashtable，是一种键值对的形式，他能够以不一样维度方式展现，某些时候甚至能够模拟咱们的数据库结构！

对象在内存的存储方式是将具体的存在堆里面，而在栈里面保存一个引用，因此咱们常常遇到两个有意思的东东，

一个是引用赋值，后者变化而影响前者，一者就是深度克隆了，咱们在此看看这两个东东：

1 var a = { a: 6 };
2 alert(a.a);//6
3 var b = a;
4 b.a = 66;
5 alert(a.a);//66

这个题，咱们昨天就见过了，这里再提出来讲下，因而咱们来看看深度克隆呢：

PS：这里先科普一下克隆吧，可能有些朋友还不知道什么意思呢

浅度克隆：基本类型为值传递，对象仍为引用传递。
深度克隆：全部元素或属性均彻底克隆，并于原引用类型彻底独立，即，在后面修改对象的属性的时候，原对象不会被修改。

这里还会用到下面这个东东：

hasOwnProperty：
是用来判断一个对象是否有你给出名称的属性或对象。不过须要注意的是，此方法没法检查该对象的原型链中是否具备该属性，该属性必须是对象自己的一个成员。

 1 function cloneObj(obj) {
 2     var o = obj.constructor == Array ? [] : {}; //首先处理变量，看看是数组仍是对象啦
 3     for (var k in obj) {
 4         //咱们知道for in 会将原型的东西也给遍历出来，因此咱们这里须要作一个判断
 5         if (obj.hasOwnProperty(k)) {
 6             //递归方式处理
 7             o[k] = typeof obj[k] === 'objext' ? cloneObj(obj[k]) : obj[k];
 8         }
 9     }
10     return o;
11 }
12 
13 var a = { a: 'aaa', b: 'bbb', c: { d: 'ddd', e: [1, 2, 4]} };
14 var b = cloneObj(a);
15 var s = '';

好了，咱们对对象的学习暂时到这里，下面来看看数组吧。

Array类型

不管什么语言，数组与字符串的操做都是十分常见的，咱们这里就来理一理咱们javascript中的数组。

定义数组

定义数组的方式多种多样，我通常会用到其中两种，确切的说，我会用其中一种：

1 var arr = [];
2 var arr = new Array();
3 var arr = [1, 2, 3];
4 var arr = new Array(1, 2, 3);

数组字面量是咱们所亲睐的作法。

javascript中数组的长度是不定的，数组各个项目的类型也是能够变的，因此用起来很是灵活。

检测数组

咱们常常须要判断一个对象是否是数组（数组也是对象，其Array实一个构造函数哦），因而咱们会用到如下方法：

1 var a = arr.constructor == Array;//true
2 var b = arr instanceof Array; //true
3 var c = Array.isArray(arr); //true，ECMAScript5新增

原本instanceof足够知足条件了，可是有这么一个状况就是咱们页面中存在几个框架，每一个框架都有其window全局环境，因此就可能出现2个Array构造函数。

数组与字符串

数组与字符串常常作转换，字符串转换为数组使用split，数组转换为字符串却有多种方案：

1 var b = [1, 'fdsffd', '速度多少'];
2 var a = [ {a: 'aaa'}, {b: 'bbb'}, {c: { d: 'ddd', e: [1, 2, 4]} }];
3 var str1 = a.toString(); //"[object Object],[object Object],[object Object]"
4 var str2 = b.toString(); //"1,fdsffd,速度多少"

因此咱们要将复杂的转换为字符串仍是要费点功夫，可是有个叫JSON的家伙已经帮咱们干了这些事情了。。。

如果各位对"，"分割不过瘾，可使用join方法选择本身喜欢的分割方式。

增长项目

增长数组项目也有多种方法，可是咱们通常使用push的方式，这里可能涉及到一点点删除的功能了。

针对栈的功能，js提供了push与pop两个东西，一个是加入，一个是弹出最上面的而且删除，其实都是数组尾部操做比较容易理解：

1 var arr = [1, 'fdsffd', '速度多少'];
2 arr.push('新增01', '新增02'); //能够操做多个哦
3 var dd = arr.pop();
4 var s = '';

另一个东西就是模拟队列的操做了，模拟队列的话删除是会在数组的头部作操做，他隐藏了整个数组的移动：

1 var arr = [1, 'fdsffd', '速度多少'];
2 arr.push('新增01', '新增02'); //能够操做多个哦
3 var dd = arr.shift();

其中这个shift咱们须要抽出来单独处理一番。

shift用于取得数组的第一项，而且将之移除，整个数组下标会变化，长度减1
与之对应的是unshift，会在队列最前面增长数组，而没必要关心下标的操做

PS：我在想javascript有没有封装一个在数组中间删除项目的方法。。。好像没有找到

数组排序

数组排序是咱们常常遇到的东西，通常使用reverse与sort便可。

reverse比较简单即是翻转数组，sort方法比较经常使用，其中能够用于复杂数组的排序：

 1 var arr = [{ id: 1, name: '叶小钗' }, { id: 2, name: '素还真' }, { id: 3, name: '一页书'}];
 2 arr.sort(function (v1, v2) {
 3     if (v1.id < v2.id) {
 4         return 1;
 5     } else if (v1.id > v2.id) {
 6         return -1;
 7     } else {
 8         return 0;
 9     }
10 });

基于当前数组建立新数组

concat能够根据当前数组建立新的数组，说白了就是将两个数组变成一个：

1 var arr = [{ id: 1, name: '叶小钗' }, { id: 2, name: '素还真' }, { id: 3, name: '一页书'}];
2 var newArr = arr.concat('11', [3, 4]);

另一个方法为slice，他能够根据当前数组项目，由里面抽取几项组成新的数组：

1 var arr = [{ id: 1, name: '叶小钗' }, { id: 2, name: '素还真' }, { id: 3, name: '一页书'}];
2 var newArr = arr.concat('11', [3, 4]);
3 var arr2 = newArr.slice(1, 4);//1 到 4直接位置的数组一共三项

最强的方法splice

刚刚还在说没有找到删除数组中间项目的方法呢，如今就冒了一个增长/删除 数组中间项目的方法，这个须要好好研究一番。

splice有三种用法：

删除：
能够删除任意数量项目，须要两个参数：删除的位置；删除的项目
splice(1, 2)会删除第2，3 项，并且数组下标长度会本身变化，真是好东西啊！

插入：
能够向指定位置插入任意项目的项，三个参数：初始位置、0（删除的项目）、插入的项目，这个有点重载的感受
splice(2, 0, '叶小钗', '素还真');将在第三项后面插入两项

替换：
按道理说，替换不应用到这个东西，可是咱们仍是看看吧。
他的功能事实上市先删除在插入，三个参数：起始位置、删除项目、插入项目
splice(2, 1, 'red')；将删除第二项并插入red

ECMAScript 5新增

ECMAScript 5新增了两个取得位置的方法：indexOf与lastIndexOf，与字符串使用方法相似：

indexOf：由头开始找寻
lastIndexOf：由尾部开始找寻

还增长了迭代方法与归并方法，原本数组的方法我就用得很少，这些便暂时略去了，到要用到时候再查下吧。

Date类型

时间操做函数，也是咱们javascript常常会用到的对象，要建立一个日期对象很简单：

var d = new Date(); //Date {Sat Jun 29 2013 11:30:36 GMT+0800}

这里来一个有意思的初始化方式：

var d = new Date(2013, 5, 29, 11, 32, 10); 
//注意此处第二个参数是月份，这里的5表明六！！！这个在有些地方容易引发错误

关于日期的用法，我这里很少说，便上一个例子吧：

网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”

 1 function counter() {
 2     var date = new Date();
 3     var year = date.getFullYear();
 4     var date2 = new Date(year, 12, 31, 23, 59, 59);
 5     var time = (date2 - date) / 1000;
 6     var day = Math.floor(time / (24 * 60 * 60))
 7     var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))
 8     var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
 9     var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);
10     var str = year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";
11     document.getElementById("input").value = str;
12 }
13 window.setInterval("counter()", 1000);

PS：这个例子是抄来的，各位看他有什么问题没有呢？？？提示：月份

RegExp类型

对于正则表达式的使用其实我一直不太在行，每次都是学了就忘了再学在忘，纠其缘由仍是由于用得太少啦。

建立正则

咱们有两种方法建立一个正则表达式：

var pattern = /....../;
var pattern = new RegExp('......');
//推荐使用第一种

RegExp实例属性

每一个正则表达式实例皆具备如下属性：

global： 表示是否设置了g标志
var pattern = /at/g;//表示匹配因此at

ignoreCase：表示是否启用了i标志
var pattern = /at/i;不区分大小写

lastIndex：整数，表示开始搜索下一个匹配字符的位置，0开始

multiline：表示是否启用多行匹配

source：正则表达式的字符串表示，按照字面形式而不是传入构造函数中的字符串模式返回

关于正则表达式，我后面点单独写一篇博客算了，这里暂时到这里了

正则的学习须要多花功夫才行，这块太水了，这里搞完了又忘了

结语

上午的学习暂时到这里，我出去吃个饭，下午咱们继续学习！