ES6新特性

ECMAScript 概述

  • JavaScript是ECMAScript的拓展语言
  • ECMAScript只是提供了最基本的语法
  • JavaScript语言本身就是ECMAScript
  • 2015年起ES就保持了每年一个版本的迭代
  • ES2015就是被称之为ES6

ECMAScript 2015

  • 最新代表版本ES2015
  • 用ES6来泛指所有的新标准
  • 要注意分辨用ES6是特指还是泛指

http://www.ecma-international.org/ecma-262/6.0/

官方网站

  • ES2015弥补了一些缺陷：
    1.解决原有语法的一些问题或者缺陷
    2.对原有语法进行增强
    3.全新的对象，全新的方法，全新的功能
    4.全新的数据类型，数据结构

准备工作

VScode安装插件：

  • Debugger for Chrome
  • Live Server
  • Browser Preview

let与块级作用域

  • 在ES2015之前只有全局作用域和函数作用域
  • let定义的变量在块级作用域能够被访问到
  • 非常适合设置在for循环中的循环变量
  • 通过let定义变量，只在自己的循环中生效
 // 循环实际上有两层作用域
    for(let i = 0;i<10;i++){
      let i = "foo";
      console.log(i);
    }

不会输出循环内的i，而是同一块级下定义的字符串

另外和var有另外一个区别，let不会进行变量声明提升
报错：不能在声明之前调用

const常量

  • 特点：在let的基础上增加了一个【只读】效果
<script>
    const name = "zsd";
    name = "ls";
  </script>

会报错，报错内容为：


改变量也不可再更改了
    const name;
    name = "zs";

报错：
Uncaught SyntaxError: Missing initializer in const declaration（丢失了初始值，所以定义const常量的时候要同时进行赋值）
当定义的是一个对象的时候，其内部的属性值是可以进行更改的，但是当对变量本身进行修改就是不行的

如上所述

最佳实践：不用var，主要用const，配合let

数组的解构

// 数组解构

    const arr1 = [100,200,300];
    const [foo1,bar1,baz1] = arr1;
    console.log(foo1,bar1,baz1);

    const arr2 = [100,200,300];
    const[, , baz2] = arr2;
    console.log(baz2);

    const arr3 = [100,200,300];
    const [foo3,...rest] = arr3;
    console.log(rest);

    const arr4 = [100,200,300];
    const [foo4,bar4,baz4,more4] = arr4;
    console.log(more4);

    const arr5 = [100,200,300];
    const [foo5,bar5,baz5 = 400, more5 = 123] = arr5;
    console.log(more5);
    console.log(baz5);

    const path = "foo/bar/baz";
    const [,,a] = path.split("/");
    console.log(a);
对应的结果

对象的解构

<script>
    // 对象解构
    const obj = { name: 'zs', age: 18 };
    // const { name } = obj;
    // console.log(name);

    const name = "tom";
    // 避免冲突，使用一个新的变量名去接受数据
    const { name:newName = "jack"} = obj; //要是对象里没有name的数据，这个jack才会起效
    console.log(newName);
    console.log(name);
    // 使用解构的好处就是避免了代码书写的重复性麻烦，比如：
    const { log } = console;
    log("hello?");
  </script>
结果

模板字符串

<script>
    // 模板字符串
    const str = `this is 
    a \`string`
    console.log(str)

    const name = "tom"
    // 插值表达式，$(值)
    const str1 = `hey, ${name},${1 + 1},${Math.random()}`
    console.log(str1)

  </script>

插值表达式可以多个插入，中间用逗号，每一项都是$（）

模板字符串标签函数

<script>
    // 模板字符串标签函数
    const name = "zs"
    const gender = true
    function myTagFunc(strings, name, gender) {
      console.log(strings,name,gender)
      // 处理一下 性别
      const sex = gender ? "man" : "woman"
      return strings[0] + name + strings[1] + sex + strings[2]
    }
    const str = myTagFunc`hi, ${name} is a ${gender}`
    console.log(str)
  </script>

函数myTagFunc中，strings是个数组，分别有三项
1.'hi '
2.' is a '
3.''
传入的参数，name，gender，分别加入就可
得到结果应该为：
hi, zs is a man

字符串拓展方法

  • includes()
  • endsWith()
  • startsWith()
 // 字符串扩展方法
    const msg = 'Error: foo is not defined.'
    console.log(msg.startsWith('Error'))    //以xxx为开头
    console.log(msg.endsWith('.'))          //以xxx结尾
    console.log(msg.includes('foo'))        //是否包含xxx

参考默认值

  <script>
    // 函数参数的默认值
    function foo(bar,enable = true){
      // enable = enable || true;
      // enable = enable === undefined ? true : enable;
      console.log('foo invoked enable:')
      console.log(enable);
    }
    foo('bar');
  </script>

如果有多个参数的话，设置了默认值的那个属性应该尽量往后拿，避免程序出现错误

剩余操作符

  • ...操作符
