ES6 温故知新

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 = `
<ul class="ls clear">
    <li>${str}</li>
</ul>
`
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 特别说明,为便于查阅,文章转自https://github.com/getify/You-Dont-Know-JS...
    杀破狼real阅读 586评论 0 0
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,818评论 0 1
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,046评论 3 37
  •   何为ES6语法糖?即这些事情ES5也可以做,只是稍微复杂一些,而ES6提供了非破坏性的更新, 目的是提供更简洁...
    果汁凉茶丶阅读 1,368评论 0 4
  • 李云独自一人坐在阳台飘窗上,看着手机屏幕里,微信群同事们都在抢红包,恭喜这次评优评先的获选者。好一会儿,李云也默默...
    雷达故事阅读 160评论 0 1