首頁 >web前端 >js教程 >JavaScript學習筆記整理之引用型別_javascript技巧

JavaScript學習筆記整理之引用型別_javascript技巧

WBOY
WBOY原創
2016-05-16 15:18:491133瀏覽

引用型別是JavaScript中很重要的內容。引用類型是一種資料結構,用於將資料和功能組織在一起。它描述的是一類物件所具有的屬性和方法。 Object是一個基礎類型,Array是陣列類型,Date是日期類型,RegExp是正規表示式類型,等。

擁抱JavaScript

曾經名不經傳的JavaScript隨著AJAX的流行而身價倍增,現在JavaScript不再僅僅是WEB開發中一個可有可無的輔助工具,甚至有了專門屬於它的職位“JavaScript工程師”,那怕你只是一名WEB後台開發程式設計師,你都必須了解JavaScript,至少在一些相關招募職位要求上你可以看到「熟悉JavaScript優先」的字眼。甚至我還要告訴你,你將可以用JavaScript開發桌面軟體,這得益於Adobe AIR的另外一種開發模式,也就是用HTML+CSS+JavaScript開發AIR。

1.Object型

1. 建立:

var dog = new Object(); 

常應用於儲存和傳輸資料。例如儲存:

var person = new Object();
person.name = "Nicholas";
person.age = 29; 

建立的第二種方式:(在建立時,屬性名稱也可以是字串格式,即:可以為屬性名稱加引號。)

var person = {
name : "Nicholas",
age : 29
}; 

2.取出屬性值:person["name"];或:person.name;

2.Array型

同一個陣列可以保存任意類型的資料(大雜燴)。

1.陣列可以動態調整(多加一個數據,它自己就成長一個長度,不是死的。)。

2.建立:

var stars=new Array();//方式1
var stars=new Array(20);//方式2
var stars=new Array("周杰伦","林俊杰","孙燕姿");//方式3
var stars=Array(20);//方式4
var stars=["周杰伦","孙燕姿","林俊杰"];//方式6 

3.動態調整範例:

var stars=["周杰伦","林俊杰","孙燕姿"];
stars[1]="JJ";//动态改变(把林俊杰变为JJ)
stars[3]="皮裤汪";//动态增长(加了一个长度)
stars.length=1;//动态强制缩减(林俊杰、孙燕姿、皮裤汪强制移除,长度变为1) 

4.偵測陣列:Array.isArray(value);

5.用join()把陣列轉換成有分隔符號的字串:

var stars = ["周杰伦", "王尼玛", "张全蛋"];
alert(stars .join(",")); //周杰伦,王尼玛,张全蛋
alert(stars .join("-")); //周杰伦-王尼玛-张全蛋 

6.可以像堆疊一樣使用陣列(pop()出來,push()進去)。

7.可以像佇列一樣使用陣列。 (結合shift()和push()):

var stars = new Array(); //create an array
var count = colors.push("周杰伦", "王尼玛"); //push two items
alert(count); //2
count = stars .push("张全蛋"); //push another item on
alert(count); //3
var item = colors.shift(); //get the first item
alert(item); //周杰伦
alert(colors.length); //2
/**所谓栈变队列,其实就是把栈颠倒过来再拉取*/ 

8.排序。

1.reverse()翻轉陣列順序;(傳回經過排序後的陣列)

2.sort()從小到大排序。但是按字串排序,不是按數字排序:(傳回經過排序後的陣列)。

var values = [, , , , ];
values.sort();
alert(values); //,,,,

要想照你預期的方式排序,可以為sort()裡面加上比較函數當作參數:

function compare(value, value) {
if (value < value) {
return -;
} else if (value > value) {
return ;
} else {
return ;
}
}
var values = [, , , , ];
values.sort(compare);
alert(values); //,,,, 

簡化版本的比較函數(sort只在乎回傳的是正數、負數還是0):

function compare(value1,value2){
return value2 - value1; 
} 

9.對陣列的操作:聯結、切片、拼接。

1.聯結:使用concat,記憶:concat-->concatenate:連結,連鎖。

舉例:

