六、VUE基础学习篇（es6语法补充）- let和var的区别、对象增强写法、const的含义与使用、高阶函数

最新推荐文章于 2024-03-21 10:15:18 发布

IT_CREATE

最新推荐文章于 2024-03-21 10:15:18 发布

阅读量769

点赞数 1

分类专栏： Vue学习文章标签： var和let的区别 js中const es6对象增强写法

本文链接：https://blog.csdn.net/IT_CREATE/article/details/106590274

版权

Vue学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（es6语法补充）

1、var和let的区别、const常量

es5和es6中var和let的区别：
es5中的var是没有块级作用域的，es6中的let是具有块级作用域的

const的含义与使用：
const修饰常量，表示不可被修改，只在初始化时进行一次赋值，const必须在定义时进行初始化
const修饰的对象不能改变，但是对象内部的属性可以被改变，学过java的都知道
在es6中，优先使用const，只有在需要改变某一个标识符的时候才用let

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>es6块作用域let和var</title>
</head>
<body>
<div id="app">
  <button>点击一下0</button>
  <button>点击一下1</button>
  <button>点击一下2</button>
  <button>点击一下3</button>
  <button>点击一下4</button>

  <br>
  <a href="#">点击一下0</a>
  <a href="#">点击一下1</a>
  <a href="#">点击一下2</a>
  <a href="#">点击一下3</a>
  <a href="#">点击一下4</a>

  <br>
  <span style="cursor:pointer">点击一下0</span>
  <span style="cursor:pointer">点击一下1</span>
  <span style="cursor:pointer">点击一下2</span>
  <span style="cursor:pointer">点击一下3</span>
  <span style="cursor:pointer">点击一下4</span>
</div>

<script src="../js/vue.js"></script>
<script>
  /*
    ■es5和es6中var和let的区别：
      es5中的var是没有块级作用域的，es6中的let是具有块级作用域的

    ■const的含义与使用：
      const修饰常量，表示不可被修改，只在初始化时进行一次赋值，const必须在定义时进行初始化
      const修饰的对象不能改变，但是对象内部的属性可以被改变，学过java的都知道
      在es6中，优先使用const，只有在需要改变某一个标识符的时候才用let
   */

  //这段代码就是var指明的变量没有作用域的体现，按理说time在if的外部是不可以打印和不可以修改，但是这里却可以修改和打印，这就是没有作用域的体现
  //学过java等其他编程语言的就应该知道这会造成代码污染，出现不可预测的风险
  if (true) {
    var time = "2017"
  }
  console.log(time)
  {
    time = "2018"
  }
  console.log(time)

  //此段代码会引起什么问题呢，当你点击以上任何按钮时都只会打印 "第5个按钮被点击"，
  //为什么会造成这种情况呢，var声明的变量是在for是没有作用域的，也就是说这个i这个变量并不是只作用于for循环当中，
  //那么循环执行的时候，i这个变量就会被更改，那么最后点击事件回调的时候就会出现i已经变成5了，所以所有的按钮点击回调console.log
  //打印就会打印i的最终值，一般其他编程语言，都是在for循环这种局部作用时，相当于每次都在for内部定义一个i，每个i都是不同的值，
  //而局部的变量因为作用域的原因不会对其他的相同局部变量造成影响，而这里var因为因为没有作用域，参考上卖弄上面的代码，外部或者其他代码块依然会
  //更改之前局部变量的值，所以这里执行到最后，这个i值就被改为了5
  var btns = document.getElementsByTagName("button");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
      console.log("var第" + i + "个按钮被点击");
    })
  }

  //这种闭包的方式可以解决问题，因为函数是一个作用域
  var aHs = document.getElementsByTagName("a");
  for (var i = 0; i < aHs.length; i++) {
    (function (number) {
      aHs[i].addEventListener("click", function () {
        console.log("var闭包第" + number + "个按钮被点击");
      })
    })(i)
  }

  //let声明的变量是有作用域的，可以解决var遇到的问题，所以这里打印会按照点击按钮的编号打印符合预期的结果
  const spanElements = document.getElementsByTagName("span");
  for (let i = 0; i < spanElements.length; i++) {
    spanElements[i].addEventListener("click", function () {
      console.log("let第" + i + "个按钮被点击");
    })
  }

