1.let 变量声明以及特性

  声明变量

       let a;
    let b, c, d;
    let e = 1;
    let f = 2, g = 3;

  特性

    1.不能重复声明

    2.块级作用域  只在块级作用域有效

    3.没有变量提升  

    4.不影响作用域链

2.const 常量声明以及特性

  特性

    1.必须有初始值

    2.一般常量使用大写

    3.常量的值不能修改

    4.也是块级作用域

    5.对于数组和对象的修改,不算对常量的修改,不会报错(可以对数组和对象进行修改,指向的地址没有改变)

3.变量的解构赋值

  1.数组的解构

    const RNG = ['uzi', 'mlxg', 'letme', 'ming']
    let [a, b, c, d] = RNG;// 每个值就是数组的位置对应的值

  2.对象的解构

  const UZI= {
    name: '自豪',
    age: 22,
    love: 'LOL',
    lol: function(){
      alert('打lol')
    }
  }
  let {name, age, love} = UZI;// 每个值是对象中对应的值
  let {lol} = UZI;
  lol();// 使用

4.模板字符串  ``

  1.内容中可以直接出现换行符,单引号双引号内容不能直接用换行符(需要通过引号加号拼接)

    let str = `lol s10
      tes 是冠军`;// 可以这样直接使用换行符

  2.直接进行变量的拼接  ${}

    let lol = 'lol十周年';
    let uzi = `${lol} 中国队夺冠`

5.对象的简写

  let name = 'zhangning187';

  let change = function(){
    console.log('努力改变');
  }   const supwisdom = {
    name,
    change
  }

6.箭头函数及声明特点  =>

  let fn = (a, b) => {
    return a + b;
  }
  fn(1, 2);// 3

  特点

    1.this是静态的,this始终是指向函数声明时所在作用域下的this值,他没有自己的this

    2.不能作为构造实例化对象

    3.不能使用arguments变量

    4.箭头函数的简写   

      let add = n => {
        return n*2;
      }

      省略小括号,当形参有且只有一个的时候可以省略

      省略花括号,当代码体只有一条语句的时候,return 必须省略,语句的执行结果就是函数的返回值  

      let add = n => n*2; 

7.函数参数的默认值

  1.形参初始值

    function add(a, b, c = 10) {// 当不传递c的时候,c的默认值是10,尽量把具有默认值的参数放在后面
      return a + b + c;
    }
    add (1, 2);// 13

  2.与解构赋值结合

    function con({name, age, love, height = '18'}) {// 还可以给默认值
      console.log(age);// 24
      console.log(height);// 没有传递,使用默认值 18
    }
    con({
      name: 'zhangning187',
      age: 24,
      love: 'js'
    })

8.rest参数

  用于获取参数的实参,用于代替arguments

  rest参数是一个数组和es5中的arguments不一样,arguments里面是一个对象

  获取实参的方式

    function data(a, b, ...args) {// rest 参数必须放到参数的最后面
      console.log(a);// 1
      console.log(b);// 2
      console.log(args);// [3, 4, 5, 6, 7]
    }
    data(1, 2, 3, 4, 5, 6, 7);

9.扩展运算符  ...

  可以将数组转换为逗号分隔的参数序列,将一个数组分割,并将各个项作为分离的参数序列传递给函数

  const RNG = ['UZI', 'MLXG', 'LETME', 'MING'];
  console.log(...RNG)// UZI MLXG LETME MING  解构之后的序列
  console.log(RNG);// ['UZI', 'MLXG', 'LETME', 'MING']  返回的是一个数组
  const a = [1,2], b=[3,6];
  const c = [...a, ...b];// [1, 2, 3, 6]

