1. 作用域变量

作用域就是变量的作用范围。也就是你声明一个变量以后，这个变量可以在什么场合下使用。以前的JavaScript只有全局作用域，和函数作用域。

1.1 var的问题

1.var 没有块级作用域，定义后在当前包中都都可以访问，如果变量名重复，就会覆盖前面定义的变量，并且很可以被他人修改。

if(true){
	var a = "a"; //期望a是某一个值
}
console.log(a);

2.var 在for循环标记变量共享，一般在循环中会使用的i会被共享，其本质也是由于没有块级作用域造成的

for (var i = 0; i < 3; i++) {
     setTimeout(function () {
         alert(i);
     }, 0);
 }
 
 // 结果就是 弹窗三次 3
 
 for ( i = 0; i < 3; i++) {
     setTimeout(function () {
         alert(i);
     }, 0);
 }
 
 // 结果就是 弹窗三次 0-2

1.2 块级作用域

在用var定义变量的时候，变量通过闭包进行隔离的，现在用了let，不仅仅可以通过闭包隔离，还可以增加了一些块级作用域隔离。块级作用用一组大括号定义一个快，使用let定义的变量字啊大括号的外面是访问不到的。

1.2.1 实现会计作用域

if(ture){
	let name = 'wjh'
}

consloe.log('name'); // ReferenceError: name is not defined

1.2.2 不会污染全局对象

if(ture){
	let name = 'wjh'
}
console.log(window.name); // undefined

1.2.3 for 循环中也可以使用i

// 嵌套循环不会相互影响
for (let i = 0; i < 3; i++) {
   console.log("out", i);
   for (let i = 0; i < 2; i++) {
   console.log("in", i);
  }
}

// 结果 out 0 in 0 in 1 out 1 in 0 in 1 out 2 in 0 in 1

1.2.4 重复定义会报错

if(ture){
	let a = 1;
  let a = 2; //Identifier 'a'
}

1.2.5 不存在变量的预解释

for(let i = 0;i<2;i++){
	console.log('inner',i);
  let i =100;
}

// 结果 i is not defined

1.2.6 闭包的新写法

;(function(){

})();

现在

{

}

2. 常量

使用 const 我们可以声明一个常量，一旦声明之后，就不可以更改。

2.1 常量不能重新赋值

const MY_NAME = 'wjw';
MY_NAME = 'wjw2';//Assignment to constant variable

2.2 变量可以改变

注意const限制的是不能给变量重新赋值，而变量的值本身是可以改变的,下面的操作是可以的

const names = ['wjw1'];
names.push('wjw2');
console.log(names);

2.3 不同的块级作用域可以多次定义

const A = "0";
{
    const A = "A";
    console.log(A)
}
{
    const A = "B";
    console.log(A)
}
console.log(A)

// 结果 A B 0

3. 解构

3.1 解构数组

解构意思就是分解一个东西的结构,可以用一种类似数组的方式定义N个变量，可以将一个数组中的值按照规则赋值过去。

var [name,age]=['wjh',8];
console.log(name,age);

3.2 嵌套赋值

let [x,[y],z]=[1,[2.1]];
console.log(x,y,z);

let [x,[y,z]] = [1,[2.1,2.2]];
console.log(x,y,z);

let [json,arr,num] = [{name:'wjw'},[1,2],3];
console.log(json,arr,num);

// 1 2.1 undefined 1 2.1 2.2 { name: 'wjw' } [ 1, 2 ] 3

3.3 省略赋值

let [,,x]=[1,2,3]
console.log(x);

3.4 解构对象

对象也可以被解构

var obj = {name:'wjw',age:8};
//对象里的name属性的值会交给name这个变量，age的值会交给age这个变量
var {name,age} = obj
//对象里的name属性的值会交给myname这个变量，age的值会交给myage这个变量
let {name: myname, age: myage} = obj;
console.log(name,age,myname,myage);

3.5 默认值

在赋值和传参的时候可以使用默认值

let [a='a',b='b',c=new Error('C必须指定')] = [1, , 3];
console.log(a,b,c);

function ajax(options){
	var method = options.method || "get";
  var data = options.data || {};
}

function ajax(method='get',data){
	console.log(arguments);
}

ajax({
	method:'post',
  data:{'name':'wjh'}
})

4. 字符串

4.1 模板字符串

模板字符串用反应号(数字1左边的那个建)包含，用${}括起来

var name = 'wjw',age = 8;
let desc = `${name} is ${age} old!`;
console.log(desc);

//所有模板字符串的空格和换行，都是被保留的
var str = `<ul>
<li>a</li>
<li>b</li>
</ul>`;
console.log(str);

