JavaScript 掃盲日 · 地表最強JS文檔

[toc] # 每日單詞 1. `property` 屬性 1. `defer` 延遲 1. `instance` 實例 # 聊聊昨天的作業(九九乘法表) ```javascript var array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var content = ""; for (var index = 0; index < array.length; index++) { var element = array[index]; var num = 1; while (num <= element) { content += element; content += "*"; content += num; content += "="; content += element * num; content += " "; num++; } console.log(content); content = ""; } ``` ```javascript for (var i = 1; i <= 9; i++) { var content = ""; for (var j = 1; j <= i; j++) { content += i; content += "*"; content += j; content += "="; content += i * j; if (i != j) { content += " "; } } console.log(content); } ``` # 為什么說, js 的引入位置, 會導致問題? ```html <html> <head> </head> <body> <h1 id="myHeader"><b>這是標題</b></h1> <p>打開網頁會自動彈出標題的HTML代碼</p> <script src="main.js"></script> </body> </html> ``` > main.js ```javascript window.onload = function() { var x = window.document.getElementById("myHeader"); alert(x.innerHTML); }; ``` ## 解決方案一 `defer` ```javascript <html> <head> <script defer="defer" src="main.js" /> </head> <body> <h1 id="myHead"> <b>這是一個一級標題</b> </h1> <p>當進入頁面時, 標題的html代碼會彈出</p> </body> </html> ``` ## 解決方案二 `window.onload` > main.js ```javascript window.onload = function() { var x = window.document.getElementById("myHeader"); alert(x.innerHTML); }; ``` ## 順便再提一下 window 的兼容性問題 > 什么叫兼容性? 同為將網頁`加入收藏` - IE 瀏覽器: `window.external.AddFavorite(url,title);` - FireFox 瀏覽器: `window.sidebar.addPanel(title, url, "");` # 聲明變量名時, 應該避免關鍵字,保留字 ## 什么是關鍵字? > 可用于表示控制語句的開始或結束，或者用于執行特定操作等。按照規則，關鍵字也是語言保留的，不能用作標識符 ``` break do instanceof typeof case else new var catch finally return void continue for switch while debugger* function this with default if throw delete in try ``` ## 什么是保留字? ``` abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public ``` ## 如何判斷關鍵字,保留字? 1. 會變成紅色 1. 會報錯 ## 只是避免關鍵字就可以了? - 一切有沖突可能性的, 都要避免 ## 如何避免內置函數? - 加小括號, 變藍色 > 根本原則: 不能沖突, ECMAScript 用過的, 你不要再用 # 為什么一個數字和 infinity 取模, 結果還是這個數字本身? ```javascript console.log(25 % 6); // 1 console.log(25 - parseInt(25 / 6) * 6); //1 console.log(25 - parseInt(25 / Infinity) * Infinity); //25 console.log(25 / Infinity); // 0 console.log(0 * Infinity); ``` 一般滿足這些性質，這里 a 是有限的實數(123) `a+Infinity=Infinity` `a-Infinity=-Infinity` `Infinity+Infinity=Infinity` `Infinity*Infinity=Infinity` `a/Infinity=0` `a<Infinity` `a>-Infinity` `a>0 時 a*Infinity=Infinity` `a<0 時 a*Infinity=-Infinity` 而 `Infinity-Infinity`、`0*Infinity`、`0/0`、`Infinity/Infinity` 之類的運算一般會返回 NaN（Not a Number）或者-NaN。 ```javascript console.log(26 % 5); // 1 console.log(26 - parseInt(26 / 5) * 5); //1 console.log(26 - parseInt(26 / Infinity) * Infinity); // NaN console.log(parseInt(26 / Infinity)); // 0 console.log(0 * Infinity); // NaN console.log(26 % Infinity); // 26 ``` # var 聲明的是局部變量 > var 操作符定義的變量將成為定義該變量的作用域中的局部變量。也就是說， > 如果在函數中使用 var 定義一個變量，那么這個變量在函數退出后就會被銷毀 - 如果沒有 var, 隱式聲明全局變量 - 如果在當前作用域中找不到變量, 會逐級往上找 - 函數內的變量, 函數外不能用, 函數外的變量, 函數里可以用 ```javascript function test() { var message = "hi"; // 局部變量 } test(); console.log(message); // 錯誤！ ``` ```javascript var var01 = 1; function funtest() { console.log(var01); var var01 = 0; } // function funtest() { // var var01; // console.log(var01); // var01 = 0; // } funtest(); ``` ```javascript var data = 10; function fn1() { var data = 100; console.log(data); fn2(); console.log(data); function fn2() { data = 1000; fn3(); function fn3() { data = 10000; } } } fn1(); console.log(data); ``` ```javascript function fn1() { data = 100; console.log(data); // 100 fn2(); console.log(data); // 10000 function fn2() { data = 1000; fn3(); function fn3() { data = 10000; } } } fn1(); console.log(data); // 10000 ``` # 一次聲明多個變量, 能否換行? ```javascript var a = 1, b = 2, c = 3; console.log(a); console.log(b); console.log(c); ``` # 為什么`[1,2,3]`使用`toString`會返回`1,2,3`? ```javascript var arr = [1, 2, 3, 4]; var arr1 = []; console.log(arr.toString()); // "1,2,3,4" console.log(arr1.toString()); // "" ``` ```javascript var arr = [1, 2, 3, 4, 5]; var arr_string = ""; for (var index = 0; index < arr.length; index++) { var element = arr[index]; arr_string += element; if (index < arr.length - 1) { arr_string += ","; } } console.log(arr_string); ``` > 如果是空數組... ```javascript var arr = []; var arr_string = ""; for (var index = 0; index < arr.length; index++) { var element = arr[index]; arr_string += element; if (index < arr.length - 1) { arr_string += ","; } } console.log(arr_string); ``` # undefined 1. Undefined 類型只有一個值，即特殊的 undefined 。在使用 var 聲明變量但未對其加以初始化時，這個變量的值就是 undefined 1. 可以使用 undefined 值顯式初始化了變量。但我們沒有必要這么做，因為未經初始化的值默認就會取得 undefined 值 1. ECMA-262 第 3 版之前的版本中并沒有規定這個值。第 3 版引入這個值是為了正式區分空對象指針與未經初始化的變量 # 再談 NaN > NaN ，即非數值（Not a Number）是一個特殊的數值，這個數值用于表示一個本來要返回數值的操作數未返回數值的情況（這樣就不會拋出錯誤了）。在其他編程語言中，任何數值除以 0 都會導致錯誤，從而停止代碼執行。但在 ECMAScript 中，0 除以 0 會返回 NaN，因此不會影響其他代碼的執行。 - NaN 本身有兩個非同尋常的特點。首先，任何涉及 NaN 的操作（例如 NaN /10）都會返回 NaN ，這個特點在多步計算中有可能導致問題。 - 其次， NaN 與任何值都不相等，包括 NaN 本身。 # 單雙引號問題(php) ```php <?php $a = "my"; echo "hello{$a}world"; echo "\n"; echo 'hello $a world'; ``` # 基本類型和引用類型變量有兩種不同的數據類型：基本類型，引用類型。 1.基本類型基本的數據類型有：`undefined，boolean，number，string，null`.基本類型的訪問是按值訪問的，就是說你可以操作保存在變量中的實際的值。 - 值不可變 ```javascript var a = 123; var b = a; a = 345; console.log(b); // 123 ``` ```javascript var a = "hello"; console.log(a.toUpperCase()); //HELLO console.log(a); //hello var b = 123; console.log(b.toString()); // "123" console.log(b); // 123 console.log(typeof b); // number ``` 除了上面的基本類型(number,string,boolean,null,undefined)之外就是引用類型了，也可以說是就是對象了。對象是屬性和方法的集合。也就是說引用類型可以擁有屬性和方法，屬性又可以包含基本類型和引用類型 - 值可變 ```javascript var obj = { sex: "male" }; console.log(obj.sex.toUpperCase()); // "MALE" console.log(obj.sex); // male obj.addr = "zhengzhou"; console.log(obj.addr); // "zhengzhou" console.log(obj); // { sex: 'male', addr: 'zhengzhou' } ``` ```javascript var obj = { sex: "male", obj1: {} }; obj.obj1.addr = "zhengzhou"; console.log(obj); // { sex: "male", obj1: { addr: 'zhengzhou' } } ``` ```javascript var obj = { sex: "male", obj1: {} }; obj.obj1.addr = "zhengzhou"; console.log(obj); // { sex: "male", obj1: { addr: 'zhengzhou' } } console.log(obj.sex.toUpperCase()); // MALE console.log(obj); //{ sex: "male", obj1: { addr: 'zhengzhou' } } ``` ## 函數傳參, 按值傳遞 ,按引用傳遞 ```javascript var a = 123; function addNum(a) { a += 123; return a; } var res = addNum(a); console.log(res); // 246 console.log(a); // 123 ``` ```javascript var a = 123; function changeNum(b) { b++; } changeNum(a); console.log(a); var obj = { sex: "female" }; function changeObj(a) { a.age = 123; } changeObj(obj); console.log(obj); ``` ```javascript var a = { age: 17 }; function addAge(a) { a.age++; return a.age; } var res = addAge(a); console.log(res); // 18 console.log(a); // { age: 18 } ``` # arguments 問題, 函數的參數個數問題 ECMAScript 函數不介意傳遞進來多少個參數，也不在乎傳進來參數是什么數據類型。也就是說，即便你定義的函數只接收兩個參數，在調用這個函數時也未必一定要傳遞兩個參數。可以傳遞一個、三個甚至不傳遞參數，而解析器永遠不會有什么怨言。之所以會這樣，原因是 ECMAScript 中的參數在內部是用一個數組來表示的。函數接收到的始終都是這個數組，而不關心數組中包含哪些參數（如果有參數的話）。如果這個數組中不包含任何元素，無所謂；如果包含多個元素，也沒有問題。實際上，在函數體內可以通過 arguments 對象來訪問這個參數數組，從而獲取傳遞給函數的每一個參數。其實， arguments 對象只是與數組類似（它并不是 Array 的實例），因為可以使用方括號語法訪問它的每一個元素（即第一個元素是 arguments[0] ，第二個元素是 argumetns[1] ，以此類推），使用 length 屬性來確定傳遞進來多少個參數。 ```javascript function getNewSum() { var sum = 0; for (var index = 0; index < arguments.length; index++) { sum += arguments[index]; } return sum; } console.log(getNewSum(1, 2, 3, 4, 5, 6, 7)); // 28 ``` # typeof 的局限 > typeof 是非常得力的助手，但在檢測引用類型的值時，這個操作符的用處不大。通常，我們并不是想知道某個值是對象，而是想知道它是什么類型的對象 ```javascript console.log([] instanceof Array); console.log({} instanceof Object); function hello() {} console.log(hello instanceof Function); console.log(123 instanceof Number); ``` ```javascript console.log(typeof null); // object console.log(typeof []); // object console.log(typeof {}); // object console.log([] instanceof Array); // true console.log({} instanceof Object); // true function hello() {} console.log(hello instanceof Function); // true console.log(123 instanceof Number); // false ```