es6简单学习---(上)。

引用于菜鸟教程:

ES6大环境

一、桌面端浏览器对ES2015的支持情况
Chrome:51 版起便可以支持 97% 的 ES6 新特性。
Firefox:53 版起便可以支持 97% 的 ES6 新特性。
Safari:10 版起便可以支持 99% 的 ES6 新特性。
IE:Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。(IE7~11 基本不支持 ES6)
二、移动端浏览器对ES2015的支持情况
iOS:10.0 版起便可以支持 99% 的 ES6 新特性。
Android:基本不支持 ES6 新特性(5.1 仅支持 25%)
三、服务器对ES2015的支持情况
Node.js:6.5 版起便可以支持 97% 的 ES6 新特性。(6.0 支持 92%)
附:如何使用ES6的新特性,又能保证浏览器的兼容?
针对 ES6 的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的 ES6 语法转换成 ES5,相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel,jsx,traceur,es6-shim 等。

var、let、const与代码块

  • 代码块
    es6之后出现,即单独的使用{}
  • var
    使用var关键字声明的全局作用域变量属于window对象。
    使用var关键字声明的变量在任何地方都可以修改。
    var关键字定义的变量可以先使用后声明。(变量提升)
  • let
    使用let关键字声明的全局作用域变量不属于window对象。
    let关键字定义的变量需要先声明再使用。(没有变量提升)
    在相同的作用域或块级作用域中,不能使用let关键字来重置var关键字声明的变量。(只能声明一次、代码块有效)
    在相同的作用域或块级作用域中,不能使用let关键字来重置let关键字声明的变量。(只能声明一次、代码块有效)
    let关键字在不同作用域,或不用块级作用域中是可以重新声明赋值的。
  • const
    const关键字定义的常量,声明时必须进行初始化,且初始化后不可再修改
    在相同的作用域或块级作用域中,不能使用const关键字来重置var和let关键字声明的变量。(只能声明一次、代码块有效)
    在相同的作用域或块级作用域中,不能使用const关键字来重置const关键字声明的变量(只能声明一次、代码块有效)
    const 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的。

解构赋值

  • 是啥:
    解构赋值是对赋值运算符的扩展。
    他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值
  • 解构模型:
    解构的源,解构赋值表达式的右边部分。
    解构的目标,解构赋值表达式的左边部分
  • 解构重命名 let{a:aa}
  • 怎么用
    1、基本
    数组:let [a, b, c] = [1, 2, 3];
    对象:
    let { foo, bar } = { foo: ‘aaa’, bar: ‘bbb’ };
    // foo = ‘aaa’
    // bar = ‘bbb’
    let { baz : foo } = { baz : ‘ddd’ };
    // foo = ‘ddd’
    2、嵌套
    数组:let [a, [[b], c]] = [1, [[2], 3]];
    对象:
    let obj = {p: [‘hello’, {y: ‘world’}] };
    let {p: [x, { y }] } = obj;
    // x = ‘hello’
    // y = ‘world’
    let obj = {p: [‘hello’, {y: ‘world’}] };
    let {p: [x, { }] } = obj;
    // x = ‘hello’
    3、忽略
    数组:let [a, , b] = [1, 2, 3];
    对象:
    4、不完全解构
    数组:let [a = 1, b] = []; // a = 1, b = undefined
    对象:
    let obj = {p: [{y: ‘world’}] };
    let {p: [{ y }, x ] } = obj;
    // x = undefined
    // y = ‘world’
    5、剩余运算符
    数组:let [a, …b] = [1, 2, 3];//a = 1 ,b = [2, 3]
    对象:
    let {a, b, …rest} = {a: 10, b: 20, c: 30, d: 40};
    // a = 10
    // b = 20
    // rest = {c: 30, d: 40}
    6、字符串等
    数组:let [a, b, c, d, e] = ‘hello’
    对象:
    7、解构默认值
    数组:当解构模式有匹配结果,且匹配结果是 undefined 时,会触发默认值作为返回结果。
    let [a = 3, b = a] = []; // a = 3, b = 3,a 与 b 匹配结果为 undefined ,触发默认值:a = 3; b = a =3
    let [a = 3, b = a] = [1]; // a = 1, b = 1,a 正常解构赋值,匹配结果:a = 1,b 匹配结果 undefined ,触发默认值:b = a =1
    let [a = 3, b = a] = [1, 2]; // a = 1, b = 2,a 与 b 正常解构赋值,匹配结果:a = 1,b = 2
    对象:
    let {a = 10, b = 5} = {a: 3};
    // a = 3; b = 5;
    let {a: aa = 10, b: bb = 5} = {a: 3};
    // aa = 3; bb = 5;

Symbol

  • ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
    ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ,还新增了 Symbol
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

Map和Set

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值