其中的变量会用变量的值替换掉

function replace(desc){
	return desc.replace(/\$\{([^}]+)\}/g,function(matched,key){
    return eval(key);
  });
}

4.2 带标签的模板字符串

可以在模板字符串的前面添加一个标签，这个标签可以去处理模板字符串标签其实就是一个函数,函数可以接收两个参数,一个是 strings 就是模板字符串里的每个部分的字符还有一个参数可以使用rest的形式values,这个参数里面是模板字符串里的值。

var name = 'wjh',age = 8;
function desc(strings,...values){
    console.log(strings,values);
}
desc`${name} is ${age} old!`;

字符串新方法

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = 'wjh';
s.startsWith('w') // true
s.endsWith('h') // true
s.includes('j') // true

第二个参数，表示开始搜索的位置

var s = 'wjh';
console.log(s.startsWith('j',2)); // true
console.log(s.endsWith('j',2)); // true
console.log(s.includes('j',2)); // false

endsWith的行为与其他其他方法有所不同。它针对前n个字符，而其他方法是从第几位开始到字符串结束

4.4 repeat

repeat 方法返回一个新字符串，表示将原字符串重复n次。

 'x'.repeat(3);
 'x'.repeat(0);

5. 函数

5.1 默认参数

可以给定义的函数接收的参数设置默认的值在执行这个函数的时候，如果不指定函数的参数的值，就会使用参数的这些默认的值。

function ajax(url,method='GET',dataType="json"){
  console.log(url);
  console.log(method);
  console.log(dataType);
}

5.2 展开操作符

把...放在数组前面可以把一个数组进行展开，可以把一个函数而不需要使用apply

//传入参数
let print = function(a,b,c){
    console.log(a,b,c);
}
print([1,2,3]);
print(...[1,2,3]);

// 可以替代apply
var m1 = Math.max.apply(null, [8, 9, 4, 1]);
var m2 = Math.max(...[8, 9, 4, 1]);

// 可以替代concat
var arr1 = [1, 3];
var arr2 = [3, 5];
var arr3 = arr1.concat(arr2);
var arr4 = [...arr1, ...arr2];
console.log(arr3,arr4);

//类数组的转数组
function max(a,b,c) {
    console.log(Math.max(...arguments));
}
max(1, 3, 4);

5.3 剩余操作符

剩余操作符可以把其余参数的值放在一个叫做b的数组里

let rest = function(a,...rest){
    console.log(a,rest);
}
rest(1,2,3);

5.4 解构参数

let destruct = function({name,age}){
	console.log(name,age);
}
destruct({name:'wjh',age:10})

5.6 箭头函数

箭头函数简化了函数的定义方式

[1,2,3].forEach(val=>console.log(val));

输入参数如果多于一个要用()包含，函数体如果有多条语句需要用{}包起来

箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，从而避免了this指向的问题。

var person = {
    name:'wjh',
    getName:function(){
-        setTimeout(function(){console.log(this);},1000); //在浏览器执行的话this指向window
+        setTimeout(() => console.log(this),1000);//在浏览器执行的话this指向person
    }
}
person.getName();

6. 数组的新方法

// 相同的阵列
var people = [
  {
    name : 'Casper' ,
    like : '锅烧意面' ,
    age : 18
  },
  {
    name : 'Wang' ,
    like : '炒面' ,
    age : 24
  },
  {
    name : 'Bobo' ,
    like : '萝卜泥' ,
    age : 1
  },
  {
    name : '卤蛋' ,
    like : '萝卜泥' ,
    age : 3
  }
];

6.1 Array.prototype.filter()

filter() 会回传一个阵列，其条件是return 后方为true 的物件，很适合用在搜寻符合条件的资料。

var filterEmpty = people.filter( function ( item, index, array ) {
});
console.log(filterEmpty);     //没有条件，会是一个空阵列

var filterAgeThan5 = people.filter( function ( item, index, array ) {
  return item.age > 5 ;        //取得大于五岁的   如果这边符合条件 只要为ture即可
});
console .log(filterAgeThan5);    // Casper, Wang这两个物件

6.2 Array.prototype.find()

find()与filter()很像，但find() 只会回传一次值，且是第一次为true的值。

var findEmpty = people.find( function ( item, index, array ) {
});
console .log(findEmpty);           //没有条件，会是undefined

var findAgeThan5 = people.find( function ( item, index, array ) {
  return item.age > 5 ;            //取得大于五岁的
});

console .log(findAgeThan5);        //虽然答案有两个，但只会回传Casper这一个物件
var findLike = people.find( function ( item, index, array ) {
  return item.like === '萝卜泥' ;   //取得阵列like === '萝卜泥'
});
console .log(findLike);            //虽然答案有两个，但只会回传第一个Bobo物件

