前端培训-初级阶段(13) - ECMAScript(内置对象，函数）

我们要讲什么

1. ECMAScript 基础对象（Object、Boolean、Number、String）

2. 常用内置对象（Date、Array、Math、RegExp、global、Function、Event、arguments、JSON）

3. ECMAScript 函数（声明、调用、返回值、闭包、递归）

ECMAScript 基础对象

在 ECMAScript 中，所有对象并非同等创建的。

一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。

ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。

简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIErrorECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。

ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象。

Object 对象

Object 是所有对象的基础。JavaScript 中的所有对象都来自 Object ；所有对象从 Object.prototype 继承方法和属性，尽管它们可能被覆盖。

例如，其他构造函数的原型将覆盖 constructor 属性并提供自己的 toString() 方法。Object 原型对象的更改将传播到所有对象，除非受到这些更改的属性和方法将沿原型链进一步覆盖。

Boolean 对象

这个对象非常的简单。只有从Object哪里基础来的方法和属性。当做函数调用，就是把值转换成布尔类型

如果第一个参数不是布尔值，则会将其转换为布尔值。如果省略该参数，或者其值为 0、-0、null、false、NaN、undefined、或者空字符串（""），则生成的 Boolean 对象的值为 false。如果传入的参数是 DOM 对象 document.all，也会生成值为 false 的 Boolean 对象。

任何其他的值，包括值为 "false" 的字符串和任何对象，都会创建一个值为 true 的 Boolean 对象。注意不要将基本类型中的布尔值 true 和 false 与值为 true 和 false 的 Boolean 对象弄混了。

当 Boolean 对象用于条件语句的时候（译注：意为直接应用于条件语句），任何不是 undefined 和 null 的对象，包括值为 false 的 Boolean 对象，都会被当做 true 来对待。例如，下面 if 语句中的条件为真:

var x = new Boolean(false);
if (x) {
  console.log(typeof x, typeof true, typeof false)
}

Number 对象

String 对象

常用内置对象

这个我就直接说常用的了。

Date

Date 对象是自1970年1月1日（UTC）起经过的毫秒数。

1. 实例化方式

newDate();//当前时间

newDate(Number);//传入的毫秒数转换成时间

newDate(dateString);//传入的时间格式转换为时间。这里有一些坑（低版本IE、ios、chrome）实现的规范不一样，导致有的格式解析不出来，可以用[momentjs][3]。

newDate(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

注意：只能将 Date 作为构造函数调用，才能实例化（instantiate） Date 对象：若将它作为常规函数调用（即不加 new 操作符），则将会返回一个字符串，而非 Date 对象。另外，不像其他的 JavaScript 对象类型，Date 对象没有字面量语法（literal syntax）。

1. 方法

a.Date.now() 返回自 1970-1-1 00:00:00 UTC（世界标准时间）至今所经过的毫秒数。
等效写法+new Date(),new Date().getTime()

b.Date.parse() 解析一个表示日期的字符串，并返回从 1970-1-1 00:00:00 所经过的毫秒数。

c.Date.UTC() 接受和构造函数最长形式的参数相同的参数（从2到7），并返回从 1970-01-01 00:00:00 UTC 开始所经过的毫秒数。

2. 原型方法

a.getDay()周，getFullYear()年，getMonth()月，getDate()日，getHours()时，getMinutes()分，getSeconds()秒

b.getTimezoneOffset() 返回当前时区的时区偏移。

c.set方法同上，需要注意的地方有setHours()可以把时分秒毫秒都设置了

Array

1. Array数组对象的forEach、map、filter、reduce

2. join 合并成串

3. concat 合并其他数组

4. slice 分割数组

Math

1. Math.random() 随机数。来个公式（end-start+1）*num+start
   比如 60-90区间内(90-60+1)*Math.random()+60>>0即可得到区间内整数

2. Math.ceil 向上取整Math.ceil(5.1)

3. Math.floor 向下取整Math.floor(1.9)

4. Math.round 四拾伍入Math.round(2.3)

5. Math.powMath.pow(3,5)等同于3**5,但是前者兼容更好

RegExp

原生的方法其实很少用。需要注意的地方是，有部分函数会记录上次差到的点。一般都是用字符串的 replace 和 match

JSON

低版本 IE 没有。需要使用 eval。

提供了 JSON.stringify 和 JSON.parse()用来序列化与反序列化

//提供一个tips,你可以在控制台试试哟。
JSON.stringify([{
    userid: 7848950,
    nickname: 'abc'
},{
    userid: 920110633,
    nickname: 'abc'
},{
    userid: 7848952,
    nickname: 'abc'
}], null, '   ')

ECMAScript 函数（声明、调用、返回值、闭包、递归）

函数声明

1. 函数声明 function fun(){}

2. 函数表达式 fun = function fun(){}

3. IFFE void function(){console.log(1)}()

4. 构造函数 new Function('a','b','return a+b')(1,2)

函数调用

function fun(){console.log(1)};fun() 通过括号来调用

返回值

function fun(){return 1};console.log(fun()) 函数内部通过return来返回

闭包

1. 什么是作用域

作用域(scope)指的是变量存在的范围。 在 es5 中的，Javascript 只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。（es6中又新增了块级作用域）全局作用域可以在代码的任何地方都能被访问。

2. 什么是作用域链

是指作用域生成的路径。当代码在一个执行环境中执行时，就会创建一个作用域链。我们有可能两个 function 内都使用了 state 这个变量,我们不希望他共享，他被限制在了自己的作用域中。

内部环境可以通过作用域链访问所有外部环境，但是外部环境不能访问内部环境中的任何变量和函数。

在 js 中与作用域链相似的有原型链

3. 那么什么是闭包呢？
   闭包就是依赖这个特性，思考如下代码。可以让我们的代码和外部环境隔离。

var getNum = (function(){
  var sum = 0;//闭包中的变量
  return function(){
      return ++sum//内部可以访问
  }
})()
getNum();//1,这里可以获取调用次数
sum = 1000;//这里改变的其实是全局的，因为他拿不到闭包内的sum
getNum();//2,这里可以获取调用次数

回调函数

有的教程里面叫高阶函数，思考如下代码

[1,2,3].map(v=>v*2);//map就是一个高阶函数，通过把回调传递进去。对原数组进行操作。

递归函数

这个主要是用来没有预期的情况。比如遍历一颗树。你不知道要循环多少次。或者说当前有个dom节点，你需要找到他的一个父级.editor_main。

//求菲波那切数列
function factorial(num){
   if(num <= 1){
       return 1
   }else {
       return num * factorial(num - 1);
   }
}

后记

主讲人的讲稿地址

参考文献

1. JavaScript 标准库