w3school教程

目錄

• JavaScript輸出
• 變量
• • Undefined 和 Null
  • 聲明變量類型
  • • 變量作用域var、let、const區別
• 字符串
• • 字符串屬性
  • 字符串方法
• js數組、隊列、棧等
• js對象
• • 創建方法：直接創建、函數構造器、工廠方法
  • JS面向對象：PROTOTYPE屬性解釋及常用方法
  • js常用對象用法
• for循環
• 類型轉換
• • typeof 操作符
  • constructor 屬性
  • 將數字、日期等轉換為字符串
  • 將字符串、布爾值轉換為數字
• 函數
• • 正則表達式
  • 匿名函數
  • 形參與實參
• 異常處理
• json
• JavaScript 閉包

JavaScript輸出

使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文檔中。

使用 innerHTML 寫入到 HTML 元素。

<p id="demo">我的第一個段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script>

使用 console.log() 寫入到瀏覽器的控制臺。

變量

數組（Array）字面量 定義一個數組：

var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; //或者 (condensed array): var cars=new Array("Saab","Volvo","BMW"); //或者 var array = [40, 100, 1, 5, 25, 10]

對象（Object）字面量 定義一個對象：

var obj = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函數（Function）字面量 定義一個函數：

function myFunction(a, b) { return a * b;}

Undefined 和 Null

Undefined 這個值表示變量不含有值。
可以通過將變量的值設置為 null 來清空變量。

聲明變量類型

當您聲明新變量時，可以使用關鍵詞 “new” 來聲明其類型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
提示：JavaScript具有隱含的全局概念，意味著你不聲明的任何變量都會成為一個全局對象屬性。

變量作用域var、let、const區別

變量的生命周期

1。作用域不一樣，var是函數作用域，而let是塊作用域，也就是說，在函數內聲明了var，整個函數內都是有效的，比如說在for循環內定義了一個var變量，實際上其在for循環以外也是可以訪問的，而let由于是塊作用域，所以如果在塊作用域內（比如說for循環內）定義的變量，在其外面是不可被訪問的，所以let用在for (let i; i < n; i++)是一種很推薦的寫法

2.let 不具有變量提升,具有塊級作用域，不允許重復定義
let定義的變量是塊級的變量。使用 let 聲明的變量，在聲明前無法使用，否則將會導致錯誤；如果未在 let 語句中初始化您的變量，則將自動為其分配 JavaScript 值 undefined。但是var是可以的。

3.const定義常量（一旦賦值不可更改）
const也用來聲明變量，但是聲明的是常量。一旦聲明，常量的值就不能改變，同時它與let相同也不能在相同塊級作用域內重復聲明同一個變量。
注意：const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。

總之呢，let從規范化的角度來說，要比var要進步了很大一步。所以一般情況下的話，推薦用let，const這些。

字符串

字符串可以是插入到引號中的任何字符。你可以使用單引號或雙引號：

var carname = "Volvo XC60"; var carname = 'Volvo XC60';

你可以使用索引位置來訪問字符串中的每個字符：

var character = carname[7];

字符串的索引從 0 開始，這意味著第一個字符索引值為 [0],第二個為 [1], 以此類推。

字符串屬性

字符串方法

js數組、隊列、棧等

數組是一個對象，數組索引為正整數屬性
https://www.w3cschool.cn/javascript/javascript-array.html

js對象

創建方法：直接創建、函數構造器、工廠方法

創建直接的實例

person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue"; person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用對象構造器

function person(firstname,lastname,age,eyecolor) {this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor; }

工廠方法

var factory = function (role) { function User(obj) {this.name = obj.name;this.role = obj.role; } switch(role) {case 'superman':return new User({ name: '平臺用戶', role: ['主頁', '登錄頁'] })break;case 'man':return new User({ name: '游客', role: ['登錄頁']})break;default:throw new Error('參數錯誤') } }let superman = factory('superman'); let man = factory('man');

JS面向對象：PROTOTYPE屬性解釋及常用方法

**js原型理解
https://www.cnblogs.com/wulihong/p/8906231.html

