(52)Wangdao.com第七天_字面量/变量_标识符_数据类型_数据的存储

JavaScript 字面量 和 变量

• 字面量：就是那些不可变的值，如1，2，100，2000，Infinity，NaN
• 变量：
  • 变量，代表的当前随机分配的内存地址。
  • 变量的值，是可变的，可以用来保存字面量。
  • 使用 var 关键字声明一个变量。

    • var a;    //只是声明变量而没有赋值，则该变量的值是undefined
      var b = 666;
      
      c = 222;    // 变量赋值的时候，忘了写var命令，这条语句也是有效的。
      // 不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量
      // 所以建议总是使用var命令声明变量。
      
      console.log(ddd);    // 变量没有声明就直接使用，会报错，告诉你变量未定义

---

JavaScript 标识符

指 js 中可以由我们命名的名字。。。如变量名，函数名... ...

• 由 字母、数字、下划线“_”、dollar符“$” 组成
• 开头 不能是数字
• 大小写敏感
• 不能是 js 中的关键字或者保留字及其他不建议字符
• 命名采用驼峰命名法，即单词的首个字母大写，AaaaBbbb，BigBoy
• 中文是合法的标识符，可以用作变量名。

  • var 临时变量 = 1;

---

学习 js 三部分

• ECMAscript 5
  • 这是标准化的 js 语法
• DOM 文档对象模型 Document Object Model
  • 控制文档页面对象
• BOM 浏览器对象模型 Browser Object Model
  • 控制浏览器对象

---

JavaScript 有六种数据类型    (ES6 又新增了第七种 Symbol 类型的值)

