前端框架学习-ES6新特性(尚硅谷web笔记)
ECMASript是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。javaScript也是该规范的一种实现。
新特性目录
-
-
-
- 笔记出处：b站
- ES6
-
- let 关键字
- const关键字
- 变量的解构赋值
- 模板字符串
- 简化对象写法
- 箭头函数
- rest参数
- spread扩展运算符
- Promise
- 模块化
- ES8
-
- async 和 await
- ES9
-
- Rest/Spread属性
-
-
笔记出处：b站
尚硅谷Web前端ES6教程，涵盖ES6-ES11
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 = `
- 沈腾
- 玛丽
- 魏翔
- 艾伦
`;
// 变量拼接
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 参数和扩展运算符
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'
});