ES6语法总结

已于 2023-12-20 16:13:07 修改
阅读量49 收藏
点赞数
文章标签： es6 前端 javascript
于 2023-11-04 11:12:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/full_moon_/article/details/134215608
版权

（一）块级作用域

1.  块级作用域

            {
				var name = 'why';
				console.log(name);
			}
			console.log(name);

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

ES5之前因为If和for都没有块级作用域的概念，所以在很多时候，我们都必须结束语function的作用域来解决应用外面变量的问题

2.1  没有块级作用域引起的问题:iif的块级

			var func;
			if(true){
				var name = 'why';
				func = function(){
					console.log(name);
				}
			}
			name = 'kobe';
			func();

2.2  没有块级作用域引起的问题:ifor的块级

①ES5中的var是没有块级作用域的

			var btns = document.getElementsByTagName('button');
			for(var i=0 ; i<btns.length ; i++){
				btns[i].onclick = function(){
					console.log('第' + i + '按钮被点击');
				}
				
				// btns[i].addEventListener('click',function(){
				// 	// addEventListener是谷歌dom2级事件写法，相当于onclick
				// 	console.log('第' + i + '按钮被点击');
				// })
			}

②  可以使用闭包解决问题：函数是一个作用域

			var btns = document.getElementsByTagName('button');
			for(var i=0 ; i<btns.length ; i++){
				(function(num){
					btns[i].onclick = function(){
						console.log('第' + num + '按钮被点击');
					}
				})(i)

③  ES6中，加入了let，let他是有if和for的块级作用域

			const btns = document.getElementsByTagName('button');
			for(let i=0 ; i<btns.length ; i++){
				btns[i].onclick = function(){
						console.log('第' + i + '按钮被点击');
				}
			}

（二）  let/var

1. 事实上var的设计可以看成JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，以为需要向后兼容

        ①Brendan Eich就决定修复这个问题，于是他新加了一个关键字：let

2. 块级作用域

        ①JS中使用var来声明一个变量是，变量的作用域主要是和函数的定义有关

        ②针对于其他块定义来说是没有作用域的，比如if/for等，这在开发中往往会引起一些问题

（三）  const的使用

建议：在开发中，优先使用const,只有需要改变某一个标识符的时候才使用let

1. const关键字

        ①在很多语言中已经存在，比如C/C++中，主要的作用是将某个变量修饰为常量

        ②在JavaScript中也是如此，使用const修饰的标识符为常量，不可再次赋值。

2. 什么时候使用const

        当修饰符不会被再次赋值时，就可以使用const来保证数据的安全性

3. const的注意

        ①注意一：一旦给const修饰的标识符被赋值后，不能修改

const a = 20;
a = 30;   //错误，不可以修改

        ②注意二：使用const定义标识符，必须进行赋值

const name;   //错误：const修饰的标识符必须赋值

        ③注意三：常量的含义是指指向的对象(指针不能修改)不能修改，但是可以改变对象内部的属性

			const obj = {
				name: 'yyy',
				age: 18,
				height:50
			}
			obj.age = 40;

（四）ES6对象增强写法

1. ES6中，对对象字面量进行了很多增强

2. 属性初始化简写和方法的简写：

         

（五）箭头函数的使用和this指向

箭头函数中的this引用的是最近作用域中的this，

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

			const obj = {
				aaa() {
					setTimeout(function () {
						console.log(this)   //window
					})
					
					setTimeout(() => {
						console.log(this)   //obj对象
					})
				}	
			}

			obj.aaa();

例子：

			const obj2 = {
				ccc() {
					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
						})
					})
				}	
			}
			obj2.ccc()

（六）Promise

1. Promise的介绍和基本使用

1.1 什么是Promise

（1）ES6中一个非常重要和好用的特性就是Promise
        但是初次接触Promise会一脸懵逼，这TM是什么东西?
        看看官方或者一些文章对它的介绍和用法，也是一头雾水。
（2）Promise到底是做什么的呢?
        Promise是异步编程的一种解决方案
（3）那什么时候我们会来处理异步事件呢?
        一种很常见的场景应该就是网络请求了
        我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回

        所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。        

        如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。但是，当网络请求非常复杂时，就会出现回调地狱。
口OK，我以一个非常夸张的案例来说明。

1.2 定时器的异步事件

