Erik's Blog

《JavaScript 高级程序设计》笔记(1) —— 简介及基础语法

(更新于 )JavaScript#ECMAScript

<script> 元素及 ECMAScript 语法等

第 1 章　JavaScript 简介

JavaScript 是什么，JavaScript 的历史；

JavaScript 实现：JavaScript 由 核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM ）组成。

  • ECMAScript 由 ECMA-262 规范定义，提供核心语言功能；
  • DOM 是针对 XML 但经过扩展用于 HTML 的 API，由 W3C 规划，提供访问和操作网页内容的方法和接口；
    • DOM0：IE4、NN4 最初支持的 DHTML，不存在 DOM0 级标准。
    • DOM1：由 DOM core 和 DOM HTML 两个模块组成。映射文档结构。
    • DOM2：DOM Views、DOM Events、DOM Style、DOM Traversal and Range。鼠标和用户界面事件、范围、遍历、对象接口（CSS 的支持）
    • DOM3：DOM Load and Save、DOM Validation。
    • SVG ： Scalable Vector Graphic，可伸缩矢量图。
    • MathML：Mathematical Markup Language。
    • SMIL ： Synchronized Multimedia Integration Language。
  • BOM 功能在 HTML5 中有了正式的规范，提供与浏览器交互的方法和接口。

第 2 章　在 HTML 中使用 JavaScript

<script> 元素属性：

  • src ： 文件 URL，可以是任何域中的文件，嵌入的代码会被忽略。
  • type ： 默认 text/javascript。
  • async ： 异步，立即下载，不应阻塞文档呈现，只对外部文件有效，async=“async”。
  • defer ： 延迟，文档完全被解析和现实之后再执行，只对外部文件有效，defer=“defer”。

所有 <script> 元素都会按照他们在页面中出现的先后顺序依次被解析。

使用 <noscript> 元素可以指定当浏览器不支持脚本或者浏览器支持脚本，但是脚本被禁用的时候，显示元素里面的内容。

第 3 章　基本概念

变量、函数名和操作符 区分大小写，第一个字符必须是（字母、_、$）。

严格模式

“use strict”。放在顶部或一个函数里面。在这个模式下，标识符、属性名为 eval 和 arguments，或出现两个参数同名的情况，会抛出错误。

数据类型 ：Undefined、Null、Boolean、Number、String；Object。

Undefined ： undefined。派生自 null 值。

Null ： null。表示一个空对象指针(typeof null –> “object”)。

Boolean ： true、false。

  • Falsy 值 ： false、""、0、NaN、null、undefined。

Number

  • 使用 IEEE754 格式表示，64位，浮点数值计算会产生舍入误差。
  • MAX_VALUE、MIN_VALUE、NEGATIVE_INFINITY、POSITIVE_INFINITY、NaN。
  • Number(xx) parseInt(xx, xx) parseFloat(xx) toString(基数)。
  • isNaN() : 非数值
  • ECMAScript 中内置函数和操作符的一般执行流程 : 基于对象调用 isNaN() 函数时，首先调用对象的 valueOf() 方法，如果不能转换为数值，基于这个返回值再调用 toString() 方法，测试返回值。

String

  • 采用 16 位 Unicode 字符组成
  • 单引号或双引号 : “xx” 、‘xx’。
  • 字符串是不可变的
  • String()。

Object

  • ECMA-262 不负责定义宿主对象（BOM、DOM对象），可能不会继承 Object。

  • 共有属性和方法 :

    • constructor
    • hasOwnProperty(string)
    • isPrototypeOf(object)
    • propertyIsEnumerable(string)
    • toLocalString()
    • toString()
    • valueOf()

操作符

一元操作符 :

  • 递增/递减操作符 ： ++、 -- 。
  • 一元加/减操作符 ： + 、 - 。用于基本的算术运算或数据类型转换（操作与 Number() 函数相同）。

