前端基礎 之JS

瀏覽目錄

• JavaScript語法基礎

• JavaScript數據類型及類型查詢

• JavaScript運算符

• JavaScript流程控制

• JavaScript函數

• 詞法分析

• JavaScript內置對象方法

 

一、JavaScript語法基礎

1、變量命名規范

• 變量名只能是 字母、數字、下划線或美元符號的任意組合
• 變量名不能是數字開頭
• 關鍵字不能聲明為變量名
• 建議用駝峰命名方式
• 變量名是區分大小寫
• 變量的定義要具有可描述性

2、變量聲明

• var 變量名 = 變量值;
• JavaScript屬於動態類型(同一個變量可以存不同數據類型的值)
• 語句必須以分號結束

3、注釋

• // 單行注釋
• /* 

           多行注釋 

            */

二、JavaScript數據類型及類型查詢

1、數字number

只有一種數字類型，數字可以帶小數點，也可以不帶

• 示例

var a = 12.34;
var b = 20;
var c = 123e5;  # 12300000
var d = 123e-5;  # 0.00123
☆還有一種NaN，表示不是一個數字（Not a Number）

• 常用方法

# 將字符串轉為數字(當傳入的字符串參數不能轉為數字時，變返回NaN)
parseInt("123")  # 返回123
parseInt("ABC")  # 返回NaN，NaN屬性是代表非數字值的特殊值，該屬性用於指示某個值不是數字
parseFloat("123.456")  # 返回123.456

2、字符串String

字符串可以是引號中的任意文本，可以使用單引號或雙引號

• 示例

var a = "Hello";
var b = 'World';
var c = a + b; 
console.log(c);  # 得到HelloWorld

• 常用方法

·String.length：返回長度
·String.trim()：移除空白
·String.trimLeft()：移除左邊空白
·String.trimRight()：移除右邊空白
·String.charAt(n)：返回第N個字符
·String.concat(value, ...)：拼接字符串
·String.indexOf(substring, start)：返回子序列位置
·String.substring(from, to)：根據索引獲取子序列(顧頭不顧尾)
·String.slice(start, end)：切片
·String.toLowerCase()：轉換成小寫
·String.toUpperCase()：轉換成大寫
·String.split(delimiter, limit)：分割
·string.slice(start, stop)和string.substring(start, stop)對比：
    ·兩者的相同點：
        如果start等於end，返回空字符串
        如果stop參數省略，則取到字符串末
        如果某個參數超過string的長度，這個參數會被替換為string的長度
    ·substirng()的特點：
        如果 start > stop ，start和stop將被交換
        如果參數是負數或者不是數字，將會被0替換
    ·silce()的特點：
        如果 start > stop 不會交換兩者
        如果start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
        如果stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

3、布爾類型Boolean

布爾只能有兩個值：true 或 false(注意true和false都是小寫)

• 示例

var x=true;
var y=false;

4、數組Array

• 示例

·創建數組方式一：
    var cars=new Array();
    cars[0]="A";
    cars[1]="B";
    cars[2]="C";
·創建數組方式二：
    var cars=new Array("A","B","C");

• 常用方法

·Array.length：數組的長度
·Array.push(element)：尾部追加元素
·Array.pop()：獲取尾部的元素
·Array.unshift(element)：頭部插入元素
·Array.shift()：頭部移除元素
·Array.slice(start, end)：切片
·Array.reverse()：反轉
·Array.join(seq)：將數組元素連接成字符串
·Array.concat(val, ...)：連接數組
·Array.sort()：排序
·關於雞肋的JavaScript內置sort方法的解釋及優化：
    /*
    如果調用sort方法時沒有傳入參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。
    如果想按照其他標准進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：
    若 a 小於 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
    若 a 等於 b，則返回 0。
    若 a 大於 b，則返回一個大於 0 的值。
    */
    // 根據上面的規則自行實現一個排序函數：
    function sortNumber(a,b) {
      return a - b
    }
    // 調用sort方法時將定義好的排序函數傳入即可。
    stringObj.sort(sortNumber)

5、對象Object

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔

• 示例

var person={
firstname : "Ya",
lastname  : "elegance",
id        :  818104
};　

• 常用方法

name=person.lastname;
name=person["lastname"]; 　　

6、空Null

表示值是空，一般在需要指定或清空一個變量時才會使用

7、未定義Undefined

當聲明一個變量但未初始化時，該變量的默認值是undefined，函數無明確的返回值時，返回值也是undefined

8、類型查詢

