码迷,mamicode.com
首页 > 其他好文 > 详细

Es6(1)

时间:2020-07-26 19:49:20      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:error   device   定义   length   compute   elements   erro   ble   cannot   

1.let

 <script>
    //1.声明变量
   let a;
   let b,c,d;
   let e =100;
   let f=521,g=iloveyou,h=[];

   //2.let变量不能重复定义 例
      //  let peope = ‘bill‘
      //  let peope = ‘jom‘

      //会报错:01.html:19 Uncaught SyntaxError: Identifier ‘peope‘ has already been declared

      //var可以重复声明变量
        var sum = 1;
        var sum = 2;
        console.log(sum)
    
    //3.块级作用域 (全局 块级 eval)
      //let声明的变量是块级作用域
        // {
        //   let  girl ="邓紫棋"
        // }
        // console.log(girl)
        //再块外面访问不到,会报:01.html:33 Uncaught ReferenceError: girl is not defined
        //at 01.html:33
      //var是全局作用域
          {
            var girl =邓紫棋
          }
          console.log(girl)
          //会打印 邓紫棋

      //4.let不会变量提升
          // console.log(a);
          // let a = 4;
          //会报 01.html:45 Uncaught SyntaxError: Identifier ‘a‘ has already been declared

          //var提升变量
          console.log(sum1) //undefined
          var sum1 = 4;
      //let不影响作用域链
          {
            let name = tom
            function fun(){
              console.log(name)
            }
            fun();//tom
          }
          fun();//tom
  </script>

2.let小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
  <style>
    .item{
      width: 100px;
      height: 50px;
      border: 1px skyblue solid;
      float: left;
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 class="page-header">点击切换颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <script>
    //获取元素
    let items = document.getElementsByClassName("item")

    //遍历绑定事件
    for(var i=0; i<items.length;i++){
      items[i].onclick = function (){
        
        // this.style.backgroundColor =‘pink‘//可以使用
        
        items[i].style.backgroundColor = "pink"//不可以使用
        //会报:02.html:36 Uncaught TypeError: Cannot read property ‘style‘ of undefined
        //at HTMLDivElement.items.<computed>.onclick (02.html:36)
        /*因为var声明的是全局变量,等到i=3时,才执行程序,如果用let声明i就可以用items[i]*/
      }
    }
  </script>

3.const

<script>
    //1.声明常量
     const name = "bill"
     console.log(name) //bill
    //2.常量必须赋初始值
      // const arr
      // console.log(arr)//02.html:49 Uncaught SyntaxError: Missing initializer in const declaration
    //3.常量值不能修改
      name ="jom"//报错Uncaught TypeError: Assignment to constant variable.
      console.log(name)
    //4.块级作用域
    //5.对于数组和对象的元素修改,不算做对常量的修改,不会报错
  </script>

4.变量结构赋值

<script>
    /*ES6允许安装一定模式从数组和对象中提取值,对变量进行赋值
      这被称为结构赋值*/
      //数组赋值
      const f4 =[bill,tom,jack,sam]
      let arr = [a,b,c,d]=f4
      console.log(a)//bill
      console.log(b)//tom
      console.log(c)//jack
      console.log(d)//sam

      //对象赋值
      const per = {
        name :bill,
        age :18,
        ddm : function(){
          console.log("打代码")
        }
      }
      let {name,age,ddm}=per
      console.log(name)  //bill
      console.log(age) //18
      ddm() //打代码

  </script>

Es6(1)

标签:error   device   定义   length   compute   elements   erro   ble   cannot   

原文地址:https://www.cnblogs.com/bill10086/p/13381109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!