6.3 Array.prototype.forEach()

forEach 是这几个阵列函式最单纯的一个，不会额外回传值，只单纯执行每个阵列内的物件或值。

var forEachIt = people.forEach( function ( item, index, array ) {
  console .log(item, index, array); //物件,索引,全部阵列
  return item;                      // forEach没在return的，所以这边写了也没用
});

console .log(forEachIt);             // undefined

people.forEach( function ( item, index, array ) {
  item.age = item.age + 1 ;          // forEach就如同for，不过写法更容易
});
console .log(people);                //全部age + 1

6.4 Array.prototype.map()

使用map() 时他需要回传一个值，他会透过函式内所回传的值组合成一个阵列。如果不回传则是 undefined 回传数量等于原始阵列的长度这很适合将原始的变数运算后重新组合一个新的阵列。

var mapEmpty = people.map( function ( item, index, array ) {
});
console .log(mapEmpty);     // [undefined, undefined, undefined, undefined]

var mapAgeThan5 = people.map( function ( item, index, array ) {
  return item.age > 5 ;     //比较大于五岁的
});
console .log(mapAgeThan5); // [true, true, false, false]

var mapAgeThan5_2 = people.map( function ( item, index, array ) {
  // 错误示范
  if (item.age > 5 ) {
    return item;               //回传大于五岁的
  }
  return  false ;                //别以为空的或是false就不会回传
});
console .log(mapAgeThan5_2);    // [{name: 'Casper'...}, {name: 'Wang'...}, false, false]
var mapEat = people.map( function ( item, index, array ) {
  if (item.like !== '萝卜泥' ) {
    return  ` ${item.like}好吃` ;
  } else {
    return  ` ${item.like}不好吃` ;
  }
});
console .log(mapEat);           // ["锅烧意面好吃", "炒面好吃", "萝卜泥不好吃", "萝卜泥不好吃"]

6.5 Array.prototype.every()

every()可以检查所有的阵列是否符合条件，这仅会回传一个值trueor false，可以用来检查阵列中的内容是否符合特定条件。

var ans = array.every( function ( item, index, array ) {
  console .log(item, index, array); //物件,索引,全部阵列
  return item.age > 10  //当全部age大于10才能回传true
});
console .log(ans); // false:只要有部分不符合，则为false

var ans2 = array.every( function ( item, index, array ) {
  return item.age < 25
});
console .log(ans2); // true:全部age都小于25

6.6 Array.prototype.some()

some() 与every() 非常接近，都是回传true or false，差异仅在every() 需完全符合，some() 仅需要部分符合。

var ans = people.some( function ( item, index, array ) {
  return item.age > 10  //当全部age大于10才能回传true
});
console .log(ans);   // true:只要有部分符合，则为true

var ans2 = people.some( function ( item, index, array ) {
  return item.age < 25
});
console .log(ans2); // true:只要有部分符合，则为true  

var ans2 = people.some( function ( item, index, array ) {
  return item.age > 25
});
console .log(ans2); // false:全部都不符合则为false

6.7 Array.prototype.reduce()

reduce() 和其他几个差异就很大了，他可以与前一个回传的值再次作运算，参数包含以下： accumulator: 前一个参数，如果是第一个阵列的话，值是以另外传入或初始化的值 currentValue: 当前变数 currentIndex: 当前索引 array: 全部阵列

var reduceEmpty = people.reduce( function ( accumulator, currentValue, currentIndex, array ) {
});
console .log(reduceEmpty);                  //没有条件，会是undefined

var reducePlus = people.reduce( function ( accumulator, currentValue, currentIndex, array ) {
  // 分别为前一个回传值, 目前值, 当前索引值
  console .log(accumulator, currentValue, currentIndex);
  return accumulator + currentValue.age;   //与前一个值相加
}, 0 );                                     //传入初始化值为0
console .log(reducePlus);                   //总和为46

var reducePlus = people.reduce( function ( accumulator, currentValue, currentIndex, array ) {
  console .log( 'reduce' , accumulator, currentValue, currentIndex)
  return  Math .max( accumulator, currentValue.age ); //与前一个值比较哪个大
}, 0 );
console .log(reducePlus);                   //最大值为24

7. 对象

7.1 对象字面量

如果你想在对象里添加跟变量名一样的属性，并且属性的值就是变量表示的值就可以直接在对象里加上这些属性

let name = 'wjh';
let age = 8;
let getName = function(){
		console.log(this.name)
}
let person ={
		name,
    age,
    getName
}
person.getName();

