ES5与ES6的一些语法比较

目录

• ES5中的闭包
• ES6中的写法
• 对象增强写法
• 箭头函数
• Promise
  • 定时器的异步事件
    • 基本语法
    • Promise三种状态
    • Promise的链式调用
    • Promise all()方法

ES5中的闭包

<script>
	var btns = document.getElementsByTagName("button");
	for (var i = 0; i < btns.length; i++) {
		(function (i) {
			btns[i].addEventListener('click', function () {
				console.log('第' + i + '个按钮被点击');
			})
		})(i)
	}
</script>

ES6中的写法

<script>
	const btns = document.getElementsByTagName("button");
	for (let i = 0; i < btns.length; i++) {
		btns[i].addEventListener('click', function (){
			console.log('第' + i + '个按钮被点击');
		})
	}
</script>

对象增强写法

ES5:

<script>
	let name = 'tolerate';
	let age = 25;
	let height = 1.78;
 
	const person = {
		name : name,
		age : age,
		height : height,
		run : function() {
			console.log('在跑');
		}
	}
 
	console.log(person);
	person.run();
</script>

ES6:

<script>
	let lname = 'tolerate';
	let lage = 25;
	let lheight = 1.78
	const lperson = {
		lname,
		lage,
		lheight,
		eat() {
			console.log('在吃');
		}
	}
 
	console.log(lperson);
	lperson.eat();
</script>

箭头函数

• 定义函数的方法：

  // 定义函数的方式
  // 1. function
  const a = function () {
    console.log('我是a方法');
    return  'Elian'
  }
   
  // 2. 对象字面量中定义函数
  const obj = {
    name: 'Elian'
  }
   
  // 3. ES6中箭头函数
  const b = () => {
    console.log('我是箭头函数');
    return "Elian"
  }

• 参数和返回值的问题

  // 1. 参数问题
  // 1.1 放入两个参数
  const sum = (num1, num2) => {
    return num1 + num2
  }
  // 1.2 放入一个参数
  const power = num => {
    return num * num
  }
   
  // 2. 函数中
  // 2.1 函数代码块中有多行代码时
  const test = () => {
    // 1. 打印Hello World
    console.log('Hello World');
    // 2. 打印Hello Vuejs
    console.log('Hello Vuejs');
  }
  // 2.2 函数代码中只有一行代码
  const mul = (num1, num2) => num1 * num2
  const demo = () => console.log('Hello Demo');

• 函数中this的问题

  // 结论: 箭头函数中的this，向外层作用域中一层层查找this，知道有this的定义
   
  const objTest = {
    aaa() {
      setTimeout(function (){
        setTimeout(function (){
          console.log(this) // window
        }, 1000)
        setTimeout(()=>{
          console.log(this)	// window
        }, 1000)
      }, 1000)
      setTimeout(()=>{
        setTimeout(function () {
          console.log(this)	// window
        }, 1000)
        setTimeout(()=>{
          console.log(this)	// object
        })
      })
    }
  }

Promise

• ES6中一个非常重要和好用的特性就是Promise
  • 是异步编程的一种解决方案
• 什么时候我们会处理异步事件呢？
  • 网络请求
  • 封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回
  • 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去

定时器的异步事件

基本语法

• 这里，我们用一个定时器来模拟异步事件：
  • 假设下面的data是从网络上1s后请求的数据
  • console.log就是我们的处理方式

以前的写法

setTimeout(() => {
  console.log('HelloWorld');
  setTimeout(()=>{
    console.log('HelloVueJs');
    setTimeout(()=>{
      console.log('HelloPython')
    }, 1000)
  },1000)
}, 1000)

Promise写法

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
}).then(()=>{
  console.log('HelloWorld');
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      resolve()
    },1000)
  }).then(()=>{
    console.log('HelloVueJs');
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve()
      }, 1000)
    }).then(()=>{
      console.log('HelloPython')
    })
  })
})

Promise基本用法

// 什么情况下会用到Promise，异步操作的时候
new Promise((resolve, reject)=>{
  // 异步操作
  setTimeout(()=>{
    // resolve('HelloWorld') // 成功调用then
    reject('error message') // 失败调用reject
  }, 1000)
}).then((data)=>{
  // 成功的操作
  console.log(data)
}).catch((err)=>{
  console.log(err)
})

Promise三种状态

• 首先，当我们开发中有异步操作时，就可以给异步操作包装一个Promise
  • 异步操作之后会有三种状态
    • pending：等待状态
    • fulfill：满足状态
    • reject：拒绝状态

Promise的链式调用

• 我们在看Promise的流程图时，发现无论是then还是catch都可以返回一个promise对象
• 所以我们的代码其实是可以进行链式调用的
• 这里我们直接通过Promise包装了一下新的数据，将Promise对象返回了
  • Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数
  • Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('HelloWorld')
  }, 1000)
}).then(data => {
  console.log(data);
  return Promise.resolve(data + '111')
}).then(data => {
  console.log(data)
  return Promise.resolve(data + '222')
}).then(data=>{console.log(data)})

• 更简洁的写法：

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('HelloWorld')
  }, 1000)
}).then(data => {
  console.log(data);
  return data + '111'
}).then(data => {
  console.log(data)
  return data + '222'
}).then(data=>{console.log(data)})

Promise all()方法

• 同时处理两个网络请求，拿到两个结果才能继续执行下一步就可以用all方法了

Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(()=>{
        const name = 'Elian'
        console.log(name);
        resolve(name)
      }, 1000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(()=>{
        const age = 18
        console.log(age);
        resolve(age)
      }, 1000)
    })
]).then(result => {
  console.log(result[0] + result[1]);
})