JavaScript自學(xué)筆記(必看篇)
更新時(shí)間：2016年06月23日 10:35:41 投稿：jingxian
下面小編就為大家?guī)?lái)一篇JavaScript自學(xué)筆記(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
0-判斷變量、參數(shù)是否初始化
if(x){} //變量被初始化了或者變量不為空或者變量不為零
1-聲明函數(shù)不需要聲明返回值、參數(shù)類型，句尾甚至都不需要';'
function sum(i1,i2){return i1+i2}
2-直接聲明匿名函數(shù)立即使用
var f=function(i1,i2){return i1+i2;}; alert(f(1,2));//普通匿名函數(shù)
alert(function(i1,i2){return i1+i2;}(3,4));//直接聲明,立即使用
3-js中沒(méi)有類的概念，于是有些方法就長(zhǎng)的像類了
function Person(name,age){
this.Name=name;//動(dòng)態(tài)增加屬性，類似于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(); //像類一樣調(diào)用
p1.Gender='男'; //動(dòng)態(tài)增加‘性別'屬性
alert(p1.Gender);
4-Array對(duì)象就是數(shù)組，定義數(shù)組不用預(yù)先限定長(zhǎng)度
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是數(shù)組，也是Dictionary，也是Stack
var dict=new Array();//作為Dictionary使用
dict['我']='wo';
dict['愛(ài)']='ai';
dict['你']='ni';
alert(dict['我']); //通過(guò)鍵值調(diào)用
alert(dict.愛(ài)); //像調(diào)用屬性一樣調(diào)用（動(dòng)態(tài)語(yǔ)言的特性）
for(var k in dict){ //js中的遍歷
alert(k); //'我'，'愛(ài)'，'你'-->打印出的是key
}
for(var k of dict){ //js中的遍歷
alert(k); //'wo'，'ai'，'ni'-->打印出的是value
}
var arr = [1,2,3,4,5];//Array的簡(jiǎn)化創(chuàng)建方式
var arr = {"lorry":21,"cloud":20};//字典風(fēng)格的創(chuàng)建方式
6-遍歷當(dāng)前頁(yè)面能夠調(diào)用的所有元素
var s=null;
for(var k in document){//對(duì)象的屬性都是以key的形式出現(xiàn)的
s+=k+" ;";
}
alert(s);
7-使用類似Array的下標(biāo)操作獲取字符串某個(gè)指定位置的字符
var s = 'Hello, world!'; s[0]; // 'H' s[6]; // ' ' s[12]; // '!' s[13]; // undefined 超出范圍的索引不會(huì)報(bào)錯(cuò)，但一律返回undefined 需要特別注意的是，字符串是不可變的，如果對(duì)字符串的某個(gè)索引賦值，不會(huì)有任何錯(cuò)誤，但是，也沒(méi)有任何效果： var s = 'Test'; s[0] = 'X'; alert(s); // s仍然為'Test'
8-改大寫小寫
var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'
var s = 'Hello';
s.toLowerCase(); // 返回'hello'
9-搜索指定字符串出現(xiàn)的位置
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 沒(méi)有找到指定的子串，返回-1
10-獲取字符串指定索引區(qū)間的子串
var s = 'hello, world' s.substring(0, 5); // 從索引0開(kāi)始到5（不包括5），返回'hello' s.substring(7);// 從索引7開(kāi)始到結(jié)束，返回'world'
11-JavaScript的對(duì)象是一種無(wú)序的集合數(shù)據(jù)類型，它由若干鍵值對(duì)組成
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null//最后一個(gè)鍵值對(duì)不需要在末尾加','
};
xiaoming.name; // '小明'
xiaoming.birth; // 1990
訪問(wèn)屬性是通過(guò).操作符完成的，但這要求屬性名必須是一個(gè)有效的變量名。如果屬性名包含特殊字符，就必須用[]括起來(lái)：
var xiaohong = {
name: '小紅',
'middle-school': 'No.1 Middle School'
};
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小紅'
xiaohong.name; // '小紅'
xiaohong.age; // undefined
12-檢測(cè)xiaoming是否擁有某一屬性，用in操作符：
'name' in xiaoming;// true
'grade' in xiaoming;// false
***如果in判斷一個(gè)屬性存在，這個(gè)屬性不一定是xiaoming的，它可能是xiaoming繼承得到的：
'toString' in xiaoming; // true
***要判斷一個(gè)屬性是否是xiaoming自身?yè)碛械?，而不是繼承得到的，可以用hasOwnProperty()方法：
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
13-Map
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);//二維數(shù)組初始化法
m.get('Michael'); // 95
var m = new Map();// 直接初始化一個(gè)空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內(nèi)置的forEach方法，它接收一個(gè)函數(shù)，每次迭代就自動(dòng)回調(diào)該函數(shù)。
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向當(dāng)前元素的值
// index: 指向當(dāng)前索引
// array: 指向Array對(duì)象本身
alert(element);
});
Set與Array類似，但Set沒(méi)有索引，因此回調(diào)函數(shù)最多兩個(gè)參數(shù)：
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, set) {
alert(element);
});
Map的回調(diào)函數(shù)參數(shù)依次為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()方法，傳入我們自己的函數(shù)，就得到了一個(gè)新的Array作為結(jié)果：
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的所有數(shù)字轉(zhuǎn)為字符串：
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()做累積計(jì)算
var arr = [];
for (var x = 1; x <= 100; x++) {
arr.push(x); //將1~100放入數(shù)組
}
alert(arr.reduce(function(x,y){
return x+y; //對(duì)arr的所有對(duì)象累積求和，返回求和結(jié)果
}));
18-用reduce()做一個(gè)牛逼的轉(zhuǎn)換：把[1, 2, 5, 8, 0]變換成整數(shù)12580
var arr = [1, 2, 5, 8, 0];
alert(arr.reduce(function(x,y){
return x*10+y;
}));
19-用filter()把Array的某些元素過(guò)濾掉
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則保留
把一個(gè)Array中的空字符串刪掉
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
alert(arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本沒(méi)有trim()方法
})); // ['A', 'B', 'C']
20-Array的sort()方法默認(rèn)把所有元素先轉(zhuǎn)換為String再排序，于是...
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]
因此如果要按數(shù)字大小排序，可以這么寫：
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;
}));
若要忽略字母大小寫影響，則要先轉(zhuǎn)化為大寫或小寫
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）程序結(jié)構(gòu)
①將函數(shù)作為返回值賦值給參數(shù)，調(diào)用該參數(shù)獲得計(jì)算結(jié)果
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());
②返回的函數(shù)并沒(méi)有立刻執(zhí)行，而是直到調(diào)用了f()才執(zhí)行
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count(); //results里存了3個(gè)function
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16 返回的函數(shù)引用了變量i，但它并非立刻執(zhí)行。
f2(); // 16 等到3個(gè)函數(shù)都返回時(shí)，它們所引用的變量i已經(jīng)變成了4，
f3(); // 16 因此最終結(jié)果為16
***返回閉包時(shí)牢記：返回函數(shù)不要引用任何循環(huán)變量，或者后續(xù)會(huì)發(fā)生變化的變量!
③如果一定要引用循環(huán)變量怎么辦？
方法是再創(chuàng)建一個(gè)函數(shù)，用該函數(shù)的參數(shù)綁定循環(huán)變量當(dāng)前的值，
無(wú)論該循環(huán)變量后續(xù)如何更改，已綁定到函數(shù)參數(shù)的值不變：
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
④在沒(méi)有class機(jī)制，只有函數(shù)的語(yǔ)言里，借助閉包，可以封裝一個(gè)私有變量
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
***在返回的對(duì)象中，實(shí)現(xiàn)了一個(gè)閉包，該閉包攜帶了局部變量n，并且，從外部代碼根本無(wú)法訪問(wèn)到變量n。
換句話說(shuō)，閉包就是攜帶狀態(tài)的函數(shù)，并且它的狀態(tài)可以完全對(duì)外隱藏起來(lái)。
⑤利用Math.pow(x, y)計(jì)算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-箭頭函數(shù)(目前僅firefox支持) //參數(shù)=>函數(shù)體
var f = x => x*x*x alert(f(3)) //27
23-用generator產(chǎn)生斐波那契數(shù)列
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循環(huán)迭代generator對(duì)象
document.write(x+' '); // 依次輸出0, 1, 1, 2, 3
}
用generator產(chǎn)生一個(gè)自增的ID(無(wú)需全局變量)
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
以上就是小編為大家?guī)?lái)的JavaScript自學(xué)筆記(必看篇)全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
javascripit實(shí)現(xiàn)密碼強(qiáng)度檢測(cè)代碼分享
這篇文章主要介紹了javascripit實(shí)現(xiàn)密碼強(qiáng)度檢測(cè)，大家參考使用吧2013-12-12
在很多網(wǎng)頁(yè)上可以看到，點(diǎn)擊網(wǎng)頁(yè)的某個(gè)地方能夠彈出一個(gè)新窗口，并且可以在屏幕中隨意拖動(dòng)，通過(guò)此篇文章給大家介紹javascript彈出拖動(dòng)窗口，有需要的朋友可以參考下2015-08-08
小編給大家總結(jié)了JS最常用到的幾種消息提示框，大家應(yīng)該經(jīng)常用的到，一起學(xué)習(xí)下吧。2018-02-02
javascript中bind函數(shù)的作用實(shí)例介紹
bind()的方法在ie,6,7,8中不適用，需要擴(kuò)展通過(guò)擴(kuò)展Function prototype可以實(shí)現(xiàn)此方法，下面為大家介紹下javascript中bind函數(shù)的作用2014-09-09
詳解微信小程序網(wǎng)絡(luò)請(qǐng)求接口封裝實(shí)例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求接口封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文主要介紹了JavaScript中閉包的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
JavaScript 計(jì)算圖片加載數(shù)量的代碼
先定義一個(gè)圖片的數(shù)組，然后通過(guò)image的onload事件來(lái)計(jì)算，注意，onload在ie和火狐有所不同。2011-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)拖曳效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
去重是開(kāi)發(fā)中經(jīng)常會(huì)碰到的一個(gè)熱點(diǎn)問(wèn)題，這篇文章主要介紹了JS中實(shí)現(xiàn)數(shù)組去重中常用的5個(gè)方法，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-06-06
用過(guò) Google 地圖的人可能都很熟悉，通過(guò)滾動(dòng)滾輪可以對(duì)地圖進(jìn)行縮放，非常地方便。適當(dāng)?shù)厥褂脻L輪事件可以帶來(lái)不錯(cuò)的用戶體驗(yàn)。2010-03-03