ECMAScript ES5、ES6、ES7

作者: 我本无常 | 来源:发表于2018-09-26 14:18 被阅读5次

JS
ECMAScript 6（1）
ES6常见面试题总结
快速了解ES6
ECMAScript ES5、ES6、ES7
ECMAScript ES5、ES6、ES7
JavaScript--ES5和ES6（上）
ES6常见面试问题汇总
ES6常见题
Babel解析原理剖析

ECMAScript理解

它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范

而我们学的 JavaScript 是ECMA的实现,但术语ECMAScript和JavaScript平时表达同一个意思

JS包含三个部分：

1). ECMAScript（核心）

2). 扩展==>浏览器端

BOM（浏览器对象模型）

DOM（文档对象模型）

3). 扩展==>服务器端

Node
ES的几个重要版本
ES5 : 09年发布

ES6(ES2015) : 15年发布, 也称为ECMA2015

ES7(ES2016) : 16年发布, 也称为ECMA2016 (变化不大)

ES5

严格模式

理解:
除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。

顾名思义，这种模式使得Javascript在更严格的语法条件下运行

目的/作用
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为

消除代码运行的一些不安全之处，为代码的安全运行保驾护航

为未来新版本的Javascript做好铺垫

使用

在全局或函数的第一条语句定义为: 'use strict';

如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用

语法和行为改变
必须用var声明变量

禁止自定义的函数中的this指向window

创建eval作用域

对象不能有重名的属性

<script type="text/javascript">
'use strict';
var username = 'kobe';
// window.username = 'kobe';
console.log(username);
function Person(name, age){
  this.name = name;
  this.age = age;
}
new Person('kobe', 40);
var str = 'NBA';
// eval('alert(str)');
eval('var str = "CBA"; alert(str)');
alert(str);
var obj = {
  username: 'kobe',
  username: 'wade'
}
</script>

JSON对象

JSON.stringify(obj/arr)
js对象(数组)转换为json对象(数组)
JSON.parse(json)
json对象(数组)转换为js对象(数组)

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JSON对象</title>
 </head>
 <body>
 <!--
 1. JSON.stringify(obj/arr)
   * js对象(数组)转换为json对象(数组)
 2. JSON.parse(json)
   * json对象(数组)转换为js对象(数组)
 -->
 <script type="text/javascript">
     var obj = {username: 'kobe'};
     obj = JSON.stringify(obj);
     console.log(typeof obj);
     obj = JSON.parse(obj);
     console.log(typeof obj);
 </script>
 </body>
 </html>

Object扩展

ES5给Object扩展了一些静态方法, 常用的2个:

Object.create(prototype, [descriptors])
作用: 以指定对象为原型创建新的对象

为新的对象指定新的属性, 并对属性进行描述

value : 指定值

writable : 标识当前属性值是否是可修改的, 默认为false

configurable: 标识当前属性是否可以被删除默认为false

enumerable：标识当前属性是否能用for in 枚举默认为false

Object.defineProperties(object, descriptors)

作用: 为指定对象定义扩展多个属性
get ：用来获取当前属性值得回调函数

set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值

存取器属性：setter,getter一个用来存值，一个用来取值

<script type="text/javascript">
  //1. Object.create(prototype, [descriptors])
  var obj = {username: 'jordan', age: 55};
  var obj1 = {};
  obj1 = Object.create(obj, {
    sex: {
      value: '男',
      writable: true,
      configurable: true,
      enumerable: true
    }
  });
  // console.log(obj1);
  console.log(obj1.sex);
  obj1.sex = '女';
  console.log(obj1.sex);
  // delete obj1.sex;
  // console.log(obj1);
  for(var i in obj1){
    console.log(i);
  }
  // 2. Object.defineProperties(object, descriptors)
  var obj2 = {firstName: 'kobe', lastName: 'bryant'};
  Object.defineProperties(obj2, {
    fullName: {
      get: function(){//获取扩展属性的值，在获取扩展属性值的时候get方法自动调用
        console.log('get()');
        return this.firstName + " " + this.lastName;
},
set: function(data){//监听扩展属性，当扩展属性发生变化的时候，会自动调用，自动调用后会将变化的值作为实参注入到set函数
  console.log('set()', data);
  var names = data.split(' ');
  this.firstName = names[0];
  this.lastName = names[1];
}
    }
  })
  console.log(obj2);
  console.log(obj2.fullName);
  obj2.fullName = 'tim duncan';
  console.log(obj2.fullName);
