• 欢迎大家分享资料!前往留言板评论即可!

ECMAScript(ES6)基本语法介绍(一)

合宙 模组资料网 7个月前 (05-15) 96次浏览 已收录 0个评论 扫描二维码

1. 新增数据类型(Symbol

  1. 介绍
  • Symbol类型的值通过Symbol函数生成,相同Symbol函数返回的值是唯一的。
  • Symbol函数可以接收字符串作为参数,但是即使相同参数返回的也是唯一值,即 Symbol('miaov') != Symbol('miaov')
  1. 实例

    打印结果:外部:undefined 、内部:男

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Symbol实例</title>
    </head>
    <body>
    <script>
     /*
     *Symbol一般用于属性保护,即属性私有化
     *属性私有化:即方法内部可以访问,但方法外部不可以访问
     */
     var Person = (function(){
       var _gender = Symbol('gender');
       function P(name,gender){
         this.name = name;
         this[_gender] = gender;
       }
       P.prototype.say= function() {
         console.log('内部'+this[_gender])
       }
       return P;
     })();
    
     var p1 = new Person('风雅', '男');
     console.log('外部'+p1[Symbol('_gender')]);
     console.log(p1.say());
    </script>
    </body>
    </html>
    

2.新增变量声明——const

2.1 const

常量声明,一经声明不能改变(如果声明的常量是一个复合类型,那么只要不修改这个常量的指向地址,则不会报错,添加删除属性都是ok的)

  • 不支持变量声明预解析(先声明后使用)
  • 支持块作用域
  • 不允许重复声明(暂存死区)
 const b = 2;//正确
 // const b;//错误,必须初始化 
 console.log('函数外const定义b:' + b);//有输出值
 // b = 5;
 // console.log('函数外修改const定义b:' + b);//无法输出 

### 2.2 Let

  • 不支持变量声明预解析(先声明后使用)

  • 支持块作用域

  • 不允许重复声明(暂存死区)

    点击按钮一:打印0

    点击按钮二:打印1

    点击按钮三:打印2

    即对应的索引值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    button.active {
      background: pink;
    }

    p {
      display: none;
    }

    p.active {
      display: block;
    }
  </style>
</head>

<body>
  <button class="active">按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
  <p class="active">内容一</p>
  <p>内容二</p>
  <p>内容三</p>
</body>
<script>
  btns = document.querySelectorAll('button');
  ps = document.querySelectorAll('p');
  for (let i=0; i<btns.length; i++){
    btns[i].onclick=function(){
      console.log(i);
    }
  }
</script>
</html>

2.3 var

  • 支持变量声明预解析

  • 不支持块作用域

  • 允许重复声明

    点击按钮一:打印3

    点击按钮二:打印3

    点击按钮三:打印3

    即打印循环结束时i的值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    button.active {
      background: pink;
    }

    p {
      display: none;
    }

    p.active {
      display: block;
    }
  </style>
</head>

<body>
  <button class="active">按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
  <p class="active">内容一</p>
  <p>内容二</p>
  <p>内容三</p>
</body>
<script>
  btns = document.querySelectorAll('button');
  ps = document.querySelectorAll('p');
  for (var i=0; i<btns.length; i++){
    btns[i].onclick=function(){
      console.log(i);
    }
  }
</script>
</html>

转载请注明原文链接:ECMAScript(ES6)基本语法介绍(一)
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址