阅读该文章需要具备基础的JavaScript知识。

ES6概述

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

ES6的新特性

let

  • 块级作用域, let定义的变量只在代码块中有效
  • let声明的变量不会提前(前置)(意味着必须先定义后使用)
  • 不能重复定义 ,在同一个作用域中不能声明同名的变量
  • 暂时性死区(当内部变量与外部变量同名时,内部变量会屏蔽外部变量

注:let和var的区别

  • let声明的变量是块级作用域(所在一对花括号里),var是函数作用域和全局作用域,并且let是可以定义全局变量,局部变量,块级作用域的变量。(和写代码的位置有关)
    {
    let a = 123;
    var b = 321;
    }
    a // Uncaught ReferenceError: a is not defined
    b // 321
  • let声明的变量不会声明提升,var会声明提升(把变量声明提升到当前执行环境的最顶端来执行)
    
    console.log(a);
    var a;

//相当于
var a;
console.log(a);

//let 则不会

 - 从代码的写法上,let不能声明同名的变量,var可以。 
```javascript
let a = 1;
let a = 1; //出错 let不可重复声明

var b = 1;
let b = 1; //出错 let不可重复声明

const c = 1;
let c = 1; //出错 let不可重复声明

const

用const来修饰的变量只是只读变量也叫常量,就意味着该变量里的数据只能被访问,而不能被修改,也就是意味着const“只读”(readonly)

  • const所修饰的变量必须赋初始值
  • const修饰的是直接指向(修饰)的内存
  • 引用类型有两块内存区域
  • 引用类型代表的是保存地址的内存区域,数组元素表示的是数据

this和bind

  1. this

以函数的形式调用时,this永远都是window
在事件处理函数时,this是事件源.

  1. bind(this重新指代的对象)(只能为匿名函数服务)
  2. call和apply

call和apply本质上能改变函数所属的对象(函数内部的this)
参数是谁,this就是谁

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

JSON.parse/JSON.stringfy

  1. JSON字符串和对象的直接的转换
  2. 字符串转换成JSON对象:JSON.parse
  3. JSON对象转换成字符串:JSON. stringfy
    var str = '{"id":"123","name":"456"}';
    let obj = JSON.parse(str);
    console.log(obj.id);
    console.log(obj.name);
    let str1 = JSON.stringfy(obj);
    console.log(str1.id);
    console.log(str1.name);

    for in与for of

    let strArr = [];
    for(let index in strArr){
    console.log(strArr[index]);
    }
    for(let t of strArr){
    console.log(t);
    }

    字符串的扩展

    ES5

    indexOf('参数')

    ES6

    includes('参数')    返回布尔值,表示是否找到参数的字符串
    startsWith('参数')   返回布尔值,参数是否在源字符串的头部
    endsWith('参数')   返回布尔值,参数是否在源字符串的尾部

    箭头函数(针对于匿名函数)

  • x=>x5相当于function(x){ return x5 }

    x=>x*5;

    箭头函数相当于匿名函数,省略了return和花括号

  • 有名函数 let 函数名=参数=>函数体

    let num=(x=>x*5)(8)        //传入参数x=6,自运行
     console.log(num) //30
    let num=function(x){
     return x*5
    }
  • 函数需要多个参数,参数需要括号括起来

    (x,y)=>x>y?x:y;
  • 返回值是个对象

    var f=(id,name)=>({id:id,name:name});
    //等价于:
    //返回的是对象
    f=(id,name)=>({
     return {id:id,name:name}
    });

    红色括起来的圆括号不能省略,因为对象的花括号和函数的花括号冲突了
    箭头函数的优点:对this转移的处理,箭头函数内部的this是词法作用域,由上下文确定

    解构赋值(针对于数组、对象)批量给变量赋值

    优点

  1. 可以让一个函数返回一个的值
  2. 可以实现两个数的交换
  3. 可以将多个变量进行初始化
    let a=1;b=22;t;
         a=a+b;
         b=a-b;
         a= a-b;
         console.log(a,b);
    let [v1,[v2,v3],[v4,v5]] = [12,[23,34],[56,67],[5,6]];
    console.log(v1);
    console.log(v2);
    console.log(v3);
    console.log(v4);
    console.log(v5);
    let {name,age} = {name:"dahuang",age:18};
    console.log(name,age);

    Set和Map

    set特点:自动去重,无下标

    let set = Set([2,3,5,6,2,3,2,1]);
    console.log(set.size);     //5
    for(let t of set){
    console.log(t);
    }

    set集合的方法:

    add(参数)       //向集合中添加一个元素
    delete(参数)    //删除集合中某个数
    has(参数)       //判断集合中是否含有某个值
    clear(参数)     //清空集合中的元素
    from(参数)     //将集合转为数组

    Map : 键值对

    set()         //向集合中添加一个元素
    get(键)       //根据键去取值
    delete( 键)    //删除集合中的某个数
    has(键 clear(参数) //清空集合中的元素
    from(参数)     //将集合转为数组

    Map的遍历

    for(let t of map){
    console.log(t[0] + t[1]);   //0代表key,1代表value
    }

    Symbol

  • 表示独一无二的值,它是基本类型中的一种。
  • 它是内置基本对象,不能使用new关键字来使用。
    
    let symbol = Symbol();
    let symbol1 = symbol("heihei");
    let symbol2 = symbol("heihei");
    console.log(symbol1 === symbol2);    //false

let age =Symbol();
var a = {
name:"老王";
[age]: 18 ;
hobby: "写代码";
};
for(let i in a){
console.log(a[t]); //老王
//写代码
}
console.log(a[age]); //18


#强烈推荐#
如果要深度学习es6建议去看看阮一峰写的《ECMAScript 6 入门》这本开源图书籍:[点击这里][1]
![ECMAScript 6 入门][2]

#参考文档#
[菜鸟教程][3]


  [1]: https://es6.ruanyifeng.com
  [2]: https://es6.ruanyifeng.com/images/cover_thumbnail_3rd.jpg
  [3]: https://www.runoob.com/w3cnote/es6-tutorial.html
Last modification:January 20th, 2020 at 04:31 pm
如果觉得我的文章对你有用,请随意赞赏