</script>

<!--
    对象本身的两个方法
    * get propertyName(){} 用来得到当前属性值的回调函数
    * set propertyName(){} 用来监视当前属性值变化的回调函数
-->
<script type='text/javascript'>
  var obj3 = {
    firstName: 'stephen', 
    lastName: 'curry',
    get fullName(){
      return this.firstName + " " + this.lastName;
    },
    set fullName(data){
      var names = data.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  };
  console.log(obj3);
  obj3.fullName = 'kobe bryant';
  console.log(obj3.fullName);
</script>

Array扩展

Array.prototype.indexOf(value) : 得到值在数组中的第一个下标

Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标

Array.prototype.forEach(function(item, index){}) : 遍历数组

Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值

Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组，返回条件为true的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_Array扩展</title>
</head>
<body>
<!--
1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
-->
<script type="text/javascript">
  /*
   需求:
   1. 输出第一个6的下标
   2. 输出最后一个6的下标
   3. 输出所有元素的值和下标
   4. 根据arr产生一个新数组,要求每个元素都比原来大10
   5. 根据arr产生一个新数组, 返回的每个元素要大于4
   */
  var arr = [2,4,3,1,2,6,5,4];
  console.log(arr.indexOf(4));
  console.log(arr.lastIndexOf(4));
  arr.forEach(function(item, index){
    console.log(item, index);
  })
  var arr1 = arr.map(function(item, index) {
    return item + 10;
  });
  console.log(arr1);
  var arr2 = arr.filter(function(item, index){
    return item > 3;
  });
  console.log(arr, arr2);
</script>
</body>
</html>

Function扩展

Function.prototype.bind(obj) :
作用: 将函数内的this绑定为obj, 并将函数返回
面试题: 区别bind()与call()和apply()?
都能指定函数中的this

call()/apply()是立即调用函数

bind()是将函数返回

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>05_Function扩展</title>
 </head>
 <body>
 <!--
 1. Function.prototype.bind(obj) :
   * 作用: 将函数内的this绑定为obj, 并将函数返回
 2. 面试题: 区别bind()与call()和apply()?
   * 都能指定函数中的this
   * call()/apply()是立即调用函数
   * bind()是将函数返回
 -->
 <script type="text/javascript">
        var obj = {username: 'kobe'};
     /*function foo(){
    console.log(this);
}*/
function foo(data){
    console.log(this, data);
}
// foo();
// foo.call(obj);
// foo.apply(obj);
//传入参数的形式
// foo.call(obj, 33);//直接从第二个参数开始，依次传入
// foo.apply(obj, [33]);//第二参数必须是数组，传入的参数放在数组里
//bind的特点：绑定完this不会立即调用当前的函数，而是将函数返回
/*var bar = foo.bind(obj);
console.log(bar);
bar();*/
//bind传参的方式同call一样
foo.bind(obj, 33)();
setTimeout(function(){
    console.log(this);
}.bind(obj), 1000);
 </script>
 </body>
 </html>

ES6

let关键字

作用:

与var类似, 用于声明一个变量

特点

在块作用域内有效

不能重复声明

不会预处理, 不存在变量提升

应用

循环遍历加监听

使用let取代var是趋势

<script type="text/javascript">
    // console.log(username);
    let username = 'kobe';
    // let username = 'wade';
    // console.log(username);
    let btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++) {
  var btn = btns[i];
  /*var无法获取正确的索引*/
  btn.onclick = function(){
      alert(i);
  }
  /*闭包的方式解决
  (function(i){
      btn.onclick = function(){
          alert(i);
      }
      })(i);*/
    }
