JavaScript自學筆記

来源:http://www.cnblogs.com/androidshouce/archive/2016/06/23/5609303.html
-Advertisement-
Play Games

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+'&nbsp');                    // 依次輸出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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 參考http://blog.csdn.net/yaopeng_2005/article/details/6935235 對小鵬_加油的代碼進行了部分修改,並加入了自己的文檔註釋 定義全局變數,以及主函數main 初始化變數Init函數 銀行家演算法Bank函數 安全性演算法Safe函數 顯示showda ...
  • 最近新做的一個項目需要使用qt5連接另一臺機器上的sql server,雖然網上已有類似文章,但還是有些其中很少提及的問題,故在這裡彙總下: qt連接sql server可以參考這篇文章: 《Qt 使用ODBC driver 連接SQL Server》 如果是連接另一臺機器的sql server就不 ...
  • **MVP模式結構** - Model: 業務邏輯和實體模型 - View:用戶交互和視圖顯示,在android中對應activity - Presenter: 負責完成View於Model間的邏輯和交互 ...
  • 最近一同事在學習AngularJS,在路由與模板的學習過程中遇到了一些問題,於是今天給她寫了個例子,順便分享出來給那些正在學習AngularJS的小伙伴們。 話說這AngularJs 開發項目非常的爽,其中爽就爽在它的開發模式,使得代碼更加的清晰、更加具有可讀性、更簡潔、更具有維護性。但是在使用An ...
  • 一直對Javascript中的this都有一種似是而非的感覺,今天突然感覺豁然開朗,特此記錄一下。 咱們先看個慄子: 咋一看這段代碼沒有什麼問題,但是由於對於this的錯誤理解最終導致錯誤的結果。我們在元素car_key上面綁定了click事件,認為在car的類中嵌套綁定click事件就可以讓這個d ...
  • 在img標簽裡面只設置寬,不設置高,圖片就會等比例縮放。 ...
  • js對象的核心是一個字元串屬性名與屬性值的映射表。使用對象實現字典易如反掌,字典是可變長的字元串與值的映射集合。 for...in js提供了枚舉一個對象屬性名的利器--for...in迴圈。var dict={zhangsan:34,lisi:24,wangwu:62}; var people=[... ...
  • jQuery.AutoComplete是一個基於jQuery的自動補全插件。藉助於jQuery優秀的跨瀏覽器特性,可以相容Chrome/IE/Firefox/Opera/Safari等多種瀏覽器。 特性一覽: 支持補全列表的寬度設定。 支持補全列表的最大高度設定。 支持補全列表的行數限制。 支持補全 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...