JS语法(二)

时间:2021-06-06 17:11:05

JS变量

  • var 变量名 = 变量值;//自己会判断什么类型
  • 一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
  • var name = “xiaosan”, age = 22, address = “owrhohfw”;
  • var a = 10;
  • var b;   // 当一个变量没有被赋值的时候,是undefined
          console.log(typeof b);  //打印a的类型
  • 重新声明JS变量,改变量的值不会丢失
    • var name = “Siri”;
    • var name;   // 依然是Siri
  • JS变量生命周期
    • 局部变量在函数运行以后被删除。
    • 全局变量在页面关闭后被删除。
  • 如果把值赋给未声明的变量,该变量将被自动作为全局变量声明,即使在函数内执行。
    • carName = “Volvo”;

数据类型

  • 不能写数据类型,只能用var,也可以省去var 直接写
  • number:所有数字,比如小数\整数,JS数字均为64位
  • object:对象类型
  • string:字符串类型,用双引号“aaa”或者单引号‘ aaa’, 建议单引号  参考手册:http://www.w3school.com.cn/jsref/jsref_obj_string.asp
  • function:函数类型     var msg = '我是 '
  • boolean : true / false
  • var age = 20;
    var name = 'xiaosan';
    height = 1.88;
    var msg = '我是' + name + ',' + age + '岁,身高是' + height;

JS运算符

  • 算数运算符
    • +
    • -
    • *
    • /
    • %
    • ++
    • --
  • 赋值运算符  x = 10;  y = 5;
    • =
    • +=
    • -=
    • *=
    • /=
    • %=
      • x%=y      x = 0
  • 用于字符串的 + 运算符
    • + 运算符用于把文本值或字符串变量加起来(连接起来)。
    • 想在两个字符串之间增加空格,需要把空格插入一个字符串之中:
    • 或者把空格插入表达式中:
      • tex3 = tex1 + ”  “ +text2;
    • 如果把数字与字符串相加,结果将成为字符串。
 
  • 比较运算符   给 x = 5
    • ==      等于
      • x == 8  为false
    • ===    全等(值和类型)
      • x === 5 为true;x === “5”为false
    • !=
    • >
    • <
    • >=
    • <=
 
  • 逻辑运算符
    • &&
    • ||
    • !
 
  • 条件运算符
 
 运算符从左到右

  • 其他数据类型和字符串相加,会变成一个新的字符串
  • var str1 = 10+10+'10';   //2010
    var str2 = '10'+10+10;   //101010
    var str3 = '10'+(10+10);   //1020

