zoukankan      html  css  js  c++  java
  • ES6-个人学习大纲

    1,let   const学习补充

    1.1,let的知识点:

                01-作用域只限制在当前代码块内,代码块形式如下:

     {
            var str = '张三';
            console.log(str);
    
            let str1 = '李四';
            console.log(str1);
     }

                02-使用let声明的变量作用于不会被提升

    {
           console.log(str);
           var str =132;  //undefined
    
           console.log(kkk);
           let k=123;    //报错
    }

                03-在相同的作用域下不能申明相同的变量(var 声明的相同变量名的话,后来的会覆盖前面的)

    {
              var str1 = '张三';
              var str1 = '李四';
              console.log(str1); //李四
    
              let str2 = '王五';
              let str2 = '赵六';
              console.log(str2); //错误
    }

               04-for循环体现let的父子作用域

       var btns = document.querySelectorAll('button');
        for(var i=0; i<btns.length; i++){
            btns[i].onclick = function () {
                alert('点击了第' + i + '个按钮');
            }
        }
     
        var btns = document.querySelectorAll('button');
        for(var i=0; i<btns.length; i++){
            (function (i) {
                btns[i].onclick = function () {
                    alert('点击了第' + i + '个按钮');
                }
            })(i);
        }
    
        let btns = document.querySelectorAll('button');
        for(let i=0; i<btns.length; i++){
            btns[i].onclick = function () {
                alert('点击了第' + i + '个按钮');
            }
        }

    1.2,const的知识点:

              01-只在当前的代码块中有效

    {
            const a = 'zhangsan';
            const a = 'lisi';
            console.log(a);
     }

    02-作用域不会被提升         

    03-不能重复申

    04-不能被修改(基本数据类型)

    05-申明的常量必须赋值

    {
          const name;
          name = 'zhangsan';
          console.log(name); //报错
    }

    2,解构赋值

    01-基本用法(多个变量声明赋值)

     let [name, age, sex] =['李四', 20, '女'];
         name = 'hhh';
         console.log(name);   //hhh
         console.log(age);     //20
         console.log(sex);     //女

    02-对象的解构赋值(类型上面的数组形式赋值)

    let {name, age, sex} = {name: '张三', age: 55, sex: '男'};
         console.log(name);   //张三
         console.log(age);    //55
         console.log(sex);    //男

    03-数组的解构赋值

        //03-数组的解构赋值
        let [name, age, sex] =['李四', 20, '女'];
        let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
        console.log(arr1, arr2, arr3, arr4, arr5); //1 2 3 4 5


    let [a,,c] = [1, 2, 3];
    console.log(a);  //1
    console.log(c);   //3

    let [a,c] = [1, 2, 3];
    console.log(a);  //1
    console.log(c);  //2

    04-基本类型的解构赋值

     let [a, b, c, d, e] = '我是中国人';
        console.log(a);    //
        console.log(b);    //
        console.log(c);    //
        console.log(d);    //
        console.log(e);     //

    1,es6 对象里面属性的 键值对 传值,不用像es5 key:value这样子写。代码如下
           **对象的扩展

        let name = '张三';
        let age  = 18;
        let person = {
            name,
            age
        }

    2,Symbol 在对象里面的用法 for---of 的隐藏性 对属性有保护作用。代码如下

           ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现         有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。(摘自:ECMAScript 6 入门)

          //3,Symbol对象元素属性的保护作用
          let obj1={name:'jspang',skill:'web'};
          let age=Symbol();
          obj1[age]=18;
          for (let item in obj1){
              console.log(obj1[item]);
          } //这里不输出18
          console.log(obj1[age]);//18



    3,set() 数组形式的数据结构 数组的这节学习Set数据结构,注意这里不是数据类型,而是数据结构。它是ES6中新的东西,并且很有用处。Set的数据结构是以数组的形式构建的。
    WeakSet() 类似数组的对象 WeakSet 的成员只能是对象,而不能是其他类型的值


    3,Proxy Proxy 可以理解成预编译,在目标对象之前架设一层“拦截”,外界对该对象的访问
    **有get set 两种方法 (apply)


    4,promise Promise 解决回调地狱问题 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大
    有完成和未完成两种情况
      **resolve(val); 完成情况下 返回一个值
      **reject(val); 未完成情况下返回一个值
      **   返回的值在 then(function(val) {}) 中 使用

    new Promise(step1).then(function(val){
       console.log(val);
       return new Promise(step2);
    }).then(function(val){
       console.log(val);
    return new Promise(step3);
    }).then(function(val){
    console.log(val); return val; });

    5,cllass类定义
         * 1, constructor(brand,name) 类的实例对象的传参

         * 2,name() 类的方法

         *3,class Lexus extends Car 类的继承

    4,static info() 类中的静态方法 只由类本身才能使用
    类的实例对象不能引用

    6,模块化
        * 类引入:import Player from './Player';
        * 类输出:export default Player;
        方法:export { add, minus };
        import {add, minus} from './math';

    学到一点再一点点补全吧!没错我是懒人,哈哈哈

    最后送上:阮一峰大神的《

    ECMAScript 6 入门

    》的链接

  • 相关阅读:
    D触发器深入详细介绍(zhuanzai)
    脉冲
    数字电路中时序
    嵌入式中对某一位清0或置1
    8本推荐阅读的UX书籍
    Hadoop之HDFS的Shell操作
    Hadoop之HDFS概述
    Hadoop之搭建完全分布式运行模式
    Hadoop之运行模式
    Hadoop之运行环境搭建
  • 原文地址:https://www.cnblogs.com/xixiaijunjun/p/10638743.html
Copyright © 2011-2022 走看看