7.2 Object.is

对比两个值是否相等

console.log(Object.is(NaN,NaN));

7.3 Object.assign

把多个对象的属性复制到一个对象中，第一个参数是复制的对象，从第二个参数开始往后，都是复制的源对象

var nameObj = {name:'wjh'}
var ageObj = {age:8};
var obj = {};
Object.assign(obj,nameObj,ageObj);
console.log(obj);

//克隆对象
function clone(obj){
	return Object.assgin({},obj);
}

7.4 Object.setPrototypeOf

将一个指定的对象原型设置为另一个对象或者null

var obj1 = {name:'wjh1'};
var obj2 = {name:'wjh2'};
var obj = {};
Object.setPrototypeOf(obj,obj1);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));
Object.setProtoypeOF(obj,obj2);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));

7.5 proto

直接对象表达式中设置prototype

var obj1 = {name:'wjh'};
var obj3 = {
	_proto_:obj1
} 
console.log(obj3.name);
console.log(Object.getPrototypeOf(obj3));

7.6 super

通过super可以调用protype上的属性或方法

let person ={
	eat(){
  	return 'milk';
  }
}
let student = {
	_proto_:person,
  eat(){
  	return super.eat()+'bead'
  }
}
console.log(student.eat());

8. 类

8.1 class

使用 class 这个关键词定义一个类，基于这个创建实例以后就会创建 constructor 方法，此方法可以用来初始化

class Person{
	constructor(name){
  	this.name = name;
  }
  
  getName(){
		console.log(this.name)  
  }

}

let person = new Person('wjh');
person.getName();

8.2 get与set

getter 可以用来获取属性,setter 可以去设置属性

class Person {
	constructor(){
  	this.hobbies = [];
  }
  set hobby(hobby){
  	this.hobbies.push(hobby);
  }
  get hobby(){
  	return this.hobbies;
  }
}
let person = new Person();
person.hobby = 'aa';
person.hobby = 'bb';
console.log(person.hobby)

8.3 静态方法-static

在类里面添加静态的方法可以使用static 这个关键词，静态方法就是不需要实例化类就能使用的方法

class Person{
	static add(a,b){
  	return a+b;
  }
}
console.log(Person.add(1,x));

8.4 继承extends

一个类可以继承其他的类里的东西

class Person{
	constructor(name){
  	this.name = name;
  }
}

class Teacher extends Person{
	constructor(name,age){
  	super(name);
    this.age = age;
  }
}

var teacher = Teacher('wjh',8);
console.log(teacher.name,teacher.age)

9. 生成器(Generator)与迭代器(Iterator)

Generator 是一个特殊的函数，执行它会返回一个Iterator对象。通过遍历迭代器，Generator函数运行后悔返回遍历器对象，而不是函数的返回值。

9.1 Iterators模拟

迭代器有一个next方法，每次执行的时候会返回一个对象对象里面有两个函数，一个是value表示返回的值，还有就是布尔值done，表示是迭代完成

function buy(books){
  let i = 0;
  return{
    next(){
      let done = i ===books.length;
      let value = !done ? books[i++]:undefined;
      return {
      	value:value,
        done:done
      }
    }
  }
}

let iterators = buy(['js','html']);
var curr;
do{
	curr = iterators.next();
  console.log(curr);
}while(!curr.done);

9.3 Generators

生成器用于创建迭代器

