ES语法糖

哆木

已于 2022-10-11 17:32:44 修改

阅读量493

点赞数 1

分类专栏： ES语法糖文章标签： javascript 前端 html5 es6

于 2022-07-07 10:34:04 首次发布

本文链接：https://blog.csdn.net/duomu_DAT/article/details/125653331

版权

ES语法糖专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 背景

为什么要学习ES语法糖？

1、主要是简洁了JavaScript的语法，并且增加丰富的功能，减少开发时间。

2、是前端三大主流框架：vue、react、angular的基础语法。

2. 声明变量（var、let、 const）

1、var 声明的范围是函数作用域，let 和 const 声明的范围是块作用域。

2、var 声明的变量会被提升到函数作用域的顶部，let 和 const 声明的变量不存在提升。

3、 var 允许在同一个作用域中重复声明同一个变量，let 和 const 不允许。

4、在全局作用域中使用 var 声明的变量会成为 window 对象的属性，let 和 const 声明的变量则不会。

5、const 的行为与 let 基本相同，唯一一个重要的区别是，使用 const 声明的变量必须进行初始化，且不能被修改。

关键字	变量提升	块级作用域	重复声明同名变量	重新赋值
var	√	×	√	√
let	×	√	×	√
const	×	√	×	×

3. 模板字符串

模板字符串是一种新的字符串，使用的符号``(反引号)，比常规字符串多了一些属性。

        //1、声明
		let str = `我是字符串！`;
		console.log(str, typeof str);
		//2、可以出现换行
		let str1 = `
			<ui>
				<li>马里奥</li>
				<li>路易</li>
				<li>小蓝</li>
				<li>小红</li>
			</ui>`;
		//3、变量拼接
		name = '小蓝';
		out = `${name}是最头铁的憨憨。`
		console.log(out);

4. 解构赋值

按照一定模式从数组和对象中提取值，对变量进行赋值，这种称为结构赋值。

        //数组的解构
		const F4 = ['马里奥','路易','小蓝','小红'];
		let [ma, lu, lan, hong] = F4;
		console.log(ma);
		console.log(lu);
		console.log(lan);
		console.log(hong);
		//对象的解构
		const zhao = {
			name: '赵本山',
			age: '不详',
			xiaopin: function(){
				console.log("表演小品。");
			}
		}
		let {name, age, xiaopin} = zhao;
		console.log(name);
		console.log(age);
		console.log(xiaopin);

5. 默认赋值

默认赋值可以在参数里面进行赋值，但有默认的规范，就是赋值的参数必须放在最后。

        //1、给参数赋予默认值
		function add(a, b, c=10){
		 	return a+b+c;
		}
		console.log(add(1, 2,));
		console.log(add(1, 2, 3));
		//2、结合解构赋值使用
		function connet({host='127.0.0.1', username, password, port}){
			console.log(host);
			console.log(username);
			console.log(password);
			console.log(port);
		}
		connet({
			username:'duomu',
			password:123456,
			port:3306,
			});

6. rest参数

rest参数是指函数可以接受多个参数，但是参数必须放在最后。

        function fn(a, b, ...arg){
			console.log(a);
			console.log(b);
			console.log(arg);
		}
		fn('马里奥','路易','小蓝','小粉');

7. 扩展运算符

可以对数组进行简单运算。

		//1、数组合并
		const renxing = ['马里奥','路易'];
		const muguwangguo = ['小蓝','小红'];
		const superMario = [...renxing, ...muguwangguo];
		console.log(superMario);
		//2、数组克隆
		const copy = [...superMario];
		console.log(copy);

8. 箭头函数

箭头函数优化了function的函数名称，下面两个函数结构都是一样的。

		const fn = function(a, b ){
			return a+b;
		}
		const fn1= (a, b) =>{
			return a+b;
		}
		console.log(fn(1, 2));
		console.log(fn1(1, 2));

箭头函数不能构造对象，构造会出错。

		//不能初始化对象
		let person = (name, age) =>{
			this.name = name;
			this.age = age;	
		}
		let me = new person('xiao', 30);
		console.log(me);

如果参数只有一个，可以省略括号；如果当代码体只有一条语句的时候，花括号也可以省略，此时return必须省略，不然报错。

		//省略写法
		// let add = function(n){
		// 	return n+n;
		// }
		let add = n => n+n ;
		console.log(add(1));

箭头函数实例，从数组中返回偶数元素。

		//从数组中返回偶数元数
		let array = [1,6,78,99,102,1003,108];
		// let result = array.filter(function(item){
		// 	if(item % 2 === 0){
		// 		return true;
		// 	}else{
		// 		return false;
		// 	}
		// })
		let result = array.filter(item => item % 2 === 0);
		console.log(result);

9. 解决回调地狱（嵌套调用）

