xplly'Blog

标签

ES6

字数

3396 字

阅读时间

15 分钟

let 和 const 命令

let 所声明的变量，只在 let 命令所在的代码块内有效。

const 声明的变量是常量，不能被修改，类似于java中final关键字。

字符串扩展

includes() ：返回布尔值，表示是否找到了参数字符串。
startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。

基本数据类型Symbol

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。这是一种新的基础数据类型（primitive type） Symbol是由ES6规范引入的一项新特性，它的功能类似于一种标识唯一性的ID。

javascript

let s1 = Symbol()
let s2 = Symbol('another symbol')
let s3 = Symbol('another symbol')

s1 === s2 // false
s2 === s3 // false

// 使用Symbol作为对象属性名
const PROP_NAME = Symbol()
const PROP_AGE = Symbol()

let obj = {
  [PROP_NAME]: "一斤代码"
}
obj[PROP_AGE] = 18

obj[PROP_NAME] // '一斤代码'
obj[PROP_AGE] // 18


let obj = {
   [Symbol('name')]: '一斤代码',
   age: 18,
   title: 'Engineer'
}

Object.keys(obj)   // ['age', 'title']

for (let p in obj) {
   console.log(p)   // 分别会输出：'age' 和 'title'
}

Object.getOwnPropertyNames(obj)   // ['age', 'title']

JSON.stringify(obj)  // {"age":18,"title":"Engineer"}

// 使用Object的API
Object.getOwnPropertySymbols(obj) // [Symbol(name)]

// 使用新增的反射API
Reflect.ownKeys(obj) // [Symbol(name), 'age', 'title']

const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE'
// 使用Symbol来替代常量(Symbol的唯一性)
const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()

解构表达式

什么是解构？

	ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构 (

Destructuring)。

数组解构

如果解构不成功，变量的值就等于undefined

javascript

let arr = [1,2,3] 
const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值 
// 然后打印 
console.log(x,y,z); //1 2 3
const [a] = arr; 
//只匹配1个参数 
console.log(a);//1

对象解构

如果解构不成功，变量的值就等于undefined。

javascript

const person = {
    name:"jack", 
    age:21, 
    language: ['java','js','css'] 
}

javascript

// 解构表达式获取值 
const {name,age,language} = person; 
// 打印
console.log(name);//"jack"
console.log(age); //"21"
console.log(language);//['java','js','css']

如过想要用其它变量接收，需要额外指定别名：

const{name:n} = person;
console.log(n);//"jack"

{name:n} ：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。

函数优化

函数参数默认值

ES6之前做法

javascript

function add(a , b) { 
    // 判断b是否为空，为空就给默认值1 
    b = b || 1; return a + b; }
// 传一个参数 
console.log(add(10));//11

现在

javascript

function add(a , b = 1) {
    return a + b;
}// 传一个参数
console.log(add(10));//11

箭头函数

一个参数时：

javascript

var print = function (obj) { 
    console.log(obj); 
}
// 简写为：
var print2 = obj => console.log(obj)

多个参数：

javascript

// 两个参数的情况： 
var sum = function (a , b) { 
    return a + b; 
}
// 简写为： 
var sum2 = (a,b) => a+b;

没有参数：

javascript

// 没有参数时，需要通过()进行占位，代表参数部分 
let sayHello = () => console.log("hello!"); 
sayHello();

代码不止一行可以用{}括起来

对象的函数属性简写

javascript

let person = {
    name: "jack", 
    // 以前： 
    eat: function (food) { 
        console.log(this.name + "在吃" + food); 
    },
    // 箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this 
    // 简写版： 
    eat3(food){ 
        console.log(this.name + "在吃" + food); 
    } 
}

箭头函数结合解构表达式

javascript

const person = {
    name:"jack",
    age:21, 
    language: ['java','js','css'] 
}
var hi = ({name}) => console.log("hello," + name); 
hi(person);//"hellojack"

自执行函数

自执行函数或是自调用函数声明完了，马上进行调用，只能使用一次。

javascript

// 格式一：(函数)(实参)
(function (n1,n2){
	console.log("这是匿名函数的自执行的第一种写法，结果为:"+(n1+n2))
})(10,100)	// -->110

// 格式二：(函数(实参))
(function (n1,n2){
    console.log("这是匿名函数的自执行的第二种写法，结果为："+(n1+n2))
}(10,100)) // -->110

map和reduce

map

map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

javascript

let arr = ['1','20','-5','3']; 
console.log(arr) //['1','20','-5','3']
let newArr = arr.map(s => parseInt(s)); 
console.log(newArr)//[1,20,-5,3]

reduce

reduce() ：接收一个函数（必须）和一个初始值（可选），该函数有两个参数

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数举例：