<script>
    // 剩余参数
    function fun(n,...args) {
      console.log(args)
    }
    fun(1,2,3,4)
  </script>
args接受了2,3,4,三个参数，可以当成数组来用
// 展开数组操作
    const arr = ['foo', 'bar', 'baz']
    // console.log(arr[0],arr[1],arr[2])
    // console.log.apply(console,arr)

    console.log(...arr)
展开数组

箭头函数

<script>
    // 箭头函数 

    const plus = (a, b) => {
      console.log('plus invoked')
      return a + b
    }
    console.log(plus(1,2))
    
    const arr = [1,2,3,4,5,6,7]
    // const arr1 = arr.filter(function (item) {
    //   return item % 2
    // })
    // 用箭头函数制作数组筛选函数
    const arr1 = arr.filter(i => i % 2)
    console.log(arr1)
  </script>
结果

箭头函数的this

<script>
    // 箭头函数与 this
    const person = {
      name: "tom",
      // 当实际书写时，遇到了需要书写替换this的变量的时候，可以用箭头函数进行避免
      sayHi : function(){
        setTimeout(() => {
            console.log(`hi,my name is ${this.name}`)
        }, 1000);
      }
    }
    person.sayHi()
  </script>

对象字面量的增强

 <script>
    // 对象字面量增强
    // 可以在外面定义属性值，对象里面直接声明就可以用，属性值也存在
    const bar = "bar";
    const age = "age";
    const obj = {
      name : "tom",
      // bar : bar,
      bar,
      // 对象内部函数里的this是指向的对象本身
      sayHi() {
        console.log("hi");
        console.log(this);
      },
      // 也可以用中括号新建属性到对象字面量里，中括号内部是属性名，也可以用来更改属性值
      age,
      [age] : 18,
      [1+2] : 18
    }
    console.log(obj);
    obj.sayHi();
  </script>
结果

对象拓展方法

Object.assign

  • 将多个源对象的属性复制到一个目标对象中
 // 对象扩展方法
    // Object.assign 方法
    const sourse1 = {
      a : 123,
      b : 123
    }
    const target = {
      a : 456,
      b : 789
    }
    const sourse2 = {
      b : 678,
      c : 789
    }
    // // 后面的参数如果有相同的属性会将前一个参数的对应属性覆盖掉，第一个参数是接收属性的对象
    const result = Object.assign(target,sourse1,sourse2);
    console.log(target);
    // 判断是否是同一个对象，结果的确是同一个
    console.log(target === result);
  • 复制一个对象单独存储对象的复制内容，不更改原对象的任何数据
// 复制对象
    function fun(obj){
      // 内部更改时，不要更改掉外部的对象
      const newObj = Object.assign({},obj)
      newObj.name = 'tom';
      console.log(newObj);
    }
    const obj = {
      name : 'jack',
      age : 18
    }
    fun(obj)
    console.log(obj)
  • 应用实例：接收对象数据options
    // 应用，在options对象接收参数的时候可以简化
    function Block(options) {
      Object.assign(this,options)
    }
    const block1 = new Block({width:100,height:100,x:1,y:1});
    console.log(block1);

直接通过Object.assign方法将数据传入this，可以直接读取出来


Object.is

  • 判断两个值是否相等
 <script>
    // 对象扩展方法
    // Object.is 方法
    console.log(
      Object.is(+0,-0),
      Object.is(NaN,NaN)
    )
  </script>

了解为主，编程中主要还是使用==和===

Class类

class Person{
      constructor (name,age){
        this.name = name;
        this.age = age;
      }
      sayHi (){
        console.log(`hi,my name is ${this.name}`)
      }
    }
    const p1 = new Person("ii",18);
    console.log(p1);
    p1.sayHi();

优化了构造函数，可以用class的方法直接定义一个构造函数，对象里的函数方法也可以直接声明，不需要放在外面用原型声明

静态方法static

  • ES2015中添加了新的关键词static
 // 静态方法
    class Person {
      constructor (name, age) {
        this.name = name;
        this.age = age;
      }
      sayHi () {
        console.log(`hi,my name is ${this.name}`)
      } 
      static create (name,age) {
        // console.log(this) //类型里的静态方法的this指向的是类型自己
        return new Person(name,age)
      }     
    }
    const p1 = Person.create("zs",19)
    console.log(p1)

可以将构造函数下的创建实例写作静态方法写在类型里面，如上所示，在外面直接调用就行了，注意的是类型里的静态方法的this指向的是类型自己


类的继承

// 类之间的继承
    class Person {
      constructor (name, age) {
        this.name = name;
        this.age = age;
      }
      sayHi () {
        console.log(`hi,my name is ${this.name}`)
      }   
    }
    class Student extends Person {
      constructor(name,age,number){
        super(name,age);//从父类继承的属性
        this.number = number;
      }
      hello(){
        super.sayHi();
        console.log(`学号是 ${this.number}`);
      }
    }
    const s1 = new Student("li",18,101);
    s1.hello();

constructor内部要用父类的属性时，要用super来调用

