iOS轉前端之JS基本文法總結

這段時間一直忙着寫需求，沒啥時間來寫部落格，今天抽個空更新一篇部落格~

這一篇我們來總結下JavaScript的基本文法。話不多說，開始吧。

首先，我們來看下js中的基本資料類型有哪幾種？

var age = 18; //number
   var name = 'jack'; //string
   var result = true; //boolean  false
   var score = null;  // object

           

最常見的就是以上者四種，可以看出來和iOS中的非常相似。

那麼我們如何判斷一個變量的資料類型呢？很簡單，隻需要使用

typeof 
           

例如：

console.log(typeof age,typeof name,typeof result, typeof score);
           

輸出結果為：

//number
//string
//boolean
// object
           

如何拼接？easy！直接使用 `+` :

var count1 = age + money;
var newName = name + '-' + name2;
           

當然這個是有一定的規律的，變量的拼接都是從左往右,任何類型的變量和string類型的變量拼接,都會被轉換為string類型。

了解了這個規律後，我們來看一道題目：

var str1 = 10 + 10 + '10';
var str2 = '10' + '10' + 10;
var str3 = '10' + 10+  10;
var str4 = '10' + 10 + '10'; 
           

請分别寫出上述四個變量的輸出結果；

。。。。。。。

OK，下面公布答案：

// 2010
// 101010
// 101010 1020
// 101010
           

至于為什麼？主要利用的還是上面說的那條規律。

好的，下面我們來看看數組方面的。數組的表示很簡單：

var arrNumber = [-1, age, name, result, '哈哈哈', ['百度', '谷歌']];
           

這個跟我們iOS還是有些差別的，可以裝不同類型的元素。

周遊一個數組：

for(var i=0; i<arrNumber.length; i++){
        console.log(i,arrNumber[i]);
    }
           

删除數組最後的元素：

arrNumber.pop();
           

加入一個數組：

var name = 'iOS轉前端';
arrNumber.push(name);
           

取出數組中的最小值：

var numbers = [-1, 23,32,99];
// 取出最大值
   console.log(Math.max(120, 3232, 0));
//   取出數組中的最小值
   console.log(Math.min.apply(null, numbers))
           

這其中Math就相當于JS裡封裝的一些關于數學操作的函數。

好了。接下來我們再來看看JS中的函數。

下面我們來定義一個函數：

// 定義一個函數
    function sum(num1, num2){
        return num1 + num2;
    }
           

調用它：

// 調用
   var count = sum(10, 40);
   console.log(count);
           

OK，是不是很簡單，其實是和Swift中的函數定義非常相似的。是以說語言之間還是有很多借鑒之處的。

接下來我們寫一個萬能的加法函數。

// 萬能的加法函數
    function sum2(numbers){
        var count = 0;
        for(var number in numbers){
            count += numbers[number];
        }
        return count;
    }
           

調用：

var numbers = [10, 12, 15, 1221,3232, 'jh'];
var result = sum2(numbers);
           

在JS中一個函數預設是有一個自帶的參數`arguments`，這個參數不需要申明，在函數内部可以直接拿來使用，上面的萬能加法函數可以簡化成：

function sum3(){
       var count = 0;
       for(var number in arguments){
           count += arguments[number];
       }
       return count;
   }

//  調用
   var result2 = sum3(10,12,322,1221,3232,3232);
   console.log(result2);
           

然後我們說說匿名函數。

顧名思義，沒有名字的函數，那麼我們如何調用它，正确的做法是用一個變量來表示它，來看一個例子：

// 匿名函數
    var sum4 = function (){
        console.log('-------');
    }

//  調用
    sum4()
           

還是很簡單的吧，對我們有語言基礎的了解起來并不難。OK，下面我們來看看JS中的對象。

先來自己寫一個對象，對象中可以有參數，可以有方法。

// 狗對象
// this 在哪個對象中,其就代表那個對象
    var dog = {
        name : 'wangcai',
        age  : 15,
        height : 1.55,
        friends :['xixi', 'lulu'],
        // 吃
        eat : function(someThing){
            console.log(this.name + '-----吃' + someThing);
        },
        // 跑
        run : function(someWhere){
            console.log(this.name + '------跑' + someWhere);
        }
    };

//    調用
//    console.log(dog.name, dog.age, dog.height);
      dog.eat('五花肉');
      dog.run('操場');
           

在iOS中，我們通常用[[xxx  alloc] init] 或者 [xxx new] 的方式來建立一個新對象，那麼JS中應該怎麼做呢？很簡單，直接使用new,我們看一個例子：

// 函數 --> 構造函數
    function Dog(){
        console.log('--------');
    }

    // 調用函數
    Dog();
    // 更新成構造函數
    var dog1 = new Dog();  // new -->[[ alloc] init]
    console.log(dog1);

    var dog2 = new Dog();
    console.log(dog2);
           

當然，如果對象中有方法和參數，我們也可以進行指派和操作：

// 函數--->構造函數
    function Dog(){
        this.name = null;
        this.age = null;
        this.height = null;
        this.friends = [];
        this.eat = function(someThing){
            console.log(this.name + '吃' + someThing);
        };
        this.run = function(someWhere){
            console.log(this.name + '跑' + someWhere);
        };
    }

    // 産生狗對象
    var dog1 = new  Dog();
    var dog2 = new Dog();

    dog1.name = 'wangcai';
    dog1.age = 10;
    dog1.height = 1.55;
    dog1.friends = ['hhh', 'xxxx'];

    dog2.name = 'ahuang';
//    console.log(dog1, dog2);

    dog1.run();
    dog2.run();

    dog1.eat('五花肉');
    dog2.eat('喝湯');
           

最後我想說下，JS是一門文法自由的語言，為什麼這麼說呢？我們來看兩個例子吧。

第一個是 `||` 的用法：

// ||
    var name1 = 'name1';
    var name2 = '';
    var name3 = 'name3';
    var name4 = 'name4';

    var newName = null;
// 以前
    if(name1){
        newName = name1;
    }else if(name2){
        newName = name2;
    }else if(name3){
        newName = name3;
    }else{
        newName = name4;
    }
    console.log(newName);
           

// 新的寫法
    newName = name1 || name2 || name3 || name4;
    console.log(newName);
           

第二個，我們來看下 `&&`的用法：

// &&
     var age = 2;
    if(age>20){
        console.log('你可以結婚了');
    }
// 新的寫法
   (age>20)&&console.log('你可以結婚了!!!!!');
           

這兩種寫法還是很好用的，減少了代碼的數量。

總結：這篇主要介紹了一些基礎的JS文法，讓大家對JS有個基本的認識，雖然不是很全面，但日常開發的一些用法都介紹了，基本的開發工作應該沒問題。很多東西，其實不說，大家看到也是知道怎麼用的。畢竟語言大同小異嘛~~~廢話不多說，後面幾篇部落格再重點介紹JS中一些重點的地方。随機更新~