</script>

const关键字

作用:

定义一个常量

特点:

不能修改

其它特点同let

应用

保存不用改变的数据

<script type="text/javascript">
const KEY = 'NBA';
KEY = 'CBA';
console.log(KEY);
</script>

变量的解构赋值

理解:

从对象或数组中提取数据, 并赋值给变量(多个)

对象的解构赋值

let {n, a} = {n:'tom', a:12}

数组的解构赋值

let [a,b] = [1, 'hello'];

用途

给多个形参赋值

<script type="text/javascript">
  let obj = {username: 'kobe', age: 40};
    // let username = obj.username;
    // let age = obj.age;
    // let {username, age} = obj;
    // console.log(username, age);
    // let {age} = obj;
    // console.log(age);
  let arr = [1,3,5,'abc',true];
    // let [a,b,c,d,e] = arr;
    // console.log(a,b,c,d,e);
    let [,,a,b] = arr;
    console.log(a,b);
    /*function foo(obj){
  console.log(obj.username, obj.age);
    }*/
    function foo({username, age}){//{username, age} = obj;
  console.log(username, age);
    }
    foo(obj);
</script>

模板字符串

模板字符串 : 简化字符串的拼接

模板字符串必须用 `` 包含

变化的部分使用${xxx}定义

<script type="text/javascript">
    let obj = {username: 'kobe', age: 40};
    let str = '我的名字叫：' + obj.username + '，我的年龄：' + obj.age;
    console.log(str);
    str = `我的名字叫：${obj.username}，我的年龄：${obj.age}`;
    console.log(str);
    /*
    商品列表的url：
    https://s.taobao.com/search?q=锅&refpid=430275_1006&source=tbsy&style=grid&tab=all&pvid=4aed0d3046100602f268a24859e5bb44&clk1=b7e8112df80f92354fd6562fa21256ed&spm=a21bo.2017.201856-sline.10.5af911d9vwLBmw
    */
</script>

简化的对象写法

省略同名的属性值
省略方法的function
例如:

let x = 1;
let y = 2;
let point = {
    x,
    y,
    setX (x) {this.x = x}
};

 <script type="text/javascript">
let username = 'kobe';
let age = 40;
let obj = {
    username,//同名的属性可以省略不写
    age,
    getName(){//可以省略函数的function
        return this.username;
    }
};
console.log(obj);
console.log(obj.getName());
</script>

箭头函数

作用: 定义匿名函数
基本语法:

没有参数: () => console.log('xxxx')

一个参数: i => i+2

大于一个参数: (i,j) => i+j

函数体不用大括号: 默认返回结果

函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回

使用场景: 多用来定义回调函数

4. 箭头函数的特点：

1、简洁

2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this

3、扩展理解：箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。

 <script type="text/javascript">
/*let fun= function(){
    console.log('我是函数');
}*/
/*
let fun = () => console.log('我是箭头函数');
fun();
//形参的情况
//1、没有形参的时候
let fun1 = () => console.log('我是箭头函数');
fun1();
//2、只有一个形参的时候()可以省略
let fun2 = a => console.log(a);
fun2('aaa');
//3、两个及两个以上的形参的时候()不能省略
let fun3 = (x, y) => console.log(x, y);
fun3(25, 36);
//函数体的情况
//1、函数体只有一条语句或者是表达式的时候{}可以省略-->会自动返回语句执行的结果，或者是表达式的结果
// let fun4 = (x,y) => {return x + y};
let fun4 = (x,y) => x + y;
console.log(fun4(24, 36));
//2、函数体不止一条语句或者表达式的情况
let fun5 = (x, y) => {
    console.log(x, y);
    return x + y;
}
console.log(fun5(35, 49));
*/
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.onclick = function(){
    alert(this);
    console.log(this);
}
btn2.onclick = () => {
    alert(this);
}
let obj = {
    name: '箭头函数',
    getName: () => {
        btn2.onclick = () => {
            console.log(this);
        }
    }
}
// 本质是 obj.getName = () => {};
obj.getName();
</script>