数组

  • 数组中可以放任意类型的数据
  • 写法一:
    • var cars = new Array();
    • cars[0] = "Audi";
      cars[1] = "BMW";
  • 写法二:
    • var newArr = [10, -5, age, name, result, score, ['哈哈哈', 'dewdew']];
  • 写法三:
    • var names = new Array("jack", "rose", "dd");
  • 输出数组中的内容,遍历有两种方式
    • for
    • for in
  • 删除最后一个元素,添加一个新的元素到数组中 pop()和push()
    • newArr.pop(); //删除数组中最后的元素
    • newArr.push([‘添加一个新的元素']);
 

apply()

  • 语法:fun.apply(thisArg, [argsArray])
    • 参数一:thisArg
      • 在 fun 函数运行时指定的 this 值。
      • 如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动指向全局对象(浏览器中就是window对象),
      • 同时值为原始值(数字,字符串,布尔值)的 this 会指向该原始值的自动包装对象。
    • 参数二:argsArray
      • 一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 fun 函数。
      • 参数限制在个数65536
    • var newNumbers = [10,99,-21,3];
      // 取出最小值
      var minNumber1 = Math.min(10,32,34,4554,-9);  // Math.min([10, 20,1]) 这样不行,min不能接收数组
      var minNumber = Math.min.apply(null, [10,99,-21,3]); // apply 可以接收
      // 取出最大值
      var maxNumber = Math.max.apply(null, newNumbers);

Undefined和Null

  • Undefined这个值标示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
  • cars = null;

定义函数   

  • 注意:两个相同的变量或者函数名,后面的会覆盖前面的。JS不存在重载
  • function 函数名(参数..) { //参数只能写var 所以可以省去var,直接写参数名
        //函数体
    }
  • function login(username, pwd) {
        console.log(username);
        console.log(pwd);
        return 110; //返回值可以直接写
    }
    //直接调用
    login(xiaosan,123456);
  • function sum(sum1, sum2, sum3) {
        return sum1+sum2+sum3;
    }
    console.log(sum(10, 20));   //number+undefined 结果为NaN==Not a Number
  • // 万能加法 
    function sum1(numbers){
        var count = 0;
        for(var i=0; i<numbers.length; i++){
            count += numbers[i];
        }
        return count;
    }

    var numbers = [12,23,'10'];
    var result1 = sum1(numbers);
    console.log('result1---->',result1);

  • result1----> 3510  // 字符
  • 匿名函数
    • var test = function (){
          console.log('我是匿名函数');
      }
      // 如何调用匿名函数
      test();
  • 构造函数
    • // 构造函数方式一
      function Dog(){
          this.name = null;
          this.age = null;
          this.friends = [];
          this.eat = function(someWhere){
              console.log(this.name + '跑' + someWhere);
          }
      }

      // 批量产生狗
      var dog1 = new Dog();

      // 赋值
      dog1.name = 'laoda';
      dog1.age = 19;
      dog1.friends = ['laoer', 'laosan'];
      dog1.eat('骨头');

  • // 构造函数方式二
    function Dog(name, age, friends){
        this.name = name;
        this.age = age;
        this.friends = friends;
        this.eat = function(someThing){
            console.log(this.name + '吃' + someThing);
        }
    }

    // 创建新的对象
    var dog2 = new Dog('laoda', 1, ['laoer']);
    console.log(dog2);

内置对象 arguments

  • arguments 是 JavaScript 里的一个内置对象,所有函数都有自己的一个arguments对象,它包含了函数调用的所有参数,它是一个object类型。
  • 我们可以用调用数据的方法来调用arguments。比如length,还有index方法。但是数 组的push和pop对象是不适用的。
  • 将 arguments 转为数组
    • var args = Array.prototype.slice.call(arguments);
  • function sum2(){
        var count = 0;
        for(var i=0; i<arguments.length; i++){
            count += arguments[i];
        }
        return count;
    }

    var result2 = sum2(10,20,40,30);
    console.log('result2--->', result2);

  • result2---> 100  // number
 
  • function sum( ) {
        for (var i = 0, count = arguments.length; i < count; i++) {
            var tmp = arguments[i];
            if (typeof tmp == 'number') {   //判断是否为number类型
                num += arguments[i];
            }
        }
        return num;
    }
    console.log(sum('10', 10, 20, 'xiaosan'));  //结果为30
  • 而对于string类型的数字,最快的变为number类型的方式是乘以1  ‘10’* 1;
  • 也可以掉函数  parseFloat('10');   // number类型的 10
 
JS 标签

  • 可以对JS语句进行标记
  • cable : 语句
  • cars=["BMW","Volvo","Saab","Ford"];
    list:
    {
        document.write(cars[0] + "<br>");
        document.write(cars[1] + "<br>");
        document.write(cars[2] + "<br>");
        break list;
        document.write(cars[3] + "<br>");
        document.write(cars[4] + "<br>");
        document.write(cars[5] + "<br>");
    }
  • BMW
    Volvo
    Saab

typeof 

  • 用于判断变量的真实类型
  • var address = 'hhhhhh';
    var num = 22;
    console.log(typeof address, typeof num);
  • string number

JS 语法的灵活性

  • 逻辑或 ||
    • var name1 = '';
      var name2 = 'name2';
      var name3 = 'name3';

      var newName = null;
      // 判断if(name1){
          newName = name1;
      }elseif(name2){
          newName = name2;
      }elseif(name3){
          newName = name3;
      }
      console.log(newName); // name2

  • 新的做法
    • newName = name1 || name2 || name3;
      console.log(newName); // name2
  • 逻辑与 && 
    • var age = 18;
      if(age>18){
          console.log(‘可以去网吧');
      }
  • 条件 && {
       ...
     }
    (age >18) && console.log(‘可以去网吧');