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 入门

》的链接

posted @ 2019-04-01 20:32 莫子诗里阅读(336) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

莫子诗里

ES6-个人学习大纲

ECMAScript 6 入门

公告