20230818-ARTS挑战第一周

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

新特性目录

• • • • 笔记出处：b站
      • ES6
      • • let 关键字
        • const关键字
        • 变量的解构赋值
        • 模板字符串
        • 简化对象写法
        • 箭头函数
        • rest参数
        • spread扩展运算符
        • Promise
        • 模块化
      • ES8
      • • async 和 await
      • ES9
      • • Rest/Spread属性

笔记出处：b站

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

ES6

let 关键字

const关键字

变量的解构赋值

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

模板字符串

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

简化对象写法

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

箭头函数

// 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参数

// 类似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扩展运算符

// 展开数组
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 对象
    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);
   });

模块化

// 在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 函数

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

ES9

Rest/Spread属性

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