10.Symbol  新的原始数据类型,表示独一无二的值

  他是javaScript 语言的第七种数据类型,是一种类似于字符串的数据类型

  特点

    1.Symbol 的值是唯一的,用来解决命名冲突的问题

    2.Symbol 值不能与其他数据进行运算,也不能自己运算 + - * /

    3.Symbol 定义的对象属性不能使用for in循环遍历,但是可以使用 Reflect.ownKeys 来获取对象的所有键名

    创建Symbol
    let s = Symbol();// s不可见,在内部实现唯一性
    let s2 = Symbol('zhangning187');// 这里面的字符串只是一个标志,Symbol返回的值都是唯一的
    let s3 = Symbol('zhangning187');
    console.log(s2 == s3);// false,确定唯一性

    Symbol.for()方法创建,这是一个对象,这种方式可以得出唯一的Symbol值
    let s6 = Symbol.for('zhangning187');
    let s8 = Symbol.for('zhangning187');
    console.log(s6 ==s8);// true  得到唯一的Symbol值

    // USONB you are so niubility 你很牛逼

    undefined  string Symbol  object  null number  boolean

  对象添加Symbol类型的属性

    let zn = {

      up: function(){},
      down: function(){},
      name: 'zhangning187',
      age: 24
    }
    // 向对象zn中添加 up down 方法
    // zn.up = function(){}// 这个可以添加但是不确定zn中是否存在up方法,可能会覆盖原来的up方法
    // 这时候需要考虑通过Symbol添加唯一的方法
    // 声明一个对象
    let methods = {       up: Symbol(),
      down: Symbol()
    }
    zn[methods.up] = function(){       console.log('我可以爬楼');
    }
    zn[methods.down] = function(){       console.log('我可以下楼');
    }
    console.log(zn);// 已经添加唯一的方法 up down
    
    let UZI = {       name: '自豪',
      // Symbol(): function(){},// 这里不能这样直接使用, Symbol()是一个表达式,是一个动态的
      [Symbol('lol')]: function(){         console.log('我会打lol');
      },
      [Symbol('篮球')]: function(){// Symbol()中还可以添加描述字符串         console.log('我可以打篮球')
      }
    }
    console.log(UZI);

11.迭代器(Iterator)

  迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署Iterator接口,就可以完成遍历操作

  1.ES6创造了一种新的遍历命令for...of循环,Iterator接口提供for...of消费

  2.原生具备iterator接口的数据

    Array Arguments Set Map String TypedArray NodeList

  3.工作原理

    a 创建一个指针对象,指向当前数据结构的起始位置

    b 第一次调用对象的next方法,指针自动指向数据结构的第一个成员

    c 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员

    d 每调用next方法返回一个包含value和done属性的对象

    自定义遍历数据的时候,要想到迭代器

12.生成器函数的声明与调用

  生成器函数是ES6提供的一种异步编程解决方案,与传统函数完全不同,就是一个特殊的函数     

    // 声明    
    function * gen(){// * 可以靠左,也可以靠右,还可以放在中间
      // console.log('hello');
      yield '2020lpl牛批';// yield 语句可以算作函数代码的分隔符
      let two = yield ‘uzi 退役了’;
      console.log(two);
      yield '湖人总冠军';
    }
    // 执行
    let iterator = gen();
    // console.log(iterator);// 返回结果是一个迭代器对象
    console.log(iterator.next());// 需要执行迭代器对象中的next()方法,才会执行生成器函数
    console.log(iterator.next());// 每个next()只会执行里面一个yield语句,这个会输出 ‘uzi 退役了’
    // 传递参数 参数将作为上一个yield语句的返回结果
    console.log(iterator.next('AAA'));// 第三次调用传递的参数将作为第二个yield 的返回结果 打印为AAA
    // 使用for of循环遍历输出
    for(let v of gen()){
      console.log(v);// 依次输出yield语句中的值
    }

  案例:1s输出 111 2s输出 222 3s输出 333

    

    function one(){
      setTimeout(()=>{
        console.log('111')
        iterator.next();
      }, 1000)
    }
    function two(){
      setTimeout(()=>{
        console.log('111')
        iterator.next();
      }, 1000)     }
    function three(){
      setTimeout(()=>{
        console.log('111')
      }, 1000)     }
    // 生成器函数
    function * gen(){
      yield one();
      yield two();
      yield three();
    }
    // 调用生成器函数
    let iterator = gen();
    iterator.next();

