ECMAScript【追寻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 = '';

ECMAScript 1

另外一个东西便是模拟队列的操作了,模拟队列的语句删除是会以三番五次组的脑壳做操作,他躲了整数组的运动:

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

ECMAScript 2

其中者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]);

ECMAScript 3

另外一个法为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:正则表达式的字符串表示,按照字面形式而不是传入构造函数中的字符串模式返回

有关正则表达式,我后面点单独写一篇博客算了,这里少到此了

刚巧则的上学得多消费功夫才行,这块太次了,这里打完了同时忘记了

结语

上午的念少到这边,我下吃个饭,下午我们继承学习!