前端学习指南-第一部分es6(javascript.info太强了这个网站)

https://hackernoon.com/es6-for-beginners-f98120b57414
https://hackernoon.com/es6-for-beginners-part-2-ee8a77f7f4c7

https://javascript.info/promise-basics

任何一门编程语言本质上都是社会资源的堆砌,语法只是一种约定,假如有一天js的解释器足够强大,那么使用js去做java目前所做的事情也是有可能的。

  1. Let and Const
  2. Arrow functions
  3. Default parameters
  4. for of loop
  5. Spread attributes
  6. Maps
  7. Sets
  8. Static methods
  9. Getters and Setters
    10.Promise
  10. async/await

es6

let 和var很像,let引入了作用域的概念

const 定义常量

箭头函数

function oldOne(){
console.log("hello")
}
var newOne = () =>{
console.log("hello")
}

函数的默认参数
默认参数就是在声明函数时候给的默认值

let Func = (a, b = 10) => {
 return a + b; 
}
Func(20); // 20 + 10 = 30

for of 语句
for in 返回的的数组的index
for of 才类似于python中的for in,我认为这个属于历史遗留问题

展开运算符…
… 操作符在处理函数参数和数组的转换的时候非常方便

let SumElements = (...arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements(10, 20, 40, 60, 90); // Note we are not passing array here. Instead we are passing the elements as arguments.

Map
Map是键值对的数据结构

Set
Sets are used to store the unique values of any type. Simple…!

静态方法
static method
静态方法是不需要实例化就可以调用的方法

class Example {
 static Callme() {
 console.log("Static method");
 }
}
Example.Callme();
Output:
Static method

getter and setter

class People {
constructor(name) {
 this.name = name;
 }
 get Name() {
 return this.name;
 }
 set Name(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);

promise

关于生产者和消费者的类比好形象啊
前端学习指南-第一部分es6(javascript.info太强了这个网站)

let promise = new Promise(function(resolve, reject) {
  // the function is executed automatically when the promise is constructed

  // 10秒后promise的state会改变
  // resolve 和reject本质上是函数名,你可以命名成任何你想要的名称,他们本质上被预定义在js引擎中
  setTimeout(() => resolve("done"), 10000);
});

刚创建时
前端学习指南-第一部分es6(javascript.info太强了这个网站)
10秒之后
前端学习指南-第一部分es6(javascript.info太强了这个网站)

在then中处理resolve的情况

let promise = new Promise(resolve => {
  setTimeout(() => resolve("done!"), 1000);
});

promise.then(alert); // shows "done!" after 1 second

在catch中处理reject的情况(.catch的本质就是.then(null, f)的一个别名)

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// .catch(f) is the same as promise.then(null, f)
//The call .catch(f) is a complete analog of .then(null, f), it’s just a shorthand.


promise.catch(alert); // shows "Error: Whoops!" after 1 second

Promises chaining

fetch例子
fetch就是一个非常好的例子


总结
前端学习指南-第一部分es6(javascript.info太强了这个网站)

async

async把修饰的函数变成Promise对象

await

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait till the promise resolves (*)

  alert(result); // "done!"
}

f();

await只能在async修饰的函数中使用
It’s just a more elegant syntax of getting the promise result than promise.then, easier to read and write.