js框架es6怎么升级为es7 js es6

ES6简介

1.什么是ES6？

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

2.为什么要使用ES6？

因为JavaScript本身存在的缺陷，如：

（1）变量提升特性增加了程序运行时的不可预测性。

（2）语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。

ES6新增语法

1.let和const申明变量

1.1 let

ES6中新增了用于声明变量的关键字。

1.let声明的变量只在所处于的块级有效，使用var声明的变量不具备块级作用域特性。
if (true) { 
     let a = 10;
 }
console.log(a) // a is not defined

2.不存在变量提升
console.log(a); // a is not defined 
let a = 20;

3.不能重复声明
let a = 1;
let a = 2;
a  // Identifier 'a' has already been declared

4.for 循环计数器很适合用 let
for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// 输出 0123456789
//变量 j 是用 let 声明的，当前的 j 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出 0123456789.

1.2 const

声明常量，常量就是值（内存地址）不能变化的量。

1.具有块级作用域
if (true) { 
     const a = 10;
 }
console.log(a) // a is not defined

2.声明常量时必须赋值
const PI; // Missing initializer in const declaration

3.常量赋值后，值不能修改
const PI = 3.14;
PI = 100; // Assignment to constant variable.

4.对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。
而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // Assignment to constant variable.

2 解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

数组模型的解构（Array）

1.基本

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

2.可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

3.可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

4.不完全解构

let [a = 1, b] = []; // a = 1, b = undefined

5.剩余运算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

6.字符串等

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

7.解构默认值

let [a = 2] = [undefined]; // a = 2
当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3

a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1

a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

对象模型的解构（Object）

1.基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

2.可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

3.不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

4.剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

5.解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

总结

• 解构赋值就是把数据结构分解，然后给变量进行赋值
• 如果解构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
• 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
• 利用解构赋值能够让我们方便的去取对象中的属性跟方法

3 箭头函数

ES6中新增的定义函数的方式。

() => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
const fn = () => {}//代表把一个函数赋值给fn

<script type="text/javascript">
		// 1.箭头函数是用来简化函数定义语法的
		const fn = () => {
			console.log(123)
		}
		fn();
		
		// 2.在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
		const sum = (n1, n2) => n1 + n2;	 
		const result = sum(10, 20);
		console.log(result)
		
		// 3.在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
		const fn = v => {
			alert(v);
		}
		fn(20)
		
		// 4.箭头函数不绑定this，箭头函数没有自己的this关键字，如果在箭头函数中使用this，this并不是window对象, 而是nodejs环境下的成员，如果想要使用this，需要借助call()方法来改变this的对象
		function foo(){
		    console.log(this)
		}
		foo.call({num:1})

		//5.箭头函数不可以用new，也就是说箭头函数不能当做构造函数使用
		let fn=()=>{}
		let fnn=new fn();
		fnn(); //fn is not a constructor
		//箭头函数不可以使用arguments 获取参数列表, 可以使用rest 参数代替
		let fun=(...a)=>{
		    console.log(a)
		    console.log(arguments) //箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值
		}
		fun(111,222)
	</script>

4.class及构造函数

es5中，生成实例对象通过构造函数来生成：

function Fun(a,b) {
    this.a = a;
    this.b = b;
}
Fun.prototype.showA = function () {
    console.log(this.a)
}
var fun = new Fun(1,2);
fun.showA();//1

es6则引用了class的概念

class Fun {
    constructor(a,b){
        this.a = a;
        this.b = b;
    }
    showA() {
        console.log(this.a);
    }
}
var fun = new Fun(1,2);
fun.showA();//1

关于继承

ES5原型继承

function Person(name,age){
    this.name=name;         //属性
    this.age=age;
}
Person.prototype.showName=function(){
    return this.name;
}
Person.prototype.showAge=function(){
    return this.age;
}
 
// 属性继承
function Worker(name,age){
    Person.apply(this,arguments);
}
// 方法继承
Worker.prototype = new Person();
 
var worker = new Worker("Tom",26);
alert(worker.showName());

ES6中，子类可通过extends继承父类，子类中属性必须涵盖父类的属性，这需要通过super实现，在此基础上可以增加特有的属性，super中务必包含父类属性，不然新增的属性会覆盖所要继承的父类属性。

class Person{                   //类
    constructor(name,age){      
        this.name=name;         //属性
        this.age=age;
    }
    showName(){
        return(this.name);
    }
    showAge(){
        return(this.age);
    }
}
 
// 继承
class Worker extends Person{                    
    constructor(name,age,job){        
        super(name,age);                        
        this.job = job;
    }
    showJob(){
        return(this.job);
    }
}
 
var worker = new Worker("bert",23,"前端开发工程师");
console.log(worker.showJob());

区别总结：

5.es6中的map与set

1. set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();
 
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
 
for (let i of s) {
  console.log(i);
}
// 2 3 5 4

上面代码通过add方法向 Set 结构加入成员，结果表明Set 结构不会添加重复的值。

// 举例：
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

2.Set的应用场景

数组去重：

[...new Set(array)]

使用扩展运算符(内部使用for…of循环)将集合元素展开，再放进数组格式的结构里面

function dedupe(array) {
  return Array.from(new Set(array));
}
 
dedupe([1, 1, 2, 3]) // [1, 2, 3]

Array.from方法是将其他对象的格式转换成数组格式

3、Set 实例的方法

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。

3.1先介绍四个操作方法：

• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

<script>
     const s = new Set();
     s.add(1).add(2).add(2);
    // 注意2被加入了两次
 
    console.log(s.size); // 2
    console.log(s.has(1));// true
    console.log(s.delete(2));// true
    s.clear();
    console.log(s.size);//0
    </script>

3.2Set 实例的四个遍历方法

Set 结构的实例的四个遍历方法，可以用于遍历成员。
由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

let set = new Set(['red', 'green', 'blue']);
 
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
 
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
 
for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。这意味着，可以省略values方法，直接用for…of循环遍历 Set。

let set = new Set(['red', 'green', 'blue']);
 
for (let x of set) {
  console.log(x);
}
// red
// green
// blue

forEach方法，用于对每个成员执行某种操作，没有返回值。

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6

使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
 
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
 
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
 
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

4、 Map

Set类似于数组，而Map就类似于键值对（Key, Value）；

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
 
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，布尔值true和字符串true则是两个不同的键，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键，包括0和-0。

let map = new Map();
 
map.set(-0, 123);
map.get(+0) // 123
 
map.set(true, 1);
map.set('true', 2);
map.get(true) // 1
 
map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3
 
map.set(NaN, 123);
map.get(NaN) // 123

Map有size()属性：查看Map对象大小，set(key , value) , get(Key), delete(key) , has(key) ，clear()方法。

Map 结构原生提供三个遍历器生成函数（Map 的遍历顺序就是插入顺序）和一个遍历方法。

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。
• forEach()：遍历 Map 的所有成员。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
 
for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"
 
for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"
 
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
 
// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"
 
// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"