JavaScript学习(3) - JavaScript基本概念

Github: https://github.com/SHENLing0628/JavaScriptStudy
欢迎star,转载请标注来源


1. 语法

  • 区分大小写

  • 标识符:第一个字符必须是一个字母、下划线或一个美元符号;其他字符可以使字母、下划线、美元符号或数字。(惯例:驼峰法)

  • 注释:

    // 单行注释
    
    /*
     * 多行块级注释
     */
    
  • 严格模式 strict mode

    // 启用方法
    
    // 1. 全局使用:顶部添加
    "use strict"
    // 2. 局部使用:function内添加
    function foo() {
      "use strict"
      // 函数体
    }
    
  • 语句

    if (test) {
      test = false;
      alert(test);
    }
    

2. 变量

js中的变量为“松散类型”,即为可用来保存任何类型数据

var message = 'hi'
var message2 = 123

3. 数据类型

Undefined、Null、Boolead、Number、String、Object

  • typeof 操作符 - 检测变量类型

    数据类型 typeOf 返回结果
    未定义 "undefined"
    布尔值 "boolean"
    字符串 "string"
    数值 "number"
    对象或null "object"
    函数 "function"
  • undefined 类型 - 声明但未赋值的变量

    var message;
    alert(message); // 返回:undefined
    
  • Null类型 - 空对象指针

    var message = null
    alert(typeof message) // 返回:object
    
  • Boolean类型 - True / False

    // 强制转换
    var message = 123
    var message2 = Boolead(message) // 返回: true
    
    // 自动转换
    if (message) { // 在控制语句中,自动驻安徽
      alert('value is true')
    }
    

    备注: true不一定等于1,false不一定等于0

  • Number类型

    // 整数
    var intNum = 10 
    
    // 八进制 - 以0开头,后面是八进制序列0~7
    var octalNum = 077 
    
    // 十六进制 - 以Ox开头,后面是十六进制数字0~9 A~F
    var hexNum = 0x1f
    
    // 浮点值
    var floatNum = 1.1
    var floatNum2 = 3.125e7
    
    // NaN - not a number 非数值 - 表示本应返回数值,但未能返回的情况,以避免抛出错误
    var nanNum = NaN / 10; // 返回:NaN
    var nanNum2 = (NaN == NaN) // 返回: false - NaN与任何数值都不相等,包括其本身
    var nanNum3 = isNaN(NaN) // 返回: true
    var nanNum4 = isNaN("blue") // 返回:true - blue不可能被转换为数值
    var nanNum5 = isNaN(true) // 返回:false - true可以转换为数值1, 故不是NaN
    
    // 数值转换 - Number() - 复杂不合理
    Number(true) // 1
    Number(false) // 0
    Number(10) // 10
    Number(null) // 0
    Number(undefined) //NaN
    Number('blue') // NaN
    Number('123') // 123
    Number('1.1') // 1.1
    Number('0xf') // 15
    Number('') // 0
    
    //数值转换 - parseInt() - 第一个参数为转换数据,第二个参数为解析进制基数
    parseInt('1234blue') // 1234
    parseInt('') // NaN
    parseInt('0xA') // 10 - 十六进制:转换为对应的十进制
    parseInt(22.5) // 22
    parseInt("070") // 56 - 八进制:转换为对应的十进制
    parseInt("70") // 70
    parseInt("AF", 16) // 175 - 按十六进制解析,此时前面无需添加0x
    
    

    补充:

    isNaN执行流程:

    1. 先调用valueOf(),确定其返回值是否可以转换为数值
    2. 再调用toString(),测试其返回值
  • String 类型

    var name = "cindy"
    
    // 转换为字符串 - toString() - 可传参数:进制数
    var num = 10
    num.toString() // “10”
    num.toString(2) // “1010”
    
  • Object类型

    var obj = new Object()
    
    属性和方法 概念
    constructor 保存用于创建当前对象的函数
    hasOwnProperty(propertyName) 检查给定的属性在当前对象实例中是否存在
    例如:obj.hasOwnProperty("name")
    isPrototypeof(object) 检查传入的对象是否是当前对象的原型
    propertyIsEnumerable(propertyName) 检查给定的属性是否能够使用for-in语句来进行枚举
    toLocaleString() 返回对象的字符串表示,该字符串与执行环境的地区对应
    toString() 返回对象的字符串表示
    valueOf() 返回对象的字符串、数值、布尔值表示。通常与toString()返回值相同

