ES5与ES6的一些语法比较

目录

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]);
})
posted @ 2021-08-11 01:05  coderElian  阅读(184)  评论(0)    收藏  举报