ES6学习笔记（es6详解）

ES6学习笔记（es6详解）

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

为什么要学习 ES6

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

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

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

版本更新

○ES5 是 ECMAScript 第5版，2009年发布

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

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

ECMASript 6 新特性

1. let 关键字

●块级作用域

●不存在变量提升

●不影响作用域链

2. const 关键字

●标识符一般为大写

●值不允许修改

●块级作用域

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

3. 模板字符串

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

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

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

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

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

• apple
• banana
• peach

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。