美文网首页
2018-08-06 第一天课 ES6前奏

2018-08-06 第一天课 ES6前奏

作者: 无欲而为 | 来源:发表于2018-08-06 22:24 被阅读0次

1.Symbol

  • ES6新增的 数据类型 -基本类型
  • 值是由Symbol 函数 调用产生的
  • 相同的Symbol 函数 的 返回值 是唯一的 彼此是不同的
  • 即使每次 Symbol 函数 传参的值是一样的 函数的返回值是不同的 或者说是每次存储的值是不同的
  • Symbol 函数的作用是 < 属性私有化 数据保护 >
        var s1 = Symbol();
        console.log( typeof s1) ;

        var s2 = Symbol();
        console.log(s1);
        console.log(s2);
        console.log(s1 === s2)

        var s3 = Symbol('sss');
        var s4 = Symbol('sss');
        console.log(s3);
        console.log(s4);
        console.log(s3 === s4);

2.Symbol实例

          function Person (name,gender) {
              this.name = name ;
              this.gender = gender ;

            }

          var p1 = new Person('momo','女');

          console.log(p1.gender);
  • 我希望一个 Person 出生之后,性别永远无法改变 一直到死
  • 里面的函数自执行 闭包 var Person = P
  • _gender = gender 直接赋值 给内部的私有变量 作为一种受保护的 私有变量 这是原来的处理方式 有很多坑 <Map 函数????>
        var Person = (function(){

            var _gender = '' ;


            function P (name,gender) {
                this.name = name ;
                //this._genderr = gender ;

                _gender = gender ;

            }
            P.prototype.getGender = function () {
                return _gender ;
            }

            return P ;
        })() ;

        var p1 = new Person('momo','女') ;
        console.log(p1);
        console.log(p1.getGender());
  • 两个Symbol 函数的返回值是不同的 保护私有属性
  • 和上面一种方法的比较 : 上面一种方法 对象上根本就不存在 一个 _gender 的属性 因为我们根本就没有 给对象加这个属性
  • 这个属性你可以看到他(在控制台) 但是你无法访问
  • Symbol函数 只要在两个时间点 调用 那么他们的返回值 一定是不同的
  • 随机数是无法实现这个 属性私有化 数据保护 的功能的 不能阻止外部的访问的 你会发现不是undefined~~

3.块作用域

        {
            var a = 1 ;
            let b = 1 ;
            const c = 3 ;
        }
        console.log(a); // 还是可以访问的 
        console.log(b);//b是未定义的
        console.log(c);
  • 作用域 : 变量的 作用范围
  • 原生 全局 函数 ES6 新增 块作用域 一对{} 包含的范围
  • var不支持块作用域
  • {}和 java 是一样的
  • 不支持 变量提升 预解析 代码的先后顺序 不允许写反
  • 不允许在同一个作用域内重复声明 数据的安全性大大的提高
3.块作用域.html:34 Uncaught ReferenceError: b is not defined
    at 3.块作用域.html:34

4.选项卡

    <style>
        button.active {
            background : yellow;
        }
        p.active {
            display :block;
        }
        p{
            display: none ;
        }
    </style>
</head>
<body>
    <button class = 'active'>选项一</button>
    <button>选项二</button>
    <button>选项三</button>

    <p class = 'active'>内容一</p>
    <p>内容二</p>
    <p>内容三</p>

    <script>
        var buttons = document.querySelectorAll('button');
        var ps = document.querySelectorAll('p');

        for (var i = 0; i < buttons.length; i++) {
            buttons[i].index = i ;
            buttons[i].onclick = function () {

                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].className = '' ;
                    ps[i].className = '' ;
                };

                this.className = 'active' ;
                ps[this.index].className = 'active' ;
            }


        };

let版本

        var buttons = document.querySelectorAll('button');
        var ps = document.querySelectorAll('p');

        for (let i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function () {

                for (let i = 0; i < buttons.length; i++) {
                    buttons[i].className = '' ;
                    ps[i].className = '' ;
                };

                this.className = 'active' ;
                ps[i].className = 'active' ;
            }


        };