位操作符 : 位操作符先将 64 位的值转换成 32 位的整数，然后执行操作。

  • 按位非（NOT） ： ~xx。xx的负值-1。
  • 按位与（AND） ： xx & x。
  • 按位或（OR） ： xx | x。
  • 按位异或（XOR） ： xx ^ x。
  • 左移 ： oldValue << x。不会影响符号位。
  • 有符号右移 ：oldValue >> x。保留符号位。
  • 无符号右移 ：oldValue >>> x。负数会以绝对值的二进制补码形式表示。

布尔操作符 :

  • 逻辑非 ： !。!! 作用同 Boolean()。
  • 逻辑与 ： &&。短路操作，第一个值为真时返回第二个对象、null、NaN、undefined。
  • 逻辑或 ： || 。短路操作，对象、null、NaN、undefined。用来避免为变量赋值 null 或 undefined 值。

乘性操作符 : 如果一个操作数不是数值，会后台调用 Number()。

  • 乘法 ： *
  • 除法 ： /
  • 求模 ： %

加性操作符 :

  • 加法 ： +
  • 减法 ： -

关系操作符 : > 、 < 、 >= 、 <=。对象： valueOf() -> toString()。NaN -> false。 相等操作符 : ==、!= ： 先转换再比较。===、!==。 条件操作符 : ? : 赋值操作符 : =、*=、/=、%=、+=、-=、<<=、>>=、 >>>=。 逗号操作符 : ,

语句

if 语句、do-while 语句、while 语句、for 语句、break、continue、with 语句(会导致性能下降)。 switch 语句 : 比较值是使用的是全等，case 值可以是常量、变量、表达式。 for-in 语句：for (property in expression) {code}，顺序不可预测。 label 语句（给代码加标签）：label:statement 比如：start:for(var i = 0;i<count;i++){代码块}。

函数 （没有函数签名的概念——没有重载）

  • 返回值 ： 推荐要么让函数始终返回一个值，要么永远不要返回值。这样方便调试代码。未指定返回值的函数返回 undefined 值。
  • 参数 ： 命名的参数只提供便利，但不是必须的。ECMAScript 中的所有参数传递的都是值，没有传递的命名参数将自动被赋予 undefined 值。严格模式下对 arguments[i] 赋值无效， 重写 arguments 对象会导致语法错误。

第 4 章　变量、作用域和内存问题

  • 引用类型值能添加属性，复制变量值时，新老变量指向堆中同一对象。保存在堆内存中。
  • 基本类型值不能添加属性，复制变量值时，新变量和变量相互独立。保存在栈内存中。
  • ECMAScript 中所有函数的参数都是按值传递的。被传递的值或值中的地址会被复制给一个局部变量

检测类型 ： 使用 typeof 操作符检测基本数据类型；使用 instanceof 操作符检测引用类型。

  • typeof ： “underfined” 值未定义，“boolean” 值为布尔型，“String” 值为字符串，“number” 值为数值，“object” 值为对象或 null，“function” 值为函数（内部实现 [[Call]] 方法的对象）。
  • instanceof ： 根据原型链来识别。

执行环境 ： 定义了变量或函数有权访问的其它数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，解析器在处理数据时会在后台使用它。全局执行环境、局部执行环境（函数）。作用域链、活动对象。

  • with 语句 和 try-catch 语句的 catch 块会在作用域链的前端临时增加一个变量对象。

  • 标识符查询从作用域的前端开始，向上逐级匹配。

垃圾收集 ： 自动。局部变量只在函数执行的过程中存在（栈/堆内存上占用空间）。浏览器的两种策略： 标记清除、引用计数。性能问题。

解除引用 ： 一旦数据不再有用，设置为 null 来释放引用。

第 5 章　引用类型

Object 类型

创建 Object 实例的方式：new Object() 、对象字面量（不会调用 Object 构造函数）。 传参模式 ： 必修的值使用命名参数，可选参数使用对象字面量来封装。

