ES6知识点

1.块级作用域

1.let和const

1. let用于当变量需要改变时
2. const变量不需要改变

2.var没有块级作用域的问题

1.if的块级

<script>
var func；
	if(true){
		var name = 'abc';
		func = function(){
			console.log(name)
			}
		}
	func()
	console.log(name)
</script>

2. 全局和函数内部都可以输出name，因为if没有块级作用域的概念

2.for的块级

    <button type="button">按钮1</button>
    <button type="button">按钮2</button>
	<button type="button">按钮3</button>
	<button type="button">按钮4</button>
	<button type="button">按钮5</button>
	<script>
	var btns = document.getElementsByTagName('button')
		for(var i = 0;i<btns.length;i++){
			btns[i].onclick = function(){
				console.log('第' + i + '个被点击')
				//输出的是第五个按钮被点击
			}
		}
	</script>

2. 原因：i一直被改变；for没有块级作用域
3. 解决方法：闭包，因为函数是一个作用域
4. 或者将var改成let，let是有if和for的块级作用域

2.const的使用与注意事项

1. 使用const修饰的标识符为常量，不可以再次赋值
2. 当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性
3. const修饰的标识符在定义时必须赋值
4. 常量的含义是指向的对象不能修改，但可以改变对象内部的属性

<script>
const obj = {
      name: 'why',
      age :18
    }
    obj.name = 'abc';
    obj.age = 20;
</script>

3.对象字面量增强写法

1.属性的增强写法

<script>
    const name = 'abc';
    const age = 18;
    //ES5的写法
    const obj = {
      name : name;
      age : age;
    }
    //ES6的写法
    const obj = {
      name,
      age
    }
</script>

2.函数的增强写法

<script>
    //ES5的写法
    const obj = {
      run: function() {
      
    }
    //ES6的写法
    const obj = {
      run() {
      
      }
    }
</script>

4.箭头函数的使用

1.箭头函数的基本使用

<script>
//ES5中定义函数的方式：function
const aaa = function() {
}
//ES5中还有对象字面量中定义函数的方式


//箭头函数
const ccc = (参数列表) =>{
}

</script>

2.箭头函数参数和返回值

1. 参数

<script>
//放入两个参数
const sum = (num1,num2) => {
return num1 + num2
}


//放入一个参数时，小括号可以省略
const power = num => {
return num*num
}
</script>

2. 返回值

<script>
//函数代码块中有多行代码，正常写
const test = ()=> {
console.log('hello');
console.log('good');
}

//函数代码块中只有一行代码,会自动执行代码并将返回值返回数据
const mul = (num1,num2) =>num1 + num2
</script>

3.箭头函数中this的使用

1. 什么时候使用箭头函数：当我们准备把一个函数作为参数传入另外一个函数的时候
2. this的使用

<script>
//1、打印出来的是window
setTimeout(function() {
console.log(this)
},1000)


//2.打印出来的是window
setTimeout(()=>{
console.log(this)
},1000)


//3.
const obj = {
aaa() {
setTimeout(function() {
console.log(this);//在对象里面打印this，是window
})

setTimeout(()=>{
console.log(this)//打印obj对象
})
}
</script>

3. 箭头函数中的this是如何查找的：
   向外层作用域中，一层层查找this，直到有this的定义
4. 示例

<script>
    const obj= {
      aaa() {
        setTimeout(function() {
          setTimeout(function() {
            console.log(this);//window
          })

          setTimeout(()=>{
            console.log(this);//window
          })
        })

          setTimeout(()=>{
            setTimeout(function() {
              console.log(this);//window
            })

            setTimeout(()=> {
              console.log(this);//obj
          })
        })
      }
    }
    obj.aaa();
  </script>

5.Promise

1.介绍

1. promise是异步编程的而一种解决方案
2. 什么时候我们会处理异步事件：
3. 网络请求的回调地狱：代码非常难看而且不容易维护

2.基本使用

1. 什么时候用到promise：
   一般情况下是有异步操作时，使用promise对这个异步操作进行封装
2. 在执行传入的回调函数时，会传入两个参数，resolve和reject，而resolve和reject本身又是函数
3. promise进行网络请求，then里执行代码
4. 成功的时候调用resolve，失败的时候调用reject

3.promise的三种状态

1. sync：同步
   async：异步
2. 三种状态：
   pending：等待状态，比如正在进行网络请求，或者定时器没有到时间
   fulfill：满足状态，当我们主动回调了resolve，就处于该状态，并且会回调.then()
   reject：拒绝状态，当我们主动回调了reject，就处于该状态，并且会回调.catch()

4.promise的另外处理方式

<script>
new Promise((resolve,reject) => {
    setTimeout(() => {
      // resolve('hello')
      reject('byebye')
    }, 1000);
  }).then(data => {
    console.log(data);
  },error => {
    console.log(error);
  })
  </script>

5.promise的链式调用

<script>
    // reslove和reject本身是函数
  new Promise((reslove,reject) => {

    // 第一次网络请求的代码
    setTimeout(() => {
      reslove()
    }, 1000);
  }).then( () => {
    // 第一次拿到结果的处理代码
    console.log('hello');
    console.log('hello');
    console.log('hello');
    console.log('hello');

    return new Promise((reslove,reject) => {
      // 第二次网络请求的代码
      setTimeout(() => {
        reslove()
      }, 1000);
    })
  }).then(() => {
    // 第二次处理的代码
    console.log('today is Monday');
    console.log('today is Monday');
    console.log('today is Monday');
    console.log('today is Monday');

    return new Promise((reslove,reject) => {
      setTimeout(() => {
        reslove()
      }, 1000);
    })
  }).then(() => {
    console.log('byebye');
    console.log('byebye');
    console.log('byebye');
    console.log('byebye');
  })
  </script>

2. 需求：网络请求aaa，自己处理；aaa后面拼接111，自己处理；aaa111后面拼接222，自己处理
3. 简写：return Promise.resolve(res + '111')
4. 更简洁的写法：省略掉Promise.resolve，直接return
5. return Promise.reject(‘error)可以写成throw 'error'

6.promise的all方法使用

1. 需求本身依赖两种请求，我们可以用这种写法
2. 也可以用promise的all方法来实现

<script>
Promise.all([
    new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('result1')
      }, 2000);
    }),
    new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('result2')
      }, 1000);
    })
  ]).then(results => {
    console.log(results);
  })
  </script>