javascript

const arr = [1,20,-5,3];

javascript

arr.reduce((a,b) => a+b) //19

arr.reduce((a,b) => a*b) //-300

arr.reduce((a,b) => a*b,-1) //300

扩展运算符

扩展运算符(spread)是三个点(...)，将一个数组转为用逗号分隔的参数序列。

javascript

console.log (...[1, 2, 3]); //1 2 3 
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5 
function add(x, y) { 
    return x + y; 
}
var numbers = [1, 2]; 
console.log(add(...numbers)); // 3 
// 数组合并 
let arr = [...[1,2,3],...[4,5,6]];
console.log(arr); //[1, 2, 3, 4, 5, 6] 
// 与解构表达式结合 
const [first, ...rest] = [1, 2, 3, 4, 5]; 
console.log(first, rest) //1 [2, 3, 4, 5] 
//将字符串转成数组 
console.log([...'hello']) //['h','e','l','l','o']

Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理

javascript

const promise = new Promise(function(resolve, reject) { 
    // ... 执行异步操作 
    if (/* 异步操作成功 */){ 
        resolve(value);// 调用resolve，代表Promise将返回成功的结果 
	} else { 
		reject(error);// 调用reject，代表Promise会返回失败结果 
	} 
});

如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法如果想要处理promise异步执行失败的事件，还可以跟上catch：

javascript

promise.then(function(value){ 
    // 异步执行成功后的回调 
}).catch(
    function(error){
        // 异步执行失败后的回调 
})

set和map

Set

Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。

javascript

// Set构造函数可以接收一个数组或空 
let set = new Set();
set.add(1);// [1] 
// 接收数组 
let set2 = new Set([2,3,4,5,5]);//[2,3,4,5]

方法：

javascript

set.add(1);// 添加 
set.clear();// 清空 
set.delete(2);// 删除指定元素 
set.has(2); // 判断是否存在 
set.forEach(function(){})//遍历元素 
set.size()//元素个数，属性不是方法

Map

map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即：

object是 <string,object>
集合map是<object,object>集合

javascript

// map接收一个数组，数组中的元素是键值对数组 
const map = new Map([ ['key1','value1'], ['key2','value2'], ])
// 或者接收一个set 
const set = new Set([ ['key1','value1'], ['key2','value2'], ])
const map2 = new Map(set) // 或者其它map 
const map3 = new Map(map);

方法：

javascript

map.set(key, value);// 添加 
map.clear();// 清空 
map.delete(key);// 删除指定元素 
map.has(key); // 判断是否存在 
map.forEach(function(key,value){})//遍历元素 
map.size; // 元素个数。是属性，不是方法 
map.values() //获取value的迭代器 
map.keys() //获取key的迭代器 
map.entries() //获取entry的迭代器 
用法： for (let key of map.keys()) { console.log(key); }
//或：
console.log(...map.values()); //通过扩展运算符进行展开

class（类）的基本语法

JavaScript 语言的传统方法是通过构造函数定义井生成新对象。ES6中引入了class的概念，通过class关键字自定义类。

javascript

class User{ 
    constructor(name, age = 20){ // 构造方法 
        this.name = name; // 添加属性并且赋值 
        this.age = age; 
    }
    sayHello(){ // 定义方法 
        return "hello"; 
    }
    static isAdult(age){ //静态方法 
        if(age >= 18){ 
            return "成年人"; 
        }
        return "未成年人"; 
    } 
}
let user = new User("张三"); 
// 测试
console.log(user); // User {name: "张三", age: 20} 
console.log(user.sayHello()); // hello 
console.log(User.isAdult(20)); // 成年人


//类的继承
class ZhangSan extends User{ 
    constructor(){ 
        super("张三", 30); //如果父类中的构造方法有参数，那么子类必须通过super调用父类的构造方法 
        this.address = "上海"; //设置子类中的属性，位置必须处于super下面 
    } 
}

Generator函数

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator函数有两个特征: 一是 function命令与函数名之间有一个星号: 二是函数体内部使用 yield语句定义不同的内部状态。

javascript

function* hello () {
	yield "hello"; 
    yield "world"; 
    return "done"; 
}
let h = hello(); 
console.log(h.next()); //{value: "hello", done: false} 
console.log(h.next()); //{value: "world", done: false} 
console.log(h.next()); //{value: "done", done: true} 
console.log(h.next()); //{value:underfined,done: true}

可以看到，通过hello()返回的h对象，每调用一次next()方法返回一个对象，该对象包含了value值和done状态。直到遇到return关键字或者函数执行完毕，这个时候返回的状态为ture，表示已经执行结束了。

for...of循环