function* buy(boos){
	for(var i=0;i<boos.length;i++){
  		yield books[i];
  }
}
let buying = buy(['js','html]);
var curr;
do {
	curr = buying.next();
  console.log(curr);
}while(!curr.done);

10. 集合

10.1 Set

一个Set是一堆东西的集合，Set 有点像数组，不过跟数组不一样的是，Set里面不能有重复的内容

var books = new Set();
books.add('js');
books.add('js');//添加重复元素的集合元素个数不会变化
books.add('html');
books.forEach(function(book){ // 循环集合
	console.log(book);
})
console.log(book.size);//集合中元数的个数
console.log(books.has('js'));//判断集合是否有此元素
books.delete('js');
console.log(books.size);
console.log(books.has('js'));
books.clear();//清空set
console.log(books.size);

10.2 Map

可以使用Map来组织这个名值对的数据

var books = new Map();
books.set('js',{name:'js'});//向map中添加元素
books.set('html',{name:'html'});
console.log(books.size);//查看集合中的元素
console.log(books.get('js'));//通过key获取值
books.delete('js');//执行key删除元素
console.log(books.has('js'));//判断map中有没有key
book.forEach((value,key)=>{
	console.log(key+'='+value);
})
books.clear();//清空map

11. 模块

可以根据应用的需求吧代码分成不同的模块，每个模块里可以导出它需要让其他模块使用的东西，在其他模块里面可以导入这些模块，导出的东西。

11.1 模块

在浏览器中使用模块需要借助导出

export var name = 'wjh';
export var age = 8;

导入

//import {name,age} from './school.js';
import * as school from './school.js';
console.log(school.name,school.age);

在页面中引用

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="index.js"></script>

11.2 重命名

导出时重命名

function say(){
	console.log('say');
}
export {say as say2};

导入时重命名

import {say2 as say3} from './school.js'

11.3 默认导出

每个模块都可以有一个默认要导出的东西

export default function say(){
	console.log('say')
}

导入

import say from './school.js'

11.4 深度克隆

var parent = {
  age: 5,
  hobby: [1, 2, 3],
  home: {city: '北京'},
};

var child = extendDeep(parent);
child.age = 6;
child.hobby.push('4');
child.home.city = '广东';
console.log('child ', child); //[1, 2, 3, 4]
console.log('parent ', parent);
function extend(parent) {
  let child;
  if (Object.prototype.toString.call(parent) == '[object Object]') {
    child = {};
    for (let key in parent) {
      child[key] = extend(parent[key])
    }
  } else if (Object.prototype.toString.call(parent) == '[object Array]') {
    child = parent.map(item => extend(item));
  } else {
    return parent;
  }
  return child;
}

function extendDeep(parent, child) {
  child = child || {};
  for (var key in parent) {
    if (typeof parent[key] === "object") {
      child[key] = (Object.prototype.toString.call(parent[key]) === "[object Array]") ? [] : {};
      extendDeep(parent[key], child[key]);
    } else {
      child[key] = parent[key];
    }
  }
  return child;
}

12.JavaScript(ES6) 中条件语句

12.1 使用 Array.includes 来处理多个条件

function test(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry') {
    console.log('red');
  }
}

优化变成 ->>

function test(fruit) {
  // 条件提取到数组中
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 
  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}

12.2 减少嵌套，提前使用 return 语句

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 
  // 条件 1：fruit 必须有值
  if (fruit) {
    // 条件 2：必须为红色
    if (redFruits.includes(fruit)) {
      console.log('red');
 
      // 条件 3：数量必须大于 10
      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No fruit!');
  }
}
 
// 测试结果
test(null); // 抛出错误：No fruits
test('apple'); // 打印：red
test('apple', 20); // 打印：red，big quantity

优化

/* 在发现无效条件时提前 return */
 
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 
  // 条件 1：提前抛出错误
  if (!fruit) throw new Error('No fruit!');
 
  // 条件2：必须为红色
  if (redFruits.includes(fruit)) {
    console.log('red');
 
    // 条件 3：数量必须大于 10
    if (quantity > 10) {
      console.log('big quantity');
    }
  }
}

为了减少一个嵌套层级，优化编码风格

/* 在发现无效条件时提前 return */
 
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 
  if (!fruit) throw new Error('No fruit!'); // 条件 1：提前抛出错误
  if (!redFruits.includes(fruit)) return;  // 条件 2：当 fruit 不是红色的时候，提前 return
 
  console.log('red');
 
  // 条件 3：必须是大量存在
  if (quantity > 10) {
    console.log('big quantity');
  }
}

12.3.使用函数的默认参数和解构

function test(fruit, quantity) {
  if (!fruit) return;
  const q = quantity || 1; // 如果没有提供 quantity 参数，则默认为 1
 
  console.log(`We have ${q} ${fruit}!`);
}
 
// 测试结果
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

但是q在这边不直观所有优化

function test(fruit, quantity = 1) { // i如果没有提供 quantity 参数，则默认为 1
  if (!fruit) return;
  console.log(`We have ${quantity} ${fruit}!`);
}
 
// 测试结果
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

但是这边也可能是个对象

// 解构 —— 只获得 name 属性
// 参数默认分配空对象 {}
function test({name} = {}) {
  console.log (name || 'unknown');
}
 
//测试结果
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

12.4 选择 Map / Object 字面量，而不是Switch语句

function test(color) {
  // 使用 switch case 语句，根据颜色找出对应的水果
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}
 
//测试结果
test(null); // []
test('yellow'); // ['banana', 'pineapple']

这边建议使用对象，更加清晰

// 使用对象字面量，根据颜色找出对应的水果
  const fruitColor = {
    red: ['apple', 'strawberry'],
    yellow: ['banana', 'pineapple'],
    purple: ['grape', 'plum']
  };
 
function test(color) {
  return fruitColor[color] || [];
}

但是这边是很有可能为网络数据，无法判断red这样的变量，那么就用arry.filter 来过滤

const fruits = [
    { name: 'apple', color: 'red' }, 
    { name: 'strawberry', color: 'red' }, 
    { name: 'banana', color: 'yellow' }, 
    { name: 'pineapple', color: 'yellow' }, 
    { name: 'grape', color: 'purple' }, 
    { name: 'plum', color: 'purple' }
];
 
function test(color) {
  // 使用 Array filter  ，根据颜色找出对应的水果
 
  return fruits.filter(f => f.color == color);
}

12.5 使用 Array.every 和 Array.some 来处理全部/部分满足条件

我们想检查所有水果是否都是红色的

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];
 
function test() {
  let isAllRed = true;
 
  // 条件：所有的水果都必须是红色
  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = (f.color == 'red');
  }
 
  console.log(isAllRed); // false
}

使用 arry.every来过滤

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];
 
function test() {
  // 条件：简短方式，所有的水果都必须是红色
  const isAllRed = fruits.every(f => f.color == 'red');
 
  console.log(isAllRed); // false
}

如果我们想要检查是否有至少一个水果是红色的，我们可以使用 Array.some 仅用一行代码就实现出来

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
];
 
function test() {
  // 条件：是否存在红色的水果
  const isAnyRed = fruits.some(f => f.color == 'red');
 
  console.log(isAnyRed); // true
}

13 promise

13.1 异步回调

13.1.1 回调地狱

在需要多个操作的时间，会导致多个回调函数嵌套，导致代码不够直观，就常说的回调地狱

13.1.2 并行结果

如果几个异步操作之间并没有前后顺序之分，但需要等多个异步完成操作完成后才能执行后续的任务，无法实现并行节约时间

13.2 Promise

promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果。什么时间会用到过一段时间？答案是异步操作，异步是指可能比较长时间才有结果的才做，例如网络请求、读取本地文件等

13.3 Promise的三种状态

Pending Promise对象势力创建时候的初始化状态
Fulfilled 可以理解为成功的状态
Rejected 可以理解为失败的状态

then方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve时执行第一个函数（onFulfilled）,reject时执行第二函数（onRejected）

13.4 构造一个Promise

13.4.1 使用Promise

let promise = new Promise((resolve,reject)=>{
		setTimeout(()=>{
    	if(Math.random()>0.5)
      	resolve('This is resolve!')
      else
      	reject('This is reject')
    },1000);
});
promise.then(Fulfilled,Rejected)

构造一个Promise实例需要给Promise构造函数传入一个函数
传入的函数需要有两个形参，两个形参都是function类型的参数。
- 第一个形参运行后会让Promise实例处于resolve状态，所以我们一般给第一个形参命名为resolve，使 Promise对象的状态改变成成功，同时传递一个参数用于后续成功后的操作
- 第一个形参运行后悔让Promise实例处于reject状态，所以我们一般给第一个形参命名为reject，将Promise对象的状态改变为失败，同事将错误的信息传递到后续错误处理的操作

13.4.2 es5模拟Promise

function Promise(fn){
	this.success(data);
},(error)=>{
	this.error();
}

Promise.prtotype.resolve = function (data){
	this.success(data);
}

Promise.prototype.then = function (success,error){
	this.success = success;
	this.error = error;
}

13.4.3 es5模拟Promise

class Promise{
	constructor(fn){
  		fn((data)=>{
      	this.success(data);
      },(error)=>{
      	this.error();
      })
  }
  
  resolve(data){
  	this.success(data);
  }
  
  reject(error){
  	this.error(error);
  }
  
  then(success,error){
  	this.success = success;
    this.error = error;
    console.log(this);
  }

}

13.5 promise 做为函数的返回值

function ajaxPromise(queryUrl){
	return new Promise((resolve,reject)=>{
  	xhr.open('GET',queryUrl,ture);
    xhr.send(null);
    xhr.onreadystatechange = () =>{
    		if(xhr.readyState === 4 ){
        	if(xhr.status === 200){
          	resolve(xhr.responseText);
          }else{
          	reject(xhr.responseText);
          }
        }
    }
  })
}


ajaxPromise('http://www.baidu.com')
	.then((value)=>{
  	console.log(value);
  })
  .catch((err)=>{
  	console.error(err);
 });

13.6 promise的链式调用

每次调用返回的都是一个新的Promise实例
链式调用的参数通过返回值传递

then 可以使用链式调用的写法原因在于，每一次执行该方法时总是会返回一个 Promise 对象

readFile('1.txt').then(function(data){
	console.log(data);
}).then(function (data){
	console.log(data);
  return readFile(data);
}).then(function (data){
	console.log(data);
}).catch(function (err){
	console.log(err);
})

13.7 promise API

13.7.1 Promise.all

参数:接受一个数组，数组内都是Promise实例
返回值: 返回一个 promise 实例，这个promise 实例的状态转移取决于参数的 promise实例的状态变化。当参数处于resolve状态时，返回resolve状态。如果参数中任意一个实例处于reject状态，返回的promise实例变为reject状态。

Promise.all([p1,p2]).then(function(result){
	console.log(result); //[ '2.txt', '2' ]
})

不管两个promise谁先完成，Promise.all 方法会按照数组里面的顺序将结果返回

13.7.2 Promise.race

参数:接受一个数组，数组内都是Promise实例
返回值: 返回一个 promise 实例，这个promise 实例的状态转移取决于参数的 promise实例的状态变化。当参数处于resolve状态时，返回resolve状态。如果参数中任意一个实例处于reject状态，返回的promise实例变为reject状态。

Promise.race([p1,p2]).then(function(result){
	console.log(result); //[ '2.txt', '2' ]
})

13.7.3 Promise.resolve

返回一个Promise 实例，这个实例处于resolve状态。
根据传入的参数不同有不同的功能:

值(对象、数组、字符串等):作为resolve传递出去的值
Promise 实例 : 原封不动返回

Promise.reject

返回一个Promise实例，这个实例处于reject状态

参数一般就是抛出的错误信息。

13.8 q

Q是一个在Javascrip中实现promise的模块

13.8.1 q的基本用法

var Q = require('q');
var fs = require('fs');
function read(filename){
	var deferred = Q.defer();
  fs.readFile(filename,'utf8',function)(err,data){
  	if(err){
    	deferred.reject(err);
    }else{
  		deferred.resolve(data);
  	}
  });
}

read('1.txt1').then(function(data){
	console.log(data);
},funtcion(error){
	console.error(error);                    
})

13.8.2 q的简单实现

module.exports = {
    defer(){
        var _success,_error;
        return {
            resolve(data){
                _success(data);
            },
            reject(err){
                _error(err);
            },
            promise:{
                then(success,error){
                    _success = success;
                    _error = error;
                }
            }
        }
    }
}

13.8.3 q的实现

var defer = function () {
    var pending = [], value;
    return {
        resolve: function (_value) {
            if (pending) {
                value = _value;
                for (var i = 0, ii = pending.length; i < ii; i++) {
                    var callback = pending[i];
                    callback(value);
                }
                pending = undefined;
            }
        },
        promise: {
            then: function (callback) {
                if (pending) {
                    pending.push(callback);
                } else {
                    callback(value);
                }
            }
        }
    };
};

13.9 bluebird

实现 promise 标准的库是功能最全，速度最快的一个库

13.9.1 bluebird经典使用

var Promise = require('./bluebird');

var readFile = Promise.promisify(require("fs").readFile);
readFile("1.txt", "utf8").then(function(contents) {
    console.log(contents);
})

var fs = Promise.promisifyAll(require("fs"));

fs.readFileAsync("1.txt", "utf8").then(function (contents) {
    console.log(contents);
})

13.9.2 bluebird简单实现

module.exports = {
    promisify(fn){
        return function () {
            var args = Array.from(arguments);
            return new Promise(function (resolve, reject) {
                fn.apply(null, args.concat(function (err) {
                    if (err) {
                        reject(err);
                    } else {
                        resolve(arguments[1])
                    }
                }));
            })
        }
    },
    promisifyAll(obj){
        for(var attr in obj){
            if(obj.hasOwnProperty(attr) && typeof obj[attr] =='function'){
                obj[attr+'Async'] = this.promisify(obj[attr]);
            }
        }
        return obj;
    }
}