var stars = ["周杰伦", "王尼玛", "张全蛋"];
var stars = stars .concat("太子妃", ["花千骨", "梅长苏"]);
alert(stars); //周杰伦,王尼玛,张全蛋 
alert(stars); //周杰伦,王尼玛,张全蛋,太子妃,花千骨,梅长苏 

2.切片。使用slice,記憶:slice翻譯:切片。舉例:

var stars = ["梅长苏", "誉王", "靖王", "霓凰", "飞流"];
var stars= stars.slice();
var stars= stars.slice(,);
alert(stars); //誉王,靖王,霓凰,飞流(从第一个位置开始切)
alert(stars); //誉王,靖王,霓凰(从第个位置切到第个位置,表示半封闭,不包含) 

3.拼接。 splice。功能強大。可以刪除、插入、替換。

 1.刪除任意數量的項:例如:splice(0,2),刪除第0,1項(半封閉區間)(傳回刪除項目)。

2.指定位置插入任意數量的項:例如:splice(2,0,"周杰倫","王尼瑪"),從第2個位置開始插入周傑倫、王尼瑪兩項。

3.指定位置插入任意數量的項且同時刪除任意數量的項。例如:splice(2,1,"周杰倫","王尼瑪"),從第2個位置刪除1項,然後開始插入周傑倫、王尼瑪兩項。

10.位置方法:indexOf,lastIndexOf;

11.迭代方法:分為:全部合格才通過、任意一個合格就通過、過濾部分渣渣,一對一映射,迭代查詢,縮減。

1.全部合格才通過:

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false 

上例中每一項都大於2才回傳true。

2.任一合格就通過:

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true 

上例中,有一個大於2就回傳true。

3.過濾部分渣渣:

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
return (item > 2);
});
alert(filterResult); //[3,4,5,4,3] 

上例中,把大於2的都過濾掉。

4.一對一映射:

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2] 

上例中,給每一項乘以2.

5.迭代:使用for-each。

6.縮減:reduce。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
});
alert(sum);//15

累加求和返回,5项缩为1项。 

3.RegExp类型

1.var expression=/ pattern / flags;

2.flags分三种:g(global全局模式,应用于所有字符串)、i(case-insensive,忽略字母大小写)、m(multiline,多行模式,一行检验完了接着下一行。)。举例:

/**匹配字符串中所有'at'的实例*/
var pattern1=/at/g;
/**匹配第一个'bat'或'cat',不分大小写*/
var pattern2 =/[bc]at/i;
/**匹配所有以'at'结尾的3个字符组合,不分大小写*/
var pattern3=/.at/gi; 

3.模式中所有的元字符必须转义,元字符:( { [ \ ^ $ | ) ? * + . ] }

4.Function类型

1.每个函数都是Function类型的实例,而且与其他引用类型一样,都有属性和方法。

2.函数的两种定义方法:

方法1:

function sum(a,b){
return a + b; 
} 

方法2:

var sum=function(a,b){
return a + b;
} 

3.函数没有重载。

5.Boolean、Number、String:基本包装类型

var a="Jay Chou is a superstar";
var b=a.substring(0,8); 

上例中,a是基本类型,但是a可以调用substring方法,是因为,后台自动完成a的包装操作,创建String类型的一个实例。Boolean,Number也类似。

6.单体内置对象,不需要实例化,直接使用,如:Math,Global。

1.所有全局作用域中定义的函数、变量,都是Global对象的方法,比如:parseInt,isNaN等。

2.eval()方法也是Global对象的方法,它负责解析javascript。

3.Math对象是保存数学公式和相关信息的。它有很多方法, 如:min求最小值,max求最大值,ceil()向上取整,floor向下取整,round四舍五入,random取随机数。

ps:引用类型理解:变量的交换等于把现有一间店的钥匙(变量引用地址)复制一把给了另外一个老板,此时两个老板同时管理一间店,两个老板的行为都有可能对一间店的运营造成影响。

引用类型例子

function chainStore()
{
var store1=['Nike China'];
var store2=store1;
alert(store2[0]); //Nike China
store1[0]='Nike U.S.A.';
alert(store2[0]); //Nike U.S.A.
}
chainStore();
//在上面的代码中,store2只进行了一次赋值,理论上它的值已定,但后面通过改写store1的值,发现store2的值也发生了改变,这正是引用类型的特征,也是我们要注意的地方
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn