JavaScript基础_基本语法
JavaScript是前端开发工程师必须掌握的三种技能之一:
HTML:描述网页内容
CSS:描述网页样式
JavaScript:描述网页行为
JavaScript是一种具有函数优先的轻量级解释型或即时编译型的编程语言,是一种基于原型编程,多范式的动态脚本语言,
非常适合面向对象、命令式和声明式(函数式)的编程风格。
JavaScript虽然借鉴了Java的大部分语法,但和Java是完全不同的两种编程语言。在语法、语义和用途方面有很大的不同。
JavaScript同时也受到Awk、Perl和Python的影响。,它的一等函数(first-class function)来自于Scheme,它的基于原型(prototype-based)的继承来自于Self。
虽然JavaScript作为Web页面的脚本语言而出名,但也被用于很多非浏览器环境中,如:Node.js、Apache CouchDB、Adobe Acrobat等。
JavaScript的标准规范是ECMAScript。还有其他的一些实现,如:CoffeeScript、TypeScript等。
JavaScript的核心语法非常精简,只包括:基本的语法构造和标准库。除此以外,不同的宿主环境提供额外的API,以便JavaScript调用。
如浏览器环境下,额外的API包括:浏览器控制类、DOM类、Web类等。
服务器环境(Node.js)则提供了各种操作系统的API,如文件操作,网络通信等。
Chrome浏览器的 开发者工具 的console 是运行JavaScript代码的理想环境。
快捷键:F12或Ctrl+Shift+I
一、字符集
JavaScript程序是用Unicode字符集编写的。Unicode是ASCII和Latin-1的超集,并支持地球上几乎所有在用的语言。
ECMAScript3 -->Unicode2.1+
ECMAScript5 -->Unicode3+
1. 区分大小写
JavaScript区分大小写,即关键字、变量、函数名和所有的标识符都必须采取一致的大小写形式。如:online、Online是两个不同的变量名。
需注意的是,HTML并不区分大小写(尽管XHTML区分大小写,但浏览器有较强大的纠错能力)。
许多客户端JavaScript对象和属性与它们所表示的HTML标签和属性同名,
在HTML中,可以大写也可以小写,而在JavaScript中则必须小写。
2. 空格、换行符和格式控制符
JavaScript会忽略程序中标识(token)之间的空格,多数情况下,同样会忽略换行符。
可在代码中随意使用空格和换行,因此要形成统一的编码风格(如:缩进、换行、分号等),从而提高代码的可读性。
可以识别普通的空格符:\u0020,还可识别如下表示空格的字符:
水平制表符:\u0009
垂直制表符:\u000B
换页符:\u000C
不中断空白:\u00A0
字节序标记:\uFEFF
以及在Unicode中所有Zs类别的字符。
JavaScript可将如下字符识别为行结束符:
换行符:\u000A
回车符:\u000D
行分隔符:\u2028
段分隔符:\u2029
回车符加换行符在一起被解析为一个单行结束符。
Unicode格式控制字符(Cf类)控制着文本的视觉显示
从右至左书写标记:\u200F
从左至右书写标记:\u200E
这些字符可用在JavaScript的注释、字符串直接量和正则表达式直接量中,但不能用在标识符中。
有个例外,零宽连接符(\u200D)和零宽非连接符(\uFEFF)是可以出现在标识符中的,但不能作为标识符的首字符。
3. Unicode转义序列
Unicode转义序列均以\u为前缀,其后跟随4个16进制数(数字以及大小写的字母A~F表示)。
可以用在JavaScript字符串直接量、正则表达式直接量和标识符中(关键字除外)。
也可出现在注释中,只是当成上下文中的ASCII字符处理,不会被解析为其对应的Unicode字符。
4. 标准化
Unicode允许使用多种方法对同一个字符进行编码。
显示结果一样,但二进制编码不一样,在计算机里也不相等。
Unicode标准为所有字符定义了一个首选的编码格式,并给出了一个标准化的处理方式将文本格式转换为一种适合比较的标准格式,
JavaScript会认为它正解析的程序代码已经是这种标准格式,不会再对其标识符、字符串或正则表达式作标准化处理。
二、注释
JavaScript的注释与其他语言的类似,支持两种注释。
- //:单行注释
- /* ~ */:多行注释,注释不能嵌套
三、标识符和保留字
1.标识符
标识符是用来识别各种值的合法名称,最常见的标识符是变量名、函数名。
标识符的命名必须符合如下规则:
- 第一个字符,可以是任意Unicode字母(包括英语和其他语言的字母)、以及下划线(_)、美元符($)。
- 第二个字符及后面的字符,除了Unicode字母、下划线、美元符号外,还可以用数字0-9。
中文是合法的标识符,可用作变量名。
出于可移植性和易于书写,通常只使用ASCII字母和数字来书写标识符。
2.关键字和保留字
JavaScript将一些标识符用做自己的关键字,因此不能在程序中再用做标识符。
关键字:
break | delete | function | return | typeof |
case | do | if | switch | var |
catch | else | in | this | void |
continue | false | instanceof | throw | while |
debugger | finally | new | true | with |
default | for | null | try |
保留关键字(ECMAScript 5):
class const enum export extends import super
在普通JavaScript中是合法的,但在严格模式下是保留字:
implements let private public yield interface package protected static
只在模块代码中被当成保留关键字:await
严格模式下对下面的标识符的使用做了限制,并不完全是保留字,但不能用于变量名、函数名或参数名:
arguments eval
ECMAScript 3将Java的所有关键字都列为自己的保留字。应注意代码运行在基于ECMAScript 3实现的解释器上时,应避免使用Java关键字。
JavaScript还预定义了很多全局变量和函数,应避免用于变量名和函数名。
arguments | encodeURI | Infinity | Number | RegExp |
Array | encodeURIComponent | isFinite | Object | String |
Boolean | Error | isNaN | parseFloat | SyntaxError |
Date | eval | JSON | parseInt | TypeError |
decodeURI | EvalError | Math | RangeError | undefined |
decodeURIComponent | Function | NaN | ReferenceError | URIError |
JavaScript的具体实现可能定义独有的全局变量和函数,每一个特定的JavaScript运行环境都有自己的一个全局属性列表。
四、变量声明与赋值
变量名必须符合上述标识符的命名规则,变量就是为一个"值"起一个名字,然后通过变量来引用这个值。
JavaScript有六种声明方式
- var
- function
- let(ES6)
- const(ES6)
- import(ES6)
- class(ES6)
1.var
(1)如下所示使用var声明变量,一个var可声明多个变量
var i;
var sum;
var name, age;
(2)可将变量声明和赋值合写在一起,如未在var声明语句中指定变量的初始值,则它的初始值是undefined。也可在声明语句后单独给变量赋值。
var message = "hello world.";
var j = 0, k = 0, m;
console.log(message); //hello world.
console.log(m); //undefined
m = 12;
(3)JavaScript变量可以是任意数据类型,可随时改变类型。(变量没有类型,是变量引用的值有类型)
var a = 0;
a = "zero"
(4)使用var重复声明已经存在的变量是无效,如第二次声明时还赋值了,则和一条赋值语句相当。
var x = 1;
var x;//无效
console.log(x); //1
var y = 2;
var y = 3;//与赋值语句相当 y = 3
console.log(y);//3
(5)如读取一个没有声明的变量的值,JavaScript会报错。
x; //ReferenceError: x is not defined
在非严格模式下,给一个未声明的变量赋值,JavaScript会在全局对象上创建一个同名属性,像一个正确声明的全局变量。
y = 1;
console.log(y); //1
在严格模式下,给一个未声明的变量赋值,JavaScript会报错。
"use strict"
y = 1;
console.log(y); //ReferenceError: y is not defined
应当始终使用var声明变量。
2.let(ES6)
(1)let的用法与var类似,但声明的变量,只在let命令所在的代码块内有效。
let a;
let b;
let name, age;
let message = "hello world."
let i = 0, j, k = 0;
console.log(message);//hello world.
console.log(j);//undefined
j = 10;
console.log(j);//10
j = "ten";
console.log(j);//ten
(2)同一个作用域中不能用let重复定义已存在的标识符。
var count = 30;
//let count = 30;
let count = 40;//SyntaxError: Identifier 'count' has already been declared
3.const(ES6)
(1)const声明的是常量,其值一旦被设定就不可更改,因此必须进行初始化。
const maxItems = 30;
const name;//SyntaxError: Missing initializer in const declaration
maxItems = 30; //TypeError: Assignment to constant variable.
※作用域和闭包
五、可选的分号
JavaScript使用分号(;)将语句分隔开。
有时JavaScript会自动为代码行补上缺失的分号,即自动分号插入(ASI:automatic Semicolon Insertion)
ASI只在代码行末尾与换行符之间除了空格和注释之外没有别的内容时,才会插入分号。
空语句
let、const、变量声明
import、export、模块定义
表达式语句
debugger
continue、break、throw
return
自动分号补全的三个规则。
- 当出现一个不允许的行终止符或 } 时,会在其之前插入一个分号
{1 2} 3 => {1 2;} 3; - 当捕获到标识符输入流的结尾,并且无法将单个输入流转换为一个完整的程序时,将在结尾插入一个分号。
- 当语句中包含语法中的限制关键字后跟一个行终止符的时候,将在结尾插入一个分号。
后置运算符(++、–)
continue
break
return
yield,yield*
module
如在return break continue三个关键字后面紧跟着换行,JS则在换行处添加分号。
return
true;
会解析为
return; true;
另一个是++或–运算符
x
++
y
会解析为
x; ++y;
而不是
x++; y
为了风格统一和可读性、整洁性,不建议省略分号。应在所有需要分号的地方加上分号。
六、参考资料
- JavaScript权威指南 第6版 David Flanagan著 淘宝前端团队 译
- 你不知道的JavaScript 上卷 KYLE SIMPSON著 赵望野 梁杰译
- 你不知道的JavaScript 中卷 KYLE SIMPSON著 单业 姜南译
- JavaScript教程 https://wangdoc.com/javascript/index.html
- ECMAScript6 入门 阮一峰 http://es6.ruanyifeng.com/
- JavaScript指南 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide