JavaSctipt高级程序设计读书笔记(一)

JavaScript简史

表单验证，value需要发送到服务器端判断

JavaScript组成

1. 核心：ECMAScript（ECMA-262）
2. 文档对象模型：DOM
3. 浏览器对象模型：BOM

JavaScript语言特性

1. 单线程（异步实现并发）
2. 解释性
3. 事件驱动
4. 面向对象
5. 弱类型

JavaScript在HTML中的使用

1. 嵌入脚本：浏览器会认为是结束标签，发生编译错误

2. 外部脚本：通过

1. async：异步下载脚本，立即下载脚本，只对外部脚本文件有效(不能保证脚本的执行顺序)
2. charset：通过src属性指定的代码的字符集，charset=‘UTF-8’(中文字符集)
3. defer：延迟脚本到文档完全解析或显示再执行，仅支持外部脚本(IE7及IE浏览器更早版本嵌入脚本也支持这个属性)
4. language：已废弃。编译代码所使用的语言
5. src：外部脚本文件链接
6. type：编写代码使用的脚本语言类型，text/javascript

文档类型（doctype）

1. 混杂模式
2. 标准模式

元素

1. 浏览器不支持脚本
2. 浏览器支持脚本但脚本被禁用

JavaScript的语法

1. 区分大小写
2. 标识符：驼峰式

• 以字母，下划线或美元符开头
• 其他可以是数字，美元符，字母和下划线
• 不能是关键字，保留字，true，false，null

3. 注释：单行注释；多行注释
4. 严格模式：use strict（ES5引入）
5. 语句：以分号结尾；代码块更容易解析（{}）

关键字和保留字

• 关键字

break     do        instanceof      typeof
case      else      new             var
catch     finally   return          void
continue  for       switch          while
debugger  function  this            with
default   if        throw      
delete    in        try
// 第五版新增
debugger

• 保留字：可能在将来作为关键字

abstract     enum        int         short
boolean      export      interface   static
bite         extends     long        super
char         final       native      synchronized
class        float       package     throws
const        goto        private     transient      
debugger     implements  protected   volatile
double       import      public

• 第五版非严格模式下保留字

class        enum       extends     super
const        export     import

• 第五版严格模式下保留字

implements   public     package     protected
interface    private    static 
// 第五版新增
let          yield

除了关键字和保留字，eval和arguments在第五版严格模式下也不能作为标志符或属性名

变量

1. 声明变量的值但不限制数据类型

var message = 'test';
message = 11; // 数据类型可以从string变为number

2. 局部变量和全局变量

// 局部变量
function test() {
    var message = 'test';
}
test();
alert(message) // error

// 全局变量
fucntion test() {
    message = 'test';
}
test();
alert(message) // test

3. 变量提升(先使用后声明)
4. 一条语句定义多个变量

var message = 'hi',
    found = false,
    age = 29

严格模式下，不能定义名为eval或arguments的变量

变量的声明(初始化)方式

1. var
2. let
3. const

数据类型

• 基本数据类型

1. undefined
2. null（可以用于清空变量）
3. boolean
4. number
5. string

• 引用数据类型

1. object

数据类型检测

1. typeof

• 无法判断具体的引用类型数据，如数组

console.log(typeof "");   //string
console.log(typeof 1);  //number
console.log(typeof true);  //boolean
console.log(typeof null);  //object
console.log(typeof undefined);  //undefined
console.log(typeof []);   //object
console.log(typeof function(){});   //function
console.log(typeof {});   //object

2. instanceof

• 能够判断具体的引用类型(不能判断null和undefined)
• 不能检测基本数据类型

console.log("1" instanceof String);   //flase
console.log(new String("1") instanceof String);  //true
console.log(1 instanceof Number);   //false
console.log(new Number(1) instanceof Number); //true
console.log(true instanceof Boolean);   //false
console.log(new Boolean(true) instanceof Boolean); //true
console.log([] instanceof Array);  //true
console.log(function(){} instanceof Function);  //true
console.log({} instanceof Object);  //true

3. constructor

console.log(("1").constructor === String);  //true
console.log((1).constructor === Number);   //true
console.log((true).constructor === Boolean);    //true
console.log(([]).constructor === Array);    //true
console.log((function() {}).constructor === Function);    //true
console.log(({}).constructor === Object);    //true

不适用情况

function Fn(){};

Fn.prototype=new Array();   //函数的原型指向数组

var f=new Fn();   //实例化

console.log(f.constructor===Fn);   //false
console.log(f.constructor===Array);   //true

4. Object.prototype.toString.call()

var a = Object.prototype.toString;

console.log(a.call("aaa"));    //[object String]
console.log(a.call(1));        //[object Number]
console.log(a.call(true));       //[object Boolean]
console.log(a.call(null));       //[object Null]
console.log(a.call(undefined));   //[object Undefined]
console.log(a.call([]));         //[object Array]
console.log(a.call(function() {}));    //[object Function]
console.log(a.call({}));     //[object Object]

5. isNaN,isBoolean…

console.log(isObject({}));     //true
console.log(isDate(new Date()));    //true
console.log(isBoolean(false));   //true
console.log(isString(1));     //false
console.log(isError(1));      //false
console.log(isError(new Error()));   //true
console.log(isArray([]));     //true
console.log(isArray(1));  //false

数据类型转换

1. Boolean()：转换为boolean类型
2. toString()：转换为string类型
3. Number()：转换为number类型，适用于转换任何数据类型
4. parseInt(), parseFloat()：转换为number类型，仅适用于转换字符串类型
5. String()：转换为string类型
6. 与字符串拼接(+ “”)

console.log(String(10));     // "10"
console.log(String(true));    // "true"
console.log(String(null));   // "null"
console.log(String(undefined));     // "undefined"

操作符

• 一元操作符

1. 递增和递减运算符(++, --)

++a // 先自增再使用
--a // 先自减再使用
a++ // 先使用再自增
a-- // 先使用再自减

var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2; // 22
var num4 = --num1 + num2; // 20

非Number类型进行递增或递减：

var s1 = "2";
var s2 = "z";
var b = false;
var f = 1.1;
var 0 = {
    valueOf: function() {
        return -1;
    }
};
s1++; // 3
s2++; // NaN
b++; // false转换为0再自增；1
f--; // 0.1
o--; // 调用对象的valueOf()或toString()方法后自减；-2

2. 一元加和减操作符(+, -)：正负，没有递增递减的作用

• 位操作符

1. 按位非(NOT ~)：操作数的负值减一
   负数的二进制码：正数的二进制反码加一

var num1 = 25;  // 二进制000000000000000000011001
var num2 = ~num1;  // 二进制111111111111111111100110
alert(num2); // -26

2. 按位与(AND &)：

var result = 25 & 3;
11001
00011
00001
alert(result); // 1

3. 按位或(OR |)：

var result = 25 | 3;
11001
00011
11011
alert(result); // 27

4. 按位异或(XOR ^)：都是1或都是0 -> 返回0

var result = 25 ^ 3;
11001
00011
11010
alert(result); // 26

5. 左移(<<)：

var oldValue = 2;
var newValue = oldValue << 5; // 64
10
1000000 === 64

6. 有符号右移(>>)：

var oldValue = 64;
var newValue = oldValue << 5; // 2
1000000
10

7. 无符号右移(>>>)：会把负数的二进制码当正数的二进制码，结果非常大

• 布尔操作符

1. 逻辑非(!)

alert(!false); // true
alert(!"blue"); // 非空字符串 false
alert(!0); // true
alert(!NaN); // true
alert(!""); // 空字符串 true
alert(!123); // false

2. 逻辑与(&&)
3. 逻辑或(||)

• 乘性操作符

1. 乘法(*)
   乘积超过ECMAScript数值范围，返回Infinity或-Infinity；

有一个操作数为NaN，结果为NaN；

Infinity与0相乘，结果为NaN；
2. 除法(/)
商超过ECMAScript数值范围，返回Infinity或-Infinity；

0被0除，返回NaN；

Infinity被Infinity除，返回NaN；
3. 求模(%)：取余

• 加性操作符

1. 加法
2. 减法

• 关系操作符
  小于(<)，大于(>)，小于等于(<=)，大于等于(>=)
• 相等操作符(区别于是否比较数据类型)

1. 相等和不相等(== 和 !=)
2. 全等和不全等(=== 和 !==)

• 条件操作符(三目运算符)

(如果)?(就):(否则)

• 赋值操作符

1. =
2. *=
3. /=
4. %=
5. +=
6. -=
7. <<=
8. 有符号右移赋值(>>=)
9. 无符号右移赋值(>>>=)

• 逗号操作符

在一条语句中执行多个操作

var num1=1, num2=2, num3=3;

var num = (5, 1, 4, 3, 0); // 0 逗号操作符总是返回表达式的最后一项

语句

1. if语句

if (condition) statement1 else statement2

⚠️ 推荐始终使用代码块即使只有一行语句
2. do-while语句

do {
statement
} while (condition)
3. while语句

while (condition) statement
4. for语句
5. for-in语句(用于枚举对象的属性)
6. label语句

7. break,continue语句

• break：立即退出循环，强制继续执行循环后面的语句
• continue：立即退出循环，从循环顶部继续执行

var num = 0;
for (var i=1;i<10;i++){
    if(i%5 === 0){
        break; // 5
    }
    num++;
}
// 执行4次

console.log(num) // 4

var num = 0;
for (var i=1;i<10;i++){
    if(i%5 === 0){
        continue; // 5
    }
    num++;
}
// 执行8次

console.log(num) // 8

8. with语句(将代码的作用域设置到一个特定的对象中)
9. switch语句