扩展运算符

1. rest(可变)参数

用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数

function fun(...values) {
    console.log(arguments);
    arguments.forEach(function (item, index) {
        console.log(item, index);
    });
    console.log(values);
    values.forEach(function (item, index) {
        console.log(item, index);
    })
}
fun(1,2,3);

2. 扩展运算符

let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);

形参默认值
当不传入参数的时候默认使用形参里的默认值

function Point(x = 1,y = 2) {
    this.x = x;
    this.y = y;
}

Promise对象

理解:

Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)

有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')

ES6的Promise是一个构造函数, 用来生成promise对象的实例

使用promise基本步骤(2步):

创建promise对象

let promise = new Promise((resolve, reject) => {
    //初始化promise状态为 pending
  //执行异步操作
  if(异步操作成功) {
    resolve(value);//修改promise的状态为fullfilled
  } else {
    reject(errMsg);//修改promise的状态为rejected
  }
})

调用promise的then()
promise.then(function(
  result => console.log(result),
  errorMsg => alert(errorMsg)
))

promise对象的3个状态

pending: 初始化状态

fullfilled: 成功状态

rejected: 失败状态

应用:

使用promise实现超时处理

使用promise封装处理ajax请求

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();

promise过程分析:

[图片上传失败...(image-78743f-1537876083052)]

Symbol

前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境
概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
特点：

1、Symbol属性对应的值是唯一的，解决命名冲突问题

2、Symbol值不能与其他数据进行计算，包括同字符串拼串

3、for in, for of遍历时不会遍历symbol属性

使用：

1、调用Symbol函数得到symbol值

let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';

2、传参标识

let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')

3、内置Symbol值

除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法
Symbol.iterator
对象的Symbol.iterator属性，指向该对象的默认遍历器方法
Iterator遍历器
概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制

作用：

1、为各种数据结构，提供一个统一的、简便的访问接口；

2、使得数据结构的成员能够按某种次序排列

3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

工作原理：

创建一个指针对象(遍历器对象)，指向数据结构的起始位置。

第一次调用next方法，指针自动指向数据结构的第一个成员

接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员

每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}

value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。

当遍历结束的时候返回的value值是undefined，done值为false

原生具备iterator接口的数据(可用for of遍历)

1、Array

2、arguments

3、set容器

4、map容器

5、String

……

Generator函数
概念：

1、ES6提供的解决异步编程的方案之一

2、Generator函数是一个状态机，内部封装了不同状态的数据

3、用来生成遍历器对象

4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

特点：

1、function 与函数名之间有一个星号

2、内部用yield表达式来定义不同的状态

例如：

function* generatorExample(){
  let result = yield 'hello';  // 状态值为hello
  yield 'generator'; // 状态值为generator
}

3、generator函数返回的是指针对象(即iterator)，而不会执行函数内部逻辑

4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}

5、再次调用next方法会从上一次停止时的yield处开始，直到最后

6、yield语句返回结果通常为undefined，当调用next方法时传参内容会作为启动时yield语句的返回值。

async函数
async函数(源自ES2017)

概念：真正意义上去解决异步回调的问题，同步流程表达异步操作

本质： Generator的语法糖

语法：

async function foo(){
await 异步操作;
await 异步操作；
}

特点：

1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行

2、返回的总是Promise对象，可以用then方法进行下一步操作

3、async取代Generator函数的星号*，await取代Generator的yield

4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

class

通过class定义类/实现类的继承
在类中通过constructor定义构造方法
通过new来创建类的实例
通过extends来实现类的继承
通过super调用父类的构造方法
重写从父类中继承的一般方法

字符串扩展

includes(str) : 判断是否包含指定的字符串
startsWith(str) : 判断是否以指定字符串开头
endsWith(str) : 判断是否以指定字符串结尾
repeat(count) : 重复指定次数