• 五种基本数据类型
  • String 字符串
    • 用 "双引号" 或者 '单引号' 括起来的，不能混合使用，可以 'aa"bb"cc' 或者 "dd'ee'ff"
    • 如果要真的打印特殊字符，需用 \ 转义：
    • \\ 斜杆，\" 双引号，\' 单引号，\n 换行符，\t 制表符 ... ...
    • JavaScript 引擎内部，所有字符都用 Unicode 表示。
      • JavaScript 不仅以 Unicode 储存字符，还允许直接在程序中使用 Unicode 码点表示字符，即将字符写成\uxxxx的形式，其中xxxx代表该字符的 Unicode 码点。比如，\u00A9代表版权符号。

        var s = '\u00A9';    // s = "©"
        
        var f\u006F\u006F = 'abc';    // foo = "abc";

      • 每个字符在 JavaScript 内部都是以16位（即2个字节）的 UTF-16 格式储存
      • 也就是说，JavaScript 的单位字符长度固定为16位长度，即2个字节
    • 有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。另一个场景是，有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。

      btoa()：任意值转为 Base64 编码
      atob()：Base64 编码转为原来的值
      
      var string = 'Hello World!';
      btoa(string)     // "SGVsbG8gV29ybGQh"
      atob('SGVsbG8gV29ybGQh')    // "Hello World!"
      
      btoa('你好')    // 不适合非 ASCII 码的字符，会报错
      
      function b64Encode(str) {
        return btoa(encodeURIComponent(str));
      }
      
      function b64Decode(str) {
        return decodeURIComponent(atob(str));
      }
      
      b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
      b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

  • Number 数字       
    • isFinite() 方法返回一个布尔值，表示某个值是否为正常的数值。

      • isFinite(Infinity)    // false
        isFinite(-Infinity)    // false
        isFinite(NaN)    // false
        isFinite(undefined)    // false
        
        // 其他都返回 true
        isFinite(null)    // true
        isFinite(-1)    // true

      • 提取字符串中 数字部分

      • // parseInt() 获取字符串中整数部分
        
        // 利用 parseInt("",num) 进行进制转换
        parseInt('1000', 10)    //
        parseInt('1000', 2)     //
        parseInt('1000', 6)     //
        parseInt('1000', 8)     //
        
        // parseFloat() 获取字符串中的浮点数部分
        parseFloat('314e-2') // 3.14
        parseFloat('0.0314E+2') // 3.14    如果字符串符合科学计数法，则会进行相应的转换
        
        parseFloat('\t\v\r12.34\n ') // 12.34    自动过滤字符串前导的空格

    • 1，2，100，2000，NaN ... ...
      • NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。
      • isNaN为true的值，有可能不是NaN，而是一个字符串
      • isNaN() 方法可以用来判断一个值是否为NaN。

      • typeof NaN // 'number
        NaN === NaN    // false    NaN不等于任何值，包括它本身。
        Boolean(NaN)    // false
        [NaN].indexOf(NaN)    // -1
        
        5 - 'x' // NaN
        
        Math.acos(2)    // NaN
        Math.log(-1)    // NaN
        Math.sqrt(-1)    // NaN
        
        0 / 0    // NaN
        
        NaN + 32 // NaN
        NaN - 32 // NaN
        NaN * 32 // NaN
        NaN / 32 // NaN

        isNaN('Hello')    // true
        // 相当于
        isNaN(Number('Hello'))    // true

        // 判断NaN更可靠的方法是，利用NaN为唯一不等于自身的值的这个特点，进行判断。

        function myIsNaN(value) {
          return value !== value;
        }

      • Infinity 表示“无穷”，用来表示两种场景。一种是一个正的数值太大，或一个负的数值太小，无法表示；另一种是非0数值除以0，得到Infinity。

        // Infinity大于一切数值（除了NaN），-Infinity小于一切数值（除了NaN）
        
        1 / -0    // -Infinity 负无穷
        -1 / -0    // Infinity 正无穷
        Infinity === -Infinity     // false
        
        // 场景一
        Math.pow(2, 1024)    // Infinity    计算结果太大，超出了能够表示的范围
        
        // 场景二
        0 / 0     // NaN
        1 / 0     // Infinity

    • 所有数字都是以64位浮点数形式储存

      • // 第1位：    符号位，0表示正数，1表示负数
        // 第2位到第12位（共11位）：    指数部分
        // 第13位到第64位（共52位）：    小数部分（即有效数字）
        
        // 第1位：符号位，0表示正数，1表示负数
        // 第2位到第12位（共11位）：指数部分
        // 第13位到第64位（共52位）：小数部分（即有效数字）
        
        // (-1)^符号位 * 1.xx...xx * 2^指数部分
        // 上面公式（指数部分在0到2047之间），一个数在 JavaScript 内部实际的表示形式。
        
        // 精度最多只能到53个二进制位，
        // 这意味着，绝对值小于2的53次方的整数，即-253到253，都可以精确表示。
        
        // 9007199254740992111 // 9007199254740992000
        // 上面示例表明，大于2的53次方以后，多出来的有效数字（最后三位的111）都会无法保存，变成0。

    • 64 位浮点数的指数部分的长度是 11 个二进制位，意味着指数部分的最大值是2047（2的11次方减1）。

    • 也就是说，64 位浮点数的 指数部分 的值最大为 2047，分出一半表示负数，则 JavaScript 能够表示的数值范围为2的1024到2-1023（开区间），超出这个范围的数无法表示。
      如果一个数大于等于2的1024次方，那么就会发生“正向溢出”，即 JavaScript 无法表示这么大的数，这时就会返回Infinity。

      Math.pow(2, 1024) // Infinity

      如果一个数小于等于2的-1075次方（指数部分最小值-1023，再加上小数部分的52位），那么就会发生为“负向溢出”，即 JavaScript 无法表示这么小的数，这时会直接返回0。

      Math.pow(2, -1075) //

    • 小数运算存在误差

      • 0.1 + 0.2 === 0.3        // false
        
        0.3 / 0.1        // 2.9999999999999996
        
        (0.3 - 0.2) === (0.2 - 0.1)        // false

    • 精确的运算 , 以及关于金钱的计算 , 别用 js，需要到后台服务器处理
    • Number.MAX_VALUE 为 js 所能表示的最大整数
    • Number.MIN_VALUE 为 js 所能表示大于0的最小小数
    • 5e3    表示 5乘以10的三次方
    • 0b二进制
    • 00八进制
    • 0x十六进制
    • 唯一有区别的场合是，+0或-0当作分母，返回的值是不相等的。

      • (1 / +0) === (1 / -0)    // false
        
        // 上面的代码之所以出现这样结果，
        // 是因为除以正零得到+Infinity，除以负零得到-Infinity，
        // 这两者是不相等的

  • Boolean 布尔类型       
    • true 或者 false
    • 非布尔类型 转换为 布尔类型规则

      • 转换规则是除了下面六个值被转为false，    其他值都视为true。
        
        undefined
        null
        false
        0
        NaN
        "" 或 ''    （空字符串）

  • Null 空值类型            "赋值了，值为 null"
    • null    表示一个空的对象         表示这个变量将要作为 对象 去使用

    • 变量 a 分别被赋值为undefined和null，这两种写法的效果几乎等价。

      在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。

      • if (!undefined) {
          console.log('undefined is false');
        }
        // undefined is false
        
        if (!null) {
          console.log('null is false');
        }
        // null is false
        
        undefined == null
        // true

    • 1995年 JavaScript 诞生时，最初像 Java 一样，只设置了null表示"无"。根据 C 语言的传统，null可以自动转为0

      • Number(null)    //
        5 + null    //

  • Undefined 未定义类型           "未赋值"
    • 只是声明, 而未曾赋值的变量，其值和类型都是 undefined
    • 读取对象中不存在的 属性/方法
    • 调用函数时，形参不赋值，则 形参 为 undefined
    • 函数如果没有指定 return 返回值，则默认为 undefined

    • null就像在 Java 里一样，被当成一个对象，Brendan Eich 觉得表示“无”的值最好不是对象。

    • 其次，那时的 JavaScript 不包括错误处理机制，Brendan Eich 觉得，如果null自动转为0，很不容易发现错误。

      因此，他又设计了一个undefined。

    • 区别是这样的：

      • null是一个表示“空”的对象，转为数值时为0；

      • undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。

      • Number(undefined)    // NaN
        5 + undefined    // NaN

