https://www.runoob.com/w3cnote/es6-symbol.html
1:简介
ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。每一年发一版
Node.js支持最高
查看Node对ES6的支持
node —v8-options | grep harmony
webpack
是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 。
ebpack 主要有四个核心概念:
- 入口 (entry)
- 输出 (output)
- loader
- 插件 (plugins)
2:基本语法
let关键字
不允许重复声明
块儿级作用域:全局,函数,eval
let只在块内有效
不存在变量提升
不影响作用域链
let声明的变量只在 let 命令所在的代码块内有效。let 只能声明一次 var 可以声明多次:for 循环计数器很适合用 letconst关键字
声明必须赋初始值
标识符一般为大写
不允许重复声明
值不允许修改
块儿级作用域
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
const 其实保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改动。此时,你可能已经想到,简单类型和复合类型保存值的方式是不同的。是的,对于简单类型(数值 number、字符串 string 、布尔值 boolean),值就保存在变量指向的那个内存地址,因此 const 声明的简单类型变量等同于常量。而复杂类型(对象 object,数组 array,函数 function),变量指向的内存地址其实是保存了一个指向实际数据的指针,所以 const 只能保证指针是固定的,至于指针指向的数据结构变不变就无法控制了,所以使用 const 声明复杂类型对象时要慎重。
变量解构赋值
6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称 为解构赋值。
//对象的解构赋值
const lin = {
name: ‘林志颖’,
tags: [‘车手’, ‘歌手’, ‘小旋风’, ‘演员’]
};
let {name, tags} = lin;
模板字符串
模板字符串(template string)是增强版的字符串,用反引号()标识,特点: 1) 字符串中可以出现换行符 2) 可以使用 ${xxx} 形式输出变量<br />// 定义字符串<br />let str =
- 沈腾
- 玛丽
- 魏翔
- 艾伦
;<br />// 变量拼接<br />let star = '王宁';<br />let result =
${star}在前几年离开了开心麻花`;
简化对象写法
S6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
let name = ‘111’;
let slogon = ‘222’;
let improve = function () {
console.log(‘可以提高你的技能’);
}
//属性和方法简写
let person = {
name,
slogon,
improve,
//声明函数的简化
change() {
console.log(‘可以改变你’)
}
};
箭头函数
ES6 允许使用「箭头」(=>)定义函数。
/*
1. 通用写法
*/
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
1) 如果形参只有一个,则小括号可以省略
2) 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的 执行结果
3) 箭头函数 this 指向声明时所在作用域下 this 的值
4) 箭头函数不能作为构造函数实例化
5) 不能使用 arguments
函数参数赋值初始值
1:形参初始值
//当不传入第三个参数时,该值就是初始值
function add(a,b,c=10){
return a + b + c;
}
let result = add(1,2)’
console.log(result);
2:与解构赋值结合
function connect({options}){
}
rest参数
引入 rest 参数,用于获取函数的实参,用来代替 arguments
/
作用与 arguments 类似
/
function add(…args){
console.log(args);
}
add(1,2,3,4,5);
/
rest 参数必须是最后一个形参
/
function minus(a,b,…args){
console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);
spread 扩展运算符
扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包。
/*
展开数组
*/
let tfboys = [‘德玛西亚之力’,’德玛西亚之翼’,’德玛西亚皇子’];
let tfboys2 = [‘德玛西亚之力2’,’德玛西亚之翼2’,’德玛西亚皇子2’];
function fn(){
console.log(arguments);
}
fn(…tfboys);
let tfboysAll = […tfboys,tfboys2];
Symbol
引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ,还新增了 Symbol 。
特点
1) Symbol 的值是唯一的,用来解决命名冲突的问题
2) Symbol 值不能与其他数据进行运算
3) Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ,但 是可 以 使 用 Reflect.ownKeys 来获取对象的所有键名
Symbol.for() 类似单例模式,首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值,如果有即返回该 Symbol 值,若没有则新建并返回一个以该字符串参数为名称的 Symbol 值,并登记在全局环境中供搜索。
//创建
let yellow = Symbol(“Yellow”);
let yellow1 = Symbol.for(“Yellow”);
yellow === yellow1; // false
let yellow2 = Symbol.for(“Yellow”);
yellow1 === yellow2; // true
Symbol.keyFor()
Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ,用来检测该字符串参数作为名称的 Symbol 值是否已被登记。
let yellow1 = Symbol.for(“Yellow”);
Symbol.keyFor(yellow1); // “Yellow”
Symbol内置值
除了定义自己使用的 Symbol 值以外,ES6 还提供了 11 个内置的 Symbol 值,指向语言内部使用的方法。可以称这些方法为魔术方法,因为它们会在特定的场 景下自动执行。
Symbol.hasInstance | 当其他对象使用 instanceof 运算符,判断是否为该对 象的实例时,会调用这个方法 |
---|---|
Symbol.isConcatSpreadable | Symbol.isConcatSpreadable 属性等于的是一个 布尔值,表示该对象用于 Array.prototype.concat()时, 是否可以展开。 |
迭代器
遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提 供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。
ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费
const xiyou = [‘111’,’222’,’333’,’444’];
//遍历数组下标
for(let i in xiyou){
console.log(i);
}
//输出1234
//遍历内容
for(let v of xiyou){
console.log(v);
}
//输出111222333444
工作原理
a) 创建一个指针对象,指向当前数据结构的起始位置
b) 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员
c) 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员
d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
生成器
生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同.
function gen(){
yield ‘一只没有耳朵’;
yield ‘一只没有尾巴’;
return ‘真奇怪’;
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
1) 的位置没有限制
2) 生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到 yield 语句后的值
3) yield 相当于函数的暂停标记,也可以认为是函数的分隔符,每调用一次 next 方法,执行一段代码
4) next 方法可以传递实参,作为 yield 语句的返回值
Promise
是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数, 用来封装异步操作并可以获取其成功或失败的结果。
1) Promise 构造函数: Promise (excutor) {}
2) Promise.prototype.then 方法
3) Promise.prototype.catch 方法
3:集合
set
ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯 一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进 行遍历,
集合的属性和方法:
1) size 返回集合的元素个数
2) add 增加一个新元素,返回当前集合
3) delete 删除元素,返回 boolean 值
4) has 检测集合中是否包含某个元素,返回 boolean 值
5) clear 清空集合,返回 undefined
Map
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键” 的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。
Map 的属 性和方法:
1) size 返回 Map 的元素个数
2) set 增加一个新元素,返回当前 Map
3) get 返回键名对象的键值
4) has 检测 Map 中是否包含某个元素,返回 boolean 值
5) clear 清空集合,返回 undefined
4:Class类
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对 象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是 一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象 原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:
1) class 声明类
2) constructor 定义构造函数初始化
3) extends 继承父类
4) super 调用父级构造方法
5) static 定义静态方法和属性
6) 父类方法可以重写
5:模块化
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。
1) 防止命名冲突
2) 代码复用
3) 高维护性
ES6 之前的模块化规范有:
1) CommonJS => NodeJS、Browserify
2) AMD => requireJS
3) CMD => seaJS
模块功能主要由两个命令构成:export 和 import。
export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能
分别暴露
export let a = ‘a’;
export function teach(){
console.log(“www”)
}
统一暴露
let a = ‘a’;
function teach(){
console.log(“www”)
}
export{a,teach}
默认暴露
export default{
a :’a’;
teach:function (){
console.log(“www”)
}
}
引入
//1:通用的导入方式
import * as m1 from “./src/js/m1/js”;
//2:解构赋值形式
import {a as a1,teache} from “./src/js/m1.js”;
import {default as m3} from “./src/js/m3.js”
//简单形式,只针对默认暴露
import m3 from “./src/js/m3.js”