数值扩展

二进制与八进制数值表示法: 二进制用0b, 八进制用0o
Number.isFinite(i) : 判断是否是有限大的数
Number.isNaN(i) : 判断是否是NaN
Number.isInteger(i) : 判断是否是整数
Number.parseInt(str) : 将字符串转换为对应的数值
Math.trunc(i) : 直接去除小数部分

数组扩展

Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
Array.of(v1, v2, v3) : 将一系列值转换成数组
find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

对象扩展

Object.is(v1, v2)

判断2个数据是否完全相等

Object.assign(target, source1, source2..)

将源对象的属性复制到目标对象上

直接操作 proto 属性

let obj2 = {};
obj2.proto = obj1;

深度克隆
1、数据类型：

数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
基本数据类型特点：存储的是该对象的实际数据

对象数据类型特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

2、复制数据

基本数据类型存放的就是实际的数据，可直接复制
let number2 = 2;
let number1 = number2;

克隆数据：对象/数组
1、区别：浅拷贝/深度拷贝

判断：拷贝是否产生了新的数据还是拷贝的是数据的引用

知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用

let obj = {username: 'kobe'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用

2、常用的拷贝技术

1). arr.concat(): 数组浅拷贝

2). arr.slice(): 数组浅拷贝

3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据

4). 浅拷贝包含函数数据的对象/数组

5). 深拷贝包含函数数据的对象/数组

Set和Map数据结构

Set容器 : 无序不可重复的多个value的集合体

Set()

Set(array)

add(value)

delete(value)

has(value)

clear()

size

Map容器 : 无序的 key不重复的多个key-value的集合体

Map()

Map(array)

set(key, value)//添加

get(key)

delete(key)

has(key)

clear()

size

for_of循环
for(let value of target){}循环遍历

遍历数组
遍历Set
遍历Map
遍历字符串
遍历伪数组

JS
1.JS的作用 2.ECMAScript(标准、核心部分) ES3 ES5 ES6 ES7 3.JavaScrip...
ECMAScript 6（1）
ECMAScript 6 ECMAScript 6也称为ES6和ECMAScript 2015 回顾es5 一：严...
ES6常见面试题总结
1、es5和es6的区别，说一下你所知道的es6 ECMAScript5，即ES5，是ECMAScript的第五次...
快速了解ES6
一、es6简介 ECMAScript是一个标准 ECMAScript5.1es52011年发布 es6就是es5的...
ECMAScript ES5、ES6、ES7
ECMAScript理解它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范而我们学的...
ECMAScript ES5、ES6、ES7
ECMAScript理解它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范而我们学的...
JavaScript--ES5和ES6（上）
一、概述 es表示ECMASCript ，他是从es3，es5，es6，es5是2009.12月发布的，es6是2...
ES6常见面试问题汇总
1、es5和es6的区别，说一下你所知道的es6ECMAScript5，即ES5，是ECMAScript的第五次修...
ES6常见题
1、es5和es6的区别，说一下你所知道的es6ECMAScript5，即ES5，是ECMAScript的第五次修...
Babel解析原理剖析
背景 Javascript属于web编程语言，本身语法设计存在缺陷，随着ES5、ES6、ES7等各个版本的推出，语...

ECMAScript ES5、ES6、ES7

ECMAScript理解

ES5

使用

JSON对象

Object扩展

Object.defineProperties(object, descriptors)

Array扩展

Function扩展

ES6

let关键字

模板字符串

箭头函数

4. 箭头函数的特点：

1. rest(可变)参数

2. 扩展运算符

Promise对象

相关文章

JS

ECMAScript 6（1）

ES6常见面试题总结

快速了解ES6

ECMAScript ES5、ES6、ES7

ECMAScript ES5、ES6、ES7

JavaScript--ES5和ES6（上）

ES6常见面试问题汇总

ES6常见题

Babel解析原理剖析

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

web入门学习