我们先来看看Promise最基本的语法。
这里，我们用一个定时器来模拟异步事件:
        假设下面的data是从网络上1秒后请求的数据
        console.log就是我们的处理方式2. Promise的三种状态和另外处理方式

// 使用setTimeout
			// setTimeout(() => {
			// 	console.log("Hello World")
			// },2000)
			
			// 参数 -> 函数(resolve,reject)
			// resolve,reject 他们本身又是函数
			new Promise((resolve,reject) => {
				// 异步操作,第一次网络请求的代码
				setTimeout(() => {
					reslove()
				},2000)
			}).then(() => {
				// 第一次拿到结果的处理代码
				console.log("Hello World");
				
				return new Promise((resolve,reject) => {
					// 第二次网络请求的代码
					setTimeout(() => {
						resolve()
					},2000)
				})
			}).then(() => {
				// 第二次拿到结果的处理代码
				console.log("Hello Vue.js");
				
				return new Promise((resolve,reject) => {
					// 第三次网络请求的代码
					setTimeout(() => {
						resolve()
					},2000)
				})
			}).then(() => {
				// 第三次拿到结果的处理代码
				console.log("Hello Python);
			})

1.3 Promise 的使用

			// 什么情况下用到Promise
			// 一般是有异步操作时，使用Promise对异步进行封装
			// new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
			// 在执行传入的回调函数时，会传入两个参数，resolve,reject:本身又是函数
			
			new Promise((resolve,reject) => {
				setTimeout(() => {
					// 成功时调用resolve
					// resolve(data)
					// resolve("Hello World")
					
					// 失败时调用reject
					reject('error message')
				},1000)
			}).then((data) => {
				// 处理代码
				console.log(data);
			}).catch(err => {     //箭头函数只有一个参数,()可以省略
				console.log(err);
			})

2. Promise的三种状态

首先，当我们开发中有异步操作时，就可以给异步操作包装一个Promise
        异步操作之后会有三种状态
我们一起来看一下这三种状态:
        pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
        fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
        reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

			new Promise((resolve,reject) => {
				setTimeout(() => {
					// resolve("Hello World")
					reject('error message')
				},1000)
			}).then((data) => {
				// 处理代码
				console.log(data);
			}).catch(err => {
				console.log(err);
			})
			// promise的另外处理形式
			new Promise((resolve,reject) => {
				setTimeout(() => {
					// resolve("Hello World")
					reject("error message")
				},1000)
			}).then(data => {
				console.log(data);
			},err => {
				console.log(err);
			})

3.Promise的链式调用

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

			new Promise((resolve,reject) => {
				setTimeout(() => {
					resolve("aaa")
				},1000)
			}).then(res => {
				// 自己处理
				console.log(res,"第一层的10行处理代码");
				
				// 对结果 进行第一次处理
				return new Promise((resolve,reject) => {
					// resolve(res + "111")
					reject("error")
				})
			}).then(res => {
				console.log(res,"第二层的10行处理代码")
				
				return new Promise((resolve) => {
					resolve(res + "222")
				})
			}).then(res => {
				console.log(res,"第三层的10行处理代码")
			}).catch(err => {
				console.log(err);
			})

new Promise(resolve => resolve(结果)) 简写

			new Promise((resolve,reject) => {
				setTimeout(() => {
					resolve("aaa")
				},1000)
			}).then(res => {
				// 自己处理
				console.log(res,"第一层的10行处理代码");
				
				// 对结果 进行第一次处理
				// return Promise.reject("error message")
				throw "error message"     //手动抛出异常
			}).then(res => {
				console.log(res,"第二层的10行处理代码")
				
				return Promise.resolve(res + "222")
			}).then(res => {
				console.log(res,"第三层的10行处理代码")
			}).catch(err => {
				console.log(err);
			})

省略掉Promise.resolve

			new Promise((resolve,reject) => {
				setTimeout(() => {
					resolve("aaa")
				},1000)
			}).then(res => {
				// 自己处理
				console.log(res,"第一层的10行处理代码");
				
				// 对结果 进行第一次处理
				return res + "111"
			}).then(res => {
				console.log(res,"第二层的10行处理代码")
				
				return res + "222"
			}).then(res => {
				console.log(res,"第三层的10行处理代码")
			})

4. Promise的all方法使用

某个需求需要发送两次请求：

普通方式

			let isResult1 = false
			let isResult2 = false
			// 请求1：
			$ajax({
				url:'',
				success:function () {
					console.log('结果1');
					isResult1 = true
					handleResult()
				}
			})
			// 请求2：
			$ajax({
				url:'',
				success:function () {
					console.log('结果2');
					isResult2 = true
					handleResult()
				}
			})
			
			function handleResult() {
				if (isResult1 && isResult2){
					
				}
			}

用Promise的all方法包装两个异步请求：

			Promise.all([       //[]数组
				new Promise((resolve,reject) => {
					$ajax({
						url:'url1',
						success:function (data) {
							resolve(data)
						}
					})
				}),
				new Promise((resolve,reject) => {
					$ajax({
						url:'url2',
						success:function (data) {
							resolve(data)
						}
					})
				})
			]).then(results => {    //results数组
				console.log(results)
			})

用setTimeout模拟网络请求示例：

			Promise.all([       //[]数组
				// 用setTimeout模拟网络请求
				new Promise((resolve,reject) => {
					setTimeout(() => {
						resolve({name:'yyy',age:18})
					},1000)
				}),
				new Promise((resolve,reject) => {
					setTimeout(() => {
						resolve('result2')
					},2000)
				})
				
			]).then(results => {    //results数组
				console.log(results)
			})

full_moon_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES6语法总结笔记
LQlove1的博客
07-25 521
笔记了es6的语法
es6语法总结
weixin_48183870的博客
05-08 964
在导入时，可以使用自定义的名称来接收这个导出的成员，script标签需要指定类型type为module。在ES6中，模板字符串是一种新的字符串语法，用反引号（``）包围字符串内容。在函数调用时，可以使用展开运算符将一个数组的元素作为单独的参数传递给函数。在对象中使用展开运算符，可以将源对象的所有可枚举属性复制到目标对象中。当函数返回一个对象时，可以使用解构赋值来直接访问该对象的属性。默认导出的成员可以是任何类型的值（变量、函数、对象、类等）。如果解构的变量数量超过数组的长度，多余的变量会被赋值为。
ES6语法讲解
m0_51651340的博客
06-27 292
在js一直有一个bug是var：1、var 声明的变量会有变量提升12、var 没有块级作用域1234 3、var 可以多次重复定义一个变量，后面的变量替换前面变量12 新的定义变量let：1、let声明的变量不会有变量提升，只有在前面定义了在后面才能用12、let存在块级作用域123453、let不能多次重复定义一个变量12常量：指的是不会改变的数据1、值不能再改变1234567 2、常量具有块级作用域1234 3、没有变量提升，先声明后使用14、不能声明同名的常量5、一定要赋初始值，否则报错1
ES6 入门基础语法总结
04-05
ES6 基础语法总结 ES6 是 ECMAScript 6 的简称，于 2015 年发布，是 JavaScript 语言的最新标准。ES6 引入了许多新的语法特性和功能，以提高开发效率和代码可读性。本文总结了 ES6 的基础语法，包括 let 与 const、...
webstorm和.vue中es6语法报错的解决方法
08-27
ES6 语法报错是 WebStorm 和 Vue 开发中常见的问题，本文将总结 WebStorm 和 Vue 中 ES6 语法报错的解决方法，以便开发者避免采坑。 WebStorm 中 ES6 语法报错的解决方法 在 WebStorm 中，ES6 语法报错可以通过...
ES6核心语法整理笔记
05-16
主要总结了ES6的一些核心语法，整理成一个思维导图，能帮助快速复习回顾
使用ES6语法重构React代码详解
12-10
使用ES6语法重构React组件 在Airbnb React/JSX Style Guide中，推荐使用ES6语法来编写react组件。下面总结一下使用ES6 class语法创建组件和以前使用React.createClass方法来创建组件的不同。 创建组件 ES6 class创建...
JavaScript及（ES6）总结
05-29
JavaScript 和 ES6（ECMAScript 6）是前端开发中不可或缺的部分，它们为网页和应用程序提供了动态交互的能力。本文将详细介绍这两个概念以及相关的基础知识。 首先，JavaScript 是一种解释型、动态类型的编程语言，...
如何理解es6的迭代器？
m0_68271787的博客
06-26 105
迭代器是一种特殊的对象。迭代器自带一个next()方法，我们取迭代器中的数据要用next方法。该方法返回一个对象{value:'迭代器元素',done:false}，如果done是false，表示迭代器还有元素，需要继续调用next迭代，如果done是true，则说明没有元素了。取迭代器的内容用for of遍历。
ES6模板字符串详解
修己xj的博客
06-26 267
模板字符串是ES6中引入的一种新的字符串字面量，它允许嵌入变量、表达式和换行符。模板字符串使用反引号（`）包裹，可以跨越多行并且可以包含嵌入的变量和表达式。ES6模板字符串是JavaScript中一个强大且灵活的特性，它为开发者提供了一种更优雅地处理字符串的方式。通过嵌入表达式和支持多行文本，模板字符串显著提高了代码的可读性和编写效率。在实际开发中，合理利用模板字符串可以使代码更加清晰易懂，是现代JavaScript开发中不可或缺的工具之一。
ES6及其后续版本的新特性的理解
timer_017的博客
06-22 405
ES6（ECMAScript 2015）引入了一系列重要的语言和语法特性，旨在提升JavaScript的简洁性和可读性。在实际项目中，这些新特性使得代码更加清晰易读，提高了开发效率。比如，箭头函数和解构赋值可以减少冗余代码，模板字面量使字符串拼接更方便，而ES7的async/await则改善了异步编程体验。模板字面量（Template literals）：使用反引号(``)创建包含变量和表达式的字符串，如 ${expression}。let和const声明：引入了块级作用域的变量声明，避免了全局污染。
JavaScript检查对象是否包含某个属性
徐三岁的博客
06-28 433
当使用 Object.prototype.hasOwnProperty.call 时，实际上是在调用 hasOwnProperty 方法，并明确指定 this 的值，这使得可以检查任何对象是否拥有指定的属性。使用 Object.prototype.hasOwnProperty.call 的好处是，它允许将 hasOwnProperty 方法作为一个函数传递给其他函数，或者在不直接引用对象的情况下使用它。hasOwnProperty 方法会检查对象自身是否具有指定的属性，而不考虑原型链。
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
haojiehero123的博客
06-23 498
整洁大气，非常漂亮，前端内容均可通过后台修改。
SPECweb2009调优指南
developersupport的博客
06-25 1011
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
新交友盲盒+付费进群二合一源码+视频教程
12年全栈程序开发
06-27 419
包括项目前端和后端的讲解、宝塔面板的安装教程，以及盲盒交友和付费进群二合一的搭建教程。无论你是技术小白还是有一定技术基础，都能轻松搭建出属于自己的盲盒交友平台。
WebKit简介及工作流程
最新发布
cybtec的博客
06-28 766
WebKit是一个开源的浏览器引擎，最初由苹果公司开发，用于其Safari浏览器。随着时间的推移，WebKit也被广泛应用于其他多个平台和应用中，包括Google Chrome（桌面版）、Chromium（一个开源项目，用于构建Chrome等浏览器）、Android浏览器以及多种移动设备和嵌入式系统中的浏览器。WebKit以其高性能、低内存占用和高度可移植性而闻名。它支持HTML5、CSS3和其他现代Web技术，使得开发者能够创建更加丰富和互动的网络应用。
Vue-列表渲染指令
Kevin7_35Durant的博客
06-23 638
比如我想再添加一个叫‘moli’的人，你会发现多选框自己给勾上了，并且‘zhangsan’没有被勾上了 ，这是因为vue默认li标签里的元素内容没有变化，只是添加了一个元素。语法：v-for="(参数1,可选参数1,可选参数2) in 数组名"这个时候key的作用就体现出来了，key的值必须要是唯一的关键字。这里面有一个小问题，就是当我勾选这个多选框时，再添加一个人。因为数组里面的id是唯一的，不重复，所以用这个值给key。此时，我们再添加‘moli’，就不会出现这个bug。
es6笔记---学习这些就够了
04-29
ES6包含了一系列新的语法和特性，使得 JavaScript 在编程语言层面更加强大、灵活和高效。学习ES6对于提升 JavaScript 开发效率和代码质量非常重要。下面是一些应当掌握的ES6特性： 箭头函数 箭头函数（Arrow ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值