let / const
ES6 种用来定义变量和常量的
机遇 CONST 创建的变量，变量存储的值不能被修改（常量）
let a = 12;
a = 13;
console.log(a); //13
const b = 12;
b = 13;
console.log(b); //Uncaught TypeError: Assignment to constant variable.
let 和 var 的区别
let不存在变量提升（当前作用域中，不能在let声明前使用变量）同一个作用域中，
let不允许重复声明let解决了typeof的一个暂时性死区问题全局作用域中，使用
let声明的变量没有给window加上对应的属性let会存在块作用域（除对象以外的大括号都可以被看作块级私有作用域）
箭头函数及 THIS 问题
ES6 中新增了创建函数的方式：“箭头函数”
真是项目中是 箭头函数和
function这种普通函数混合使用
箭头函数简化了创建函数的代码
// 箭头函数的创建都是函数表达式方式（变量=函数），这种模式下，不存在变量提升，也就是函数只能在创建完成之后才能被执行（创建代码之后执行）
const fn = (x) => {
// 函数体
console.log(x)
};
fn(10);
// 如果形参只有一个，小括号可以不加
const fn1 = n => {}
// 如果函数体中只有一句话，并且是 return xxx 的形式，可以省略大括号和return
const fn2 = n => n*n;
/**
function fn(n) {
return function (m) {
return m+(++n)
}
}
*/
const fn3 = n => m => m+(++n);
箭头函数中没有arguments，但是可以给予剩余运算符获取参数集合，而且 ES6 中是支持给参数设置默认值的。
let fn = a => console.log(arguments);
// ReferenceError: arguments is not defined
let fn1 = (context = window) => {
// 设置参数默认值
}
// 剩余运算符取参数集合
let fn2 = (context, ...args) => {
// 设置参数默认值
console.log(args)
}
fn1() // context => window
fn2(1,2,3,4) // args => [2, 3, 4]
fn2() // args => []
箭头函数中没有自己的 this，其中所用到的 this 都是箭头函数所处的上下文中的 this。
真实项目中，一旦用到 this，要慎用 箭头函数。
window.name = "Mac";
let obj = { name: 'Obj' };
let fn = n => console.log( this.name );
fn(10); // this: window
fn.call(obj, 10); // this: window
解构赋值
当左侧出现和右侧值相同的结构，以此快速获取我们需要的内容。
项目中最常用的就是对数组和对象的解构赋值。
let arr = [10, 20, 30, 40, 50];
// ...x 拓展运算符：把剩下的内容存储到x中（x是一个数组），但是他只能出现在最后一个元素
let [n, m, ...x] = ary;
不写变量跳过不想要赋值的值：
let [n, , m, , , x = 0] = arr;
console.log(n, m, x) // 10 30 0
对象的解构赋值
let obj = {
name: 'xx',
age: 11,
co: {
name: 'zxcv',
pos: 'lorem ipsum'
}
}
... 的作用
- 拓展运算符（多用在解构赋值中）
- 展开运算符（所用在传递参数中）
- 剩余运算符（多用在接收参数中）
// 结构赋值
let [n, ...m] = [12, 23, 34];
// n: 12 m:[23, 34]
// 展开运算符
let arr = [12, 23, 14, 32, 43, 90];
let min = Math.min(...arr);
// 浅克隆
let cloneArr = [...arr]; // 数组克隆
let obj = {name:"steven", age: 12}; // 对象克隆
let cloneObj = {...obj, gander: "girl"}
// 接收参数
let fn = (n, ...arg) => {
// fn body
}
fn(10, 20, 30); // n: 10 arg: [20, 30]
class 创建类
传统 ES5 中创建类的方法：
function Fn() {
this.X = 100;
};
Fn.prototype.getX = function() {
console.log(this.x);
};
var f1 = new Fn();
f1.getX();
// 也可以把构造函数当作普通函数执行
Fn();
// 也可以把Fn当作普通的对象设置键值对，毕竟js中万物皆对象
Fn.queryX = function() {};
Fn.queryX();
ES6中类的创建：
class Fn{
constructor() {
this.x = 100;
}
// 直接写的方法就是加在原型上的 -> Fn.prototype.getX()
getX() {
console.log(this.x);
}
// 设置私有方法，把当前的Fn当作普通的对象设置键值对
static queryX() {}
}
// 也可以单独增加属性方法
Fn.prototype.getY = function() {};
let f = new Fn(10, 20);
构造函数的 prototype 属性，在 ES6 的 class 上继续使用，所有 class 中定义的方法都在类的 prototype 属性上面。
class Point {
constructor () {}
toString() {}
toValue() {}
}
// 等同于
Point.prototype = {
constructor() {},
toString() {},
toValue() {},
}
在类的实例上调用方法，就是调用原型上的方法：
class B {};
let b = new B();
b.constructor === B.prototype.constructor;
类的方法内部如果含有this，它默认指向类的实例。
模版字符串
let str = 'line one'
let html = `
- ${str}
`