5.解构赋值

  • 允许按照一定的模式 从数组的对象中取值,并对变量进行赋值,这被称为解构赋值
  • 需要去庞大对象数据中的某一个对象,就用到了解构赋值
  • 给编程带来 简便 模块化 就是基于 解构赋值 可读性增强
    <script>
        /*

            允许按照一定的模式 从数组和对象中  提取值 并对变量进行赋值 这被称为解构赋值  

        */

         let [a,b,c] = [1,2,3] ;

         console.log(a,b,c);


        //---------------------------------


         let arr = [1,2,3] ;

         let [a,b,c] = arr;

         console.log(a,c);



        //--------------------------------------------------------------

         let { foo ,  bar} = { foo : 'aaa' , bar : 'bbbb' }  ;   //左侧对象中变量的名称  必须是 右侧对象中存在的 key 不需要解构的顺序对应 它是key值对应

        console.log(bar,foo); 


        //----------------------------------------------------

         let { left : L,top : T } = { left:123,top:124};// 防止变量名已经存在 的报错问题  给变量起个别名 
         console.log(L,T);


        //---------------------------------------------------------

         let { foo : [a,b]} = { foo : [10,20] , bar : 'bbb'} ;  //多重解构
         console.log(a,b) ;

        //-------------------------------------------------------------

        let { left:L ,top : T ,width :W ,height :H} = getComputedStyle(document.body) ;//给编程带来 简便  模块化 就是基于 解构赋值  可读性增强 
        console.log(L,T,H,W);
    </script>

6.扩展运算符

  • ... 数据(数组,对象)的脱衣服,穿衣服
  • 数组或者对象转化成参数序列
        var arr = [14,3,5,2,6,8] ;

        console.log(Math.max( ...arr ));
        var arr1 = [14,3,5,2,6,8] ;
        var arr2 = [09,14,3,5,2,6,8];

        console.log([ ...arr1, ...arr2]);

7.字符串扩展

<script>


        /*
            模版字符串  : 保持格式 


        */

        var str = 'a   b' ;

        console.log(str);

        


    </script>

-没有 换行 ,不会报错,换行就会报错.

var str = 'a 
          b' ;

        console.log(str);
Uncaught SyntaxError: Invalid or unexpected token
未知语法错误 : 无效  意料之外的象征 

8.模版字符串 保持格式 Keep Format 标签的换行 是很方便的

变量表达式解析: '${1+1}'

var str = `

<ul>
    <li>

    </li>
</ul>
    <h1>${1+2}</h1>
        `;
        console.log(str);

浏览器解析

<ul>
    <li>

    </li>
</ul>
    <h1>3</h1>

它不支持语句,只支持表达式

函数调用时函数表达式调用,是被支持的,例如Math.random()

        var str = `

<ul>
    <li>

    </li>
</ul>
    <h1>${Math.random()}</h1>
        `;
        console.log(str);

它是不支持语句的,例如for var 这种类型的

var greeting = `  

        \`Hello\` World `

        console.log(greeting);




        `Hello` World 

在模版字符串中,如果使用反引号,需要用反斜杠 转义


<ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
var r = (`
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>



            `.trim()  ) ;

        console.log(r);

模版字符串课一互相嵌套

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

9. 数值的扩展

-浏览器 原先只支持8.10进制 现在支持 很多 (2.8.10.18)二进制 是2进1

10.数组扩展

11.对象扩展

-简洁表示法
-JS中对象的属性名只能是 字符串

12.迭代

-迭代协议
-迭代器
-迭代对象
-迭代语句
-for in     ~   for of 
-iterable 可迭代的

相关文章

网友评论

      本文标题:2018-08-06 第一天课 ES6前奏

      本文链接:https://www.haomeiwen.com/subject/kyqnvftx.html