美文网首页程序员
关于ES6的一些事

关于ES6的一些事

作者: chasing_dream | 来源:发表于2018-03-14 21:51 被阅读31次

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

关于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

相关文章

  • 关于ES6的一些事

    既然选择了远方,便只顾风雨兼程! 关于es6我也只是跟开始接触,说的不好请大家多多关照,希望能对学习前端的朋友一点...

  • import export 理解

    ES6 关于export和import理解 1. ES6之前JavaScript没有模块体系,相关社区提供了一些加...

  • ES6简介

    前言 网上有很多关于ES6的文章教程,但是总觉得比较教科书话,繁琐难懂,因此特意在此对ES6常用的新特性,做了一些...

  • ES6新特性总结

    前言 网上有很多关于ES6的文章教程,但是总觉得比较教科书话,繁琐难懂,因此特意在此对ES6常用的新特性,做了一些...

  • react 的基本使用

    这里主要使用的都是ES6的语法(阮一峰的 ES6入门 ),我自己也在摸索中,在这个项目中会带一些关于语法的解释。可...

  • ES6函数扩展

    本文只是学习es6的一些简单笔记,详情请看阮一峰的es6入门。 关于函数参数的默认值 什么时候需要为函数参数设置默...

  • 2018-03-31

    关于 ECMAScript 2015(ES6)的一些有用的提示和技巧 以UPX漏洞为例介绍整数溢出(基础篇)

  • 一些关于es6的学习

    1.关于字符串的遍历 es6中字符串的遍历 var s="hdfghdsgfjhgfugjf" for(let ...

  • 关于ECMAScript2015的一些变化

    今天研究了一下关于ECMASript2015,也就是我们常称呼的ES6。关于ES6,使用'use strict'就...

  • React的生命周期

    react的一些函数的官方介绍 函数 / 方法 ES6中React组件是用class来定义的,关于class的知识...

网友评论

    本文标题:关于ES6的一些事

    本文链接:https://www.haomeiwen.com/subject/giuqqftx.html