ES6(ECMAScript 6.0)新特征

if (arr.indexOf(el) !== -1) {
    ...
}

// include 返回boolean值
[1, 2].includes(3);  // false
[1, 2, NaN].includes(NaN);  // true
["a", "b", "c"].includes('a', 'b'); // true
["a", "b", "c"].includes('a', 'd'); // true
["a", "b", "c"].includes('a', 3); // false

console.log(Array.from('hello')); // [ 'h', 'e', 'l', 'l', 'o' ]

const objLike = { 0: 0,  1: 1,  2: 2, length: 3 }; 
console.log(Array.from(objLike)); // [0, 1, 2]

const objLike = { 0: 0,  1: 1,  2: 2, length: 3 }; 
console.log(Array.from(objLike, (k) => k+=1;))); // [1, 2, 3]

// 构造函数 new Array
console.log(new Array()); // []
console.log(new Array(1)); // [undefined x 1]
console.log(new Array(1,2,3)); // [1,2,3]

// Array.of()
console.log(Array.of(); // []
console.log(Array.of(1)); // [1]
console.log(Array.of(1,2,3)); // [1,2,3]
console.log(Array.of(undefined)); // [undefined]

// keys
for(let a of [1, 2, 3, 4, 5].keys()) {
    console.log(a); // 0,1,2,3,4
}
// values
for(let b of [1, 2, 3, 4, 5].values()) {
    console.log(b); // 1,2,3,4,5
}
// entries
for(let a of ['a', 'b'].entries()) {
    console.log(a) // [0, 'a'] [1, 'b']
}

const arr = [1, 4, -5, 10, NaN];
console.log(arr.find((k) => k > 5));  // 10
console.log(arr.findIndex((k) => k > 1));  // 1
console.log(arr.find((k) => Object.is(NaN, k) )); // NaN

// fill
console.log([1,2,3].fill(4)); // [4, 4, 4] 不指定开始和结束，全部替换
console.log([1,2,3].fill(4,1)); // [1, 4, 4]
console.log([1,2,3].fill(4,1)); // [1, 4, 4]
console.log([1,2,3].fill(4,1,1)); // [1, 2, 3]

// copyWithin
console.log([1,2,3].copyWithin(1)); // [1, 1, 2]
console.log([1, 2, 3, 4, 5, 6, 7].copyWithin(2)); // [1, 2, 1, 2, 3, 4, 5] 未指定复制元素的起始位置，默认用原数组进行填充替换
console.log([1, 2, 3, 4, 5, 6].copyWithin(2, 1, 4)); // [1, 2, 2, 3, 4, 6] 可以理解为从下标为2元素开始，复制下标1-4的数组进行替换填充原数组

// 子组件需要对应的a、b、c三个参数
<Component a = {this.props.a} b = {this.props.b} c = {this.props.c} />;

// 子组件需要对应的a、b、c三个参数
<Component {...this.props} />;

// 数组的解构赋值

[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

// 对象的解构赋值

let obj = {a:1, b:2, c:3};
const {a , b} = obj;
console.log(a); // 1
console.log(b); // 2

// 如果没有实际值，得需要使用‘,’进行占位：

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor] = colors;
console.log(thirdColor);   // "blue"

// 如果你想要获取特定的数组项，并且把剩余的项归在一个数组，那么你可以这样运用 rest操作符 来解构

const color = ['red', 'blue', 'orange'];
const [red, ...rest] = color;
console.log(red); // 'red'
console.log(rest); // ['blue', 'orange']

// 剩余操作符在函数中的使用

function fn(a, b, ...args) {  
   console.log(args);
}
fn(1, 2, 3, 4, 5 ); // [3, 4, 5]

// let和const均不能重复声明
const a = 'Hi';
const a = 'Hello'; // Identifier 'a' has already been declared

// const 、let的块级作用域(block-scoping)
const city = 'Beijing';
{
  const city = 'Shanghai';  
  console.log(city); // Shanghai
}
console.log(city); // Shanghai

//  const 、let的块级作用域(block-scoping),let在for循环里
for(let i=0;i<3;i++) {
}
console.log(i); // undefined

//  const 、let的块级作用域(block-scoping),let在if条件
if(..) {
    let a = 'boo';
} else {
    ...
}
console.log(a); // undefined

// let和const 声明的变量不再属于window的属性
const PI = 3.14159;
console.log(window.c); // undefined

if (x) {
  let foo;
  let foo; // TypeError thrown.
}

var f = (x) => x;
// 等同于
var f = function (x) { return x };

var f = => return true;
// 等同于
var f = function () { return true };

// 箭头函数写法
[1,2,3].map(x => x + 1 );
// 等同于
[1,2,3].map(function (x) {
  return x + 1;
});

// 利用ES6反引号定义
`<div>
<span>keep the ${things} simple stupid .</span>
</div>`
// 等同于
'<div><span>keep the'+things+' simple stupid .</span>'+
+'</div>'

// 回调地狱
// a请求
$.ajax({
      url: 'a',
      dataType:'json',
      success: function(data) {
          // 获取data数据 传给下一个b请求
          var id = data.id;
          $.ajax({
              url:'b',
              data:{"id":id},
              success:function(){
                    // 下一个请求 c
              }
          });
      }
});

// Promise写法
var a = function() {
    var promise = new Promise(function(resolve, reject){
        $.ajax({
        url: 'a',
        dataType:'json',
        success: function(data){resolve(data)}
        error: function(e){reject(e)}
        });
    })
    return promise;
}
...b,c...
a.then(b.then())

var promise = new Promise(function(resolve, reject) {
 // 必须给定一个function作为参数，不然会报错；
 // 处理结束后、调用resolve 或 reject
});

// Promise chain
function taskA() {
 console.log("Task A");
}
function taskB() {
 console.log("Task B");
}
function onRejected(error) {
 console.log(error);
}
var promise = Promise.resolve();
promise
 .then(taskA)
 .then(taskB)
 .catch(onRejected)

function taskA(value) {
    return value +1;
}
function taskB(value) {
    throw new Error('something wrong!');
}
function taskC(value) {
    console.log(value);
}
function onRejected(error) {
 console.log('catch error: '+ error);
}
var promise = Promise.resolve(1);
promise
 .then(taskA)
 .then(taskB)
 .then(taskC)
 .catch(onRejected);
 // catch error: something wrong! value 是undefined

// Promise chain
function taskA(value) {
    return value +1;
}
function taskB(value) {
    return value +2;
}
function taskC(value) {
    console.log(value);
}
function onRejected(error) {
 console.log(error);
}
var promise = Promise.resolve(1);
promise
 .then(taskA)
 .then(taskB)
 .then(taskC)
 .catch(onRejected);
 // 4

// Set本身是一个构造函数
console.log(new Set([1,2,3]))

// Symbol函数
console.log(Symbol()); // Symbol()
// Symbol.for方法
var a = Symbol.for('symbA');
var b = Symbol.for('symbA');
console.log(Symbol.for('symbA')); // Symbol(symbA)
console.log(a == b); // true

var a = Symbol('a');
console.log(a); // Symbol(a)
console.log(typeof(a)) // 'symbol' 
var b = Symbol('b');
console.log(b); // Symbol(a)
console.log(a == b) // false 

var symbola = Symbol();
var b = {};
var b.symbola = 'this is not a symbola!';
console.log(b); //{ 'symbola' : 'this is not a symbola!'}
b = {symbola:'this is a symbola!'};  // { Symbol() : 'this is a symbola!'}

var a ={'a': 'a','a':'b'}
for(var i in a ){console.log(i)} // a, b
a[Symbol('c')] = 'c';
console.log(a); // { a: "a", b: "b", Symbol(c): "c" }
for(var i in a ){console.log(i)} // a, b

// math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};
// increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

// program.js
var inc = require('increment').increment;
var a = 1;
inc(a); // 2

define(["require"], function(require) {
  // 在这里，模块 a 已经下载并执行好
  // ...
  var a = require("./a");

})

// 文件 a.js 直接导出变量
export const PI = 3.14;
const value = 'module';
export function helloworld(){
    console.log('Hello world~');
}
// 先定义再导出也是正确的
export {PI, value};
// 你也可以使用as进行重命名
export {name1 as PI, name2 as value};

// 按需导入
import {PI, helloworld} from './a.js';
// 对变量进行重命名
import {PI as p} from './a.js';
// 整体导入
import * as a from './a.js';

// a.js 模块默认导出
export default function() {
    console.log('hello world');
}
// 或者这样写
function helloworld(){
    console.log('hello world');
}
export default helloworld;
// 这样写会导致错误
export default const helloworld = function() {
    console.log('hello world');
}
// 引入的时候,不可以使用 类似{helloworld}这样的写法
import helloworld from './a.js';
helloword(); // 'hello world'

// 使用function
function People(name) {
  this.name = name;
  this.toSayHello = function () {
      return console.log('Hello, my name is' + this.name );
  }
}

var p = new People('ES6');

// 使用class
class People {
  constructor(name) {
      this.name = name
  }
  toSayHello() {
      return console.log('Hello, my name is' + this.name );
  }
}

// 使用function
function People(name) {
  this.name = name;
}

People.prototype.toSayHello = function () {
  return console.log('Hello, my name is' + this.name )
};

var p = new People('ES6');

// 不会报错
console.log(helloWorld());

function helloWorld() {
  return "Hello World";
}

// 报错
var p = new People();

class People() {
}

var a = new Array();
a.constructor // function Array(){...}
a.constructor === Array // true

class People {

  //es7对于实例属性的提案，此属性可以在实例中访问到
  type = 'animal';

  //es7对于类的静态属性的提案，同样Babel支持
  static myType = 'static';

  constructor(name) {
      this.name = name
  }
  toSayHello() {
      return console.log('Hello, my name is' + this.name );
  }
}

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃' + food + '~~');
};

