资讯专栏INFORMATION COLUMN

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

Labradors / 2948人阅读

摘要:词法结构字符集字符集程序是用字符集编写的注释支持两种格式的注释单行注释另一个注释也是一个注释这是一个多行注释直接量直接量程序中直接使用的数据值标识符和保留字标识符就是一个名字,用来对变量和函数命名,或者用作代码中某些循环语句中的跳转位置的标

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中可以拆分成数行,每行必须以结束

如果想另起一行,则需要用转义字符

    var x = "hello moto! 
goodby nokia!";
    console.log(x); //hello moto! goodby nokia!
    var y = "hello moto! 
goodby 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 
 there";
console.log(z); //也可以用
表示换行符

可以在这里查看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; //报错

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79007.html

相关文章

  • 2015年开源前端框架盘点TOP20

    摘要:核心概念原则响应式浏览器支持预处理器响应式模块化官网地址地址名称类别语言创建者云适配最后更新时间年月人气在上有描述国内首个开源跨屏前端框架,中文排版支持更优本土化组件丰富。 2015年已经过去了,作为一个前端开发者,我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点,希望这些项目能够越来越好,帮助到更多的前端开发者们。此榜单根据github上star数作为排名依据,一个人...

    silenceboy 评论0 收藏0
  • 2015年开源前端框架盘点TOP20

    摘要:核心概念原则响应式浏览器支持预处理器响应式模块化官网地址地址名称类别语言创建者云适配最后更新时间年月人气在上有描述国内首个开源跨屏前端框架,中文排版支持更优本土化组件丰富。 2015年已经过去了,作为一个前端开发者,我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点,希望这些项目能够越来越好,帮助到更多的前端开发者们。此榜单根据github上star数作为排名依据,一个人...

    summerpxy 评论0 收藏0
  • 2015年开源前端框架盘点TOP20

    摘要:核心概念原则响应式浏览器支持预处理器响应式模块化官网地址地址名称类别语言创建者云适配最后更新时间年月人气在上有描述国内首个开源跨屏前端框架,中文排版支持更优本土化组件丰富。 2015年已经过去了,作为一个前端开发者,我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点,希望这些项目能够越来越好,帮助到更多的前端开发者们。此榜单根据github上star数作为排名依据,一个人...

    wh469012917 评论0 收藏0
  • node核心特性理解

    摘要:概述本文主要介绍了我对的一些核心特性的理解,包括架构特点机制核心模块与简单应用。在此期间,主线程继续执行其他任务。延续了浏览器端单线程,只用一个主线程执行,不断循环遍历事件队列,执行事件。 原文地址在我的博客,转载请注明来源,谢谢! node是在前端领域经常看到的词。node对于前端的重要性已经不言而喻,掌握node也是作为合格的前端工程师一项基本功了。知道node、知道后端的一些东西...

    huangjinnan 评论0 收藏0
  • JavaScript 简介

    摘要:简介原文链接简称是一种轻量级,解释型的编程语言,其函数是一等公民。标准的目标是让任何一种程序设计语言能操控使用任何一种标记语言编写出的任何一份文档。核心规定了如何映射基于的文档结构,以便简化对文档的任意部分的访问和操作。 JavaScript 简介 原文链接 JavaScript ( 简称:JS ) 是一种 轻量级,解释型 的编程语言,其函数是一等公民。众所周知,它是用于网页开发的脚...

    URLOS 评论0 收藏0

发表评论

0条评论

Labradors

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<