4. 操作符

  • 一元操作符 - 只操作一个值的操作符

    // 1. 递增和递减 - 类似C语言思想
    // 1.1 前置型操作
    var age = 29
    ++age // 和 age = age + 1 效果相同
    --age // 和 age = age - 1 效果相同
    
    var anotherAge = --age + 2
    alert(age) // 28
    alert(anotherAge) // 30
    
    // 1.2 后置型操作
    var num1 = 2
    var num2 = 20
    var num3 = num1-- + num2 // 22
    var num4 = num1 + num2 // 21
    alert(num1) // 1
    
    // 1.3 适用于其他数据类型
    // 包含有效数字的字符串   - 先转换为数值变量,在执行加减操作
    // 不包含有效数字的字符串 - 变量值设置为NaN
    // false -------------- 先转为0,再执行加减1
    // true  -------------- 先转为1,再执行加减1
    // 浮点数 -------------- 直接执行加减1
    // 对象 ---------------- 先调用valueOf()方法,获得可供操作的值,再操作;若为NaN,则再调用toString()后再应用前述规则
    var s1 = "2"
    var s2 = "z"
    var b = false
    var f = 1.1
    var obj = {
      valueOf: function() {
        return -1
      }
    }
    
    s1++   // 3
    s2++   // NaN
    s3++   // 1
    f--    // 0.1
    obj--  // -2
    
    
    // 2. 一元加和减操作符
    // 2.1 一元加操作符 - 不对数值本身产生影响,但会类似Number()一样对数值执行强制类型转换
    var num = 25
    num = +num // 25
    
    // 2.2 一元减操作符 - 表示负数;对于非数值类型,先强制转换类型,再变为负数
    num = -num // -25
    
    
  • 位操作符 - 二进制 位计算

    默认情况下,ECMAScript所有整数都是有符号整数。也存在无符号整数;

    无符号整数 - 第32为不再表示符号,故可表示数值更大

    // 1. NOT 按位非 ~
    var num1 = 25    // 二进制 00000000000000000000000000011001
    var num2 = ~num1 // 二进制 11111111111111111111111111100110
    
    // 2. AND 按位与 &
    var result = 25 & 3 // 1
    
    // 3. OR 按位或 |
    var result = 25 | 3 // 27
    
    // 4. XOR 按位异或 ^
    var result = 25 ^ 3 // 26
    
    // 5. 左移 << (将数值所有位向左移动位数;且左移不影响符号位)
    var oldValue = 2              // 二进制 0000010
    var newValue = oldValue << 5  // 二进制 1000000  十进制:64
    
    // 6. 右移 
    // 6.1 有符号右移 - 保留符号位 >>
    var oldValue = 64
    var newValue = oldValue >> 5 // 2
    // 6.2 无符号右移 - 正数无影响,负数有变化 >>>
    var oldValue = -64             // 二进制 1111111111111111111111111111000000
    var newValue = oldValue >>> 5  // 二进制 0000011111111111111111111111111110 十进制 134217726
    
    
    • 布尔操作符

      // 1. 逻辑非 !
      !false     // true
      !"blue"    // false
      !0         // true
      !NaN       // true
      !""        // true
      !12345     // false
      
      // 2. 逻辑与 &&
      obj && true      // true - 第一个是对象,则返回第二个操作数
      true && obj      // obj  - 第二个是对象,则在第一个为true时,返回对象
      obj1 && obj2     // obj2 - 两个都是对象,则返回第二个对象
      null && true     // null - 第一个是null,则返回null
      NaN && true      // NaN  - 第一个是NaN,则返回NaN
      udefined && true // undefined - 第一个是undefined,则返回undefined
      
      // 3. 逻辑或 ||
      obj || true          // obj - 第一个是对象,则返回第一个操作数;但第一个obj求职结果为false,则返回第二个
      obj1 || obj2         // obj1 - 两个都是对象,则返回第一个对象
      null || null         // null - 两个都是null,则返回null
      NaN || NaN           // NaN  - 两个都是NaN,则返回NaN
      udefined || udefined // undefined - 两个都是undefined,则返回undefined
      
    • 乘性操作符 - 乘法、除法和求模

      // 1. 乘法 - 乘积超过数值范围,则返回Infinity或-Infinity
      var result = 34 * 56
      NaN * 10            // NaN
      Infinity * 0        // NaN
      Infinity * 12       // Infinity
      Infinity * -12      // -Infinity
      Infinity * Infinity // Infinity
      
      // 2. 除法 - 商超过数值范围,则返回Infinity或-Infinity;特殊情况类似上述乘法
      var result = 66 / 11
      
      // 3. 求模 - 求余数;特殊情况类似上述乘法
      var result = 26 % 5 // 1
      
    • 加性操作符

      // 1. 加法
      var result = 1 + 2
      NaN + 1                    // NaN
      Infinity + Infinity        // Infinity
      (-Infinity) + (-Infinity)  // -Infinity
      Infinity + (-Infinity)     //NaN
      (+0) + (+0)                // +0
      (-0) + (-0)                // -0
      (+0) + (-0)                // +0
      
      // 2. 减法
      var result = 2 - 1
      NaN - 1                    // NaN
      Infinity - Infinity        // NaN
      (-Infinity) - (-Infinity)  // NaN
      Infinity - (-Infinity)     // Infinity
      (-Infinity) - Infinity     // -Infinity
      (+0) - (+0)                // +0
      (-0) - (+0)                // -0
      (-0) - (-0)                // +0
      
    • 关系操作符 - 大于、小于、小于等于、大于等于

      5 > 4                  // true
      5 < 3                  // false
      "Brick" < "alphabet"   // true - 均为字符串,比较字符编码值
      "23" < 3               // false - 一个为字符串,则将其转为数值后比较
      NaN < 3                // false
      NaN >= 3               // false
      
      // 补充:如果一个操作数是对象,则调用其valueOf()方法,如果没有valueOf()方法,则通过toString()处理后比较
      
    • 相等操作符

      相等不相等 - 先转换再比较

      全等不全等 - 仅比较而不转换

      // 1. 相等不相等 - 会产生强制转换类型
      null == undefined     // true - null和undefined相等
      "NaN" == NaN          // false - 只要一个为NaN,则返回false
      5 == NaN              // false
      NaN == NaN            // false
      NaN != NaN            // true
      false == 0            // true - 对false强制转型为0
      true == 1             // true - 对true强制转型为1
      true == 2             // false
      undefined == 0        // false
      null = 0              // false
      "5" == 5              // true - 对"5"强制转型为数值5
      
      // 全等不全等 - 在两个操作数未经转换就像等的情况下返回true
      null === undefined   // false
      "55" === 55          // false
      
    • 条件操作符

      variable = boolean_expression ? true_value : false_value
      
    • 赋值操作符

      var num = 25
      num += 10 // 等同于:num = num + 10
      num *= 10
      num /= 5
      num %= 3
      num += 1
      num -= 1
      num <<= 2
      num >>= 2
      nun >>>= 2
      

5. 语句

  • if语句

    if (condition1) {
      // statement1
    }
    else if (condition2) {
      // statement2
    }
    else {
      // statement3
    }
    
  • do-while

    // 先执行,再判断
    do {
      // statement
    } while(condition)
    
  • while

    // 先判断,再执行
    while(condition) {
      // statement
    }
    
  • for

    var count = 10
    for (var i = 0; i < count; i++) {
      // statement
    }
    
    // 类似while
    for (; i < count; i++) {
      // statement
    }
    
    // 无限循环
    for (;;) { 
      // statement
    }
    
  • for-in

    // 用于枚举对象属性
    for (property in expression) { 
      // statement
    }
    
  • label

    // 用户在代码中添加标签
    label: statement
    
    // example - start标签可同break和continue配合使用
    start: for (var i = 0; i < count; i++) {
      alert(i)
    }
    
  • break和continue

    break - 立即退出循环

    Continue - 立即退出当前循环,但还会执行下一次循环

  • with

    // 将代码的作用域设置到特定对象中
    with (expression) statement
    
    // example - 将包含location对象的变量声明赋值放一起
    with(location) {
      var qs = search.substring(1)
      var hostname = hostname
      var url = href
    }
    // 常规写法:
    var qs = location.search.substring(1)
    var hostname = location.hostname
    var url = location.href
    
  • switch

    switch(expression) {
      case value1: statement1; break
      case value2: statement2; break
      case value3: statement3; break
      default: break
    }
    

6. 函数 - function

  • 基本语法

    // 声明函数
    function funName (arg0, arg1, ... , argN) {
      //statements
    }
    
    // 调用函数
    funName('say hi')
    

    注意事项:

    1. 如果statements中,使用return,则return之后的语句不会执行

    2. 严格模式对function的限制:

      1. 函数名不能命名为eval或arguments

      2. 参数不能命名为eval或arguments

      3. 不能出现两个命名参数同名的情况

  • 理解参数 - arguments

    1. function中传入参数可不必非要声明,可以使用arguments对象来获取,不显式地使用命名参数

      function sayHi() {
        alert("Hello " + arguments[0] + ',' + arguments[1])
      }
      
    2. arguments对象类似Array的调用方式,但并非Array的实例

    3. function中传入的参数数量可不必与声明的参数个数一致,因为在function内部都是以数组形式获取参数值的

      function sayHi (name1, name2) {
        alert("Hello " + name1 + ',' + name2)
      }
      
      sayHi('Alice')
      sayHi('Alice', 'Bob')
      sayHi('Alice', 'Bob', 'Clair')
      
      // 注意:arguments[0]和name1是对应的,值是一样的
      
    4. arguments也具有length属性,以获得参数的个数

      function argLength() {
        alert(arguments.length)
      }
      
      argLength('arg1', 'arg2')
      
    5. ECMAScript中所有参数传递都是值,而不能通过引用传递参数

  • 没有重载

    后定义的函数会覆盖之前名称相同的函数。而并不能有java的重载的效果

    function foo(num) {
      return num + 100
    }
    
    function foo(num) {
      return num + 200
    }
    
    var result = foo(100) //300
    

Github: https://github.com/SHENLing0628/JavaScriptStudy
欢迎star,转载请标注来源

你可能感兴趣的:(JavaScript学习(3) - JavaScript基本概念)