一、let 关键字
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
- 不允许重复声明,不允许声明多次
- 块儿级作用域
- 不存在变量提升
- 不影响作用域链
应用场景:以后声明变量使用 let 就对了
二、const 关键字
const 关键字用来声明常量, const 声明有以下特点
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块儿级作用域
注意: 对象属性修改和数组元素变化不会出发 const 错误
应用场景:声明对象类型使用 const,非对象类型声明选择 let
三、变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称
为解构赋值。
//数组的解构赋值 const arr = ['张学友', '刘德华', '黎明', '郭富城']; let [zhang, liu, li, guo] = arr; //对象的解构赋值 const lin = { name: '林志颖', tags: ['车手', '歌手', '小旋风', '演员'] }; let {name, tags} = lin; //复杂解构 let wangfei = { name: '王菲', age: 18, songs: ['红豆', '流年', '暧昧', '传奇'], history: [ {name: '窦唯'}, {name: '李亚鹏'}, {name: '谢霆锋'} ] }; let {songs: [one, two, three], history: [first, second, third]} = wangfei; 注意:频繁使用对象方法、数组元素,就可以使用解构赋值形式
四、模板字符串
模板字符串(template string)是增强版的字符串, 用反引号(`)标识,特点:
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
3)可以调用自己定义的方法
// 定义字符串 let str = `<ul> <li>沈腾</li> <li>玛丽</li> <li>魏翔</li> <li>艾伦</li> </ul>`; // 变量拼接 let star = '王宁'; let result = `${star}在前几年离开了开心麻花`; 注意:当遇到字符串与变量拼接的情况使用模板字符串
五、箭头函数
ES6 允许使用「箭头」 (=>)定义函数。
/** * 1. 通用写法 */ let fn = (arg1, arg2, arg3) => { return arg1 + arg2 + arg3; }
箭头函数的注意点:
- 如果形参只有一个,则小括号可以省略
- 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的
执行结果 - 箭头函数 this 指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments
注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适
六、rest 参数
ES6 引入 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); 注意: rest 参数非常适合不定个数参数函数的场景
七、 Symbol
1.Symbol 基本使用
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是
JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型。
Symbol 特点
- Symbol 的值是唯一的,用来解决命名冲突的问题
- Symbol 值不能与其他数据进行运算
- Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ,但 是可 以 使 用
Reflect.ownKeys 来获取对象的所有键名
//创建 Symbol let s1 = Symbol(); console.log(s1, typeof s1); //添加标识的 Symbol let s2 = Symbol('尚硅谷'); let s2_2 = Symbol('尚硅谷'); console.log(s2 === s2_2); //使用 Symbol for 定义 let s3 = Symbol.for('尚硅谷'); let s3_2 = Symbol.for('尚硅谷'); console.log(s3 === s3_2); 注: 遇到唯一性的场景时要想到 Symbol
八、迭代器
遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提
供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。
- ES6 创造了一种新的遍历命令 for...of 循环, Iterator 接口主要供 for...of 消费
- 原生具备 iterator 接口的数据(可用 for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList
- 工作原理
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());
代码说明:
- 的位置没有限制
- 生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到
yield 语句后的值 - yield 相当于函数的暂停标记,也可以认为是函数的分隔符,每调用一次 next
方法,执行一段代码 - next 方法可以传递实参,作为 yield 语句的返回值