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(‘可以去网吧');
  
 

JS语法(二)的更多相关文章

  1. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  2. JS--我发现,原来你是这样的JS(二)(基础概念--躯壳篇--不妨从中文角度看js)

    一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第二篇(基础概念--躯壳篇),有着部分第三章的知识内容,当然其中还有我个人的理解. 红宝书这本书可以说是难啃的,要看完不容易,挺 ...

  3. JS 语法大全

    来源http://blog.csdn.net/newegg2009/article/details/6230582 js语法2008年03月19日 星期三 11:14一.js的数据类型和变量 Java ...

  4. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  5. PHP语法(二):数据类型、运算符和函数

    相关链接: PHP语法(一):基础和变量 PHP语法(二):数据类型.运算符和函数 PHP语法(三):控制结构(For循环/If/Switch/While) 这次整理了PHP的数据类型.运算符和函数. ...

  6. Python 基础语法(二)

    Python 基础语法(二) --------------------------------------------接 Python 基础语法(一) ------------------------ ...

  7. Sublime text3 JS语法检测工具安装及使用

    Sublime text3 JS语法检测工具安装及使用 工具/原料 sublime text3 nodejs sublimeLinter sublimeLinter-jshint 方法/步骤 首先ct ...

  8. 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  9. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

随机推荐

  1. ubuntu fix the grub boot(need Internet)

    sudo add-apt-repository ppa:yannubuntu/boot-repair sudo apt-get update sudo apt-get install -y boot- ...

  2. SharePoint 2013 开发——其他社交功能

    博客地址:http://blog.csdn.net/FoxDave 上一篇讲了如何获取用户配置文件的相关属性,它属于SharePoint 2013社交功能的一个小的构成部分.社交功能是SharePoi ...

  3. Cache-control使用Cache-control:private学习笔记

    其作用根据不同的重新浏览方式,分为以下几种情况:(1).打开新窗口值为private.no-cache.must-revalidate,那么打开新窗口访问时都会重新访问服务器.而如果指定了max-ag ...

  4. html页面的head标签下

    head区是指首页html代码的<head>和</head>之间的内容.  必须加入的标签  1.公司版权注释  <!--- the site is designed b ...

  5. CentOS上的RabbitMQ安装

    1. erlang安装配置(这里我们在opt目录下进行安装配置) cd /opt 安装依赖文件: yum install gcc glibc-devel make ncurses-devel open ...

  6. BackTrack5-r3安装前需要的准备及说明

    一. 配置创建一个虚拟机,本教程用的是VMware-workstation-full-10.0.0,BT5-r3-GNOME-64镜像. 这里是BT5-r3-GNOME-64位种子:http://pa ...

  7. Xml Schema:C#访问在complextype中插入新元素

    最近用c#写Xml Schema代码,找了很久也找不到如何在已有的complextype中插入新的element,最后我充分发挥自己的聪明才智,哈哈,终于从...中找到了灵感. XmlSchemaSe ...

  8. 关于CSS的那些事?

    关于CSS的那些事? 它有精准定位与排版,使得网页布局.信息排版一目了然:它有多姿多彩的样式属性,使得网页中各元素千变万化:它有神奇的渲染天赋,使得网页有了如诗如画.别具一格的魅力.你知道它了吗?没错 ...

  9. mysql source命令超大文件导入方法总结

    本文章来给各位朋友介绍利用mysql source命令超大文件导入方法总结,下面收集了两种解决办法,一种是把数据库分文件导出然后再导入,另一种是修改my.ini配置文件,下面我一一给各位朋友介绍. 导 ...

  10. javac

    http://openjdk.java.net/groups/compiler/ http://crazyjavahacking.org/tag/javac/ http://openjdk.java. ...