0-判斷變數、參數是否初始化 if(x){} //變數被初始化了或者變數不為空或者變數不為零 1-聲明函數不需要聲明返回值、參數類型,句尾甚至都不需要';' function sum(i1,i2){return i1+i2} 2-直接聲明匿名函數立即使用 var f=function(i1,i2){ ...
0-判斷變數、參數是否初始化
if(x){} //變數被初始化了或者變數不為空或者變數不為零
1-聲明函數不需要聲明返回值、參數類型,句尾甚至都不需要';'
function sum(i1,i2){return i1+i2}
2-直接聲明匿名函數立即使用
var f=function(i1,i2){return i1+i2;}; alert(f(1,2));//普通匿名函數
alert(function(i1,i2){return i1+i2;}(3,4));//直接聲明,立即使用
3-js中沒有類的概念,於是有些方法就長的像類了
function Person(name,age){
this.Name=name;//動態增加屬性,類似於C#里的dynamic A = new ExpendoObject();
this.Age=age;
this.SayHello=function(){alert('Hello,My name is '+name+' I am '+age+' years old.')};
}
var p1=new Person('lorry',21);
p1.SayHello(); //像類一樣調用
p1.Gender='男'; //動態增加‘性別’屬性
alert(p1.Gender);
4-Array對象就是數組,定義數組不用預先限定長度
var arr=new Array();
arr[0]=0;
arr[1]=1;
arr[2]=2;
for(var i=0;i<=arr.length-1;i++){
alert(arr[i]);
}
5-Array是數組,也是Dictionary,也是Stack
var dict=new Array();//作為Dictionary使用
dict['我']='wo';
dict['愛']='ai';
dict['你']='ni';
alert(dict['我']); //通過鍵值調用
alert(dict.愛); //像調用屬性一樣調用(動態語言的特性)
for(var k in dict){ //js中的遍歷
alert(k); //'我','愛','你'-->列印出的是key
}
for(var k of dict){ //js中的遍歷
alert(k); //'wo','ai','ni'-->列印出的是value
}
var arr = [1,2,3,4,5];//Array的簡化創建方式
var arr = {"lorry":21,"cloud":20};//字典風格的創建方式
6-遍歷當前頁面能夠調用的所有元素
var s=null;
for(var k in document){//對象的屬性都是以key的形式出現的
s+=k+" ;";
}
alert(s);
7-使用類似Array的下標操作獲取字元串某個指定位置的字元
var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[12]; // '!'
s[13]; // undefined 超出範圍的索引不會報錯,但一律返回undefined
需要特別註意的是,字元串是不可變的,如果對字元串的某個索引賦值,不會有任何錯誤,但是,也沒有任何效果:
var s = 'Test';
s[0] = 'X';
alert(s); // s仍然為'Test'
8-改大寫小寫
var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'
var s = 'Hello';
s.toLowerCase(); // 返回'hello'
9-搜索指定字元串出現的位置
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 沒有找到指定的子串,返回-1
10-獲取字元串指定索引區間的子串
var s = 'hello, world'
s.substring(0, 5); // 從索引0開始到5(不包括5),返回'hello'
s.substring(7); // 從索引7開始到結束,返回'world'
11-JavaScript的對象是一種無序的集合數據類型,它由若幹鍵值對組成
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null //最後一個鍵值對不需要在末尾加','
};
xiaoming.name; // '小明'
xiaoming.birth; // 1990
訪問屬性是通過.操作符完成的,但這要求屬性名必須是一個有效的變數名。如果屬性名包含特殊字元,就必須用[]括起來:
var xiaohong = {
name: '小紅',
'middle-school': 'No.1 Middle School'
};
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小紅'
xiaohong.name; // '小紅'
xiaohong.age; // undefined
12-檢測xiaoming是否擁有某一屬性,用in操作符:
'name' in xiaoming; // true
'grade' in xiaoming; // false
***如果in判斷一個屬性存在,這個屬性不一定是xiaoming的,它可能是xiaoming繼承得到的:
'toString' in xiaoming; // true
***要判斷一個屬性是否是xiaoming自身擁有的,而不是繼承得到的,可以用hasOwnProperty()方法:
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
13-Map
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);//二維數組初始化法
m.get('Michael'); // 95
var m = new Map(); // 直接初始化一個空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var n of m) { // 遍歷Map
alert(n[1] + '=' + n[0]);
}
14-iterable內置的forEach方法,它接收一個函數,每次迭代就自動回調該函數。
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向當前元素的值
// index: 指向當前索引
// array: 指向Array對象本身
alert(element);
});
Set與Array類似,但Set沒有索引,因此回調函數最多兩個參數:
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, set) {
alert(element);
});
Map的回調函數參數依次為value、key和map本身:
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert(value);
});
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
alert(element);
});
15-用Array的map()方法,傳入我們自己的函數,就得到了一個新的Array作為結果:
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(function(x){
return x*x;
}).forEach(function (element) {
alert(element); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
});
16-用map()把Array的所有數字轉為字元串:
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
17-用Array的reduce()做累積計算
var arr = [];
for (var x = 1; x <= 100; x++) {
arr.push(x); //將1~100放入數組
}
alert(arr.reduce(function(x,y){
return x+y; //對arr的所有對象累積求和,返回求和結果
}));
18-用reduce()做一個牛逼的轉換:把[1, 2, 5, 8, 0]變換成整數12580
var arr = [1, 2, 5, 8, 0];
alert(arr.reduce(function(x,y){
return x*10+y;
}));
19-用filter()把Array的某些元素過濾掉
var arr = [0,1,2,3,4,5,6,7,8,9];
alert(arr.filter(function(x){
return x%2===0;
}));//0,2,4,6,8 //返回true則保留
把一個Array中的空字元串刪掉
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
alert(arr.filter(function (s) {
return s && s.trim(); // 註意:IE9以下的版本沒有trim()方法
})); // ['A', 'B', 'C']
20-Array的sort()方法預設把所有元素先轉換為String再排序,於是...
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]
因此如果要按數字大小排序,可以這麼寫:
var arr = [];
for (var x = 1; x <= 10; x++) {
arr.push(x);
}
document.write(arr+"<br/>");
document.write(arr.sort(function(x,y){
return x<y?true:false;
}));
若要忽略字母大小寫影響,則要先轉化為大寫或小寫
var arr = ['Google', 'apple', 'Microsoft'];
alert(arr.sort(function (s1, s2) {
var x1 = s1.toUpperCase();
var x2 = s2.toUpperCase();
return x1 < x2 ?false:true;
})); // ['apple', 'Google', 'Microsoft']
21-閉包(Closure)程式結構
①將函數作為返回值賦值給參數,調用該參數獲得計算結果
var arr = [];
for(var n=1;n<101;n++){
arr.push(n);
}
function lazy_sum(arr){
var sum = function(){
return arr.reduce(function(x,y){
return x+y;
});
}
return sum;
}
var f = lazy_sum(arr);
alert(f());
②返回的函數並沒有立刻執行,而是直到調用了f()才執行
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count(); //results里存了3個function
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16 返回的函數引用了變數i,但它並非立刻執行。
f2(); // 16 等到3個函數都返回時,它們所引用的變數i已經變成了4,
f3(); // 16 因此最終結果為16
***返回閉包時牢記:返回函數不要引用任何迴圈變數,或者後續會發生變化的變數!
③如果一定要引用迴圈變數怎麼辦?
方法是再創建一個函數,用該函數的參數綁定迴圈變數當前的值,
無論該迴圈變數後續如何更改,已綁定到函數參數的值不變:
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function(n){
return function(){
return n*n;
}
}(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
alert(f1()); // 1
alert(f2()); // 4
alert(f3()); // 9
④在沒有class機制,只有函數的語言里,藉助閉包,可以封裝一個私有變數
function creat_counter(init){
var n = init||0;
return{
add:function(){
n+=1;
return n;
}
}
}
var c = creat_counter();
alert(c.add());//1
alert(c.add());//2
alert(c.add());//3
***在返回的對象中,實現了一個閉包,該閉包攜帶了局部變數n,並且,從外部代碼根本無法訪問到變數n。
換句話說,閉包就是攜帶狀態的函數,並且它的狀態可以完全對外隱藏起來。
⑤利用Math.pow(x, y)計算x^2或x^3 //Math.pow(x, y)-->x^y
function make_pow(y){
return function(x){
return Math.pow(x,y);
}
}
var pow2 = make_pow(2)
var pow3 = make_pow(3)
alert(pow2(3))//9
alert(pow3(3))//27
22-箭頭函數(目前僅firefox支持) //參數=>函數體
var f = x => x*x*x
alert(f(3)) //27
23-用generator產生斐波那契數列
function* fib(max){
var t,a=0,b=1,n=1;
while(n<=max){
yield a;
t=a+b;
a = b;
b = t;
n++;
}
return a;
}
for (var x of fib(10)) { //用for ... of迴圈迭代generator對象
document.write(x+' '); // 依次輸出0, 1, 1, 2, 3
}
用generator產生一個自增的ID(無需全局變數)
function* next_id(){
for(var x = 1; x < 100; yield x++ );
}
var g = next_id();
alert(g.next().value); //1
alert(g.next().value); //2
alert(g.next().value); //3