ES6记录

ES6 知识记录

1. let 和 const

---

let是用来声明变量,块级作用域内有效不会变量提升（先声明再使用）
const则是声明常量不可以修改,声明的时候必须赋值
（如果是数据类型是不允许修改的，引用类型可以改）

a = 6;
let a;
'报错': let不会声明提前
1.
var b = 0;
let b = 1;

2.
let aa = 0;
let aa = 1;

'错误': let不允许重复声明

const PI = Math.PI;
PI = 3.14;
'错误': 上面是数据类型不能修改

const ob = {}
ob.name = 'zhangsan'
//正确：这是引用类型，可以对其属性修改，简言之就是const记录是一个内存地址


var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

'es6之前需要闭包来实现，现在使用let就可以了'

2. Set 和 Map

---

Set集合会自动过滤掉重复的元素,Map键值对集合

Array.from(new Set([1,2,1,22,33,'1','2','1','2','w','w','3']));
    
//实现数组去重    

3. 箭头函数 =>

---

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

function(x, y) { 
    x++;
    y--;
    return x + y;
}//es5
(x, y) => {x++; y--; return x+y}//es6 如果方程比较复杂，则需要用{}把代码包起来

4. ``字符模板

---

let user = {name: 'zhangsan', age: 18};
$("#info").append(`my name is <b>${ user.name}</b>age is <em>${user.age}</em>i'm chinese!`);
//不需要用加号去连接
${param} 是可以进行一些计算的
let num = 9
let add = `${num+1}`
'字符模板的底层实现：通过replace替换掉被正则匹配到的参数用eval转换'

let address = '广州天河区'
let name = '张三'
let str = '${name}在${address}上班...'

function myTemplate(str) {
    return str.replace(/\$\{([^}]+)\}/g,function(matched,childItem){
      console.log(eval(childItem))
        return eval(childItem);
    })
}

console.log(myTemplate(str)) //张三在广州天河区上班

5. … 不定参

---

function test(...types){
    console.log(types)
}
animals('a', 'b', 'c') //["a", "b", "c"]

6. 解构

---

let user = {name: 'zhangsan', age: 18};
var {name, age} = user;
console.log(name, age);//zhangsan 18

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

7. for of

---

let user = {name: 'zhangsan', age: 18};
for(let k of user){
    console.log(k);
}

// name age 

8. 浅复制

---

const objA = { name: 'zhangsan', age: 18 } 
const objB = { address: 'guangzhou' } 
const objC = {} // 这个为目标对象 
const obj = Object.assign(objC, objA, objB) 

// objA objB objC obj 分别输出看看 
console.log(objA) // { name: 'zhangsan', age: 18 } 
console.log(objB) // { address: 'guangzhou' } 
console.log(objC) // { name: 'zhangsan', age: 18, address: 'guangzhou' } console.log(obj) // { name: 'zhangsan', age: 18, address: 'guangzhou' }
'如果目标对象存在相同的属性将被重新赋值,其他原属性不变'
const objC = {age: 55, name: 'lisi',sex: '男'}
console.log(objC) // { name: 'zhangsan', age: 18, address: 'guangzhou', sex: '男' }

9.Spread Operator 展开运算符

---

'...的使用'
const first = { a: 1, b: 2, c: 6, } 
const second = { c: 3, d: 4 } 
const total = { ...first, ...second } 
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

10.import 和 export

---

import导入模块、export导出模块

1.当用export default people导出时,就用 import people 导入（不带大括号）
2.一个文件里,只能有一个export default,可以有多个export
3.当用export name 时,就用import { name }导入（记得带上大括号）
4.当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age }
5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入,也可以用import * as example

11. Promise

---

用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

'resolve reject'使用

function Task (...time) {
  var init = new Promise(function(resolve, reject){
    console.log('执行任务初始化')
    if(typeof time[0] === 'number'){
      resolve('执行任务')
    }else{
      var msg = time[1] === 'bad' ? '配置参数错误' : '数据库空间不足';
      reject('初始化失败'+msg)
    }
  })
  return init
}
function Task1 () {
  var init = new Promise(function(resolve, reject){
    resolve([1,2,3])
  })
  return init
}
function Task2 () {
  var init = new Promise(function(resolve, reject){
    resolve(function(){
      return 'do sth'
    })
  })
  return init
}
//任务初始化参数1 number 2 string 'bad'
Task(9).then(function (data) {
  console.log(data)//执行resolve函数
  return Task1()//进行下一个函数
}).then(function (data) {
  console.log(data.join('..'))
  return Task2()
}).then(function( data) {
  console.log(data())
}).catch(function (error){
  console.log(error)
})


'all使用'
Promise
.all([Task(), Task1(), Task2()])
.then(function(results){
    console.log(results);
});
//同事执行三个函数把结果保存在一个数组resluts里面,按顺序返回（如果task1存在延时返回顺序仍旧是执行顺序）

'race使用'
Promise
.all([Task(), Task1(), Task2()])
.then(function(results){
    console.log(results);
});
//先执行完的被返回

12.Generators

---

生成器（ generator）是能返回一个迭代器的函数.生成器函数也是一种函数,最直观的表现就是比普通的function多了个星号，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停.

// 生成器
function *createTask() {
    yield {status: 'start'};
    yield {status: 'do'};
    yield {status: 'end'};
}
// 生成器能像正规函数那样被调用，但会返回一个迭代器
function doSth(){
    let task = createTask();
    let result = task.next();
    function ctu () {
      console.log(result.value)
      if(!result.done){
        result = task.next()
        ctu()
      }
    }
    ctu()
}
doSth()