前端之JavaScript

一. JavaScript 簡介

         1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。

        該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。一是商標，JavaScript自己已被Netscape註冊爲商標。而是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。

       所以ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

      JavaScript 是腳本語言,也是一種輕量級的編程語言。可插入 HTML 頁面的編程代碼, 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

二. JavaScript 引入方式     

          script標籤內直接寫代碼:

 

<script>
  // 在這裏寫你的JS代碼
</script>

 

           利用script標籤的src屬性導入外部js代碼文件:

<script src="myscript.js"></script>

三.JavaScript 語言規範

     註釋

// 這是單行註釋

/*
這是
多行註釋
*/

    結束符:JavaScript中的語句要以分號（;）爲結束符.

   

    聲明變量:ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如,在for循環等局部名稱空間用let            

          聲明變量不會影響到全局.

var name = 'hello'

let name = 'hello'

 

  js中變量命名規範:

                  數字 字母 下劃線 $ 

                  數字不能開頭而且不能與存在關鍵字衝突

                 Javascript建議使用(駝峯體):userName,UserName

 

 常量: ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

四.JavaScript 基本數據類型

     數值類型: JavaScript不區分整型和浮點型，只有一種數值類型,字符串可轉換爲數值類型,其中

     NaN屬性是表明非數字值的數值類型.

 

 

      字符串類型:

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 獲得Helloworld

 

     示例1:

          

 

 

     示例2:

          

        定義多行文本完成字符串拼接,若是`  `內部還有` 須要用(\)轉義:

         

  布爾類型: true和false都是小寫,   ""(空字符串)、0、null、undefined、NaN都是false。

var a = true;
var b = false;

• null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
• undefined表示當聲明一個變量但尚未賦值，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

 對象(Object)  :

           JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

           對象是帶有屬性和方法的特殊數據類型.

       數組: 使用單獨的變量名來存儲一系列的值。相似於Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

        

     示例1:

        

    

  示例2:

      

    for循環:

           

   類型查詢:

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

 

五.運算符

         x++與++x的區別:

             

 

    

         比較運算符:  !=   ==   ===    !==

 

   

1 == 「1」      // true  弱等於
1 === "1"     // false 強等於
1 != 「1」     //  false
1 !== 「1」    //  true

 

 

六.流程控制

    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");
}

 

    switch:  switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

var day = new Date().getDay();        當天周幾:0-6
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
  ....
  }

   for:

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

  while:

 

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

 

 三元運算:

var a = 1;
var b = 2;
var c = a > b ? a : b
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

 

七.函數:

 

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}
　補充:console.log(arguments[0]);//arguments至關於將出傳入的參數所有包含，這裏取得就是第一個元素


// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

 

ES6中容許使用「箭頭」（=>）定義函數。

var f = v => v;
// 等同於
var f = function(v){
  return v;
}

若是箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分：

var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;  //這裏的return只能返回一個值(最後一個值)，若是想返回多個值須要本身手動給他們包一個數組或對象中
}

 

 

函數的全局變量和局部變量:

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

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的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。

    

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

     遍歷對象中的內容：

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

    建立對象:

var person=new Object();  // 建立一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

    

    Date對象

     建立Date對象:

//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

       Date對象的方法：

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

   

練習：

編寫代碼，將當前日期按「2017-12-27 11:11 星期三」格式輸出

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定義一個數字與星期的對應關係對象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是從0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元運算

    var week = WEEKMAP[d1.getDay()];  //星期是從0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

     

        JSON對象:          

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

     

       RegExp對象:

// 定義正則表達式兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正則校驗數據
reg1.test('jason666')
reg2.test('jason666')

/*第一個注意事項，正則表達式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');   //true
reg2.lastIndex;           //7
reg2.test('egondsb');   //false
reg2.lastIndex;          // 0
/*第二個注意事項，全局匹配時有一個lastIndex屬性*/

// 校驗時不傳參數
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();       //true
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

坑點集錦:
1.正則表達式中千萬不要寫空格
2.全局匹配模式lastindex
3.匹配的時候不傳任何參數默認匹配undefined

     

  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)      返回角的正切。