• 方法：typeof
• typeof是一個一元運算符（就像++，–，！，- 等一元運算符），不是一個函數，也不是一個語句
• 規則
  • undefined - 如果變量是 Undefined 類型的
  • boolean - 如果變量是 Boolean 類型的
  • number - 如果變量是 Number 類型的
  • string - 如果變量是 String 類型的
  • object - 如果變量是一種引用類型或 Null 類型的

三、JavaScript運算符

1、算數運算符

• +：相加
• -：相減
• *：相乘
• /：相除
• %：取余
• ++：自加1 (注意：n++表示后自加，++n表示先自加)
• –：自減1 (注意：n–表示后自減，–n表示先自減)

2、比較運算符

• > ：大於
• >= ：大於等於
• < ：小於
• <= ：小於等於
• == ：相等，判斷值是否相等
• != ：不等於
• === ：嚴格相等，判斷值、類型是否完全相等
• !== ：嚴格不等於

3、邏輯運算符

• && ：且
• || ：或
• ! ：非

4、賦值運算符

• = ：賦值
• += ：自加
• -= ：自減
• *= ：自乘
• /= ：自除

四、JavaScript流程控制

1、if else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

2、if-- else if --else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

3、switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}       

注意：switch中的case子句通常都會加break語句，否則程序會繼續執行后續case中的語句

4、for 

for (var i=0;i<10;i++) {
  console.log(i);
}

5、while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}　　

6、三元運算

格式：判斷條件？滿足條件的返回值：不滿足條件的返回值

var a = 1;
var b = 2;
var c = a > b ? a : b　

五、JavaScript函數

1、函數定義

• 普通函數定義

function func() {
    console.log('hello world!');
}

• 帶參數的函數定義

function func(arg1,arg2){
    console.log('arg1:',arg1);
    console.log('arg2:',arg2);
}

• 帶返回值的函數定義

function func1(arg1,arg2){
    return arg1+arg2;
}
fun1(1,2); //函數調用　　

• 匿名函數定義

var foo= function(arg1,arg2){
    return arg1+arg2;
}
foo(1,2) //函數調用

• 立即執行函數定義

(function(arg1,arg2){
    return arg1+arg2;
})(1,2);

2、類數組對象arguments

• 作用
• Javascript並沒有重載函數的功能，但是通過Arguments對象能夠模擬重載；
• Javascript的每個函數都會有一個Arguments對象實例arguments，它引着函數的實參，它也有類似於數組的length屬性。
  1. arguments.length為函數實參個數。
  2. arguments.callee引用函數自身。
• 示例

function func2(a,b) {
    console.log("總共有" + arguments.length + "個參數");
    var ret = 0;
    for (var i=0;i<arguments.length;i++){
        ret += arguments[i]
    }
    return ret;
}
console.log(func2(11,22,33));

3、局部變量&全局變量

• 局部變量
  • 在Javascript函數內部聲明變量（使用var）是局部變量，所以只能在函數內部訪問它（該變量的作用域是函數內部）；
  • 只要函數運行完畢，本地變量就會被刪除。
• 全局變量
  • 在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
• 變量生存周期：
  • Javascript變量的生命周期從它們被聲明的時開始；
  • 局部變量會在函數運行以后被刪除；
  • 全局變量會在頁面關閉后被刪除。

4、作用域

首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  

結果：
"ShenZhen"

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret(); 

結果：
"BeiJing"

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

結果：
"ShangHai" 

六、詞法分析

Javascript中在調用函數的那一瞬間，會先進行詞法分析。

1、詞法分析的過程

• 當函數調用的前一瞬間，會先形成一個激活對象：Avtive Object(AO),並會分析以下3個方面：
  • 函數參數，如果有，則將此參數賦值給AO，且值為undefined。如果沒有，則不做任何操作；
  • 函數局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，並且值為undefiined。
  • 函數聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。

2.注意：函數內部無論是使用參數還是使用局部變量都到AO上找。

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  

結果：
undefined
22

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();

結果：
function age()
22
22

詞法分析過程：
1、分析參數，有一個參數，形成一個 AO.age=undefine;
2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，因此不做任何處理
3、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成AO.age=function(){...};
最終，AO上的屬性只有一個age，並且值為一個函數聲明

執行過程：
注意：執行過程中所有的值都是從AO對象上去尋找
1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，所以第一個輸出的一個函數
2、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，所以在第二個輸出的是 2
3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了

七、JavaScript內置對象方法

1、介紹

