JS基础
一、JS语言介绍
1、概念
- 浏览器脚本语言
- 可以编写运行在浏览器上的代码程序
- 属于解释性、弱语言类型编程语言
2、组成
- ES语法：ECMAScript、主要版本ES5和ES6
- DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
- BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
二、三种存在位置
1、行间式：存在于行间事件中
<body id="body" onload="body.style.backgroundColor=‘#0ff‘"> ???</body>2、内联式：存在于页面script标签中
<body id="body"> ???<script type="text/javascript"> ???????body.style.backgroundColor=‘#0ff‘ ???</script></body>3、外联式：存在于外部JS文件，通过script标签src属性链接
index.js文件body.style.backgroundColor=‘#0ff‘index.html文件<script src="./js/index.js"></script>三、解释性语言特性决定JS代码位置
- 出现在head标签底部：依赖型JS库
- 出现在body标签底部：功能型JS脚本
四、JS语法规范
- 注释
// 单行注释/* 多行注释*/- 以分号作为语句结尾（允许省略）
五、变量的定义
1、ES5定义变量
var num = 10; ?// 无块级作用域变量num = 10; ?// 全局变量2、ES6定义变量(有块级作用域)
let num = 10; ?// 局部变量const NUM = 10; ?// 常量3、变量(标识符)的命名规范
- 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符,采用驼峰命名法）
- 区分大小写
- 不能出现关键字及保留字
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
六、三种弹出框
- alert：普通弹出框
- confirm：确认框
- prompt：输入框
七、四种调试方式
- alert()
- console.log()
- document.write()
- 浏览器断点调试
八、数据类型
1、值类型
- number：数字类型
var a = 10;console.log(a, typeof a)// 判断方式console.log(typeof a == ‘number‘)- string：字符串类型
var a = ‘10‘;console.log(a, typeof a)// 判断方式console.log(typeof a == ‘string‘)- boolean：布尔类型
var a = true;console.log(a, typeof a)// 判断方式console.log(typeof a == ‘boolean‘)- undefined：未定义类型
var a = undefined;console.log(a, typeof a)// 判断方式console.log(typeof a == ‘undefined‘)console.log(a == undefined)2、引用类型
- function：函数类型
var a = function(){};console.log(a, typeof a)// 判断方式console.log(typeof a == ‘function‘)- object：对象类型
var a = {};console.log(a, typeof a)// 判断方式console.log(typeof a == ‘object‘)console.log(a instanceof Object)3、具体的对象类型
- null：空对象
var a = null;console.log(a, typeof a)// 判断方式console.log(typeof a == ‘object‘)console.log(a == null)- Array：数组对象
var a = new Array(1, 2, 3, 4, 5);console.log(a, typeof a)// 判断方式console.log(typeof a == ‘object‘)console.log(a instanceof Object)console.log(a instanceof Array)- Date：时间对象
var a = new Date();console.log(a, typeof a)// 判断方式console.log(typeof a == ‘object‘)console.log(a instanceof Object)console.log(a instanceof Date)- RegExp：正则对象
var a = new RegExp();console.log(a, typeof a)// 判断方式console.log(typeof a == ‘object‘)console.log(a instanceof Object)console.log(a instanceof RegExp)4、类型转换
- 数字|布尔 转换为 字符串
var a = 10 or trueString(a)a.toString()- 布尔|字符串 转换为 数字
var a = true or ‘10‘Number(a)+ aparseFloat()parseInt()- 字符串|数字 转换为 布尔
var a = 10 or ‘10‘Boolean(a)- 自动转换
5 + null ?// 5"5" + null ?// "5null""5" + 1 ?// "51""5" - 1 ?// 4- 特殊产物
// NaN: 非数字类型// 不与任何数相等，包含自己// 利用isNaN()进行判断九、运算符
1、算数运算符
前提：n = 5
| 运算符 | ???????描述 | ???????例子 | ???????x结果 | ???????n结果 | ???
|---|---|---|---|---|
| + | ???????加法 | ???????x=n+2 | ???????7 | ???????5 | ???
| - | ???????减法 | ???????x=n-2 | ???????3 | ???????5 | ???
| * | ???????乘法 | ???????x=n*2 | ???????10 | ???????5 | ???
| / | ???????除法 | ???????x=n/2 | ???????2.5 | ???????5 | ???
| % | ???????取模(余数) | ???????x=n/2 | ???????1 | ???????5 | ???
| ++ | ???????自增 | ???????x=++n | ???????6 | ???????6 | ???
| x=n++ | ???????5 | ???????6 | ???||
| -- | ???????自减 | ???????x=--n | ???????4 | ???????4 | ???
| x=n-- | ???????5 | ???????4 | ???
2、赋值运算符
前提：x=5，y=5
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | 5 | |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
3、比较运算符
前提：x=5
| 运算符 | 描述 | 比较 | 结果 |
|---|---|---|---|
| == | 等于(值相等) | x=="5" | true |
| === | 绝对等于(值与类型都相等) | x==="5" | false |
| != | 不等于(值不相等) | x!="5" | fales |
| !== | 不绝对等于(值与类型都不相等) | x!=="5" | true |
| > | 大于 | x>5 | false |
| < | 小于 | x<5 | false |
| >= | 大于等于 | x>=5 | true |
| <= | 小于等于 | x<=5 | true |
4、逻辑运算符
前提：n=5
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| || | 或 | x=n<10||n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
5、ES6语法解构赋值
- 数组的解构赋值
let [a, b, c] = [1, 2, 3]// a=1,b=2,c=3let [a, ...b] = [1, 2, 3]// a=1,b=[2,3]- 对象的解构赋值
let {key: a} = {key: 10}// a=10- 字符串解构赋值
let [a,b,c] = ‘xyz‘// a=‘x‘,b=‘y‘,c=‘z‘js基础(数据类型 运算符)
原文地址：https://www.cnblogs.com/jianhaozhou/p/9772345.html