学习Vue框架前,先学习下ES6的语法


ES6学习笔记_学习记录


为什么要学习 ES6

ES6 的版本变动内容最多,具有里程碑意义

ES6 加入许多新的语法特性,编程实现更简单、高效

ES6 是前端发展趋势,就业必备技能


版本更新

ES5 是 ECMAScript 第5版,2009年发布

ES6 是 ECMAScript 第6版,2015年发布,也叫 ES2015

从 ES6 开始,每年发布一个版本,版本号比年份最后一位大 1


ECMASript 6 新特性


1. let 关键字

let 关键字用来声明变量,使用 let 声明的变量有几个特点

●不允许重复声明

●块级作用域

●不存在变量提升

●不影响作用域链

应用场景:以后声明变量使用let 就对了


2. const 关键字

const 关键字用来声明常量,const 声明有以下特点

●声明必须赋初始值

●标识符一般为大写

●不允许重复声明

●值不允许修改

●块级作用域

注意:对象属性修改和数组元素变化不会出发 const 错误

应用场景:声明对象类型使用 const,非对象类型声明选择 let


3. 模板字符串

模板字符串(template string)是增强版的字符串,用反引号 ` 标识,特点

●字符串中可以出现换行符

●可以使用 ${xxx} 形式输出变量,近似 EL 表达式

应用场景:当遇到字符串与变量拼接的情况使用模板字符串


let name = 'jack';
console.log(`hello, ${name}`);

let ul = `<ul>
<li>apple</li>
<li>banana</li>
<li>peach</li>
</ul>`


4. 简化对象写法

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

应用场景:对象简写形式简化了代码,所以以后用简写就对了


let uname = 'rick';
let age = 30;
let sayHi = function () {
console.log('Hi');
}

// 创建对象,因属性、方法 的 k v 同名,可以简化
const obj = {
uname,
age,
sayHi() { console.log('Hi'); }
}


5. 箭头函数

ES6 允许使用箭头=>定义函数

●function 写法

function fn(param1, param2, …, paramN) { 
// 函数体
return expression;
}

●=> 写法

let fn = (param1, param2, …, paramN) => {
// 函数体
return expression;
}


6. rest 参数

ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments,作用与 arguments 类似,将接收的参数序列转换为一个数组对象(arguments 是伪数组)

语法格式:fn(a, b, ...args),写在参数列表最后面

应用场景:rest 参数非常适合不定个数参数函数的场景

let fn = (a, b, ...args) => {
console.log(a);
console.log(b);
console.log(args);
};
fn(1,2,3,4,5);

// 1 2 Array(4)


7. getter 和 setter

实际上,getter和setter是 ES5(ES2009)提出的特性

当属性拥有 get/set 特性时,属性就是访问器属性。代表着在访问属性或者写入属性值时,对返回值做附加的操作。而这个操作就是 getter/setter 函数


使用场景: getter 是一种语法,这种 get 将对象属性绑定到 查询该属性时将被调用的函数。适用于某个需要动态计算的成员属性值的获取。setter 则是在修改某一属性时所给出的相关提示


// get 和 set  
class Phone {
get price() {
console.log("价格属性被读取了");
return 'iloveyou';
}

set price(newVal) {
console.log('价格属性被修改了');
}
}

//实例化对象
let s = new Phone();

// console.log(s.price);
s.price = 'free';


8. ES6 模块化语法

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

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

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


1 分别暴露

export let school = '尚硅谷';

export function teach() {
console.log("我们可以教给你开发技能");
}


2 统一暴露

let school = '尚硅谷';
function findJob(){
console.log("我们可以帮助你找工作!!");
}

export {school, findJob}


3 默认暴露


export default {
school: 'ATGUIGU',
change: function(){
console.log("我们可以改变你!!");
}
}


4 模块导入数据语法

5 通用导入方式

import * as m1 from './js/m1.js';
import * as m2 from './js/m2.js';
import * as m3 from './js/m3.js';

m3.default.change()

6 解构赋值导入

import {school, teach} from "./src/js/m1.js";
import {school as guigu, findJob} from "./src/js/m2.js";
import {default as m3} from "./src/js/m3.js";


7 简便方式导入,只能用于默认暴露

import m3 from "./src/js/m3.js";



2022-04-07