13.Promise 基本使用

  Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果

    1 Promise 构造函数  Promise(excutor){}

    2 Promise.prototype.then  有两个参数,两个参数都是函数,

      Promise对象成功状态执行then中第一个函数,失败执行第二个函数

    3 Promise.prototype.catch

    // 实例化
    const p = new Promise((resolve, reject) => {
      // 通过resolve,reject这两个函数来改变Promise对象的状态,
      // resolve会改变p的状态为成功,reject会改变p的状态为失败,然后去执行then里面的方法
      // 执行异步操作,以定时器为例,定时器也是异步
      setTimeout(()=>{
        //let data = '异步执行成功';
        // resolve(data);// 调用resolve函数, p会变成一个成功的状态,会执行then中的第一个方法
        let err = '执行失败';
        reject(err);// 调用reject函数,p会变成一个失败的状态,会执行then中的第二个方法
      }, 1000)
    })
    // 成功会调用 promise 对象 then 方法
    p.then(value => {// 成功
      // console.log(value);// 控制台打印:异步执行成功
    }, reason => {// 失败
      console.error(reason)
    })

  Promise.prototype.then 特性 

    // then方法的返回结果是Promise对象,对象状态由回调函数的执行结果决定
    const p = new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve('成功');
        reject('失败');
      }, 1000);
    });
    // then 的返回结果是一个Promise对象,就是result也是一个Promise对象,它的状态由函数的执行结果决定的
    const result = p.then(value => {
      console.log(value);
      // 1.如果返回的结果是 非Promise 类型的属性,状态为成功,返回值return 中的值
      // 如果不写return,函数内部不写return返回结果是undefined,也不是Promise对象,状态也是成功
      // return 123;
      // 2.是 promise 对象, 该对象返回的状态就决定了then方法返回promise对象状态
      return new Promise((resolve, reject)=>{
        // resolve('ok');// then方法返回promise对象状态为成功
        reject('no');// then方法返回promise对象状态为失败
      })
      // 3.抛出错误  then方法返回promise对象状态为失败,错误值为抛出错误的值
      throw new Error('出错了');
    }, reason => {
      console.err(reason);
    });
    console.log(result);
    // 综上总结,then方法可以链式调用  可以改变回调域的现象
    p.then(value=>{}, reason=>{})
      .then(value()=>{}).then();

  举例:多个请求都返回之后,获取其中的数据

    const p = new Promise((resolve, reject)=>{
      resolve('第一次返回成功')
    });
    p.then(value=>{
      return new Promise((resolve, reject)=>{
        resolve([value, '第二次返回成功'])
      });
    }).then(value=>{
      return new Promise((resolve, reject)=>{
        resolve([...value, '第三次返回成功'])
      });
    }).then(value=>{
      console.log(value);// 返回值为三次请求都返回成功以后的值
    });

 14.集合set

  新的数据结构Set(集合),它类似于数组,成员的值都是唯一的,集合实现了iterator接口,所以可以使用扩展运算符和for of遍历

  集合的属性和方法

    1 size  返回集合的元素个数

    2 add  添加一个新元素,返回当前集合

    3 delete  删除元素,返回boolean值

    4 has  检测集合中是否包含某个元素,返回boolean值

    5 clear  清空

    // 声明
    let s = new Set();
    let s2 = new Set([1, 2, 3, 6, 7]);
    console.log(s2);// 5
    s2.add(8);// 添加新元素
    console.log(s2);// 输出 {1, 2, 3, 6, 7, 8}
    s2.delete(8);
    console.log(s2);// 输出 {1, 2, 3, 6, 7}
    console.log(s2.has(8));// false
    // s2.clear();// 清空     let arr = [1, 2, 3, 3, 3, 6, 6, 8];
    let arr2 = [1, 3, 6, 7, 8];
    // 数组去重
    let result = [...new Set(arr)];
    // 交集
    let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
    // 并集
    let result = [...new Set([...arr, ...arr2])];
    // 差集 arr有arr2中没有
    let result = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));