function Cat() {
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat();
console.log(cat.sleep()); // cat 正在睡觉
console.log(cat instanceof Animal); // true

// 使用class
class People {
  constructor(name) {
      this.name = name
  }
  toSayHello() {
      return console.log('Hello, my name is' + this.name );
  }
}
// 使用extends Woman 继承了People的所有属性和方法
class Woman extends People {
    constructor(name) {
        super(name);
        this.name = name;
    }
}

function* stepGenerator() {
  yield 'step1';
  yield 'step2';
  return 'it is a generator';
}
var g1 = stepGenerator();
g1; // stepGenerator.....
g1.next(); // Object {value: "step1", done: false}
g1.next(); // Object {value: "step2", done: false}
g1.next(); // Object {value: "it is a generator", done: true}
g1.next(); // Object {value: undefined, done: true}

function* stepGenerator() {
  return 'it is a generator';
  yield 'step1';
  yield 'step2';
}
var g1 = stepGenerator();
g1; // stepGenerator.....
g1.next();  // Object {value: "it is a generator", done: true}
g1.next(); // Object {value: undefined, done: true}

let obj = {
  a: 1,
  b: 2
}
let handler = {
 gets (obj, prop) {
 console.log(obj)
 console.log(prop)
  }
}
proxy = new Proxy(obj, handler)
console.log(proxy) // Proxy {a: 1, b: 2}
console.log(proxy.a) // {a: 1, b: 2} a