js常用對象用法

https://www.w3cschool.cn/javascript/js-obj-number.html

for循環

for (var i=0; i<5; i++){ x=x + "The number is " + i + "<br>"; }

JavaScript for/in 語句循環遍歷對象的屬性：

var person={fname:"John",lname:"Doe",age:25}; for (x in person){ txt=txt + person[x]; }

類型轉換

typeof 操作符

你可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。

typeof "John" // 返回 string typeof 3.14 // 返回 number typeof NaN // 返回 number typeof false // 返回 boolean typeof [ 1,2,3,4] // 返回 object typeof {name: 'John', age:34} // 返回 object typeof new Date() // 返回 object typeof function () {} // 返回 function typeof myCar // 返回 undefined (if myCar is not declared) typeof null // 返回 object

constructor 屬性

constructor 屬性返回所有 JavaScript 變量的構造函數。

"John".constructor // 返回函數 String() { [native code] } (3.14).constructor // 返回函數 Number() { [native code] } false.constructor // 返回函數 Boolean() { [native code] } [1,2, 3,4].constructor // 返回函數 Array() { [native code] } {name:'John', age:34}.constructor // 返回函數 Object() { [native code] } new Date().constructor // 返回函數 Date() { [native code] } function() {}.constructor // 返回函數 Function(){ [native code] }

你可以使用 constructor 屬性來查看對象是否為數組 (包含字符串 “Array”):

function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; }

將數字、日期等轉換為字符串

https://www.w3cschool.cn/jsref/jsref-obj-number.html

String(123) (123).toString()

將字符串、布爾值轉換為數字

Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaNNumber(false) // 返回 0 Number(true) // 返回 1

函數

正則表達式

正則表達式

function add(var1,var2) {return var1+var2; }

匿名函數

var myFunction = function (a, b) {return a * b} var x = myFunction(4, 3);

如果函數調用時設置了過多的參數，參數將無法被引用，因為無法找到對應的參數名。 只能使用 arguments 對象來調用。

JavaScript 函數有個內置的對象 arguments 對象，argument 對象包含了函數調用的參數數組。通過這種方式你可以很方便的找到最后一個參數的值：

x = findMax(1, 123, 500, 115, 44, 88);function findMax() {var i, max = arguments[0];if(arguments.length < 2)return max;for (i = 0; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max; }

形參與實參

JavaScript函數傳值只是將參數的值傳入函數，函數會另外配置內存保存參數值，所以并不會改變原參數的值。

在JavaScript中，可以引用對象的值。因此我們在函數內部修改對象的屬性就會修改其初始的值。修改對象屬性可作用于函數外部（全局變量）。

異常處理

function myFunction() { try{ var x=document.getElementById("demo").value;if(x=="") throw "empty";if(isNaN(x)) throw "not a number";if(x>10) throw "too high";if(x<5) throw "too low";} catch(err){var y=document.getElementById("mess");y.innerHTML="Error: " + err + ".";} }

json

JSON 字符串轉換為 JavaScript 對象

通常我們從服務器中讀取 JSON 數據，并在網頁中顯示數據。
簡單起見，我們網頁中直接設置 JSON 字符串 (你還可以閱讀我們的 JSON 教程):
首先，創建 JavaScript 字符串，字符串為 JSON 格式的數據：

var text = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然后，使用 JavaScript 內置函數 JSON.parse() 將字符串轉換為 JavaScript 對象:

var obj = JSON.parse(text);

JavaScript 閉包

還記得函數自我調用嗎？該函數會做什么？

var add = (function () {var counter = 0;return function () {return counter += 1;} })();add(); add(); add();// 計數器為 3

變量 add 指定了函數自我調用的返回字值。
自我調用函數只執行一次。設置計數器為 0。并返回函數表達式。
add變量可以作為一個函數使用。非常棒的部分是它可以訪問函數上一層作用域的計數器。
這個叫作 JavaScript 閉包。它使得函數擁有私有變量變成可能。
計數器受匿名函數的作用域保護，只能通過 add 方法修改。

總結

以上是生活随笔為你收集整理的js快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。