今天闲的没事回顾了ES6的一些知识,下面写的不是特别详细,只是类似于一个大纲,今天我竟然敢睡到八点起床了,md,我膨胀了,赶紧写篇博客压压惊

下面来看看ES6给我们提供了哪些新东西

(1)新的变量声明方式let/const(不具备变量提升,不可重复声明)
    let:声明的变量仅在块级作用域内有效
    const:常量,值一旦定义不可更改;声明时要赋初值
 
(2)解构赋值:对象/数组赋值
    对象赋值:对象根据属性名一一对应,无序对应
        首先有这么一个对象const props = {
            className: 'tiger-button',
            loading: false,
            clicked: true,
            disabled: 'disabled'
            }
        // es5
        var loading = props.loading;
        var clicked = props.clicked;
        // es6
        const { loading, clicked } = props;
    数组赋值:数组以序列号一一对应,有序对应;允许指定默认值;内部使用严格相等运算符(===)
        // es6
        const arr = [1, 2, 3];
        const [a, b, c] = arr;
        // es5
        var arr = [1, 2, 3];
        var a = arr[0];
        var b = arr[1];
        var c = arr[2];
(3)字符串的遍历:for...of循环遍历
        for(let codePointAt of 'hicai'){
        console.log(codePointAt);
        }  // h i c a i
        遍历对象用for...in
 
 
(4)箭头函数:
        // es5 写法
        var fn = function(a, b) {
          return a + b;
        }
        // es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号{}
        const fn = (a, b) => { a + b };  // {}可以省略
        箭头函数可以替换函数表达式,但是不能替换函数声明;
        箭头函数本身没有this,其中的this指的是外层的this;
        箭头函数不可以使用arguments对象,该对象在函数体内不存在;
        不可以使用yield命令,因此箭头函数不能用作Generator函数。
 
 
(5)字符串模板:为了解决+号拼接字符串的不便利。用 ` `包裹字符串,在其中用${}包裹变量或表达式。
        // es6const a = 20;const b = 30;const string = `${a}+${b}=${a+b}`;
        // es5var a = 20;var b = 30;var string = a + "+" + b + "=" + (a + b);
 
 
(6)展开运算符:(提高代码效率)
        ES6中用...来表示展开运算符,可以将数组方法或者对象方法进行展开;
        数组:
            const arr1 = [1, 2, 3];
            const arr2 = [...arr1, 10, 20, 30];
            // 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
        对象:
            const obj1 = {a:1,b:2,c:3}
            const obj2 = {
            ...obj1,  d: 4,  e: 5,  f: 6
        }
        // 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})
 
 
(7)class:
        在js中,每个对象都有原型对象,所有js对象都从原型上继承方法和属性;
        ES5中,属性放在构造函数constructor里,方法放在原型prototype上;
        ES6中引入类class来代替构造函数constructor;还提供了extends划分super关键字;
 
 
(8)promise对象:解决异步编程
        特点:a)对象的状态不受外界影响,promise对象代表一个异步操作,有三种状态:pending(进行中)、resolve(成功)、rejected(失败)
        一旦状态改变,就不会改变
        基本用法:
        Promise构造函数的两个参数是resolve和reject;
        Promise实例生成后,可以用then方法分别制定resolve和rejected状态的回调函数;
        Promise的then方法是定义在原型对象Promise.prototype上的,then方法返回的是一个新的Promise实例,不是原来那个Promise实例,因此可以用链式写法;
        方法1:Promise.all()方法用于将多个promise实例包装成一个新的promise实例;
        方法2:Promise.race()方法只要有一个peomise执行完毕就执行
 
 
(9)模块化CommonJs
 

(10)数组新API:
        Array.from()方法可以将伪数组转为数组

  Array.of()将一组数字转化为数组

 

(11)Set和Map数据结构:
        Set
            a)Set实例成员值唯一存储key值,map实例存储键值对(key-value)
            b)Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。
            操作方法:
                add(value):添加某个值,返回Set结构本身
                delete(value):删除某个值,返回布尔值
                has(value):返回布尔值,表示该值是否为Set的成员
                clear():清除所有成员,没有返回值
            遍历方法:
                keys():返回键名
                values():返回键值   
                entries():返回键值对
                forEach():使用回调遍历每个成员
       Map  
            a)Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键;
            b)Map实例的属性和操作方法:
                size属性:返回Map结构的成员总数;
                set(key, value):设置键名key对应的键值为value,然后返回整个Map结构,若key已有值,则更新键值,否则生成该键。
                get(key):读取key对应的键值
                has(key):返回布尔值,表示某个键是否存在当前map对象中。
                delete(key):删除某个键,返回true,删除失败返回false
                clear():其清除所有成员,没有返回值
            c)map的遍历方法:
                keys():返回键名
                values:返回键值
                entries:返回所有成员
                forEach():遍历map的所有成员,map的遍历顺序就是插入顺序
 
 
