[TOC]
# 基本语法
## 语法
JavaScript每个语句以`;`结束,语句块用`{...}`。但是,JavaScript并不强制要求在每个语句的结尾加`;`,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上`;`。
例如,下面的一行代码就是一个完整的赋值语句:
~~~javascript
var x = 1;
~~~
> 定义变量可以使用var或者let关键字
下面的一行代码包含两个语句,每个语句用`;`表示语句结束:
~~~
var x = 1; var y = 2; // 不建议一行写多个语句!
~~~
语句块是一组语句的集合,例如,下面的代码先做了一个判断,如果判断成立,将执行`{...}`中的所有语句:
~~~javascript
if (2 > 1) {
x = 1;
y = 2;
z = 3;
}
~~~
注意花括号`{...}`内的语句具有缩进,通常是4个空格。缩进不是JavaScript语法要求必须的,但缩进有助于我们理解代码的层次,所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功能,可以帮助整理代码。
`{...}`还可以嵌套,形成层级结构:
~~~javascript
if (2 > 1) {
x = 1;
y = 2;
z = 3;
if (x < y) {
z = 4;
}
if (x > y) {
z = 5;
}
}
~~~
JavaScript本身对嵌套的层级没有限制,但是过多的嵌套无疑会大大增加看懂代码的难度。遇到这种情况,需要把部分代码抽出来,作为函数来调用,这样可以减少代码的复杂度。
## 注释
以`//`开头直到行末的字符被视为行注释,注释是给开发人员看到,JavaScript引擎会自动忽略:
~~~
// 这是一行注释
alert('hello'); // 这也是注释
~~~
另一种块注释是用`/*...*/`把多行字符包裹起来,把一大“块”视为一个注释:
~~~
/* 从这里开始是块注释
仍然是注释
仍然是注释
注释结束 */
~~~
## 大小写
请注意,JavaScript严格区分大小写,如果弄错了大小写,程序将报错或者运行不正常。
# 变量与常量
## JavaScript 变量
与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
* 变量必须以字母开头
* 变量也能以 $ 和 \_ 符号开头(不过我们不推荐这么做)
* 变量名称对大小写敏感(y 和 Y 是不同的变量)
## 变量和常量的声明
变量声明使用var,let,常量的定义使用const。
```
var x=1;
let y=2;
const z=3;
```
> 顾名思义,常量是不能改变的量,也就是说定义后不能再次对它赋值,如下的语句会报错
```
const x=1;
x=x+1;
```
## var和let的区别
在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升。
例如:
```js
function fn() {
if(bool) {
var name = 'Jack'
} else {
console.log(name)
}
}
```
以上的代码实际上是:
```javascript
function fn() {
var name // 变量提升
if(bool) {
name = 'Jack'
} else {
//此处访问name 值为undefined
console.log(name)
}
//此处访问name 值为undefined
}
```
所以不用关心bool是否为true or false。实际上,无论如何name都会被创建声明。这种语法规则会带来很多的歧义。
ES6中,我们通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。通俗的讲,{}大括号内的代码块即为let 和 const的作用域。
let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。
```javascript
function fn() {
if(bool) {
//let的作用域,限定在这个语句块中
let name = 'Jack'
} else {
//超越了name的定义域
//name 在此处访问不到
console.log(name)
}
}
```
> const定义常量,顾名思义,就是不能改变的量,对常量修改会报错。 程序中不需要修改的值,或者不允许修改的值尽可能定义为常量,这样可以减少程序语义上的错误。例如:
```javascript
const name = 'Jack'
name = 'Tom' //再次赋值此时会报错
```
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event(事件)
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范