前端培训-初级阶段（13） - ECMAScript （内置对象、函数）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

该文为 前端培训-初级阶段（13、18） 的补充内容 (介绍了 ECMAScript 历史，ES6 常用点)。

本文介绍 ECMAScript基础知识 。

1. 前端培训-初级阶段（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、URIError

ECMA-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. 实例化方式

   new Date();//当前时间
   new Date(Number);//传入的毫秒数转换成时间
   new Date(dateString);//传入的时间格式转换为时间。这里有一些坑（低版本IE、ios、chrome）实现的规范不一样，导致有的格式解析不出来，可以用[momentjs][3]。
   new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

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

2. 方法

   1. Date.now() 返回自 1970-1-1 00:00:00 UTC（世界标准时间）至今所经过的毫秒数。
      等效写法 +new Date() , new Date().getTime()
   2. Date.parse() 解析一个表示日期的字符串，并返回从 1970-1-1 00:00:00 所经过的毫秒数。
   3. Date.UTC() 接受和构造函数最长形式的参数相同的参数（从2到7），并返回从 1970-01-01 00:00:00 UTC 开始所经过的毫秒数。

3. 原型方法

   1. getDay() 周， getFullYear() 年， getMonth() 月， getDate() 日， getHours() 时， getMinutes() 分， getSeconds() 秒
   2. getTimezoneOffset() 返回当前时区的时区偏移。
   3. 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.pow Math.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 函数（声明、调用、返回值、闭包、递归）

函数声明

function fun(){}
fun = function fun(){}
void function(){console.log(1)}()
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 标准库