JS语言核心——“词法结构及类型、值和变量”

头像
JS菌
    阅读 6 分钟

    1 词法结构

    1.1 字符集

    • 字符集：JS程序是用Unicode字符集编写的

    1.2 注释

    • js支持两种格式的注释

    // 单行注释

/* 另一个注释 */ //也是一个注释

/*

    • 这是一个

    • 多行注释
      */

    1.3 直接量

    • 直接量literal：程序中直接使用的数据值

    12 //number
true //boolean
"hello" //string
1.2 //float
[1, 2, 3] //array
var obj = {
    name: "Oli",
    age: 18
}; //object

    1.4 标识符和保留字

    • 标识符：就是一个名字，用来对变量和函数命名，或者用作JavaScript代码中某些循环语句中的跳转位置的标记

    • 保留字：JavaScript把一些标识符拿出来用作自己的关键字

    2 类型、值和变量

    • 数据类型type：能够表示并操作的值的类型叫做数据类型(type)

    • 可拥有方法的类型

    • 不可拥有方法的类型

    • 可变类型：可修改的，如对象和数组

    • 不可变类型：不可修改的，如数字、布尔值、null和undefined

    • 变量variable：变量是一个值的符号名称，可以通过名称获得对值的引用

      • 全局变量global variable：不在任何函数内声明的变量称为全局变量

    • 数据类型

      • 原始类型(Primitive type)

        • 数字

        • 字符串

        • 布尔值

        • null（空）

        • undefined（未定义）

      • 对象类型(object type)

        • 对象object：对象 (object)是属性(property)的集合，每个属性都由"名/值对"构成。

          • 无序集合：普通的javascript对象是“命名值”的无须集合

          • 有序集合：数组array，表示带编号的值的有序集合

          • 函数function：是具有与它想关联的可执行代码的对象，通过调用函数来运行科执行代码，并返还运算结果

            • 构造函数constructor：如果函数初始化（使用new运算符）一个新建对象，我们称之为构造函数

            • 类class：构造函数初始化对象组成的集合

              • 数组array类

              • 函数function类

              • 日期date类

              • 正则regexp类

              • 错误error类

    2.1 数字

    • 数字直接量（numeric literal）：当一个数字直接出现在javascript程序中，我们陈之为数字直接量

    2.1.1 整型直接量

    由于某些javascript的实现支持八进制的直接量，而有些不支持，因此最好不要使用以0为前缀的整数直接量。在ECMAScript6的严格模式下，八进制的直接量是明令禁止的。

    2.1.2 浮点型直接量

    语法：[digits][.digits][(E|e)[(+|-)]digits]

    3.14
0.14
3.14e12
0.14E-21

    2.1.3 算术运算

    javascript中的算术运算在溢出(overflow)、下溢(underflow)或被零整除时不会报错。

    • 溢出overflow：数字运算结果超过了javascript中所能表示的数字上线

    • 下溢underflow：当运算结果无线接近于零并比 javascript能表示的最小值还小

    全局变量Infinaty和NaN在ECMAScipt3中，这两个值是可以读写的。ECMAScript5修正了这个问题，将他们定义为只读的

    • isNaN()：参数是NaN或者是一个非数字值（比如字符串和对象），则返回true

    • isFinite()：参数不是NaN、Infinty或-Infinity的时候返回true

    2.1.4 二进制浮点数和四舍五入错误

    javascript中使用实数的时候，常常只是真实值的一个近似的表示

    金融计算时，要使用整数“分”，而不要使用小数“元”进行基于货币单位的运算

    3.1.5 日期和时间

    • Date()构造函数

    2.2 文本

    • 字符串（string）：是一组16位值组成的不可变的有序序列，每个字符通常来自于Unicode字符集

    javascript采用UTF-16编码的Unicode字符集

    最常用的Unicode字符都是通过16位的内码表示，并代表字符串中的单个字符；不能表示为16位的Unicode字符则遵循UTF-16编码规则——用两个16位值组成一个序列（亦称为“代理项对”）表示。这意味着一个长度为2的javascript字符串（两个16位值）可能表示一个Unicode字符

    2.2.1 字符串直接量

    ECMAScript 3中字符串直接量必须写在一行；

    ECMAScript 5中可以拆分成数行，每行必须以\结束

    如果想另起一行，则需要用转义字符\n

        var x = "hello moto! \
goodby nokia!";
    console.log(x); //hello moto! goodby nokia!
    var y = "hello moto! \ngoodby nokia!";
    console.log(y); 
    //hello moto! 
    //goodby nokia!

    2.2.2 转义字符

    两个转义字符的通用版本：

    • \xXX：十六进制数表示Latin-1

    • \uXXXX：\u表示Unicode中的任意字码

    var x = "\xA9";