13.10 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>move</title>
    <style>
        .square{
            width:40px;
            height:40px;
            border-radius: 50%;
        }
        .square1{
            background-color: red;
        }
        .square2{
            background-color: yellow;
        }
        .square3{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="square square1" style="margin-left: 0"></div>
<div class="square square2" style="margin-left: 0"></div>
<div class="square square3" style="margin-left: 0"></div>
</body>
<script>
  var square1 = document.querySelector('.square1');
  var square2 = document.querySelector('.square2');
  var square3 = document.querySelector('.square3');

  /*function move(element,target,resolve){
    let timer = setInterval(function(){
      var marginLeft = parseInt(element.style.marginLeft, 10);
      if(marginLeft == target){
        resolve();
      }else{
        element.style.marginLeft = ++marginLeft+'px';
      }
    },13);
  }*/
  function move(element,target,resolve){
    let current = 0;
    let timer = setInterval(function(){
      element.style.transform=`translateX(${++current}px)`;
      if(current>target){
        clearInterval(timer);
        resolve();
      };
    },13);
  }
  function animate(element,target){
    return new Promise(function(resolve,reject){
      move(element,target,resolve);
    });
  }
  animate(square1,100)
    .then(function(){
      return animate(square2,100);
    })
    .then(function(){
      return animate(square3,100);
    });
</script>
</html>

13.11. co

13.11.1 co初体验

let fs = require('fs');
function getNumber(){
  return new Promise(function (resolve,reject) {
    setTimeout(function(){
      let number = Math.random();
      if(number >.5){
        resolve(number);
      }else{
        reject('数字太小');
      }
    },1000);
  });
}
function *read(){
  let a = yield getNumber();
  console.log(a);
  let b = yield 'b';
  console.log(b);
  let c = yield getNumber();
  console.log(c);
}

function co(gen){
  return new Promise(function(resolve,reject){
    let g = gen();
    function next(lastValue){
      let {done,value} = g.next(lastValue);
      if(done){
         resolve(lastValue);
      }else{
        if(value instanceof Promise){
          value.then(next,function(val){
            reject(val);
          });
        }else{
          next(value);
        }
      }
    }
    next();
  });
}
co(read).then(function(data){
  console.log(data);
},function(reason){
  console.log(reason);
});

13.11.2 co连续读文件

let fs = require('fs');
function readFile(filename){
  return new Promise(function (resolve,reject) {
    fs.readFile(filename,'utf8',function(err,data){
      if(err)
        reject(err);
      else
        resolve(data);
    })
  });
}
function *read(){
  let a = yield readFile('./1.txt');
  console.log(a);
  let b = yield readFile('./2.txt');
  console.log(b);
}

function co(gen){
  let g = gen();
  function next(val){
    let {done,value} = g.next(val);
    if(!done){
      value.then(next);
    }
  }
  next();
}

13.12 Promise/A+完整实现

function Promise(executor) {
  let self = this;
  self.status = "pending";
  self.value = undefined;
  self.onResolvedCallbacks = [];
  self.onRejectedCallbacks = [];
  function resolve(value) {
    if (value instanceof Promise) {
      return value.then(resolve, reject)
    }
    setTimeout(function () { // 异步执行所有的回调函数
      if (self.status == 'pending') {
        self.value = value;
        self.status = 'resolved';
        self.onResolvedCallbacks.forEach(item => item(value));
      }
    });

  }

  function reject(value) {
    setTimeout(function () {
      if (self.status == 'pending') {
        self.value = value;
        self.status = 'rejected';
        self.onRejectedCallbacks.forEach(item => item(value));
      }
    });
  }

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('循环引用'));
  }
  let then, called;

  if (x != null && ((typeof x == 'object' || typeof x == 'function'))) {
    try {
      then = x.then;
      if (typeof then == 'function') {
        then.call(x, function (y) {
          if (called)return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, function (r) {
          if (called)return;
          called = true;
          reject(r);
        });
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called)return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}
Promise.prototype.then = function (onFulfilled, onRejected) {
  let self = this;
  onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function (value) {
    return value
  };
  onRejected = typeof onRejected == 'function' ? onRejected : function (value) {
    throw value
  };
  let promise2;
  if (self.status == 'resolved') {
    promise2 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        try {
          let x = onFulfilled(self.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });

    });
  }
  if (self.status == 'rejected') {
    promise2 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        try {
          let x = onRejected(self.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    });
  }
  if (self.status == 'pending') {
    promise2 = new Promise(function (resolve, reject) {
      self.onResolvedCallbacks.push(function (value) {
        try {
          let x = onFulfilled(value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
      self.onRejectedCallbacks.push(function (value) {
        try {
          let x = onRejected(value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    });
  }
  return promise2;
}
Promise.prototype.catch = function (onRejected) {
  return this.then(null, onRejected);
}
Promise.all = function (promises) {
  return new Promise(function (resolve, reject) {
    let result = [];
    let count = 0;
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(function (data) {
        result[i] = data;
        if (++count == promises.length) {
          resolve(result);
        }
      }, function (err) {
        reject(err);
      });
    }
  });
}

Promise.deferred = Promise.defer = function () {
  var defer = {};
  defer.promise = new Promise(function (resolve, reject) {
    defer.resolve = resolve;
    defer.reject = reject;
  })
  return defer;
}
/**
 * npm i -g promises-aplus-tests
 * promises-aplus-tests Promise.js
 */
try {
  module.exports = Promise
} catch (e) {
}