JavaScript 基本语法

[toc]

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

1. JS 的特点

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

2. JS 体系组成

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

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

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

4. JS 与 ES6 之间的关系

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

5. 前后端分离开发模式

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

6. 学习环境

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

console.log(data): 查看数据（支持模板和 CSS）
console.dir(obj): 树形可折叠查看对象结构
console.table(obj): 表格方式查看对象
console.error(msg): 输出错误警告
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.

【JS】JS 基本语法