console.log(x); //© A9为16进制数，表示Latin-1中的字码
var y = "hello \u000A there";
console.log(y); //表示换行符，其中\u表示4个十六进制数指定的任意Unicode字符
var z = "hello \n there";
console.log(z); //也可以用\n表示换行符

    可以在这里查看Unicode字符集Unicode字符百科;

    2.2.3 字符串的使用

    ECMAScript 5中，字符串可以当做只读数组，用方括号语法来访问单个字符

    2.2.4 匹配模式

    JavaScript采用Perl中的正则表达式语法

    2.3 布尔值

    • 布尔值boolean：指代真假、开关、是否，即保留字true和false

    • 假值（falsy value）：false以及能够被转换成false的值；

    • 真值（truthy value）：true以及能够被转换成true的值；

    2.4 null和undefined

    • null空值：可以表示数字、字符串和对象是“无值”的

    • undefined空缺：表明变量没有初始化

    ECMAScript 3：undefined是可读写的变量；

    ECMAScript 5：undefined则是只读的；

    2.5 全局对象

    全局对象的初始属性并不是保留字，但它们应该当做保留字来对待

    //代码的最顶级可用this来引用全局对象
var str = "Hello World";
var global = this;
console.log(global.str);
console.log(str);
console.log(this.str);
//上面三中写法都是一样的

    2.6 包装对象

    字符串、数字等的属性都是只读的，且不能给他们定义心属性；

    当视图给他们定义属性或修改属性时，修改只发生在临时对象身上；

    var s = "str";
s.len = 4;
console.log(s.len); //undefined 临时对象的修改,随即被“销毁”

    JavaScript会在必要时将包装对象转换成原始值：

    var a = "test";
var b = 1;
var c = true;
var A = new String(a);
var B = new Number(b);
var C = new Boolean(c);
console.log(A); //String对象
console.log(B); //Number对象
console.log(C); //Boolean对象
console.log(a == A); //true
console.log(a === A); //false
console.log(typeof a); //string
console.log(typeof A); //object

    2.7 不可变的原始值和可变的对象引用

    JavaScript中原始值（undefined、null、布尔值、数字和字符串）与对象（对象、数组、函数）不同；前者是不可变的，后者才可变；

    如字符串修改后仿佛修改了原来的值，实际上是创建了新的字符串：

    var s = "string";
s.toUpperCase();
console.log(s); //string原始值没有变化

    对象则是可变的：

    var obj = {
    name: "oliver",
    age: 18
};
obj.name = "alice";
console.log(obj.name) //alice

    字符串的比较只要每个索引上的值都相等且长度相等就是相等，而对象包含的属性及值都相同，但也是不相等的：

    var s = "string";
var S = "string";
console.log(s === S); //True
var obj = {
    name: "oli"
};
var OBJ = {
    name: "oli"
};
console.log(obj === OBJ); //False
var a = [1,2];
var A = [1,2];
console.log(a === A); //False

    • 对象就是引用类型（reference type）；

    • 对象值就是引用；

    • 对象的比较就是引用的比较，当且仅当它们引用同一个基对象时，他们才相等：

    var a = [];
var b = a;
b[0] = 1;
console.log(a[0]); //1 导致引用的数组也被修改
console.log(a === b); //True

    如何复制数组呢：

    var a = [1,2,3];
var b = [];
for (var i = 0; i < a.length; i++) {
    b[i] = a[i];
};
console.log(b.toString()); //1,2,3