通过for...of可以循环遍历Generator函数返回的迭代器。

javascript

function* hello () { 
    yield "hello"; 
    yield "world"; 
    return "done"; 
}
let h = hello(); 
for (let obj of h) { 
    console.log(obj);  //hello   //world
}

修饰器(Decorator)

修饰器(Decorator)是一个函数，用来修改类的行为。 ES2017 引入了这项功能，目前 Babel 转码器己经支持。

javascript

@T //通过@符号进行引用该方法，类似java中的注解 
class User { 
    constructor(name, age = 20){
        this.name = name;
        this.age = age; 
    } 
}
function T(target) { //定义一个普通的方法 
    console.log(target); //target对象为修饰的目标对象，这里是User对象 
    target.country = "中国"; //为User类添加一个静态属性country 
}
console.log(User.country); //打印出country属性值

运行报错

原因是，在ES6中，并没有支持该用法，在ES2017中才有，所以我们不能直接运行了，需要进行编码后再运行。转码的意思是：将ES6或ES2017转为ES5执行。

转码器

Babel (babeljs.io)是一个广为使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在浏览器或其他环境执行。
Google 公司的 Traceur 转码器 Cgithub.com/google/traceur-compiler)，也可以将 ES6 代码转为ES5的代码。

了解UmiJS

特点

插件化
- umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成，比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等，都是由插件实现。
开箱即用
- 你只需一个 umi 依赖就可启动开发，无需安装 react、preact、webpack、react-router、babel、jest 等等。
约定式路由
- 类 next.js 的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等

部署安装

properties

#首先，需要安装Node.js 
#在资料中，找到node-v8.12.0-x64.msi，一路下一步安装 
#安装完成后，通过node -v 命令查看其版本号 
F:\code\itcast-es6>node -v v
8.12.0
#接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些 
#可以把yarn看做了优化了的
npm npm i yarn tyarn -g #-g 是指全局安装 
tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了 
#如果安装失败，是由于将yarn添加到环境变量中导致，参见 http://www.easysb.cn/index.php/2017/06/04/11/ 
#下面开始安装
umi tyarn global add umi 
umi #进行测试

快速入门

properties

#通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。 
tyarn init -y 
#通过umi命令创建index.js文件 
umi g page index #可以看到在pages下创建好了index.js和index.css文件 
#将下面内存拷贝到index.js文件中进行测试 
	@T //通过@符号进行引用该方法，类似java中的注解 
	class User { 
		constructor(name, age = 20){ 
			this.name = name; 
			this.age = age; 
		} 
	}
	function T(target) { //定义一个普通的方法 
		console.log(target); //target对象为修饰的目标对象，这里是User对象 
		target.country = "中国"; //为User类添加一个静态属性country 
	}
	console.log(User.country); //打印出country属性值 
#通过命令行启动umi的后台服务,用于本地开发 
umi dev 
#通过浏览器进行访问：http://localhost:8000/，查看效果 
#值得注意的是，这里访问的是umi的后台服务，不是idea提供的服务

模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。

而JS中没有包的概念，换来的是模块。

模块功能主要由两个命令构成： export 和 import 。

export 命令用于规定模块的对外接口，
import 命令用于导入其他模块提供的功能。

export

javascript

class Util { 
	static sum = (a, b) => a + b; 
}
//导出该类 
export default Util;

import

javascript

//导入Util类 
import Util from './Util' 
//使用Util中的sum方法 
console.log(Util.sum(1, 2));

let 和 const 命令 ​

字符串扩展 ​

基本数据类型Symbol ​

解构表达式 ​

数组解构 ​

对象解构 ​

函数优化 ​

函数参数默认值 ​

箭头函数 ​

一个参数时： ​

多个参数： ​

没有参数： ​

对象的函数属性简写 ​

箭头函数结合解构表达式 ​

自执行函数 ​

map和reduce ​

map ​

reduce ​

扩展运算符 ​

Promise ​

set和map ​

Set ​

Map ​

class（类）的基本语法 ​

Generator函数 ​

for...of循环 ​

修饰器(Decorator) ​

转码器 ​

了解UmiJS ​

部署安装 ​

快速入门 ​

模块化 ​

export ​

import ​

let 和 const 命令

字符串扩展

基本数据类型Symbol

解构表达式

数组解构

对象解构

函数优化

函数参数默认值

箭头函数

一个参数时：

多个参数：

没有参数：

对象的函数属性简写

箭头函数结合解构表达式

自执行函数

map和reduce

map

reduce

扩展运算符

Promise

set和map

Set

Map

class（类）的基本语法

Generator函数

for...of循环

修饰器(Decorator)

转码器

了解UmiJS

部署安装

快速入门

模块化

export

import