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

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

笔记出处：b站

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

ES6

let 关键字

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

1. 不允许重复声
2. 块儿级别作用域
3. 不存在变量提升
4. 不影响作用域链

const关键字

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

1. 声明必须赋初始值
2. 标识符一般为大写
3. 不允许重复声明
4. 值不允许修改
5. 块儿级作用域

变量的解构赋值

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

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

模板字符串

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

1. 字符串中可以出现换行符
2. 可以使用 ${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);});

模块化

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

1. 防止命名冲突
2. 提高代码复用
3. 增强维护性，出问题只需要调整对应模块即可

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

• 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 函数

1. await 必须写在 async 函数中
2. await 右侧的表达式一般为 promise 对象
3. await 返回的是 promise 成功的值
4. 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 参数和扩展运算符

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'
});