前端基礎之JS

流程控制

if-else

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

if-else if-else

var day = new Date()
switch (day) {
  case 0:  
  console.log("sunday")  
  break;
  case 1:
  console.log("monday")  
  break;
default:
  console.log("...")  




    
}
#  必須加break否則會一直向下執行無論default是否存在，default是指都不是才走

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

函數

JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。

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

//帶參數的函數
function f2(a, b)  {
    console.log(arguments);  //內置的arguments對象
    console.log(arguments.length);
    console.log(a, b)
    return a,b  #1,2,3
}
ret = f2(100,200)
console.log(ret)
    #傳少了會返回一個NAN
    #傳多了只會接收最開始符合實參的參數
    #返回多個值只會返回最後一個值會如上圖：只接收一個返回值，除非是列表其餘的對象中
    #不傳也沒事返回一個NAN
帶返回值得函數

匿名函數方式

var sum = function (a,b) {
    return a+b;


}
sum(1,2)

當即執行函數

(function(a,b) {

　　return a + b;

})(1, 2);

 

補充：

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

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

 

函數中的arguments參數

function add(a,b) {
  console.log(a+b);  
  console.log(arguments.length)  
}
add(1, 2)

 

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

局部變量：

在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量：

在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

變量生存週期：

JavaScript變量的生命期從它們被聲明的時間開始。

局部變量會在函數運行之後被刪除。

全局變量會在頁面關閉後被刪除。

 

做用域

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

var city = "beijing";
function f()  {
    var city = "shanhai";
    function inner()  {
      var city = "shenhen";
       console.log(city);
}
   inner();
}
f();

 

var city = "beijing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印結果是？

 

3.閉包

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

 

詞法分析

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

詞法分析的過程：

當函數調用的前一瞬間，會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：

1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

函數內部不管是使用參數仍是使用局部變量都到AO上找。

看兩個例子：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 問：執行foo()以後的結果是？

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 執行後的結果是？

 

內置對象和方法

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。

注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

自定義對象

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屬性

注意：