前端框架学习-ES6新特性(尚硅谷web笔记)-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端框架学习-ES6新特性(尚硅谷web笔记)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ECMASript是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。javaScript也是该规范的一种实现。

笔记出处：b站

尚硅谷Web前端ES6教程，涵盖ES6-ES11
阮一峰大佬的：ECMAScript 6 入门

ES6

let 关键字

使用let关键字声明变量的特点：

不允许重复声

块儿级别作用域

不存在变量提升

不影响作用域链

const关键字

const关键字用来声明常量，const声明由以下特点

声明必须赋初始值

标识符一般为大写

不允许重复声明

值不允许修改

块儿级作用域

变量的解构赋值

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值

	 //数组的解构赋值
	const arr = ['张学友', '刘德华', '黎明', '郭富城'];
	let [zhang, liu, li, guo] = arr;
	//对象的解构赋值
	const lin = {
	 name: '林志颖',
	 tags: ['车手', '歌手', '小旋风', '演员']
	};
	let {name, tags} = lin;

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符

可以使用 ${xxx} 形式输出变量

	// 定义字符串
	let str = `<ul>
	 <li>沈腾</li>
	 <li>玛丽</li>
	 <li>魏翔</li>
	 <li>艾伦</li>
	 </ul>`;
	// 变量拼接
	let star = '王宁';
	let result = `${star}在前几年离开了开心麻花`;

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这
样的书写更加简洁。

let name = '尚硅谷';
let slogon = '永远追求行业更高标准';
let improve = function () {
 console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
	 name,// 属性名和变量名相同可以简写
	 slogon,// 属性名和变量名相同可以简写
	 improve,// 属性名和函数变量名相同可以简写
	 change() {// change:function(){}的简写方式
	 	console.log('可以改变你')
	 }
};

箭头函数

ES6 允许使用「箭头」（=>）定义函数。

// 1. 通用写法
let fn = (arg1, arg2, arg3) => {
	return arg1 + arg2 + arg3;
}
// 2. 省略小括号的情况,只有一个参数
let fn2 = num => {
	return num * 10;
};
// 3. 省略花括号,省略花括号的同时要省略`return`
let fn3 = score => score * 20;
// 4. this指向2声明所在作用域中this的值
let fn4 = () => {
	console.log(this);//Windows
}
let school = {
	 name: '尚硅谷',
	 getName(){
	 	let fn5 = () => {
	 		console.log(this);// this指向school
	 	}
	 	fn5();
	 }
};

箭头函数不会更改 this 指向，用来指定回调函数会非常合适

rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

// 类似java中的可变参数
function add(...args){
 	console.log(args);
}
add(1,2,3,4,5);
// rest参数必须是最后一个形参，在其他参数都确定之后才是rest参数
function minus(a,b,...args){
	console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);

spread扩展运算符

扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。在ES9之后也可对对象进行扩展

// 展开数组
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){
	console.log(arguments);// 输出不是数组对象而是，'德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子'
}
fn(...tfboys)
// 展开对象
/**
* 展开对象
*/
let skillOne = { q: '致命打击',};
let skillTwo = { w: '勇气'};
let skillThree = { e: '审判'};
let skillFour = { r: '德玛西亚正义'};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};

Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，
用来封装异步操作并可以获取其成功或失败的结果.

	//实例化 Promise 对象
    const p = new Promise(function(resolve, reject){
   		resolve(data);// 成功时使用这个方法
   		reject(err);// 失败时使用这个方法
    });

    //调用 promise 对象的 then 方法
    p.then(function(value){// then后面的第一个函数是成功的回调，第二个函数是失败时的回调
        console.log(value);
    }, function(reason){
        console.error(reason);
    })
    // 程序发生错误的时候调用
    p.catch(function(reason){
      console.warn(reason);
   });

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
好处：

防止命名冲突

提高代码复用

增强维护性，出问题只需要调整对应模块即可

模块化功能主要由两个命令构成：

export 命令用于规定模块的对外接口

import 命令用于输入其它模块提供的功能

// 在m1.js中导出
	// 分别暴露
	export let school = '尚硅谷';
	export function teach() {
	    console.log("我们可以教给你开发技能");
	}
	// 统一暴露
	export {school, teach};
	// 默认暴露
	export default {
	    school: 'ATGUIGU',
	    change: function(){
	        console.log("我们可以改变你!!");
	    }
	}
// 在app.js中使用
	import {school, teach} from "./src/js/m1.js";
	// 针对默认暴露可以这样写
	import m1 from "./src/js/m1.js";

ES8

async 和 await

async 和await 目的是为了简化promise中api的使用,两种语法结合可以让异步代码和同步代码一样。
解决回调地狱问题

async函数

async 函数的返回值为 promise 对象
promise 对象的结果由 async 函数执行的返回值决定

await 函数

await 必须写在 async 函数中

await 右侧的表达式一般为 promise 对象

await 返回的是 promise 成功的值

await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

async function main() {
     try {
         let result = await p;
         console.log(result);
     } catch (e) {
         console.log(e);
     }
 }

ES9

Rest/Spread属性

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，
在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符文章来源地址https://www.toymoban.com/news/detail-657563.html

function connect({host, port, ...user}) {
	console.log(host);
	console.log(port);
	console.log(user);// 可以直接将后三个参数封装到user中
}
connect({
	host: '127.0.0.1',
	port: 3306,
	username: 'root',
 	password: 'root',
	type: 'master'
});