这段时间一直忙着写需求,没啥时间来写博客,今天抽个空更新一篇博客~

这一篇我们来总结下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中一些重点的地方。随机更新~