• JavaScript中的所有事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。
• 我們在學習基本數據類型的時候已經帶大家了解了，JavaScript中的Number對象、String對象、Array對象等。
• 注意：var s1 = “abc”和var s2 = new String(“abc”)的區別：typeof s1 –> string而 typeof s2 –> Object

類型	內置對象	介紹
數據類型	Number	數字對象
數據類型	String	字符串對象
數據類型	Boolean	布爾值對象
組合對象	Array	數組對象
組合對象	Math	數學對象
組合對象	Date	日期對象
高級對象	Object	自定義對象
高級對象	Error	錯誤對象
高級對象	Function	函數對象
高級對象	RegExp	正則表達式
高級對象	Global	全局

2、自定義對象

• 創建、訪問自定義對象

//方式一：
var a = {"name": "Yang", "age": 18};
console.log(a.name);
console.log(a["age"]);

//方式二：
var person=new Object();  // 創建一個person對象
person.name="Yang";  // person對象的name屬性
person.age=18;  // person對象的age屬性

• 遍歷對象中的內容

var a = {"name": "Yang", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

• JavaScript面向對象之繼承（擴展）

// 父類構造函數
var Car = function (loc) {
  this.loc = loc;
};

// 父類方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子類構造函數
var Van = function (loc) {
  Car.call(this, loc);
};

// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修復 constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
  /* ... */
};

3、Date對象

• 創建Date對象

//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());

//方法2：參數為日期字符串
var d2 = new Date("2008/8/8 20:08");
console.log(d2.toLocaleString());
var d3 = new Date("08/8/8 20:08");
console.log(d3.toLocaleString());

//方法3：參數為毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數為年月日小時分鍾秒毫秒
var d4 = new Date(2008,8,8,20,08,08,100);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

• Date對象的方法

var d = new Date(); 
//getDay ()              獲取當前星期X(0-6,0代表星期天)
//getMonth ()            獲取當前月份(0-11,0代表1月)
//getFullYear ()         獲取完整的年份(4位,1970-????)
//getYear ()             獲取當前年份(2位)
//getHours ()            獲取當前小時數(0-23)
//getMinutes ()          獲取當前分鍾數(0-59)
//getSeconds ()          獲取當前秒數(0-59)
//getMilliseconds()      獲取當前毫秒數(0-999)
//getTime ()             返回累計毫秒數(從1970/1/1午夜)
//toLocaleDateString();  獲取當前日期
//toLocaleTimeString();  獲取當前時間
//toLocaleString( );     獲取日期與時間

4、JSON對象

方法示例

var str1 = '{"name": "Yang", "age": 18}';
var obj1 = {"name": "Yang", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

5、RegExp對象

• 創建方法　
  • 創建方法一

// 創建RegExp對象方式（逗號后面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
// 匹配響應的字符串
var s1 = "abc123";
//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1);  // true

• • 創建方法二

// 匹配響應的字符串
var s1 = "abc123";
// /填寫正則表達式/匹配模式（逗號后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test(s1);  // true

• 示例

// String對象與正則結合的4個方法
var s2 = "hello world";
s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容
s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割
s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換

// 關於匹配模式：g和i的簡單示例
var s1 = "name:Adele age:18";

s1.replace(/a/, "替換");      // "n替換me:Adele age:18"
s1.replace(/a/g, "替換");     // "n替換me:Adele 替換ge:18"      全局匹配
s1.replace(/a/gi, "替換");    // "n替換me:替換dele 替換ge:18"   不區分大小寫

• RegExp對象使用時的幾點之一事項

1. 1. 正則表達式(不能有空格)
   2. 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫)
   3. 如果regExpObject帶有全局標志g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。該屬性值默認為0，所以第一次仍然是從字符串的開頭查找。當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置。當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。因此，當我們使用test()函數執行了一次匹配之后，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。
   4. 當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test(“undefined”), 並且/undefined/.test()默認返回true。

6、Math對象

方法介紹：

對象	介紹
abs(x)	返回數的絕對值
exp(x)	返回 e 的指數
floor(x)	對數進行下舍入
log(x)	返回數的自然對數（底為e）
max(x,y)	返回 x 和 y 中的最高值
min(x,y)	返回 x 和 y 中的最低值
pow(x,y)	返回 x 的 y 次冪
random()	返回 0 ~ 1 之間的隨機數
round(x)	把數四舍五入為最接近的整數
sin(x)	返回數的正弦
sqrt(x)	返回數的平方根
tan(x)	返回角的正切