ES6

2018-06-14 本文已影响0人 defphot

编译/转换

在线转换（引入browser.js，<script type="text/babel">...</script>）
提前编译

变量

var变量存在的缺点：

可以重复声明
无法限制修改 PI
没有块级作用域

let 不能重复声明变量-可以修改块级作用域
const 不能重复声明常量-不能修改块级作用域

eg:解决了我们想通过循环定义函数，函数内部访问全局变量的问题：

window.onload = function () {
  var aBtn = document.getElementsByTagName("input");
  // for (var i = 0; i<aBtn.length; i++){
  //   (function(i){
  //     aBtn[i].addEventListener('click', function () {
  //       alert(i)
  //     })
  //   })(i)
  // }
  for (let i = 0; i < aBtn.length; i++) {
    aBtn[i].addEventListener('click', function () {
      alert(i)
    })
  }
}

函数

胖剪头

如果只有一个参数，()可以省略
如果只有一个return，{}可以省略

{}内部使用到的this和外部使用到的this相同

window.onload = function () {
  console.log(this);
  let Method = {};
  // Method.add = function (a, b) {
  //   console.log(this); //Method
  //   return a + b;
  // }
  Method.add = (a, b) => {
    console.log(this); //Window
    return a + b;
  }
  Method.add();
}

函数的参数

参数扩展/展开
默认参数

收集剩余参数，必须为最后一个

function show(a, b, c, ...args) {
  // console.log(a);
  // console.log(b);
  // console.log(c);
  console.log(...args); //4 5 6
}
show(1,2,3,4,5,6);

展开数组

let arr = [1,2,3,4,5,6];
show(...arr); //show(1,2,3,4,5,6);

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
show(...arr1, ...arr2);

默认参数

function show(a=1, b=2, c=3) {}

解构赋值

左右两边结构必须一样
右边必须是一个可以解构的对象
声明和赋值不能分开，必须在一句话中完成

数组：

let [a,b,c] = [1,2,3];
alert(a+b+c); //6

对象（声明的key和对象中的key必须相同，否则赋值失败！）：

let {x,y,z} = {x:1,y:2,z:3};
alert(x+y+z); //6

解构可以使用不同的粒度：

let [obj, arr, num, str] = [{
    a: 5,
    b: 4,
    c: 'qet'
  },
  [1, 2, '3'], 12, 'wds'
]
console.log(obj, arr, num, str);

let [{
    a,
    b,
    c
  },
  [n1, n2, s1], num1, str1
] = [{
    a: 5,
    b: 4,
    c: 'qet'
  },
  [1, 2, '3'], 12, 'wds'
]
console.log(a, b, c, n1, n2, s1, num1, str1);

数组

新增方法

forEach 迭代
map 映射
reduce 汇总
filter 过滤

map：

let arr = [0, 1, 2, 3, 4, 5];
let _arr = arr.map(function (value, index, array) {
  console.log(value, index, array);
  return value>3;
})
console.log(_arr); //[false,false,false,false,true,true]

reduce：

let arr = [0, 1, 2, 3, 4, 5];
let result = arr.reduce(function (pre, cur, curIndex, arr) {
  console.log(pre, cur, curIndex, arr);
  if (curIndex === arr.length-1) {
    return (pre + cur) / arr.length;
  }
  return pre + cur;
})
console.log(result); //2.5

filter：

let arr = [0, 1, 2, 3, 4, 5];
let _arr = arr.filter(function (value, index, array) {
  console.log(value, index, array);
  return index % 2 === 0;
})
console.log(_arr); //[0, 2, 4]

forEach：

let arr = [0, 1, 2, 3, 4, 5];
let _arr = arr.forEach(function (value, index, array) {
  console.log(value, index, array);
  array[index] = value * 2;
})
console.log(arr); //[0, 2, 4, 6, 8, 10]
console.log(_arr); //undefined

字符串

多了两个新方法：

startsWith
endsWith

字符串模板：

使用反单引号
通过 ${变量} 取值，格式化到字符串中
可以折行

面向对象

新增class：