//或者用concat方法
var a = [1,2,3];
var b = a.concat();
b[0] = 0;
console.log(b.toString());
console.log(a.toString());

    比较两个数组：

    // var a = [1, 2, 3];
// var b = a.concat();
function compareArray(a, b) {
    if (a.length !== b.length) {
        return false;
    }
    for (var i = 0; i < a.length; i++) {
        if (a[i] !== b[i]) {
            return false;
        }
    };
    return true;
}
// console.log(compareArray(a, b)); //True

    2.8 类型转换

    2.8.1 转换和相等性

    • ==：等于运算符

    • ===：恒等运算符

    2.8.2 显式类型转换

    为了使得代码可读性增强，需要用到显式转换（Number()、String()等）

    数字转换成字符串

    Number类定义的toString()方法可以接收表示转换基数（radix）的可选参数：

    var x = 12315;
console.log(x.toString(16)); //301b

    数字转换成浮点型或整型

    • toFixed()：根据小数点后的指定位数将数字转换为字符串，不使用指数计数法；

    • toExponential()：使用指数计数法

    • toPrecision()：根据指定的有效数字位数将数字转换成字符串

    var n = 123456.789;
console.log(n.toFixed(0)); //1234567
console.log(n.toFixed(2)); //123456.79
console.log(n.toFixed(5)); //123456.78900
console.log(n.toExponential(1)); //1.2e+5 
console.log(n.toExponential(3)); //1.235e+5 
console.log(n.toExponential(10)); //1.2345678900e+5 
console.log(n.toPrecision(4)); //1.235e+5 
console.log(n.toPrecision(8)); //123456.79 
console.log(n.toPrecision(10)); //123456.7890

    字符串转换成数字

    • parseInt()：解析整数

    • parseFloat()：解析整数和浮点数，接收第二个参数为基数

    var s = "3.14 pi";
console.log(parseInt(s)); //3
console.log(parseFloat(s)); //3.14
var S = "0.123 hello";
console.log(parseInt(S)); //0
console.log(parseFloat(S)); //0.123
var x = ".12 good";
console.log(parseInt(x)); //NaN
console.log(parseFloat(x)); //0.12
var X = "$0.123 hello";
console.log(parseInt(X)); //NaN
console.log(parseFloat(X)); //NaN

    2.8.3 对象转换成原始值

    • toString()

    • valueOf()

    2.9 变量声明

    ECMAScript 5严格模式下如果给一个没有声明的变量赋值会报错：

    "use strict";
x = 10; //报错

    2.10 变量作用域

    • 变量作用域（scope）是程序源代码中定义这个变量的区域

    2.10.1 函数作用域和声明提升（提前）

    • 块级作用域（block scope）

    • 声明提前（hoisting）：函数里声明的所有变量（不涉及赋值）都被“提前”至函数体的顶部：

    //函数内部的局部变量遮盖了同名的全局变量，在执行到var的时候才会真正的被赋值
var scope = "global";
function fc () {
    console.log(scope); //undefined
    var scope = "local";
    console.log(scope); //local
}
fc();
//此处没有同名的局部变量，所以输出全局变量的值global
var scope = "global";
function fc () {
    console.log(scope); //global
}
fc();

    正确的书写方式：

    //上述代码应该写成：
var scope = "global";
function fc () {
    var scope;
    console.log(scope); //undefined
    scope = "local";
    console.log(scope); //local
}
fc();

    先声明再赋值或使用

    2.10.2 作为属性的变量

    使用var声明一个变量是不可配置的（不可用delete）

    "use strict"
var x = 10;
this.y = 10;
delete this.y;
delete x; //报错
    javascript
    JS菌
    6.4k 声望2k 粉丝
    « 上一篇
    JavaScript 新兴的API——“其他新API”的注意要点
    下一篇 »
    JS语言核心——“表达式和运算符”

    引用和评论

    推荐阅读
    头像
    一个例子了解什么是桥接模式

    JS菌赞 3阅读 2.9k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.8k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.9k评论 3

    0 条评论
    得票最新