简介
Javascript一种直译式脚本语言，是一种动态类型、弱类型、解释型或即时编译型的编程语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。JavaScript 的标准是 ECMAScript 。截至 2012 年，所有的现代浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6
尝试
<button id='btn'>点我</button>
<div id="box" style="width: 100px; height: 100px; background: orange; display: block;"></div>
<script>
var btn = document.getElementById('btn')
var box = document.getElementById('box')
// 点击按钮显示/隐藏 #box
btn.onclick = function (){
if('block' == box.style.display){
box.style.display = 'none'
}else{
box.style.display = 'block'
}
}
</script>在编写 javascript 代码时要严格区分字母的大小写，语法规则是否正确，否则程序将不能正确的执行。
数据类型
- String 字符串（一串文本）。字符串的值必须将用引号（单双均可，必须成对）扩起来。
- Number 数字。无需引号。
- Boolean 布尔值（真 / 假）。 true/false 是 JS 里的特殊关键字，无需引号。
- Array 数组，用于在单一引用中存储多个值的结构。
- Object 对象，JavaScript 里一切皆对象，一切皆可储存在变量里。
- Undefined 未定义或未赋值
- Null 对象为空
typeof
typeof 操作符返回一个字符串，表示未经计算的操作数的类型。
function fun1(){}
console.log( typeof 1 ) // number
console.log( typeof true ) // boolean
console.log( typeof 'num' ) // string
console.log( typeof null ) //object
console.log( typeof new Array(1) ) // object
console.log( typeof new Object() ) // object
function fun1(){} //定义一个函数
console.log( typeof fun1 ) // function
var num //定义一个变量
console.log( typeof num) // undefined类型转换
- 隐式类型转换(自动转换)：在表达式中，参与运算的操作数据自动转换为相同类型并进行运算。
5-'1' //结果为数字 4 5+'1'+1+1-1 //结果为数字 5110 - 显式类型转换(强制转换): 在表达式中参与运算的操作数据需要调用方法到对象对数据进行转换类型，转换完成后再进行运算。
Number() //轩数字 Boolean() //转布尔 String() //转字符串 parseInt() //转数字 parseFloat() // 转数字 .toString() //转字符串
运算符
- 算术运算符
+ - * / % ++ --++ --数据本身会自递增或自递减 1 ，在同一语句中++ --在操作数的右侧时，先使用操作数的值再运算，在左侧时先运算再使用操作数中的结果。+两侧的操作数，如果有一方为字符串那么 + 就作为字符串连接符使用
- 赋值运算符
= += -= *= /= %=- 比较运算符
> < == === >= <= != !==使用比较运算的表达式的值的结果为 布尔值。
- 逻辑运算符
&& || !
- 位运算符
& |
- 三目运算
? :运算符优先级 下面的表将所有运算符按照优先级的不同从高（20）到低（1）排列。
| 优先级 | 运算类型 | 关联性 | 运算符 |
|---|---|---|---|
| 20 | 圆括号 | n/a（不相关） | ( … ) |
| 19 | 成员访问 | 从左到右 | … . … |
| 19 | 需计算的成员访问 | 从左到右 | … [ … ] |
| 19 | new (带参数列表) | n/a | new … ( … ) |
| 19 | 函数调用 | 从左到右 | … ( … ) |
| 19 | 可选链（Optional chaining） | 从左到右 | ?. |
| 18 | new (无参数列表) | 从右到左 | new … |
| 17 | 后置递增(运算符在后) | n/a | … ++ |
| 17 | 后置递减(运算符在后) | n/a | … — |
| 16 | 逻辑非 | 从右到左 | ! … |
| 16 | 按位非 | 从右到左 | ~ … |
| 16 | 一元加法 | 从右到左 | + … |
| 16 | 一元减法 | 从右到左 | – … |
| 16 | 前置递增 | 从右到左 | ++ … |
| 16 | 前置递减 | 从右到左 | — … |
| 16 | typeof | 从右到左 | typeof … |
| 16 | void | 从右到左 | void … |
| 16 | delete | 从右到左 | delete … |
| 16 | await | 从右到左 | await … |
| 15 | 幂 | 从右到左 | … ** … |
| 14 | 乘法 | 从左到右 | … * … |
| 14 | 除法 | 从左到右 | … / … |
| 14 | 取模 | 从左到右 | … % … |
| 13 | 加法 | 从左到右 | … + … |
| 13 | 减法 | 从左到右 | … – … |
| 12 | 按位左移 | 从左到右 | … << … |
| 12 | 按位右移 | 从左到右 | … >> … |
| 12 | 无符号右移 | 从左到右 | … >>> … |
| 11 | 小于 | 从左到右 | … < … |
| 11 | 小于等于 | 从左到右 | … <= … |
| 11 | 大于 | 从左到右 | … > … |
| 11 | 大于等于 | 从左到右 | … >= … |
| 11 | in | 从左到右 | … in … |
| 11 | instanceof | 从左到右 | … instanceof … |
| 10 | 等号 | 从左到右 | … == … |
| 10 | 非等号 | 从左到右 | … != … |
| 10 | 全等号 | 从左到右 | … === … |
| 10 | 非全等号 | 从左到右 | … !== … |
| 9 | 按位与 | 从左到右 | … & … |
| 8 | 按位异或 | 从左到右 | … ^ … |
| 7 | 按位或 | 从左到右 | … ▏ … |
| 6 | 逻辑与 | 从左到右 | … && … |
| 5 | 逻辑或 | 从左到右 | … ‖ … |
| 4 | 条件运算符 | 从右到左 | … ? … : … |
| 3 | 赋值 | 从右到左 | … = … |
| 3 | 赋值 | 从右到左 | … += … |
| 3 | 赋值 | 从右到左 | … -= … |
| 3 | 赋值 | 从右到左 | … *= … |
| 3 | 赋值 | 从右到左 | … /= … |
| 3 | 赋值 | 从右到左 | … %= … |
| 3 | 赋值 | 从右到左 | … <<= … |
| 3 | 赋值 | 从右到左 | … >>= … |
| 3 | 赋值 | 从右到左 | … >>>= … |
| 3 | 赋值 | 从右到左 | … &= … |
| 3 | 赋值 | 从右到左 | … ^= … |
| 3 | 赋值 | 从右到左 | … ▕= … |
| 2 | yield | 从右到左 | yield … |
| 2 | yield* | 从右到左 | yield* … |
| 1 | 展开运算符 | n/a | … … |
| 0 | 逗号 | 从左到右 | … , … |
从上表中可以看到运算符非常多并且各运算符优先级并无太多规律。建议在运算时使用 圆括号（） 将需要的表达时括起来。这样便于读写。
流程控制
控制程序的执行顺序
条件判断
根据给定的条件决定代码块是否被执行。
- if
if(true){ //是否要被执行的代码 } if( 2 == 1 ){ //要执行的代码块 }else{ //要执行的代码块 } if( 2 == 1 ){ //要执行的代码块 }else if( 2 > 1){ //要执行的代码块 }else{ //要执行的代码块 }if可以配置 else if 和 else 使用这样可以使用程序在执行时可以有更多的选择。 if ( … )语句接收一个布尔值或者可以表示变布尔值的表达式。 - switch
switch (key) { case value: break; default: break; }循环控制 - while
while (true) { } - do/while
do { } while (condition); - for
for (var i = 0; i < 10; i++) { }break、continue
- break/continue都作用于循环语句
- continue结束本次循环继续下一次循环。
- break结束当前离它最近的循环。
- break可以在switch中使用。switch不是循环。