当前位置: 首页 / 技术干货 / 正文
好程序员web前端入门学习之ES6属性知识梳理

2020-02-29

 好程序员 web前端 web前端教程

  好程序员web前端入门学习之ES6属性知识梳理ECMAScript 6.0(简称:ES6)是 JavaScript 语言的下一代标准,于2015年6月正式发。目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。现在企业中的项目基本都采用ES6开发,因此学好ES6就变得尤为重要!接下来好程序员web前端教程就给大家简单梳理一下ES6属性知识。

图片2

  let/const

  ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

  {

  let a = 10;

  var b = 1;}

  a // ReferenceError: a is not defined.

  b // 1

  上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

  for循环的计数器,就很合适使用let命令。

  var oLis = document.getElementsByTagName('li')

  for (let i = 0; i < oLis.length; i++) {

  // ...

  oLis[i].onclick = function(){

  console.log(i)// 0 1 2 3 4

  }

  }

  console.log(i);

  // ReferenceError: i is not defined

  //上面代码相当与产生了几个块级作用域

  {

  var i=0;

  oLis[i].onclick = function(){

  console.log(i)

  }

  }

  {

  var i=1;

  oLis[i].onclick = function(){

  console.log(i)

  }

  }

  上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。

  ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景,let实际上为JavaScript新增了块级作用域。

  var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

  为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

  var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

  为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

  const命令

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

  const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

  const PI = 3.1415;

  PI // 3.1415

  PI = 3;

  // TypeError: Assignment to constant variable.

  上面代码表明改变常量的值会报错。

  箭头函数 =>

  ES6 允许使用“箭头”(=>)定义函数。

  var f = v => v;

  // 等同于

  var f = function (v) {

  return v;};

  如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

  var f = () => 5;

  // 等同于

  var f = function () { return 5 };

  var sum = (num1, num2) => num1 + num2;

  // 等同于

  var sum = function(num1, num2) {

  return num1 + num2;};

  如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

  var sum = (num1, num2) => { return num1 + num2; }

  箭头函数使得表达更加简洁。

  const isEven = n => n % 2 == 0;

  const square = n => n * n;

  上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。

  箭头函数的一个用处是简化回调函数。

  // 正常函数写法

  [1,2,3].map(function (x) {

  return x * x;});

  // 箭头函数写法

  [1,2,3].map(x => x * x);

  // 正常函数写法

  var result = values.sort(function (a, b) {

  return a - b;});

  // 箭头函数写法

  var result = values.sort((a, b) => a - b);

  箭头函数有几个使用注意点。

  1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

  2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

  3)不可以使用arguments对象,该对象在函数体内不存在。

  了解更多好程序员web前端入门知识点,你可以关注好程序员”微信公众号,定期发布技术热点和行业趋势文章。你也可以来好程序员web前端培训班进行系统的学习进阶,专业大牛讲师以项目驱动教学过程和内容,让你理论与实战兼备,快速就业拿高薪,还有更多web前端教程供大家学习。

好程序员公众号

  • · 剖析行业发展趋势
  • · 分享大厂面试心得
  • · 汇聚企业项目源码
  • · 下载全套高精尖教程

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-11-16(北京)

    预约报名

    开班时间:2020-09-14(北京)

    开班盛况
  • 大数据+人工智能 <高端班>

    开班时间:2020-11-16(深圳)

    预约报名

    开班时间:2020-11-09(北京)

    预约报名
  • JavaEE分布式开发 <高端班>

    开班时间:2020-12-07(北京)

    预约报名

    开班时间:2020-07-20(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2020-07-20(上海)

    开班盛况

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况

    开班时间:2019-07-15(深圳)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号