Array 类型

创建数组

  • new Array();
  • Array();
  • 字面量 []（不会调用 Array 构造函数）。

检测数组

  • value instanceof Array
  • Array.inArray(value) : ECMAScript 5 新增

转换方法

  • toLocalString()
  • toString() : 以逗号分隔每个值的字符串
  • valueOf() : 返回的还是数组
  • join(“x”) : 加入分隔符

栈方法 : LIFO 推入 弹出

  • push(“arg1”, “arg2”, …) : 接收任意数量的参数，逐个添加到数组末尾，返回修改后的数组长度
  • pop() : 从数组末尾移除最后一项，减少数组的 length 值，返回移除的项

队列方法 : FIFO

  • push(“arg1”, “arg2”, …) : 接收任意数量的参数，逐个添加到数组末尾，返回修改后的数组长度

  • shift() : 移除并返回数组的第一个项

  • unshift() : 接收任意数量的参数，逐个添加到数组末尾，返回修改后的数组长度

  • pop() : 从数组末尾移除最后一项，减少数组的 length 值，返回移除的项

重排序方法

  • reverse() : 反转数组项的顺序
  • sort() : 默认按字符串比较(toString) 升序排列 <
  • sort(function (value1, value2) {…}) : 自定义比较函数，顺序 value1 value2 返回负数

操作方法

  • concat() : 复制一个数组
  • concat(“x”, [“x”, “x”]) : 在原有数组的基础上创建一个副本再添加参数到末尾
  • slice() : 复制一个数组
  • slice(begin) : 创建一个 begin 到末尾的数组
  • slice(begin, end) : 创建一个 begin 到 end 的数组
  • splice() 向数组的中部插入数组 :
    • 删除：splice(0, 2) 删除数组前两项
    • 插入：splice(2, 0, “red”, “blue”) 从当前数组位置 2 插入字符串
    • 替换：splice(2, 1, “red”, “blue”) 删除数组位置2的项，再从位置2开始插入字符串

位置方法 ： IndexOf() 从开头开始查找。lastIndexOf() 从结尾处开始查找。 迭代方法 ： every()、some()、filter()、map()、forEach()。

归并方法

  • reduce(callback, [initialValue]) : 从头到尾。不包括数组中被删除或从未被赋值的元素
    • callback : 执行数组中每个值的函数，包含四个参数 :
      • previousValue 上一次调用回调返回的值，或者是提供的初始值（initialValue）
      • currentValue 数组中当前被处理的元素
      • index 当前元素在数组中的索引
      • array 调用 reduce 的数组
    • initialValue : 作为第一次调用 callback 的第一个参数
  • reduceRight() 从尾到头。

Date 类型

  • 当前时间 ： new Date(); Date.now()。

  • 特定时间 ： timestamp = Date.parse(“time”) NaN、timestamp = Date.UTC(年, 月, 日, 时, 分, 秒, 毫秒)。date = new Date(timestamp);

  • 继承的方法:

    • toLocalString() : 按照浏览器设置的地区相适应的格式返回日期和时间。
    • toString() : 返回带有时区信息的日期和时间。
    • valueOf() : 返回时间戳。

  • 日期格式化方法:

    • toDateString() : 显示星期几，月，日，年
    • toTimeString() : 显示时分秒和时区
    • toLocalDateString() : 以特定于地区的格式显示星期几、月、日和年
    • toLocalTimeString() : 以特定于实现的格式显示时分秒和时区
    • toUTCString() : 以特定于实现的格式完整的 UTC 日期。（toGTMString()）

正则表达式（RegExp()）

