ECMAScript 6介绍

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。标准的制定者有计划,以后每年发布一次标准,使用年份作为版本。因为ES6的第一个版本是在2015年发布的,所以又称ECMAScript 2015(简称ES2015)。 2016年6月,小幅修订的《ECMAScript2016标准》(简称ES2016)如期发布。由于变动非常小(只新增了数组实例的includes方法和指数运算符),因此 ES2016 与 ES2015 基本上是同一个标准,都被看作是ES6。根据计划,2017年6月将发布ES2017。—以上内容来自W3Cschool

使用let声明变量

在es6中我们使用let声明变量,但是为什么要使用let声明变量?下面来比较一下用var声明变量跟使用let声明变量的区别

使用var 声明变量

// 使用var 声明变量  
var bVariable = "变量";

// 存在的问题:
// 1.var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined
 console.log(name); // 此时输出undefined
 var name = "张三";


// 2.var命令允许我们重复声明变量,并且不会报错
var name = "jerry";
var name = "tom";
console.log(name);// 此时输出tom

// 3.通过 var 定义的变量,它的作用域是全局作用域或者函数作用域
function varvslet() {
  console.log(i); // 此时输出undefined
  for (var i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
  };
}

使用let 声明变量

//1.声明的变量仅在块级作用域有效
 {
   let name = "zhangsan";
 }
 
 console.log(name); // 此时name不会被访问到,因为let会构成块级作用域

 {
   var name1 = "lisi";
 }
 
 console.log(name); // 此时name会被访问到,因为var会构成全局作用域
//2.不存在变量提升,不存在预解析
 console.log(family);
 var family = "张三";
// 上面的代码实际上会发生预解析,解析成下面的代码,会先定义family
 var family;
 console.log(family);// 此时输出undefined
 family ="张三";
//但是使用let,则不会出现这种情况
console.log(name);  //不会输出undefined,直接出现暂时性死区
let name="张三";
//3.暂时性死区
//指程序报错终止执行
//4.不允许重复声明
let name="张三";
let name="李四"; //此时不允许重复定义: Identifier 'name' has already been declared

使用const声明常量

js中并没有声明常量的关键字,在es6中,出现了可以声明常量的关键字,const

const name="张三";
  1. 声明时必须赋值,否则报错
  2. 只在块级作用域有效
  3. 存在暂时性死区
  4. 不可重复声明
  5. 当常量是对象时,对象本身是可变的,依然可以添加新属性
  6. 了解基本数据类型以及复杂数据类型

ES6中的字符串

ES6之前:

// 1.需要使用拼接字符串

 var html = '<header>' +
   '<a class="back" href="javascript:;">' +
   '<i></i>' +
   '<span>优惠活动</span>' +
   '</a>' +
   '</header>';


// 2.如果上面的"优惠活动"是变量
 var title = "优惠活动";

 var html = '<header>' +
   '<a class="back" href="javascript:;">' +
   '<i></i>' +
   '<span>' + title + '</span>' +
   '</a>' +
   '</header>';


// 3.如果有一个字符串"Hello World",如何遍历

 var str = "Hello World";

 for (var i = 0; i < str.length; i++) {
   console.log(str[i]);
 }

ES6之中:

// 1.不需要使用拼接字符串,直接使用模板字符串
 let html = `
 <header>
   <a class="back" href="javascript:;">
     <i></i>
     <span>优惠活动</span>
   </a>
 </header>`;


// 2.如果上面的'优惠活动'是变量,也不需要使用拼接字符串的方式 只需要把变量写在这样的格式中 ${变量}
 var title = "优惠活动";

 let html = `
 <header>
   <a class="back" href="javascript:;">
     <i></i>
     <span>${title}</span>
   </a>
 </header>`;

// 3. 使用for...of
 var str = "HelloWorld";

 for(let i of str) {
   console.log(i);
 }

ES6中的函数

rest参数

ES6之前:

// 1.函数接受任意个数的参数并排序
 var sortNumber = function () {
   return Array.prototype.slice.call(arguments).sort(); 
   //此时arguments是类数组,可以遍历  可以有length属但是不能有数组的方法
   //Array.prototype.slice.call()就是把类数组转换成数组
 }
 console.log(sortNumber(2,3,1,4,5,9,0));

ES6之中:

// 1.函数接受任意个数的参数并排序
function add(...rest) {
  console.log(rest);//此时rest是数组
  red.sort();
  console.log(rest);
}
add(1,4,3,5,2,7,9,0,6);

<!--注意:arguments是类数组,rest是数组,-->
<!--rest参数之后不能再有其他参数(即只能是最后一个参数),-->
<!--否则会报错。-->

箭头函数

ES6之前:

//匿名函数写法
 var add = function (x,y) {
   return x + y;
 }

ES6之中:

//匿名函数写法
 var add = (x,y) => {return x+y};
 //注意: 箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

//数组解构赋值
 var [a,b,c] = [1,2];
 console.log(a,b,c);
 var [a,b] = [1,2,4];
 
//对象解构赋值
 var obj = {a: 1,b: 2}
 var {a,b} ={a:1, b:2} 
 console.log(a,b);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HelloCode开发者学习平台

BAT面试算法进阶(2)-两数相加

You are given two non-empty linked lists representing two non-negative integ...

11620
来自专栏python3

python 列表(List)

Python内置的一种数据类型是列表:list。list是一种有序的集合,可以随时添加和删除其中的元素。

21110
来自专栏java一日一条

Java中关于String类型的10个问题

简单来说,“==”是用来检测俩引用是不是指向内存中的同一个对象,而equals()方法则检测的是两个对象的值是否相等。只要你想检测俩字符串是不是相等的,你就必须...

8710
来自专栏python3

python3--面向对象进阶之内置方法

print执行时,是去内部寻找__str__方法,所以print没有输出不了的数据,因为每一个对象都有__str__方法

10010
来自专栏星汉技术

Java API:Object class

17170
来自专栏zaking's

用js来实现那些数据结构02(数组篇02-数组方法)

    上一篇文章简单的介绍了一下js的类型,以及数组的增删方法。这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么。由于...

445110
来自专栏安恒网络空间安全讲武堂

二进制学习系列-堆溢出

在C++中,如果类中有虚函数,那么它就会有一个虚函数表的指针__vfptr,在类对象最开始的内存数据中。之后是类中的成员变量的内存数据。 对于子类,最开始的内存...

32230
来自专栏博岩Java大讲堂

Java泛型的学习和使用

37840
来自专栏灯塔大数据

技术 | Python从零开始系列连载(十一)

导读 为了解答大家初学Python时遇到各种常见问题,小灯塔特地整理了一系列从零开始的入门到熟练的系列连载,每周五准时推出,欢迎大家学积极习转载~ 上一期学习了...

412100
来自专栏xingoo, 一个梦想做发明家的程序员

关键字explicit

关键字只能用在类构造函数。它的作用是不能进行隐式转换。 1 class gxgExplicit //没有关键字explicit的类 2 3 { 4 ...

22160

扫码关注云+社区

领取腾讯云代金券