15.Map集合

  类似于对象,也是键值对的集合,但是 键 不限于字符串,各种类型的值(包括对象)都可以当作键,

   map也实现了 iterator 接口,所以可以使用扩展运算符和for of进行遍历

    1 size  返回 Map 的元素个数

    2 set  增加一个新元素,返回当前Map

    3 get  返回键名对象的键值

    4 has  检测Map中是否包含某个元素,返回boolean值

    5 clear  清空集合,返回undefined

    // 声明
    let m = new Map();
    m.set('name', 'zhangning');
    m.set('change', function(){console.log('变得更努力')});// 键 change 值 一个function
    let key = {company: 'supwisdom'};
    m.set(key, [1, 2, 3]);//键 对象 值 数组
    m.size;// 获取m个数
    m.delete('name');// 删除键值对
    m.get('change');// 获取键对应的值
    // m.clear();// 清空
    for(let v of m){console.log(v);}

16.class 类

  通过class可以定义类,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已。

    1 class  声明类

    2 constructor  定义构造函数初始化

    3 extends  继承父类

    4 super  调用父级构造方法

    5 static  定义静态方法和属性

    6 父类方法可以重写

    // es5通过 构造函数实例化 对象的方法

    // 人
    function People(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    // 这个height这种添加方式是属于函数对象的,不属于实例对象,这样的属性称之为静态成员
    People.height = '180';
    People.prototype.height1 = '100';
    // 添加方法
    People.prototype.play = function(){
      console.log('打篮球');
    }
    let zn = new People('zhangning', '男');
    zn.play();// 输出 打篮球
    console.log(zn);
    console.log(zn.height);// 输出 undefined
    console.log(zn.height1);// 输出 100,必须通过prototype添加才能添加到实例对象上

  通过class实现

    class People{
      // 静态属性 static,对于static 标注的方法属于类,不属于实例对象
      static height = '100';
      static change(){
        console.log('我可以改变世界');
      }
      // 构造方法 名字不能更改(在使用new People的时候会自动执行实例对象上的constructor方法)       
      constructor(name, sex){
        this.name = name;
        this.sex = sex;
      }
      // 添加方法必须使用该语法,不能使用es5的完整形式(play: function(){} 这种形式不支持,必须使用play()形式)
      // 成员属性
      play(){
        console.log('打篮球');
      }
    }
    let zn = new People('zhangning', '男');
    console.log(zn);
    console.log(zn.height);// undefined  static 标注的方法属于类,不属于实例对象
    console.log(People.height);// 100  

  使用es5构造函数实现继承  

    // 举例 chinese 继承 People 属性
    function People(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    People.prototype.play = function(){
      console.log('打LOL');
    }
    function Student(name, sex, like, height){
      // 通过call方法,改变this值,this指向chinese中的this,也就是chinese的一个实例对象
      People.call(this, name, sex);
      this.like = like;
      this.height = height;
    }
    // 设置子集构造函数原型
    Student.prototype = new People;// 这样就会有父级的一个方法
    Student.prototype.constructor = Student;// 做一个校正,没有这行代码也无所谓
    // 声明子类方法
    Student.prototype.photo = function(){
      console.log('去拍照');
    }
    // 实例化
    const zn = new Student('zhangning', '男', '打篮球', '187');
    console.log(zn)

  使用es6 class 类 实现继承 及 父类方法的重写

    // 声明父类
    class People{
      // 父类构造方法
      constructor(name, sex) {
        this.name = name;
        this.sex = sex;
      }
      // 父类成员属性
      play(){
        console.log('打LOL');
      }
    }
    // 声明子类 使用extends 继承父类
    class Student extends People {
      // 构造方法
      constructor(name, sex, like, height){
        super(name, sex);// super 就是父类的constructor构造函数,这样调用
        this.like = like;
        this.height = height;
      }
      photo(){
        console.log('去拍照');
      }
      // 对父类中的play方法进行重写,子类是不能去调用父类的同名方法的,       play(){
        // super(); 不允许,在普通的成员方法里面是不能出现super()去调用父类的同名方法的,会报错,只能完全重写
        console.log('我会打LOL,还会打篮球');
      }
    }
    const zn = new Student('zhangning', '男', '打篮球', '187');
    console.log(zn)

  class 中 getter 和 setter 设置

    class People{
      get like(){
        return '打篮球';
      }
      set like(newVal){
        // 通过传过来的newVal值,进行操作,改变 like
        console.log('改变like值');
      }
    }
    let p = new People();
    console.log(p.like)// 输出 打篮球
    p.like = 'LOL';// 然后通过 set like 进行操作

17.对象数值扩展

  1 Object.is  判断两个值是否完全相等

    Object.is(1, 1);// true

    和 === 很相似,唯一区别就是 NaN === NaN 为 false, Object.is(NaN, NaN) 为true

  2 Object.assign  对象的合并

    const c1 = {name: 'znn'};
    const c2 = {name: 'zhangning', height: 187};
    Object.assign(c1, c2);// 如果两个对象中存在相同属性,c2 中覆盖c1中的属性内容

  3 Object.setPrototypeOf  设置原型对象

    const zn = {
      name: 'zhangning',
    }
    const p = {
      h: true,
      sfsfdf: 'fasfasdf'
    }
    Object.setPrototypeOf(zn, p);// 设置 zn 的原型里面有 p
    Object.getPrototypeOf(zn);// 获取 zn 的原型
    console.log(zn);// 打印看下

ECMASctipt6总结的更多相关文章

  1. 【repost】JavaScript 基本语法

    JavaScript 基本语法,JavaScript 引用类型, JavaScript 面向对象程序设计.函数表达式和异步编程 三篇笔记是对<JavaScript 高级程序设计>和 < ...

随机推荐

  1. tars 部署

    1. mysql url:  192.168.101.3 port: 3306 pw: 123456 一键部署 sudo ./linux-install.sh localhost 123456 en0 ...

  2. 【转】Tomcat搭建文件服务器

    http://blog.csdn.net/yin_jw/article/details/43524659 1. 配置在tomcat目录下 直接把文件放在 tomcat6/webapps/ROOT 目录 ...

  3. Jmeter简单操作 取样器 ,监听器

    1.创建线程组 1.2 (1)  线程组主要包含三个参数:线程数.准备时长(Ramp-Up Period(in seconds)).循环次数. (2) 线程数:虚拟用户数.一个虚拟用户占用一个进程或线 ...

  4. Agumaster页面样式就绪

  5. 一句Delete..In.. 删除语句的优化

    实验环境: # 类别 版本 1 操作系统 Win10 2 数据库 Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 - 64bit P ...

  6. leetcode刷题-62不同路径2

    题目 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 现在 ...

  7. pwnable.kr之leg

    查看原题代码: #include <stdio.h> #include <fcntl.h> int key1(){ asm("mov r3, pc\n"); ...

  8. idea导入spring源码

    1.环境: Intellij idea 2018.2 gradle 4.10.2 spring framework:5.2.0 注意版本不符合可能会导致编译失败. 参考版本: 1.首先下载安装 Int ...

  9. C#类库推荐 拼多多.Net SDK,开源免费!

    背景介绍 近两年拼多多的发展非常迅速,即便口碑一般,也没有网页端,奈何我们已经全面小康,6亿月收入1000以下,9亿月收入2000以下,所以因为价格原因使用拼多多的用户也越来越多了.同样的,拼多多也开 ...

  10. [Java核心技术]五-继承(枚举类)

    ####Java枚举类型(enum) 枚举类型都是继承了Enum类(是一个抽象类)的一个类,我们可以向enum类中添加方法和变量等.编译再反编译可以看到枚举类型对应的类的内容. 每个枚举常量都对应一个 ...