ECMAScript6学习笔记

CODING 发布于2019-08-21 10:47 / 999人阅读

摘要：笔记和和是块作用域的，是声明常量用的。一个对象如果要有可被循环调用的接口，就必须在的属性上部署遍历器生成方法原型链上的对象具有该方法也可。这种方式会访问注册表，其中存储了已经存在的一系列。这种方式与通过定义的独立不同，注册表中的是共享的。

ECMAScript6 笔记 let 和 const

let和const是块作用域的，const是声明常量用的。

{let a = 10;}
a // ReferenceError: a is not defined.

let和const不存在变量提升

console.log(foo); // ReferenceError
let foo = 2;

var tmp = 123;
if (true) {
  tmp = "abc"; // ReferenceError
  let tmp;
}

function bar(x = y, y = 2) {
  return [x, y];
}
bar(); // 报错

const 不可变的只是引用的地址

const foo = {};
foo.prop = 123;
foo.prop// 123
foo = {} // TypeError: "foo" is read-only不起作用

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});
foo.prop = 123; // 不起作用

class

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static classMethod() {
        console.log("fathor jt:hello");
    }
}
class ColorPoint extends Point { //mix(Cons1,Cons2)
    constructor(x, y, color) {
        super(x, y);
        this.color = color; // 正确
    }
    //原型方法
    ptMethod(){
        console.log("pt:hello");
    }
    static classMethod() {
        //静态方法也是可以从super对象上调用
        super.classMethod();
        console.log("jt:hello");
    }
    get prop() {
        return "getter";
    }
    set prop(value) {
        console.log("setter: "+value);
    }
}

Iterator和for...of循环

Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

let arr = ["a", "b"];
let iter = arr[Symbol.iterator]();
iter.next() //{ value: "a", done: false }
iter.next() //{ value: "b", done: false }
iter.next() //{ value: undefined, done: true }

上面代码中，变量arr是一个数组，原生就具有遍历器接口，部署在arr的Symbol.iterator属性上面。所以，调用这个属性，就得到遍历器对象。

一个对象如果要有可被for...of循环调用的Iterator接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }
  [Symbol.iterator]() { return this; }
  next() {
    var value = this.value;
    if (value < this.stop) {
      this.value++;
      return {done: false, value: value};
    } else {
      return {done: true, value: undefined};
    }
  }
}
for (var value of new RangeIterator(0, 3)) {
  console.log(value);
}

Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

symbol键的设计初衷是避免初衷，因此JavaScript中最常见的对象检查的特性会忽略symbol键。例如，for-in循环只会遍历对象的字符串键，symbol键直接跳过，Object.keys(obj)和Object.getOwnPropertyNames(obj)也是一样。但是symbols也不完全是私有的：用新的API Object.getOwnPropertySymbols(obj)就可以列出对象的symbol键。另一个新的API，Reflect.ownKeys(obj)，会同时返回字符串键和symbol键。（我们将在随后的文章中讲解Reflect(反射) API）

获取symbol的三种方法

调用Symbol()。这种方式每次调用都会返回一个新的唯一symbol。

调用Symbol.for(string)。这种方式会访问symbol注册表，其中存储了已经存在的一系列symbol。这种方式与通过Symbol()定义的独立symbol不同，symbol注册表中的symbol是共享的。如果你连续三十次调用Symbol.for("cat")，每次都会返回相同的symbol。注册表非常有用，在多个web页面或同一个web页面的多个模块中经常需要共享一个symbol。

使用标准定义的symbol，例如：Symbol.iterator

var s1 = Symbol();
var s2 = Symbol();
s1 === s2 // false

var mySymbol = Symbol();
var a = {
  [mySymbol]: "Hello!"
};

promie 生成器 Generators 集合 箭头函数

箭头函数提供了更简洁的语法，并且箭头函数中 this 对象的指向是不变的，this 对象绑定定义时所在的对象

// bad
"use strict";
var fn = function fn(v) {
  return console.log(v);
};

// good
var fn= (v=>console.log(v));

Module Babel下的ES6兼容性与规范

http://imweb.io/topic/561f9352883ae3ed25e400f5?utm_source=tuicool&utm_medium=referral

专线服务服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86190.html

Vue.js新手入门指南[转载]

摘要：就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。单页应用程序顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一...

MartinHan 2019-08-23 11:50 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 评论0 收藏0
ES6学习摘要（01）（新人学习）

摘要：入门一前言由于最近本人在学习，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于的新人学习摘要吧。的作用域与命令相同只在声明所在的块级作用域内有效。块级作用域新增方式和实际上为新增了块级作用域。同时，函数声明还会提升到所在的块级作用域的头部。 ECMAScript6/ES6 入门一、前言由于最近本人在学习ES6，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于ES6的新人学习摘要吧。...

dmlllll 2019-08-21 17:59 评论0 收藏0
常用ECMAScript6语法归纳

摘要：对象的解构赋值函数执行后，返回的是一个对象。分别取出对象中属性为和的值，根据解构赋值的规则，在左侧声明变量，放在大括号中，变量名要和属性名保持一致。箭头函数在中，箭头函数就是函数的一种简写形式允许使用箭头定义函数。原文博客地址，欢迎学习交流:点击预览声明变量可以使用let、const关键字声明变量，而不推荐使用var声明变量 var声明变量的问题：可以多次重复声明同一个变量...

raledong 2019-08-22 15:14 评论0 收藏0