关于ES6的一些事

既然选择了远方,便只顾风雨兼程!

关于es6我也只是跟开始接触,说的不好请大家多多关照,希望能对学习前端的朋友一点帮助。

Babel转码器:

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。
Babel下载地址

声明变量let与const:

因为var命令会发生“变量提升”现象,即变量可以在声明之前使用,值是undefined。这种逻辑多多少少有点奇怪,为了纠正这种现象,let改变了语法行为,变量在声明之前使用就会报错。

        // var 的情况
        console.log(a);  //输出undefined
           var a=2;
       // let 的情况
        console.log(a);  //自己报错
            let a=2; 

这表明let声明的变量只他所在的代码块内有效。
let命令非常适合计数器。
let 不会再预解析的时候不会提升
let不允许在声明之前赋值,否则报错,这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
let不允许重复声明

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

let只会在离他最近的作用域有效不会泄露为全局变量。
ES6 允许块级作用域的任意嵌套。

const 命令

const声明一个只读的常量。一旦声明,常量的值就不能改变。

   const arr = 3;
   arr = 2  //报错

const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const arr;  //报错

const的作用域与let命令相同:
只在声明所在的块级作用域内有效。
预解析不会提升变量
不允许重复声明

ES6声明变量的方法

var和function;
let和const;
import命令和class命令。

var a=1;
let b=1;
function fun(){};
import any from "./a.js"
//class  就好比构造函数
class Pad{
     fun(){
         console.log(123)
     }

 }
 var ad=new Pad();
 ad.fun()

变量的解构赋值

变量的结构赋值

//ES5变量赋值
var a = 1;
var b = 2;
//ES6 变量赋值
let [a, b] = [1, 2];

ES6可以从数组中提取值,按照对应位置,对变量赋值。可以从数组中提取值,按照对应位置,对变量赋值。
如果解构不成功,变量的值就等于undefined。
null 和 undefined 不能解构赋值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

对象的结构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // 报错 foo is not defined

Interator是遍历器点这里查看详情

用途

交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

四种数据集合

JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。这样就有了四种数据集合。

字符串的扩展










待更新

Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

//直接赋值
const set = new Set([1, 2, 3, 4, 4]);
//不会出现重复的值
const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

Map

待更新

箭头函数

拓展的对象功能

超级字符串

set和map

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 8,113评论 3 37
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 5,786评论 0 1
  • 特别说明,为便于查阅,文章转自https://github.com/getify/You-Dont-Know-JS...
    杀破狼real阅读 3,630评论 0 0
  • 1、let和const命令 let声明的变量只在let所在的代码块有效,即有块级作用域,不同于var; let定义...
    风之化身呀阅读 2,972评论 0 1
  • 夜色,死死的按住花瓣 此刻,寂静无声 整个世界都被投入囚笼 我翻越黑色的围墙 策马扬鞭 划开夜色一道口子 天终究会...
    冷冬年阅读 2,299评论 11 28