JavaScript 基础知识之基本语法

主要内容:

  • 基本语法
  • 各类操作符与运算规则
  • 标识符与命名规则
  • 语句之条件语句与循环语句

基本概念

语法

JavaScript 程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。

变量名、函数名等都区分大小写。

语句和表达式

语句(statement)是为了完成某种任务而进行的操作,比如下面就是两个赋值语句。

var a = 1;
var sum = a +b;

表达式(expression),指一个为了得到返回值的计算式。

2 + 3
a + b

区别:

  • 语句主要为了进行某种操作,一般情况下不需要返回值;表达式则是为了得到返回值,一定会返回一个值。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。
  • 语句以分号结尾,一个分号就表示一个语句结束。
  • 表达式不需要分号结尾。一旦在表达式后面添加分号,JavaScript 引擎就会将表达式视为语句,这样会产生一些没有任何意义的语句。
2 + 3;

注释

注释包括单行注释和块级注释(多行注释),如下。

// 单行注释

/*
 *多行注释
 *多行注释
 */

区块

  • 使用花括号{}把多个相关的语句组合到一起就构成了区块。
  • 可以让代码结构更清晰,便于开发者的阅读和维护。

变量

JavaScript 的变量是松散类型的,可以用来保存任何类型的数据。

变量声明

使用 var 操作符声明变量,JavaScript 的变量名区分大小写,A和a是两个不同的变量。(es6 有更多的变量声明方式)

var a;

赋值

变量声明和变量赋值是两个步骤,可以把声明和赋值写一起,如下代码。
但是,如果变量只声明未赋值的变量,则该变量的值是 undefined,表示未定义。

var a = 2;

var b;
 // undefined

变量提升

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。

console.log(a);
var a = 1;
 // undefined

上面的代码获得的结果是 undefined,因为存在变量提升,实际运行的代码如下,表示变量 a 已声明,未赋值。

var a;
console.log(a);
a = 1;

操作符

操作符用于操作数据值,包括算术操作符、位操作符、关系操作符 和相等操作符。

一元操作符

只能操作一个值的操作符叫做一元操作符。
需注意数据类型转换。

递增和递减操作符
递增操作符

递增操作符 ++ 表示自动 +1

赋值操作时,把 ++ 放到变量前面(前置型)和放到变量后面(后置型)的区别:

  • 不管 ++ 放到什么位置,带有 ++ 操作符的变量本身都会发生变化。
  • ++ 放到变量前面, 使用变量 +1 的值运算,得到结果后再赋值。
  • ++ 放到变量后面,使用变量本身的值运算,得到结果再赋值。
var a = 2;
 b = ++a;
console.log(b,a);
// 3 3
undefined
var c = 2;
 d = c++;
console.log(d,c);
//2 3
递减操作符原理同上
一元加和减操作符

+- 操作符与数学上计算规则一样,需注意数据类型转换。

布尔操作符

布尔操作符一共有3种:非、与、或。

逻辑非

! 表示,首先会将操作数转化为布尔值,然后求反。
可以同时使用两个逻辑非操作符 !!,表示求反,然后再求反。

var b = 1;
!b;
//false

var a = 1;
!!a;
//true
逻辑与

&& 表示,有两个操作数。
只有两个条件都是 true ,结果才返回 true。前面那个条件为 true 时,才会计算第二个表达式。

var result = true && false;
console.log(result);
// false
逻辑或

|| 表示,有两个操作数。
只要有一个条件为 true,结果就返回 true。
前面那个条件为 true 时,不会计算第二个表达式。

var result = true || false;
console.log(result);
// true

操作符之间的优先级(高到低):
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

var numa = 3;
var numb = 6;
jq = numa + 30 > 10 && numb * 3 < 2;  //结果为 false

乘性操作符

乘性操作符有 3 个:乘法,除法,求模。

乘法

* 表示,用于两个数相乘。

var x = 10 * 5;
console.log(x);
// 50
除法

/ 表示,用于两个数相除。

var x = 10 / 5;
console.log(x);
// 2
求模

% 表示,用于求余数。

var x = 10 % 5;
console.log(x);
// 0

加性操作符

包括加法和减法。

关系操作符

包括小于(<)、大于(>)、小于等于(<=)、大于等于(>=),用于值的比较

相等操作符

用于确定两个变量是否相等。

相等和不相等

==
!==

全等和不全等

===
!===

条件操作符

condition ? true : false


赋值操作符

= 表示,用于把右侧的值赋给左侧的变量。

逗号操作符

, 表示,一个语句可以执行多个操作。

var a = 1,
    b = 2,
    c = 3;

标识符

标识符(identifier)指的是用来识别各种值的合法名称。也就是变量、函数、属性的名字,或者函数的参数。

命名规则

  • 第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
  • 第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9。
  • 一般采用驼峰格式命名,就是第一个字母小写,剩下的单词首字母都大写。

关键字和保留字

JavaScript 的关键字和保留字,不能用作标识符。

关键字和保留字:arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

语句(流程控制语句)

条件语句

用于满足某个条件时,输出结果。

if 语句
  • if 结构,做判断时使用
var result = true
if (result) { document.write("条件的结果是对的,所以执行 if 语句")}
//条件的结果是对的,所以用执行 if 语句
  • if...else 结构,有两种情况,需要二选一时使用
var result = false
if (result) {
  document.write('条件的结果是对的,所以执行 if 语句');
} else {
  document.write('条件的结果是错的,所以执行 else 语句');
}
//条件的结果是错的,所以执行 else 语句
  • if...else if...else 结构,出现多种情况,选择其中一种时使用