• // 变量声明了，但没有赋值
  var i;    // i = undefined
  
  // 调用函数时，应该提供的参数没有提供，该参数等于 undefined
  function f(x) {
    return x;
  }
  f() // x = undefined
  
  // 对象没有赋值的属性
  var  o = new Object();
  o.p    // o.p =undefined
  
  // 函数没有返回值时，默认返回 undefined
  function f() {}
  ret = f()    // ret = undefined

• 注意：
  • 通常，数值、字符串、布尔值这三种类型合称为 "原始类型 primitive type" 的值。
  • 对象，则称为 "合成类型" 的值。
  • 一个对象往往是多个原始类型的值的合成，可以看作一个存放各种值的容器。
  • 将 undefined 和 null 一般看作两个特殊的值。
  • 对象是最复杂的数据类型，又可以分成三个子类型
    • 狭义的对象 object
    • 数组 array
    • 函数 function

• 狭义的对象和数组是两种不同的数据组合方式
• 函数其实是处理数据的方法，JavaScript 把它当成一种数据类型，可以赋值给变量，这为编程带来了很大的灵活性，也为 JavaScript 的“函数式编程”奠定了基础。

• 一种引用数据类型   
  • 对象类型    各种值组成的对象
    • 内建对象

      • 普通对象Object

      • 数组对象Array

      • 函数对象Function

    • 宿主对象

    • 自定义对象

      • 对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

        var x = 'sex';
        var obj = {
            foo: 'Hello',
            bar: 'World',
            [x]: "男"
        };
        
        // 属性的值还是一个对象，就形成了链式引用。

      • 查看一个对象本身的所有属性，可以使用 Object.keys 方法。

        var obj = {
          key1: 1,
          key2: 2
        };
        
        Object.keys(obj);
        // ['key1', 'key2']

      • delete命令用于删除对象的属性，删除成功后返回 true

        var obj = { p: 1 };
        Object.keys(obj)    // ["p"]
        
        delete obj.p    // true
        obj.p    // undefined
        Object.keys(obj) // []
        // 注意: 删除一个不存在的属性，delete不报错，而且返回true

        只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除。

        // Object.defineProperty() 创建的对象obj的p属性是不能删除的，
        var obj = Object.defineProperty({}, 'p', {
            value: 123,
            configurable: false
        });
        
        obj.p    //
        delete obj.p    // false    所以delete命令返回false

        即使delete返回true，该属性依然可能读取到值。

        var obj = {};
        delete obj.toString // true
        obj.toString // function toString() { [native code] }
        
        // 上面代码中，toString是对象obj继承的属性，
        // 虽然delete命令返回true，但该属性并没有被删除，依然存在

      • 检查对象是否包含某个属性

        var obj = { p: 1 };
        'p' in obj    // true
        'toString' in obj    // true
        
        // toString() 方法是继承的
        // 使用对象的hasOwnProperty方法判断，是否为对象自身的属性
        var obj = {};
        if ('toString' in obj) {
            console.log(obj.hasOwnProperty('toString')) // false
        }
        
        // for...in循环用来遍历一个对象的全部属性。
        // 遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性
        // 对象都继承了toString属性，但是for...in循环不会遍历到这个属性
        // 关于对象属性的可遍历性，参见《标准库》章节中 Object 一章的介绍。
        var obj = {a: 1, b: 2, c: 3};
        
        for (var i in obj) {
            console.log('键名：', i);
            console.log('键值：', obj[i]);
        }
        
        // 使用for...in的时候，应结合 hasOwnProperty()，在循环内判断，某个属性是否为对象自身的属性。
        var person = { name: '老张' };
        
        for (var key in person) {
            if (person.hasOwnProperty(key)) {
                console.log(key);
            }
        }
        // name

      • 操作同一个对象的多个属性

        // 例一 , 设置已有属性
        var obj = {
          p1: 1,
          p2: 2,
        };
        with (obj) {
          p1 = 4;
          p2 = 5;
        }    // 必须是当前对象已经存在的属性，否则创造一个当前作用域的全局变量
        // 等同于
        obj.p1 = 4;
        obj.p2 = 5;
        
        // 例二 访问已有属性
        with (document.links[0]){
          console.log(href);
          console.log(title);
          console.log(style);
        }
        // 等同于
        console.log(document.links[0].href);
        console.log(document.links[0].title);
        console.log(document.links[0].style);

        这是因为with区块没有改变作用域，它的内部依然是当前作用域。这造成了with语句的一个很大的弊病，就是绑定对象不明确。

      • 单纯从上面的代码块，根本无法判断x到底是全局变量，还是对象obj的一个属性。这非常不利于代码的除错和模块化，编译器也无法对这段代码进行优化，只能留到运行时判断，这就拖慢了运行速度。因此，建议不要使用with语句，可以考虑用一个临时变量代替with。