(12)Symbol:新的数据类型,表示独一无二的值,不会与其他属性名产生冲突;
            Symbol值通过Symbol函数生成;
            let s = Symbol();
            typeof s;    // “symbol”
 
            Symbol函数前不能使用new命令,
            Symbol值不是对象,所以不能添加属性;
            Symbol函数可以接受一个字符串为参数,表示对当前Symbol实例的描述,因此相同参数的Symbol函数的返回值是不相等的;

对ES6的一次小梳理的更多相关文章

  1. ES6中常用的小技巧,用了事半功倍哦

    ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了 ...

  2. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  3. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

  4. ES6必须 知道的小知识

    1.函数的默认参数 一般 我们给函数设置默认参数的时候  会在函数里用 || 运算符 比如 function show(width,height ....){ var height = height ...

  5. mongodb 修改数据结构的一个例子以及小梳理

    mongodb的存储结构是灵活可变的,但是,并不意味着我们就肆意地使用不规则的文档结构.不规则的文档结构对于开发和后期的维护都是一个灾难.所以,还是要有一个约定的格式. 但是,由于前期设计的不周详和其 ...

  6. SSRF小梳理

    SSRF(Server-Side Request Forgery:服务器端请求伪造)是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法访问的内部系统.(正 ...

  7. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  8. 微信小程序爬坑日记

    新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只 ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. ASP.NET MVC下使用AngularJs语言(二):ng-click事件

    程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用Angu ...

  2. 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调

    [源码下载] 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调 作者: ...

  3. H5+.Net Webapi集成微信分享前后端代码 微信JS-SDK wx.onMenuShareTimeline wx.onMenuShareAppMessage

    说明: 1/因为赚麻烦这里没有使用数据库或服务器缓存来存储access_token和jsapi_ticket,为了方便这里使用了本地的xml进行持久化这两个值以及这两个值的创建时间和有限期限. 2/每 ...

  4. 你应该这么理解TCP的三次握手和四次挥手

    前言: TCP协议是计算机的基础,他本身是一个非常非常复杂的协议. 本文只是蜻蜓点水,将从网络基础以及TCP的相关概念介绍开始,之后再将三次握手,四次挥手这些内容来阐述. 最后介绍一些常见问题,并给出 ...

  5. Android精通教程-第一节Android入门简介

    前言 大家好,给大家带来Android精通教程-第一节Android入门简介的概述,希望你们喜欢 每日一句 If life were predictable it would cease to be ...

  6. Kubernetes-2--安装部署

    kubernetes的部署方式: 1,kubeadm 2, 二进制安装包部署 条件准备: 1,关闭系统的swap分区 为什么要关闭swap分区,我还没有去看官方的说明,搜索到的答案是 kubernet ...

  7. shell 脚本中的当前工作目录等于执行脚本时所在的工作目录

    1. 测试脚本 在当前目录下创建 h1 h2两个文件夹 2. 在脚本所在目录执行脚本 在当前目录下创建了h1 h2两个目录 3. 在其他目录爱=下执行脚本 在其他目录下执行脚本时,在执行脚本所在的目录 ...

  8. Django model update的各种用法介绍

    Django开发过程中对表(model)的增删改查是最常用的功能之一,本文介绍笔者在使用model update过程中遇到的那些事 model update常规用法 假如我们的表结构是这样的 clas ...

  9. C语言最最最基础部分(a+b为例)

      此篇为C语言最基础的部分知识简单概括,对C语言有一定了解的同学建议绕道哦~另外,文底附有此文知识点详细了解的链接. 下面我们以“a+b”为例,分析这个程序的组成. #include<stdi ...

  10. python numpy安装

    一.python下的numpy安装方法 第一步:安装python,这里不做介绍. 第二步:打开cmd看python是否安装成功. 第三步:输入 python -m pip install -U pip ...