ES6语法总结

已于 2023-12-20 16:13:07 修改
阅读量116 收藏
点赞数
文章标签： es6 前端 javascript
于 2023-11-04 11:12:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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_
关注
ES6语法
weixin_50756332的博客
01-03 1277
本文对部分ES6语法做了介绍，以及一些基本的用法标注
ES6总结
Alemon的博客
12-01 4703
ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言.......
es6语法总结
最新发布
weixin_48183870的博客
05-08 1037
在导入时，可以使用自定义的名称来接收这个导出的成员，script标签需要指定类型type为module。在ES6中，模板字符串是一种新的字符串语法，用反引号（``）包围字符串内容。在函数调用时，可以使用展开运算符将一个数组的元素作为单独的参数传递给函数。在对象中使用展开运算符，可以将源对象的所有可枚举属性复制到目标对象中。当函数返回一个对象时，可以使用解构赋值来直接访问该对象的属性。默认导出的成员可以是任何类型的值（变量、函数、对象、类等）。如果解构的变量数量超过数组的长度，多余的变量会被赋值为。
Es6语法总结
木槿之夏
10-10 274
遍历字符串 for (let codePoint of 'foo') { console.log(codePoint) } // "f" // "o" // "o" 传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。 includes()：返回布尔值，表示是否找到了参数字符串。 startsWith()：...
webstorm和.vue中es6语法报错的解决方法
08-27
ES6 语法报错是 WebStorm 和 Vue 开发中常见的问题，本文将总结 WebStorm 和 Vue 中 ES6 语法报错的解决方法，以便开发者避免采坑。 WebStorm 中 ES6 语法报错的解决方法 在 WebStorm 中，ES6 语法报错可以通过...
解决node终端下运行js文件不支持ES6语法
12-20
总结来说，要解决Node.js环境下运行包含ES6语法的JS文件的问题，主要步骤包括： 1. 检查Node.js版本和ES6支持度。 2. 安装`es-checker`来查看具体不支持的ES6特性。 3. 使用`npm`安装`babel-cli`和相应的转译预设。...
JS实现禁止高频率连续点击的方法【基于ES6语法】
10-19
总结来说，ES6中引入的新特性为前端开发提供了更加强大和灵活的编程能力，这在实现禁止高频率连续点击功能时显得尤为关键。通过结合ES6的变量声明、定时器以及事件监听机制，我们可以有效地控制用户的操作频率，从而...
ES6语法简单总结
Eyno的博客
04-01 818
文章目录let和const解构赋值Map和SetReflect和Proxy字符串子串识别字符串重复字符串补全模板字符串标签模板数值Number数值表示最大/最小安全整数方法对象Object扩展运算符方法数组Array数组创建方法 let和const 解构赋值 Map和Set Reflect和Proxy 字符串 子串识别 indexOf方法 返回某个指定字符串值在字符串中首次出现的位置，如果没有找到则返回-1。 语法： string.indexOf(查找值,start) start为可选参数，表示检索的
Es6语法总结（部分）
qq_44984407的博客
04-19 180
Es6量产含义 特指ECMAScript2015 泛指ES2015之后的新特性， ES2018 ES2019 let和const let和var的区别 不能重复定义 没有变量提示(var定义的变量是有变量提升的)，必须先定义在使用 全局变量不会附加到window对象的属性中 具有块级作用域 (除了对象字面量外其它的都是代码快) 单独的快作用域书写形式： { 这是块级作用域} 自...
ES6语法学习总结
o__o__o__o的博客
04-05 1063
ES6语法学习总结 1.let和const 2.解构赋值 3.块级作用域 4.箭头函数 5. for...of vs for...in 6. 类
ES6语法总结(我的第二版,比较完整版)
庚中
02-23 431
ES6相关 es6的新增的一些东西 一. let const的增加 1.let ES6中新增了用于声明变量的关键字 a.具有块级作用域 if (true) { let a = 10; } console.log(a) // a is not defined 注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。 b.不存在变量提升 conso...
ES6语法总结笔记
LQlove1的博客
07-25 615
笔记了es6的语法
ES6常用语法总结
qq_45060976的博客
12-09 362
ES6 常用语法总结 1.let/const es6语法中，变量的声明方式改变了，而新的声明方式也带来了一些新的特性，其中最重要的就是块级作用域和不再具有变量提升 我们都是到，用var声明的变量会变成一个全局变量，但是用let和const申声明的变量就只能在当前作用域使用，例如： { var a = 20; } console.log(a) //20 { let a = 20; } cosnole.log(a)//a is not defined 同时,let 和 const声明的变量也
ES6语法基础总结
小糖豆
10-19 345
let var a = 1;全局变量,能重复声明,可以先使用，在声明 let a = 1 全局声明即全局变量，局部声明即局部变量,不能重复声明,必须先声明后使用 const a = 1 常量，常量只能在声明时赋值，并且一旦赋值不能修改，其他和let类似 解构赋值 对象的解构赋值 对象的解构赋值 let obj = { a: 1, b: 2, c: 3 }; let {a,c} = obj; console.log(a,c);//输出1 3 数组的解构赋值 let arr =
学习ES6笔记──工作中常用到的ES6语法
weixin_34273481的博客
08-19 2616
一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。let...
ES6语法概览与核心特性总结
本文是一份关于ES6（ECMAScript 6）的全面学习总结，涵盖了ES6语法的关键特性，适用于Vue开发者。ES6是JavaScript语言的一个重要版本，引入了许多现代编程语言的特性和优化，使得JavaScript更加简洁、高效。以下将...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值