当需求需要不断的递进获取数据时，会出现地狱回调的问题，下面是地狱回调的案例。

        //地狱回调案例
		function getGoods(data){
			setTimeout(()=>{
				let data1 = data+'+用户数据';
				setTimeout(()=>{
					let data2 = data1 + '+订单数据';
					setTimeout(()=>{
						let data3 = data2 + '+商品数量';
						console.log(data3);
					}, 1000);
				}, 1000);
			}, 1000);
		}
		getGoods('duomu');

9.1. 迭代器（iterator）

任何数据只要实现迭代器接口，就是可以使用for...of循环遍历，能够更加方便操作数据的遍历。原生迭代器接口的数据：Array、Arguments、Set、Map...

		let array = ['马里奥','路易','小蓝','小粉'];
		console.log(array);
        for(let name of array){
			console.log(name);
		}

可以获取迭代器对象，通过迭代器的内置方法next，对数据进行遍历。

它是通过done标识数据是否还存在遍历的数据，false标识遍历还没有结束，true标识数据已遍历完成。

let array = ['马里奥','路易','小蓝','小粉'];
let iterator = array[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

9.2. 生成器

生成器传参的的范围：1-2；3-4；5-6；7-8。

		function * gen(arg){
			console.log(arg)
			let one = yield 111;
			console.log(one)
			let two = yield 222;
			console.log(two)
			let three = yield 333;
			console.log(three)
		}
		let iterator = gen('AAA');
		console.log(iterator.next());
		console.log(iterator.next('BBB'));
		console.log(iterator.next('CCC'));
		console.log(iterator.next('DDD'));

生成器主要是为了解决地狱回调的问题。下面的代码使用生成器进行优化，并且结果没有改变。

        //生成器使用案例(解决回调地狱)
		function getuser(data){
			setTimeout(()=>{
				let data1 = data + '+用户数据';
				iterator.next(data1);
			}, 1000);
		};
		function getOrder(data1){
			setTimeout(()=>{
				let data2 = data1 + '+订单数据';
				iterator.next(data2);
			}, 1000);
		};
		function getGoods(data2){
			setTimeout(()=>{
				let data3 = data2 + '+商品数量';
				console.log(data3);
			}, 1000);
		};

		function * gen(data){
			let data1 = yield getuser(data);
			let data2 = yield getOrder(data1);
			let data3 = yield getGoods(data2);
		}
		let iterator = gen('duomu');
		iterator.next();

9.3. Promise

promise的基础语法使用。

        //promise基础语法
		const p = new Promise(function(resolve, reject){
			setTimeout(function(){
				let data = '成功';
				resolve(data);
				// let data = '失败';
				// reject(data);
			}, 1000);
		});
		p.then(function(vale){
			console.log(vale);
		}, function(reason){
			console.error(reason);
		});

promise也是为了解决地狱回调的问题。下面的代码使用生成器进行优化，并且结果没有改变。

        //promise使用案例(解决回调地狱)
		const p = new Promise((resolve, reject) => {
			let data1 = 'duomu'+'+用户数据';
			resolve(data1);
		})
		p.then(value => {
			return new Promise((resolve, reject) => {
				let data2 = value+'+订单数据';
				resolve(data2);
			})
		}).then(value => {
			return new Promise((resolve, reject) => {
				let data3 = value+'+商品数量';
				resolve(data3);
			})
		}).then(value => {
			console.log(value);;
		});

9.4. ES8（async、await）

async函数的特性：

1、async函数的返回值时是promise对象；promise的结果由async函数执行的返回值决定。

2、当返回结果不是一个promise对象时，会默认返回一个正确的promise对象。

3、抛出错误时，会返回一个错误的promise。

4、返回结果是一个promise对象，会根据promise对象的成功或失败决定。

		async function fn(){
			// //一、
			// return '字符串';
			// //二、
			// throw new Error("出错啦！");
			// //三、
			// return new Promise((resolve, reject) => {
			// 	resolve("成功！");
			// 	reject('失败');
			// })
		}
		const result = fn();
		console.log(result);

await的函数使用，成功可以直接获取，但是如果失败必须使用catch捕获。

        //await使用
		const p = new Promise((resolve, reject) => {
			// resolve('成功!');
			reject("失败！");
		})
		async function main(){
			try{
				let result = await p;
				console.log(result);
			} catch(e){
				console.log(e);
			}
		}
		main();

async、await使用实例。

		//async、await使用实例
		async function getuser(data){
			return new Promise((resolve, reject) => {
				let data1 = data + '+用户数据';
				resolve(data1);
			})
		}
		async function getOrder(data1){
			return new Promise((resolve, reject) => {
				let data2 = data1 + '+订单数据';
				resolve(data2);
			})
		}
		async function getGoods(data2){
			return new Promise((resolve, reject) => {
				let data3 = data2 + '+商品数量';
				resolve(data3);
			})
		}
		async function main(){
			let data1 = await getuser('duomu');
			let data2 = await getOrder(data1);
			let data3 = await getGoods(data2);
			console.log(data3);
		}
		main();