var result3 = true
var result = true
if ((result = !true)) {
  document.write('条件的结果是对的,所以用执行 if 语句')
} else if (result3) {
  document.write(
    'if 条件结果是错的,else if 条件的结果是对的,所以用执行 else if 语句'
  )
} else {
  document.write('条件的结果是错的,所以用执行 else 语句')
}
//if 条件结果是错的,else if 条件的结果是对的,所以用执行 else if 语句
三元运算符
语法
  (条件) ? 表达式1 : 表达式2

if...else 表示一样的意思,如果“条件”为 true,则返回“表达式 1”的值,否则返回“表达式 2”的值。

var result = false
result
  ? document.write('条件的结果是对的,所以返回前面的值')
  : document.write('条件的结果是错的,所以返回后面的值')
//条件的结果是错的,所以返回后面的值
switch 语句

当有多种选择时,可以不用if...else if...else 结构,使用 switch 语句更为方便。

var con = 3
switch (con) {
  case 1:
    console.log('满足条件。输出结果为 1')
    break
  case 2:
    console.log('满足条件。输出结果为 2')
    break
  case 3:
    console.log('满足条件。输出结果为 3')
    break
  default:
    console.log('条件都不满足。')
}
//满足条件。输出结果为 3

根据 switch 语句里面 con 的值,选择相应的 case,再执行相关函数。
如果所有 case 都不符合,则执行最后的 default 部分。
每个 case 代码块内部的 break 语句不能少,否则会接下去执行下一个 case 代码块,而不是跳出 switch 结构,上面的代码就变成了这样:

var con1 = 3
switch (con1) {
  case 1:
    console.log('满足条件。输出结果为 1')  
  case 2:
    console.log('满足条件。输出结果为 2') 
  case 3:
    console.log('满足条件。输出结果为 3')
  default:
    console.log('条件都不满足。')
}
// 满足条件。输出结果为 3
// 条件都不满足。

var con2 = 1
switch (con2) {
  case 1:
    console.log('满足条件。输出结果为 1')  
  case 2:
    console.log('满足条件。输出结果为 2') 
  case 3:
    console.log('满足条件。输出结果为 3')
  default:
    console.log('条件都不满足。')
}
//满足条件。输出结果为 1
//满足条件。输出结果为 2
//满足条件。输出结果为 3
//条件都不满足。

case 代码块之中没有 break 语句,导致不会跳出 switch 结构,而会从满足条件的 case 开始一直执行下去,直到末尾。

switch语句比较运行结果时,采用的是严格相等运算符(===),而不是相等运算符(==),比较时不会发生类型转换。

循环语句

循环语句用于重复执行某个操作,它有多种形式。

while 循环和 do...while 循环
while 循环

判断是否满足条件,条件满足时,重复执行一段代码,直到某个条件不再满足。

while(判断条件)
{
    循环语句
 }
var i = 0
while (i < 5) {
  console.log('i当前的值为:' + i)
  i = i + 1
}
// i当前的值为:0
// i当前的值为:1
// i当前的值为:2
// i当前的值为:3
// i当前的值为:4
// 5

上面代码把 i 循环 5 次,直到 i = 5 为止。

do...while 循环

do...while循环与while循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。也就是说不管是否满足条件,循环体都至少会执行一次。

do
{
    循环语句
 }
while(判断条件)
var a = 5
var b = 0
do {
  console.log('b当前的值为:' + b)
  b++
} while (b < a)
// b当前的值为:0
// b当前的值为:1
// b当前的值为:2
// b当前的值为:3
// b当前的值为:4
// 4

上面代码把 b 循环 5 次,直到 b = 4 ,b++ = 5 时结束,输出 b 的值为 4。

for 循环

所有for循环,都可以改写成while循环。

for(初始化表达式;循环条件表达式;循环迭代)
{     
   循环语句 
}
  • 初始化表达式(initialize):确定循环变量的初始值,只在循环开始时执行一次。
  • 循环条件表达式(test):每轮循环开始时,都要执行这个条件表达式,只有值为真,才继续进行循环。
  • 循环迭代:一般为递增表达式(increment),每轮循环的最后一个操作,通常用来递增循环变量。
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++) {
  var val = arr[i]
  console.log(val + '的索引为:' + i)
}
// 1的索引为:0
// 2的索引为:1
// 3的索引为:2
break 语句和 continue 语句

break 语句和 continue 语句用于在循环中精准控制代码执行,具有跳转作用,可以让代码不按既有的顺序执行。
break 语句用于跳出代码块或循环。
continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。
如果存在多重循环,不带参数的 break 语句和 continue 语句都只针对最内层循环。

for (var i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3)
    break;
}
// 0
// 1
// 2
// 3

上面代码执行到 i 等于 3,就会跳出循环。

var e = 0;
while (e < 10){
  e++;
  if (e % 2 === 0) continue;
  console.log('e 当前为:' + e);
}
// e 当前为:1
// e 当前为:3
// e 当前为:5
// e 当前为:7
// e 当前为:9

上面代码只有在 i 为奇数时,才会输出 i 的值。如果 i 为偶数,则直接进入下一轮循环。

label 语句

标签语句,可以在代码中添加标签,如果语句的前面有标签(label),就相当于定位符,用于跳转到程序的任意位置。

label:
  语句

标签(label)可以是任意的标识符,但不能是关键字和保留字,语句部分可以是任意语句。
标签通常与 break 语句和 continue 语句配合使用,跳出特定的循环。

foo: {
  console.log(1);
  break foo;
  console.log('本行不会输出');
}
console.log(2);
// 1
// 2

参考:
http://www.w3school.com.cn
https://www.imooc.com
https://www.runoob.com
https://wangdoc.com/javascript
JavaScript 高级程序设计(第3版)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容