面试题

1. a[变量]    其中 a 是一个对象，使用 [] 来读写对象，会调用 .toString() 将 变量 隐式转换 为 字符串

• var a{};
  var b = { n: 2 };
  var c = { m: 3 };
  
  a[b] = 4;    // a[b.toString()] = 4    a["object Object"] = 4
  a[c] = 5;    // a[c.toString()] = 5    a["object Object"] = 5
  
  console.log(a[b]);    // 打印 5

---

 ==        会进行复杂的 隐式类型转换

===       会进行 数据类型 和 值 的比较

---

三种方法 确定一个值是什么数据类型

• typeof 运算符        检测基本数据类型 Number、Boolean、String、Undefined
  • 使用 typeof 来查看一个变量的数据类型。

    • typeof 123    // "number"
      typeof '123'    // "string"
      typeof false    // "boolean"
      typeof typeof 123    // "string"    因为 typeof 返回值是 string
      // 函数返回function
      function f(){}
      typeof f    // "function"
      
      // 对象返回object
      typeof window    // "object"
      typeof {}    // "object"
      /**** 一个数组 也返回 object ****/
      typeof []    // "object"
      
      /**** null 返回 object    表示将要作为对象使用 ****/
      typeof null    // "object"
      
      // undefined 返回 undefined
      typeof undefined // "undefined"
      
      // typeof可以用来检查一个没有声明的变量，而不报错。
      console.log(typeof a);    // 返回一个字符串 "undefined"
      
      // 实际编程中，这个特点通常用在判断语句
      // 错误的写法
      if (v) {
        // ...
      }
      // ReferenceError: v is not defined
      
      // 正确的写法
      if (typeof v === "undefined") {
        // ...
      }

• instanceof 运算符        检测引用数据类型

  • // 空数组（[]）的类型也是object，这表示在 JavaScript 内部，数组本质上只是一种特殊的对象。
    // 这里顺便提一下，instanceof运算符可以区分数组和对象。var o = {};
    var a = [];
    
    o instanceof Array // false    对象不是数组类型的
    a instanceof Array // true     数组是对象类型的

• Object.prototype.toString() 方法

---

变量类型:             变量的类型实际上是变量内存中数据的类型

• 基本类型: 保存基本类型数据的变量
• 引用类型: 保存对象地址值的变量

数据对象:

• 基本类型
• 对象类型

数据

即存储于内存中代表特定信息的东东，本质就是 01 二进制。

具有 可读 、可传递 的基本特性，一切皆数据

数据运行于内存中，读写速度快。

• 硬盘    持久存储数据
• 内存    临时存储数据        变量名    变量值
• （空间较小）栈        基本数据的变量名，基本数据的值，引用数据的变量名（对象的引用地址）
• （空间较大）堆        引用数据的值（对象： Object、Array、Function）

垃圾回收机制： 当堆中的一个对象，再也没有任何一个变量指向它，则将在一段时间后被销毁

所以，我们不再需要某个对象时，只需要 obj = null; 即可

变量

• 存储的，要么是 基本数据的值，或者 引用数据的地址值（变量名）
• 操作的，无非就是 值传递 或者 引用传递