前端知识点总结--ES6入门

1.var、let、const

ES6 推荐在函数中使用 let 定义变量

const 用来声明一个常量 (值类似值不能改变，引用类型地址不能改变)

let 和 const 只在最近的一个块中（花括号中）有效

//1.let不能重复申明   
var n = 10;
var n = 100;
console.log(n)  //100

let a=10
let a=100
console.log(a) // SyntaxError 'a' has already been declared

//2.var能改变全局作用域（变量提升） let则不能
var b =1
{
    var b=10
}
console.log(b) //10
let c=1
{
    let c=10
}
console.log(c) //1

//3.同作用域内不能重申明
var d=1
let d=2
console.log(d) // SyntaxError'd' has already been declared
let  d=1
var  d=2
console.log(d)  //SyntaxError 'd' has already been declared

//4.var不管作用域对于同个变量赋值则更改
var e=1
{
    let e=2
}
console.log(e) //1

let  f=1
{
    var f=2
}
console.log(f) //SyntaxError 'f' has already been declared

//5.常量不能重新赋值
const A = [1,2];
A.push = 3;
console.log(A); //[1,2,3]
A = 10; //Error 这里地址改变了

2.箭头函数、this

ES6箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。箭头函数背部没有自己的this，this总是指向上一层的this，层层递上，直到找到有自己的this函数为止。

ES5函数里的this总是指向函数执行时所在的对象，尤其在非严格模式下，this有时候会指向全局对象。

b.箭头函数不能用构造函数，因为它没有自己的this，无法实例化。

c.箭头函数没有自己的this，所以函数内也不存在arguments对象。这里就可以ES6的扩展运算符来代替。

d.函数的默认赋值

ES5，函数的形参是无法给默认值得，只能在函数内部通过变通方法实现。

ES6，函数可以默认赋值。

var foo = function(){return 1;};
//等价于
let foo = () => 1;

箭头函数中的 this 指的不是window，是对象本身。
function aa(){
  this.bb = 1;
  setTimeout(() => {
    this.bb++; //this指向aa
    console.log(this.bb);
  },500);
}

aa(); //2

3.字符串模板语法

不使用模板字符串
var name = 'Your name is' + first + '' + last + '.'
使用模板字符串
var name = Your name is ${first} ${last}.

4.class

提供了关键字 class 定义类

提供了关键字 extends 继承一个类

super()执行父类的初始化函数

提供了对象字面量, 定义一个函数

class Animal {
  constructor(){
    console.log('我是一个动物');
  }
}

class Person extends Animal {
  constructor(){
    super();
    console.log('我是一个程序员');
  }
}

let aa = new Person();
//我是一个动物
//我是一个程序员

5.解构

解构赋值是ES6中推出的一种高效、简洁的赋值方法

//通常情况下
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

//解构赋值
let [first, second, third] = someArray; //比上面简洁多了吧

//还有下面例子
let [,,third] = [1,2,3];
console.log(third); //3

let [first,...last] = [1,2,3];
console.log(last); //[2,3]

//对象解构
let {name,age} = {name: "lisi", age: "20"};
console.log(name); //lisi
console.log(age); //20

//注意
let {ept1} = {};
console.log(ept1); //undefined
let {ept2} = {undefined};
console.log(ept2); //undefined
let {ept3} = {null};
console.log(ept3); //null

6.新增方法

is()方法，比较两个目标对象，用来完善“===”方法。

NaN === NaN      //false
Object.is(NaN,NaN);     //true

assign()方法，用于对象新增属性或者多个对象合并。

const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
Object.assign(target,source1,source2);
console.log(target);          //{a:1,b:2,c:3}

ES6在原型上新增了Includes()方法，取代传统indexOf()查找字符串的方法。

includes():找得到返回true，找不到返回false。

indexOf():找得到返回0，找不到返回1。

此外，还新增了startsWith()，endsWith()，padStart()，padEnd()，repeat()等方法，可用于查找，补全字符串。

let str = `xiao ming`;
console.log(str.includes(`xiao`));     //true

7.Symbol类型

Symbol是ES6引入的第七种原始数据类型，所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。

Symbol值通过Symbol函数生成。

对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种是新增的symbol类型，凡是属性名属于symbol类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

Symbol 值可以显式转为字符串。另外，Symbol 值也可以转为布尔值，但是不能转为数值。

let s1 = Symbol('foo');
let s2 = Symbol('foo');
console.log(s1===s2) //false

let s1 = Symbol('foo');
let s2 = Symbol('bar');
console.log(s1,typeof(s1));
console.log(s2);

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

console.log(s1,typeof(s1.toString()))
console.log(s2)

8.Set

类似Array的新的数据结构

Set实例的成员都是唯一的，不重复的。这个特性可以轻松实现数组去重。

let array = [1,2,3,2,3]；
let set = new Set(array);
console.log(set);           //[1,2,3]

let o1 = {age:11}
let o2 = {age:12}
let set = new Set([o1,o2]);
console.log(set);           //结果里面有两个对象吧，因为对象的内存地址不一样
let o2 = o1;
let set = new Set([o1,o2]);
console.log(set);           //结果里面有一个对象,对象的内存地址一样

属性
    .size 返回set集合的大小
方法
    .add()<相当于数组的push()> .delete(value) .has(value) .clear()清除数组

9.Map

Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。

let map1 = new Map()
let obj = {name:'tiger'}
map1.set(obj,'hello')     //设置键值对
console.log(map1) // {{name:tiger}:hello}
map1.set(1,'hello1')
map1.set(2,'hello2')
console.log(map1) // {{name:tiger}:hello,1 => "hello1", 2 => "hello2"}
//遍历键值对
for(let item of map1){
    console.log(item);
}
//遍历键
for(let item of map1.keys()){
    console.log(item);
}
//遍历值
for(let item of map1.value()){
    console.log(item);
}

10.Promise对象

function ajaxPromise() {
    return new Promise(function(reslove,reject) {
        console.log("正在执行...");
        if(true) {
            reslove("success")
        }else{
            reject("fail")
        }
     })
 }

ajaxPromise().then(value => {
    console.log(value);
}).catch(err => {
    console.log(err);
})

11.Generator函数

执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value，来改变Generator函数的行为。

定义函数的时候需要加上星号 ,例：function test(){}

函数体里面包含yield(暂停执行的标志),代码运行到yield的时候便会暂停执行，然后通过.next()，让代码继续执行，直到下一个yield或者函数体结束符。

function* demo() {
  console.log(1)
  yield 111
  console.log(2)
  yield 222
  console.log(3)
  return 333
}
let g = demo()
let val1 = g.next()
console.log('val1',val1)
// 打印 1，val1 = {value: 111, done: false}

let val2 = g.next()
// 打印 2，val2 = {value: 222, done: false}
console.log('val2',val2)
let val3 = g.next()
console.log('val3',val3)

12.async 函数

async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async function t(){
    var a = new Promise(
        function (resolve, reject) {
            console.log(1);
            resolve(9);
            console.log(2);
        })
    var b = new Promise(
        function (resolve, reject) {
            console.log(3);
            resolve(8);
            console.log(4);
        })
    console.log(5);
    b=await b;
    a=await a;
    console.log(b);
    console.log(a);
    console.log(6);
}

t();
console.log(7);
// 123457896

13.模块

使用import取代require。

// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;

// good
import { func1, func2 } from 'moduleA';
// commonJS的写法
var React = require('react');

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

module.exports = Breadcrumbs;

// ES6的写法
import React from 'react';

class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};

export default Breadcrumbs;