ES6学习笔记-摩杜云开发者社区

学习Vue框架前，先学习下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";