javascript.info 学习笔记

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

https://javascript.info/promise-basics

 

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

关于生产者和消费者的类比好形象啊

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);
});

刚创建时

10秒之后（注意这里resolve起到的作用是事件处理的入口，reject是容错处理的入口）

在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就是一个非常好的例子

---

总结

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.