zoukankan      html  css  js  c++  java
  • Javascript 的ES5、ES6更新重要新特性整理

    前言

    ES5发布于2009,ES6于2015,从2015开始使用年份命名,ES6即是ECMAScript 2015,目前大部分浏览器都已经支持ES6了,除了IE。

        

    ES5

    1、 严格模式(use strict)

    这种模式,使得JavaScript在更严格的语法条件下运行:

    (1)变量必须使用var声明;

    (2)禁止自定义的函数中的this指向window

    (3)创建 eval 作用域即为块级作用域

    (4)对象不能有重名的属性

    use strict可以在脚本或者函数开头声明,分别具有全局和函数作用域。

    2、 增加JSON对象

    JSON.stringify(obj/arr);

    JSON.parse(json);

    3、 扩展了数组Array的方法

    Array.isArray()            方法检查对象是否为数组
    Array.forEach(funName)     每个数组元素调用一次函数
    Array.map(funName)         遍历数组返回一个新数组,返回加工后的值
    Array.filter(funName)      遍历过滤出一个新的子数组,返回条件为true的值
    Array.reduce(funName)      按funName方法处理数组,最后返回一个值,funName有两个参数,第一个是最后返回的归并值,第二个是元素
    Array.reduceRight(funName) 同上,只是从最后一个数据开始计算
    Array.every(funName)       遍历数组,检查是否每一个值都符合条件,返回bool    
    Array.some(funName)        遍历数组,检查是存在至少一个值符合条件,返回bool
    Array.indexOf(value)       检索数组中的某个元素值并返回其位置,多个则返回第一个
    Array.lastIndexOf(value)   同上,只是从最后开始检索

    4、 对象增加属性 Getter 和 Setter

    允许使用类似于获取或设置属性的语法来定义对象方法

    // 创建对象:
    var person = {
      firstName: "Bill",
      lastName : "Gates",
      get fullName() {
        return this.firstName + " " + this.lastName;
      }
    };
    //获取对象
    person. fullName

    5、 函数扩展Function.prototype.bind(obj)

    可将函数内的this绑定为obj,并将函数返回;

    ES6

    1、 变量声明关键字let、const

    let 是在代码块内有效,var 是在全局范围内有效;

    let 只能声明一次,var 可以声明多次;

    let 不存在变量提升,var 会变量提升:

    const 用来声明常量

    2、 许函数参数设置默认值

    function testAdd(x, y = 10) {
      // 当y不给值或者为undefined时值取10
      return x + y;
    }

    3、 箭头函数(Arrow Function)

    类似于匿名函数,但没有自己的 this,不适合定义对象方法;

    如果只是单个语句,则可省略掉return和花括号(但保留一般更好一些)

        例:z = (x, y) => { return x * y };

    4、 class 关键字定义类

    class 的本质是 function,它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法;

    (1) 声明

    class Example {
        constructor(a) {
            this.a = a;
        }
    }

    (2) 实例化

    let exam1 = Example(1);

    (3) 修饰器decorator

    类比java的注解,是一个函数,用来修改类的行为,在代码编译时产生作用

    (4) 其他

    类可以继承,使用extends;

    constructor 方法是类的默认方法,创建类的实例化对象时被调用;

    类定义不会被提升,必须在访问前对类进行定义;

    类中方法不需要 function 关键字,类似于java;

    Class 内部只有静态方法,没有静态属性;

    ES6 引入了模块化,分export与import,模块自动开启了严格模式;

    Promise 对象用于异步编程; 

    5、 解构赋值

    是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值

    示例:

    数组

    数组
    let [a, b, c] = [1, 2, 3];  //a,b,c变量值同时赋予了;
    let [a, , b] = [1, 2, 3];
    let [a = 1, b] = [];  //不完全解构,a = 1, b = undefined
    let [a, ...b] = [1, 2, 3];  //剩余运算符,a=1, b=[2,3]
    (字符串是数组)
    对象
    let {a, b} = {a : 1, b : 2};  //a=1,b=2
    let {a : b} = {a : 1};  //b=1
    let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};//rest = {c: 30, d: 40}

    其他:

    扩展了Array方法、对象

    代理Proxy对象

    function f(...values)可为函数设置不确定个数参数 ,values为最后所有参数的集合

    增加for...of循环,用于替代 for..in 和 forEach()

  • 相关阅读:
    经典8锁问题--助你彻底搞懂锁的概念
    linux上安装mysql
    Jenkins安装详解
    第一篇:实时网络日志分析器和交互式查看器--GoAccess安装
    Centos7上安装python3.7
    Nginx报错收集
    免费yum源镜像地址
    nginx日志文件切割
    腾讯云绑定和配置弹性网卡和添加弹性网卡
    LNMP-WEB应用环境搭建
  • 原文地址:https://www.cnblogs.com/aland-1415/p/12157193.html
Copyright © 2011-2022 走看看