【JS】JS 基本语法

JavaScript 基本语法

[toc]

JavaScript 是前端通用脚本语言，简称：”JS”

1. JS 的特点

1. JS 解释型语言，而非编译型：无需编译，运行时才会发现错误，而非编译时
2. JS 动态语言，而非静态语言：数据类型在运行时可动态改变，即自动转换
3. JS 对象是基于原型而非基于类：更加灵活和抽象，函数成为一等公民

2. JS 体系组成

1. ECMAScript: JS 基本语法，如类型，关键字，对像…
2. DOM：文档对象模型（Document Object Model）
3. BOM：浏览器对象模型(Browser Object Model)

3. JS 与 HTML,CSS之间的关系

1.结构：HTML 项目元素
2.表现：CSS 样式布局
3.行为：JS 页面交互

4. JS 与 ES6 之间的关系

1. ECMA:JS 语言标准制定组织（欧洲计算机制造商协会）
2. ECMAScript:ECMA制定的JS语言标准
3. 浏览器大战，JS最终胜出，成为该标准唯一的实现
4. 所以，JavaScript == EMCAScript
5. ECMA2015:2015年发布的 JS 版本，简称为 “ES6”
6. ECMA2016(ES7),ECMA2017(ES8),EMCA2019(ES9),…
7. 为了方便，将ECMA2015 之后的版本，统称为 ES6
8. 所以，现在提到的 JS，其实就是 ES6

5. 前后端分离开发模式

1. 移动互联时代，多端适配与用户体验
2. 页面渲染，从 “服务端”，全面转向 “客户端”
3. 客户端应用具备了完整生命周期，分层框架与技术栈
4. 前端 UI 与后端逻辑，被多端适配与后端 API 替代
5. JQuery（淘汰）,被 Vue（主流）,React,Angular 替代

6. 学习环境

1. Node.js : JS 执行环境 ， https://nodejs.org/zh-cn/
2. 安装二个 vscode 插件：
   (1). JavaScript (ES6) code snippets
   (2). Code Runner
3. JavaScript (ES6) code snippets : 提供了 ES6 代码片断与缩写
4. vscode Code Runner , 可执行包括 js , php 等 30 多种语言
5. 将以下配置项，复制到 vscode.settings.json 中

"code-runner.clearPreviousOutput": true,
"code-runner.saveFileBeforeRun": true,
"code-runner.saveAllFilesBeforeRun": true,
"code-runner.showExecutionMessage": false

7. 命名规范

(1). 标识符：变量，常量，函数，属性，方法，类…
(2). 标识符：自定义，关键字，保留字
(3). 标识符： 字母，数字，下划线， $ ,且不能以数字开头
(4). 命名风格：驼峰(大驼，小驼)，蛇形（小蛇，大蛇）

说明：标识符要语义化，以减少注释

//命名风格：
//1.驼峰
//(1)小驼：首单词小写，其它全大写，用于"变量，属性，函数"...
userName,userEmail,userId,getUser()
//(2)大驼：构造函数和类
Login,UserController,ProductModel
//2.蛇形
//（1）小蛇，全小写，用得极少
user_name,get_user()
//（2）大蛇，全大写，用于常量
APP_PATH,USE_EMAIL

8. 控制台指令

console 是浏览器提供 控制台对象，用于查看 JS 执行结果

1. console.log(data): 查看数据（支持模板和 CSS）
2. console.dir(obj): 树形可折叠查看对象结构
3. console.table(obj): 表格方式查看对象
4. console.error(msg): 输出错误警告
5. console.clear(): 清空输出

const user = {uid:123, uname:'admin'}
console.log(user)
console.dir(user)
console.table(user)
console.clear()
//高级用法
//模板
console.log('uid=',user.uid,'uname=',user.name)
//模板 -> 占位符:%d=>数字；%s=>字符串，%c=>样式 <<= 较复杂
console.log('uid=%c%d\n %cuname=%c%s', 'color:blue', user.uid,'color:black','color:red',user.uname)
console.log(user)
//--------
let username = '老马'
console.log('姓名 = %c %s', 'color:red',username)
//简化：user(变量名)，dir,table,clear.