001 JS简介

Javascript：最开始用于处理网页前端验证
发明于1995年，当时服务器通信很慢，简单的操作没有必要放在服务器验证
三大公司

• Netscape Navigator 收费浏览器——live script
• Sun（Java 公司）——JavaScript
• Microsoft Internet Explorer 3——JScript
  之后公司共同制定标准——ECMAScript（ES）；仅是一个标准（文档），各浏览器的底层实现不尽相同

现在的 JavaScript

• ECMAScript
• DOM 文档对象
• BOM 浏览器对象

002 HelloWorld

Javascript 可以在 html 中执行
浏览器按 F12 可以进入开发者模式，其中 Elements 可以查看 html 元素，Console 可以快捷执行 Javascript 代码

<script>
    alert("6");
    document.write("6");
    console.log("6");
</script>

003 JS编写位置

1. 写在script标签内
2. 写在attribute：结构与行为耦合，不方便维护，不推荐使用

<button onclick="alert('6')">6666666</button>
<a href="javascript:alert('6');">666666666666666</a>

3. 写在外部文件（最佳方式），可以在不同页面引用，也可以利用浏览器缓存；引用之后不能在script标签内部写代码，写了也不会执行

<script src=js/script.js></script>

004 JS基本语法

注释

/*
 *6666666666666666666666
 *6666666666666666666666
 */
// 注释也可调试代码

JS 语言的特点

1. 严格区分大小写
2. 每一条语句以分号(;)结尾，不写分号会自动添加但消耗资源，还可能解析错误
3. 忽略多个空格和换行

005 字面量和变量

字面量：常量；1, 2, 3, 4, 5；可以直接使用，不过一般不直接使用
变量：保存字面量，还可任意改变

// var 声明变量
var a;
console.log(a); // undefined

// let 声明变量
let b;
console.log(b); // undefined

// 赋值
a = 123;
console.log(a); // 123

006 标识符

所有可以自主命名的都是标识符
命名规则

1. 标识符可以有字母，数字，下划线，$
2. 不能数字开头
3. 不能是关键字或保留字
4. JS 的标识符一般采用驼峰命名法

JS 底层保存标识符是 Unicode，所以理论可以用 UTF-8 来做变量名

007 字符串 String

JS 数据类型

1. String 字符串 let str = "hello"; 如果里面要用双引号，那么外面单引号，或者转义字符
2. Number 数值
3. Boolean 布尔值
4. Null 空值
5. Undefined 未定义
6. Object 对象

前五种是基本数据类型，Object 是引用数据类型

008 Number

Number 包括整数和浮点数

运算符 typeof：检查变量类型；例：typeof 'a' === 'string'

Number.MAX_VALUE
Number.MAX_SAFE_INTEGER
Number.MIN_VALUE         // 无穷小

Infinity：超出范围
NaN：Not a Number

• 注意：两个 NaN 不能作等式，即 NaN === NaN 为false

浮点不精确：0.1 + 0.2 === 0.30000000000000004
不要用 JS 进行高精度运算

009 Boolean

Boolean 即布尔值，只有 true 和 false

010 Null 和 Undefined

null：空对象（typeof 返回 object）
undefined：未定义；声明但未赋值

011 强制类型转换-String

将其他类型转换为 String，Number，Boolean

方式一：调用被转换类型的 toString() 方法；不影响原变量

• b = a.toString();
• 注意：null 和 undefined 不能调用方法
  方式二：调用 String() 函数
• b = String(a);
• 可以转换 null 和 undefined

012 强制类型转换-Number

方式一：Number() 函数

• 字符串
  • 纯数字：直接转换
  • 非法数字：NaN
  • 空串或仅有空字符的串：0
• Boolean：true-1, false-0
• Null：0
• Undefined：NaN
• 局限性：不能转例如"123px"的字符串

方式二：parseInt() 与 parseFloat() 函数

• 只能取前面有效部分，例：parseInt('123px') === 123；parseInt('a123') 的值为 NaN
• 非 String 会先转成 String 再操作

013 其他进制的数字

16进制：0x 开头，如 0xffff
8进制：0 或 0o 开头，如 0o234567
2进制：0b 开头；不是所有浏览器支持

parseInt 可以指定第二个参数表示进制，如parseInt('1234', 10)将'1234'作为十进制来转换

014 转换为 Boolean

只能用 Boolean() 函数

• Number：0 是 false，其余是 true
• String：空串是 false，其余是 true
  • Boolean('false') === true
• Null：false
• Undefined：false
• Object：true

015 算术运算符

运算符：typeof
算术运算符：+-*/%
+：加法；两个字符串加法是拼接；任何值和字符串加法都先转化成字符串然后拼接

• 由于 JS 从左到右运算，所以1 + 2 + '3' === 3 + '3' === '33'
• 除加法外的运算都是转化成数

-：减法
*：乘法
/：除法
%：取余

016 一元运算符

+：正号；不会对数字产生影响
-：负号
非 Number 值会先转成 Number；可以用+号将其他类型值转成 Number
例：1 + +'2' + 3 === 6

017 自增和自减

自增：在自身基础上增加1

let a = 1;
a++;        // 执行后 a === 2

自增分两种，a++ 和++a

• 相同点：调用后立即增加 1
• 不同点：值不同

let a = 1;
console.log(a++);  // a++的值为原变量的值，输出1，执行后a值为2

let a = 1;
console.log(++a);  // ++a的值为新值，输出2，执行后a值为2

let a = 1;
a = a++; // 这相当于 {b = a++; a = b;} 两句，执行后a值为1

类似地，自减分两种，a--和--a
不要在代码中连续使用自增和自减（如类似a++ + ++a + a的表达式），这种东西写在代码中会难以理解

018 自增练习

let n1 = 10;
let n = n1++; // 执行后 n = 10，n1 = 11

n = ++n1; // 执行前 n = 10, n1 = 11
          // 执行后 n = 12, n1 = 12

let n2 = 20;
n = n2--; // 执行后 n = 20, n2 = 19

n = --n2; // 执行前 n = 20, n2 = 19
          // 执行后 n = 18, n2 = 18

019 逻辑运算符

布尔值的转换见 014 章
三种逻辑运算符：!, &&, ||

!：非；true 转 false，false 转 true；对非布尔值会先转成布尔值再运算
真值表（以下用 0 和 1 表示 false 和 true）

a	!a
1	0
0	1

任意类型数据做两次非运算可以转成布尔值（即 !!a），相当于 Boolean() 函数

&&：与；只有两个值都为 true 才返回 true，否则返回 false
真值表

a	b	a && b
0	0	0
0	1	0
1	0	0
1	1	1

&& 是短路运算，即如果第一个值为 false 就不会检查第二个值
例：false && alert('1'); 这里第一个值是 false，第二个值的 alert 不会执行

||：或；只要两个值有一个 true 就返回 true，两个都为 false 才返回 false
真值表

a	b	a||b
0	0	0
0	1	1
1	0	1
1	1	1

|| 也是短路运算，即如果第一个值为 true 就不会检查第二个值

020 非布尔值的与或运算

非布尔值进行与或运算，会先转换为布尔值，然后再运算，最后返回原值
与运算：第一个值为 true，返回第二个值；第一个值为 false，返回第一个值

result = 1 && 2;            // 2
result = true && NaN;       // NaN
result = 0 && 2;            // 0
result = undefined && null; // undefined

或运算：第一个值为 true，返回第一个值；第一个值为 false，返回第二个值

result = 1 || 2;            // 1
result = true || NaN;       // true
result = 0 || 2;            // 2
result = undefined || null; // null