1. let变量特性:
a. 变量不能重复声明
b. 作用域是块级作用域(大括号里的内容)
c. 不存在变量提升,即不允许在变量声明之前使用变量
d. 不影响作用域链
2. const常量特性:
a. 声明时必须赋初始值
b. 常量值不能修改,除了数组和对象
c. 块级作用域,并不是全局的
d. 一般常量名一般为全大写
3. 解构赋值:即通过特殊的语法解构解析出数组的元素值或者对象的属性值
const F4 = ['小沈阳', '刘能', '赵四', '宋小宝];
let [a, b, c, d] = F4;
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function(){
console.log("我可以演小品");
}
}
let {name, age, xiaopin} = zhao;
console.log(name);
console.log(age);
xiaopin();
4. 模板字符串:使用``引起来的字符串。特性:
a. 内容中直接出现换行符,这是单引号/双引号所没有的
b. 内容中可以直接引用变量,引用方式为${变量名}
let str1 = `abc`;
let str2 = `${str1}def`
5. 对象的简化写法:原本在大括号里写的键值对可以直接写成变量名
let name = 'sgg';
let change = function(){
console.log("xxx");
}
let school = {
name,
change
}
6. 箭头函数:类似于java的lamda表达式。以下两个函数等效:
let fn = function(a, b){
return a + b;
}
let fn = (a,b) => {
return a + b;
}
7. 箭头函数的特性:
a. this是静态的,始终指向函数声明时所在作用域下的this的值
let fn1 = function(){
console.log(this.name);
}
let fn2 = () => function(){
console.log(this.name);
}
window.name = 'sgg';
const school = {
name: 'atgg'
}
fn1.call(school); // 输出atgg
fn2.call(school); // 输出sgg
b. 不能作为构造函数实例化对象
c. 不能使用arguments参数
d. 箭头函数的简写:当入参只有一个的时候,可以省略小括号,如果函数就一行,可以省略大括号和return,类似于java的lamda表达式。
8. 函数参数初始值
// c如果不传值,则为0处理,如果不设初始值,则为NaN
function add(a, b, c = 0){
return a + b + c;
}
9. 函数参数解构赋值,以下两段代码等效:
function connect(options){
let host = options.host;
let username = options.username;
let password = options.password;
let port = options.port;
console.log(host);
}
// port有默认值3306
function connect({host, username, password, port = "3306"}){
console.log(host);
}
10. 通过...args获取函数参数
ES5写法:
function date(){
console.log(arguments); //是一个对象
}
ES6写法:
function date(a, b, ...args){
console.log(a);
console.log(b);
console.log(args); //是一个数组 3,4,5,6
}
date(1,2,3,4,5,6);
注意...args参数必须为函数的最后一个参数。
11. 函数调用时,通过...将数组转化为一个个元素
let arr = ['a', 'b', 'c'];
function fn(){
console.log(arguments);
}
fn(...arr);
应用:
// 1. 数组的克隆
const arr = ['a', 'b', 'c'];
const arrCopy = [...arr];
// 2. 数组的合并
const kuaizi = ['wtl', 'xy'];
const fengkuang = ['zy', 'lh'];
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
// 3. 将伪数组转化为真正的数组
let divs = document.querySelectorAll('div'); // 这是一个对象
let divArr = [...divs]; // 这是一个数组
12. 新的基本数据类型Symbol,类似于字符串,特性如下:
a. Symbol的值是唯一的,用来解决命名冲突的问题
b. Symbol值不能与其他数据类型进行运算
c. Symbol定义的属性不能使用for...in进行循环遍历,使用Reflect.ownKeys获取对象的所有键名。
// 创建Symbol
let a = Symbol();
let b = Symbol('sgg');
let c = Symbol('sgg');
let d = Symbol.for('sgg');
let e = Symbol.for('sgg');
console.log(b === c); // false
console.log(d === e); // true
console.log(b === d); // false
其他基本数据类型:undefined、null、number、string、object、boolean。
13. 使用for...of遍历,只要有Symbol.iterator属性就可以使用for...of遍历
const arr = ['a1', 'a2', 'a3', 'a4']
for (var a of arr) {
console.log(a); //输出a1, a2, a3, a4
}
for (var a in arr) {
console.log(a); //输出0, 1, 2, 3
}
在对象中自定义一个Symbol.iterator属性使其能够使用for...of循环的例子,参考尚硅谷Web前端ES6教程 P19
14. 生成器函数,用于实现异步调用
// 创建
function *gen(){
console.log(111);
yield 'aaa';
console.log(222);
yield 'bbb';
console.log(333);
yield 'ccc';
console.log(444);
}
// 生成器函数返回的是一个迭代器对象
let iter = gen();
// 使用next方法执行,yield为分隔符
iter.next(); // 输出111
iter.next(); // 输出222
iter.next(); // 输出333
iter.next(); // 输出444
for(let v of gen()){
console.log(v); // 会打印yield后面的值
}
15. 生成器函数的返回结果的next方法传入的参数作为对应yield的返回值
function *gen(args){
console.log(args);
let one = yield 'aaa';
console.log(one);
let two = yield 'bbb';
console.log(two);
let three = yield 'ccc';
console.log(three);
}
let iter = gen('AAA');
console.log(iter.next()); // AAA aaa
console.log(iter.next('BBB')); // BBB bbb
console.log(iter.next('CCC')); // CCC ccc
console.log(iter.next('DDD')); // DDD undefined
16. 生成器案例:实现1s后打印111,2s后打印222,3s后打印333
function t1(){
setTimeout(() => {
console.log("111");
iterator.next();
}, 1000);
}
function t2(){
setTimeout(() => {
console.log("222");
iterator.next();
}, 2000);
}
function t3(){
setTimeout(() => {
console.log("333");
iterator.next();
}, 3000);
}
function * gen(){
yield t1();
yield t2();
yield t3();
}
let iter = gen();
gen.next();
17. 生成器案例:依次获取用户数据、订单数据、商品数据,关键是利用next方法传入参数
function getUser(){
setTimeout(() => {
let data = '用户数据'
iterator.next(data);
}, 1000);
}
function getOrder(){
setTimeout(() => {
let data = '订单数据'
iterator.next(data);
}, 1000);
}
function getGood(){
setTimeout(() => {
let data = '商品数据'
iterator.next(data);
}, 1000);
}
function * gen(){
let user = yield getUser();
console.log(user);
let order = yield getOrder();
console.log(order);
let good = yield getGood();
console.log(good);
}
let iter = gen();
gen.next(); // 每过1s,依次打印 用户数据、订单数据、商品数据