var expression = /pattern/flags;

  • 支持的标识

    • g : 全局模式
    • i : 不区分大小写
    • m : 多行模式

  • 需要转义的元符号 : ([{\^$|)?*+.}

  • RegExp 实例属性:

    • global : 是否设置了 g 标志
    • ignoreCase : 是否设置了 i 标志
    • lastIndex : 表示开始搜索下一个匹配项的字符位置，从0开始算起
    • multiline : 是否设置了 m 标志
    • source : 正则表达式的字符串表示

  • RegExp 实例方法:

    • exec() 捕获组，返回的数组包含两个额外属性：index 和 input
    • test() 是否匹配。

  • RegExp 构造函数属性:

    • input($_) : 最近一次要匹配的字符串
    • lastMatch($&) : 最近一次的匹配项
    • lastParen ($+) : 最近一次匹配的捕获组
    • leftContext($`) : input 字符串中 lastMatch 之前的文本
    • multiline($*) : 布尔值，是否所有表达式都使用多行模式
    • rightContext($’) : input 字符串中 lastMatch 之后的文本
    • RegExp.$1 - RegExp.$9 : 第 1-9 个匹配的捕获组

ps : 使用短属性的时候要记得加上[],比如：[“$+”]， opera 不支持：input、lastMatch、lastParen、multiline，IE 不支持：multiline。

  • 局限性

Function 类型

  • 函数实际上是 Function 对象的实例，函数名是一个指向函数对象的指针，所以没有重载。

  • 三种定义函数方法 ： 函数声明、函数表达式、Function 构造函数。使用 Function 构造函数定义函数会影响性能。

  • 函数声明提升 ： 解析器会率先读取函数声明。

  • 函数可作为值当做参数传递和返回。

  • 函数内部属性

    • arguments : 保存函数参数、callee。
    • this : 执行环境对象的引用。 X this 不在函数内部。
    • arguments.callee : 函数引用。 可用于消除递归调用耦合
    • arguments.callee.caller : 调用当前函数的函数的引用。
    • 严格模式下，访问 arguments.callee、arguments.caller 会导致错误，不能为 caller 属性赋值。

  • 函数属性和方法

    • length 函数希望接收的命名参数的个数
    • prototype 原型
    • apply() 、 call() 在特定的作用域中调用函数。
    • bind() 创建一个函数实例，this 值绑定到传给 bind() 函数的值
    • toLocalString() 、 toString() 、valueOf() 返回函数代码

  • 在严格模式下，未指定环境对象而调用函数，this 值为 undefined。

  • 基本包装类型 : Boolean/Number/String

  • String 方法： slice()/substr()/substring()/indexOf()/lastIndexOf()/trim()/ toLowerCase()/toLocalLowerCase()/toUpperCase()/toLocalUpperCase()/ match()/search()/replace() : $$/$&/$'/$`/$n/$nn/ localCompare()/fromCharCode()/charCodeAt()

内置单体对象 : Object、Array、String、Global、Math。

  • Global 对象（Web 浏览器将这个对象作为 window 对象的一部分加以实现）

    • URI 编码方法 : encodeURI()/encodeURIComponent()/decodeURI()/ddecodeURIComponent()
    • eval() : 具有与执行环境相同的作用域链；eval() 中创建的变量和函数不会被提升；严格模式下外部不能访问 eval() 中创建的变量和函数。
    • 属性(特殊值) : 禁止赋值
      • undefined
      • NaN
      • Infinity
    • 属性(构造函数) :
      • Object
      • Array
      • Function
      • Boolean
      • String
      • Number
      • Date
      • RegExp
      • Error
      • EvalError
      • RangeError
      • ReferenceError
      • SyntaxError
      • TypeError
      • URIError

  • Math 对象

    • 属性 :
      • Math.E
      • Math.LN10
      • Math.LN2
      • Math.LOG2E
      • Math.LOG10E
      • Math.PI
      • Math.SQRT1_2
      • Math.SQRT2
    • 方法 :
      • min()、max()
      • ceil()、round()、floor()
      • random()
      • abs()、exp()、log()、pow(num, power)、sqrt()
      • acos()、asin()、atan()、atan2(x, y)
      • cos()、sin()、tan()