Set全新数据结构

  • 添加数据到Set集合
 const s = new Set();
    // add本身返回的就是自身，所以可以进行链式调用，另外
    // ，Set内要是有重复的值就会被直接忽略掉
    s.add(1).add(2).add(3).add(4).add(2);
    console.log(s);
  • 遍历集合的数据
// 遍历集合的数据
    s.forEach(i => console.log(i));
    for (let i of s) {
      console.log(i);
    }
  • 查看集合长度有多少
    console.log(s.size)
  • 查看集合中是否有指定的值
    console.log(s.has(4));
  • 删除掉某个值，成功返回true，失败返回false
    console.log(s.delete(3));
    console.log(s);
  • 删除所有，清空集合
    s.clear()
    console.log(s);
  • 数组去重，去重原理是set不含重复的数据
    去重完毕之后转回数组也有俩个办法
 const arr = [1,2,3,3,4,5,6,6,7,7,8];
    // 转回数组
    // const b = Array.from(new Set(arr));
    // 通过...展开数组
    const b = [...new Set(arr)];
    console.log(b);

Map数据结构

 //一一对应
    const map = new Map();
    const a = { a : 1 };
    const b = { b : 2};
    map.set(a,100);
    map.set(b,200)
    console.log(map);
    console.log(map.get(a));

    // 遍历map
    map.forEach((value,key) =>{
      console.log(key,value);
    })
    // map.has(); //判断有没有某个键
    console.log(map.has(a));
    console.log(map.has(b));
    // map.delet(); //删除某个键
    console.log(map.delete(a));
    console.log(map);
    // map.clear(); //清空所有
    map.clear()
    console.log(map);

Symbol数据类型

  • 为了解决命名重复冲突的问题，Symbol出现了，作用就是表示一个独一无二的值
  • 还有的作用就是给对象添加一个外面不可访问到的私有属性，对象添加属性，都用Symbol()作为属性名是不会出现覆盖现象的

    最主要的作用就是为对象添加独一无二的属性标识符

Symbol补充

  • Symbol内置一个for方法，内置的参数一旦相同，两个变量就会是一样的数据
// Symbol内有个for方法，内置的参数一旦相同，就不再是独一无二的变量了
    // 另外参数如果不是字符串类型，就会自动转为字符串类型
    const a = Symbol.for(true)
    const b = Symbol.for('true')
    console.log(a === b)
  • toStringTag常量
 const obj = {
      [Symbol.toStringTag]: "XObject"
    }
    console.log(obj.toString())
自定义symbol的tostring的内容
  • getOwnPropertySymbols()方法
    for in这个循环是拿不到symbol的值，object.keys也不行，JSON.stringify也拿不到symbol的数据，但是getOwnPropertySymbols可以拿到，但是只能拿到symbol，拿不到普通属性名
console.log(Object.getOwnPropertySymbols(obj))

for of遍历

  • 将来就是遍历所有数据结构的统一方式
  • 遍历普通数组
    const arr = [100, 200, 300, 400]

    // for(const item of arr){
    //   console.log(item)
    // }

    // 能够打断遍历，自定义打断位置，forEach不行
    for(const item of arr){
      console.log(item)
      if(item >= 200){
        break;
      }
  • 遍历Set集合
    // 遍历Set
    const s = new Set(['foo','bar','baz'])
    for (const item of s){
      console.log(item);
    }
  • 遍历Map
    const m = new Map()
    m.set("foo",1)
    m.set("bar",2)
    for(const [key,value] of m){
      console.log(key,value);
    }

现阶段不建议使用for of遍历对象

ES2015其他内容

  • 可迭代接口
  • 迭代器模式
  • 生成器
  • Proxy 代理对象
  • Reflect 统一的对象操作 API
  • Promise 异步解决方案
  • ES Modules 语言层面的模块化标准
    后面会逐一解锁对应的内容

ES2016

  • 更新了数组的includes()方法，判断某个数据在数组中是否存在
    const arr = [1,true,NaN,23,'hello']
    console.log(arr.includes(NaN))
结果
  • 更新了指数运算符**
console.log(2 ** 10)
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,496评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,407评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,632评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,180评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,198评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,165评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,052评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,910评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,324评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,424评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,017评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2赞 353

推荐阅读更多精彩内容

  • ES6新特性
    - ECMAScript 与 Javascript - ECMAScript的发展过程 - ECMAScript2...
    爵迹01阅读 224评论 0赞 1
  • es6新特性
    ES6 新特性 ES6 新特性 一ES6简介 二块级作用域绑定1 let声明2 const声明Constant D...
    _无为_阅读 842评论 0赞 3
  • ES6的新特性
    一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6（亦称 ...
    一岁一枯荣_阅读 6,071评论 8赞 25
  • ESMAScript6（es6）新特性
    ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMA...
    陈yc阅读 1,464评论 1赞 14
  • ES6新特性一览
    原文地址：https://juejin.im/post/5ca2e1935188254416288eb2 ES全称...
    我的昵称好听吗阅读 16,721评论 2赞 8