ES6重要语法

IDEA设置使用ES6语法：设置 》语言和框架 》JavaScript
亦或者直接设置为使用React JSX
1、变量的声明let和const：
//ES6中不再只用var对变量进行声明
let表示变量、const表示常量（const赋值过后，再次赋值会报错）；
let和const都是块级作用域，也就是只在临近的{}中有效

2、模板字符串：
字符串拼接可以使用以下方法：
let name = "jack";
console.log("my name is "${name});
其他常用方法：
// 1.includes：判断是否包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'

3、函数：
1）函数默认值：
function total(num = 200){
console.log(num)//当num有值时，为传入参数值；当num无值时，默认为200
};

2）箭头函数：参数＋ => ＋函数体
箭头函数最直观的三个特点：
a.不需要function关键字来创建函数
b.省略return关键字
c.继承当前上下文的 this 关键字
//例如：
[1,2,3].map( x => x + 1 )


//等同于：
[1,2,3].map((function(x){
return x + 1
})
PS:函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}

//以下参数name就没有括号
var people = name => 'hello' + name

//以下如果缺少()或者{}就会报错
var people = (name, age) => {
const fullName = 'h' + name
return fullName
} 

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

4、对象功能：
//解决可能出现的键值对重复现象
function people(name, age) {
        return {
            name,   //等同于ES5中的name : name 
            age
        };
    }

//为对象字面量赋值省略function
const people = {
        name: 'lux',
        getName () {
            console.log(this.name) //等同于 getName : function(){console.log(this.name)}
        }
    }

//ES6 对象提供了Object.assign()这个方法来实现浅复制;
//Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象;
//第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{};
const obj = Object.assign({}, objA, objB)

5、解构：解决一个个获取对象信息的繁琐问题
例子：
//对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'

6、Spread Operator 展开运算符（也就是三个点 ... ）
1）组装数组或对象：
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]


//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

2）获取数组或对象中的某几项：
//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}

3）组合新对象：
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 }

7、import 和 export：
//a.js
var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}  
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

// b.js
通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy


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


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

9、Iterators（迭代器）：ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，直到状态为true退出
var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
itr.next(); //{ value: 11, done: false }
itr.next(); //{ value: 12, done: false }
itr.next(); //{ value: 13, done: false }
itr.next(); //{ value: undefined, done: true }

10、生成器Generators：
// 生成器
    function *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }


    // 生成器能像正规函数那样被调用，但会返回一个迭代器
    let iterator = createIterator();
    console.log(iterator.next().value); // 1
    console.log(iterator.next().value); // 2
    console.log(iterator.next().value); // 3

PS:利用生成器的特性，使用递归方式反复调用：
function run(taskDef) { //taskDef即一个生成器函数
// 创建迭代器，让它在别处可用
let task = taskDef();
// 启动任务
let result = task.next();
// 递归使用函数来保持对 next() 的调用
function step() {
// 如果还有更多要做的
if (!result.done) {
result = task.next();
step();
}
}
// 开始处理过程
step();
}