</script>
</body>
</html>

效果
在这里插入图片描述
第一个使用var的点击任何一个都是5，循环到最后的值
第二个闭包后正常
第三个使用let正常

2、对象增强写法

所谓增强写法就是将 属性:属性值 、 方法名:funtion方法实现 这种写法进行了简写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>es6对象增强写法</title>
</head>
<body>


<script>

  const name = "小张"
  const age = 18
  const height = 160

  //■es5的写法
  const obj = {
    name: name,
    age: age,
    height: height
  }

  //■es6的写法，会按照相同名称变量名自动进行赋值
  const obj1 = {
    name,
    age,
    height
  }

  //■es5的写法
  const obj2 = {
    run: function () {

    },
    eat: function () {

    }
  }

  //■es6的写法
  const obj2 = {
    run() {

    },
    eat() {

    }
  }

</script>

</body>
</html>

3、高阶函数中的filter、map、reduce

■filter方法，filter会遍历numbers，每次传入遍历的当前值，回调函数返回是boolean值，返回true的话，会将value装进返回的数组中，返回false则不会将值装入返回数组
■map方法，循环遍历数组，每次会将返回的值装入接收的数组中
■reduce方法,遍历数组，每次向回调函数中，传入前一次回调返回值和当前遍历值，最后方法返回最后一次回调函数返回的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>filter和map和reduce高阶函数</title>
</head>
<body>

<div id="app">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const numbers = [10, 20, 30, 40, 50, 111, 222, 40, 50]

  //
  //■filter方法，filter会遍历numbers，每次传入遍历的当前值，回调函数返回是boolean值，返回true的话，会将value装进返回的数组中，返回false则不会将值装入返回数组
  let low100Numbers = numbers.filter(function (value) {
    return value < 100;
  })

  //■map方法，循环遍历数组，每次会将返回的值装入接收的数组中
  let low100Numbers2 = low100Numbers.map(function (number) {
    return number * 2
  })

  //■reduce方法,遍历数组，每次向回调函数中，传入前一次回调返回值和当前遍历值，最后方法返回最后一次回调函数返回的值
  //传入0是初始化的意思，也就是第一次previousValue = 0，currentValue等于当前循环的值
  let total = low100Numbers2.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue
  }, 0)

  // 上面的三个可以简写为函数链式写法
  let total = numbers.filter(function (value) {
    return value < 100;
  }).map(function (number) {
    return number * 2
  }).reduce(function (previousValue, currentValue) {
    return previousValue + currentValue
  }, 0)

  // 上面的三个可以简写为箭头函数链式写法
  let total = numbers.filter(value => {
    return value < 100;
  }).map(number => {
    return number * 2
  }).reduce((previousValue, currentValue) => {
    return previousValue + currentValue
  }, 0)

  // 这种简写的写法就是函数式编程的优势

</script>
</body>
</html>

IT_CREATE

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
六、VUE基础学习篇（es6语法补充）- let和var的区别、对象增强写法、const的含义与使用、高阶函数

VUE基础篇（es6语法补充）1、var和let的区别、const常量es5和es6中var和let的区别：es5中的var是没有块级作用域的，es6中的let是具有块级作用域的const的含义与使用：const修饰常量，表示不可被修改，只在初始化时进行一次赋值，const必须在定义时进行初始化const修饰的对象不能改变，但是对象内部的属性可以被改变，学过java的都知道在es6中，优先使用const，只有在需要改变某一个标识符的时候才用let<!DOCTYPE html>&
复制链接

扫一扫