// function User(username, password) {
//   this.username = username;
//   this.password = password;
// }

// User.prototype.getUsername = function () {
//   alert(this.username);
// }

// User.prototype.getPassword = function () {
//   alert(this.password);
// }

class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }
  getUsername() {
    alert(this.username);
  }
  getPassword() {
    alert(this.password);
  }
}

let user = new User('admin', '123456');
user.getUsername();
user.getPassword();

继承：

class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }
  getUsername() {
    alert(this.username);
  }
  getPassword() {
    alert(this.password);
  }
}

class VIPUser extends User {
  constructor(username, password, level) {
    super(username, password);
    this.level = level;
  }
  getLevel() {
    alert(this.level);
  }
}
let user = new VIPUser('admin', '123456', 100);
user.getUsername();
user.getPassword();
user.getLevel();

JSON

两个常用方法

JSON.stringify()
JSON.parse() //只能用双引号，且key值必须用双引号包裹

简写：

let a = 1,
    b = 2;
let json = {
  // 键值相同可以简写
  // a: a,
  // b: b,
  a,
  b,
  // showA: function () {
  //   alert(this.a);
  // },
  // showB: function () {
  //   alert(this.b);
  // }
  showA() {
    alert(this.a);
  },
  showB() {
    alert(this.b);
  }
}
json.showA();
json.showB();

Promise

使用同步的方式组织异步的代码

let p = new Promise(function (resolve, reject) {
  $.ajax({
    url: 'arr.txt',
    dataType: 'json',
    success(resp) {
      resolve(resp)
    },
    error(err) {
      reject(err);
    }
  })
});

p.then(function (resp) {
  console.log(resp);
}, function (err) {
  console.log(err);
})

Promise.all：

Promise.all(
  [
    $.ajax({
      url: 'arr.txt',
      dataType: 'json',
    }),
    $.ajax({
      url: 'json.txt',
      dataType: 'json',
    })
  ]
).then(function (resp) {
  let [res1, res2] = resp;
  console.log(res1, res2);
  console.log("All success");
}, function (err) {
  console.log("At least one failed");
})

Promise.race 竞速：

Promise.race(
  [
    $.ajax({
      url: 'arr.txt',
      dataType: 'json',
    }),
    $.ajax({
      url: 'json.txt',
      dataType: 'json',
    })
  ]
).then(function (resp) {
  console.log(resp);
}, function (err) {
  console.log(err);
})

得到最先成功的promise执行then，失败的会被忽略。

generator

普通函数一路到底
生成器函数中间能停

关键字 yield

function* show(i) {
  console.log(i);
  let [t, p] = yield i;
  console.log(t, p);
  return 4;
}

let a = show(1);
console.log(a);
//第一个next无法传递参数，可以在创建生成器对象时传参
console.log(a.next()); //{value: 1, done: false}
console.log(a.next([2, 3])); //{value: 4, done: true}

每次执行到yield会放弃控制权，让外部函数执行，直到调用.next()方法。

promise 一次执行多个
generator 带逻辑的执行

ES7 预览

includes 数组是否包含某个值

let arr = [1,2,3];
alert(arr.includes(3)); //true

for ... in ... 对象数组-索引对象-键值
for ... of ... 迭代器数组-值对象-X

for/of

let arr = [1,2,3];
for(let i of arr){
  console.log(i);
}

keys/values/entries

keys：拿出所有的key值 []
values：拿出所有的value值 []
entries：拿出所有的key-value值 [{}, {}, {}]

求幂

console.log(2**3);

padStart/padEnd

let t = 'abc'.padStart(6);
console.log(`(${t})`); //(   abc)

let t = 'abc'.padEnd(6);
console.log(`(${t})`); //(abc   )

async

let readData=async ()=>{
  let data1=await $.ajax({url: 'data/1.txt', dataType: 'json'});
  let data2=await $.ajax({url: 'data/2.txt', dataType: 'json'});
  let data3=await $.ajax({url: 'data/3.txt', dataType: 'json'});

  console.log(data1, data2, data3);
}
readData();

ES6