es6 学习笔记

流浪的小兵

于 2021-05-05 15:57:41 发布

阅读量219

点赞数 1

本文链接：https://blog.csdn.net/qq_40877369/article/details/116425936

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

最近在整理学习整理 es6 部分常用语法放在博客上方便自己和大家查找如有错误请指正后续会继续更新补充内容

1. let 变量声明

特点：
1）变量不能重复声明特点

   let star = '罗志祥'
   let star = '小猪'   // 会报语法错误

 2）块级作用域 全局，函数，eval（es5严格模式）

 {
		    let   girl = '张明';
		 }
		  console.log(gril); //报语法错误

3）不存在变量提升

		console.log(name)
		var  name = '小兵子'

不影响作用域链

   {
            let school = '小兵子';
            function fn(){
                console.log(school);
            }
            fn();
      }

2. const 声明常量值不能修改的量称为常量

1）一定要赋初始值
2）一般常量使用大写
3）常量不能被修改
4）块级作用域
5）对于数组对象的修改，不算做对常量的修改，不会报错

 const TEAM = ['UZI',"MXLG",'Ming','Letme'];
 TEAM.push('小名字') //不会报错

3. ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值。这被称为结构赋值

1）数组的结构赋值

  const F4 = ['小沈阳','刘能','赵四','宋小宝'];
  let [xiao,liu,zhao,song] = F4;
        console.log(xiao);
        console.log(liu);
        console.log(zhao);
        console.log(song);

2）对象的结构赋值

 const zhao = {
            name:'赵本山',
            age:'不知道',
            xiaopin:function(){
                console.log('我可以演小品');
            }
        }
        let {name,age,xiaopin} =zhao;
        console.log(name);
        console.log(age);
        console.log(xiaopin);
        xiaopin();

4. es6 y引入新的声明字符串的方法 `` ‘’ “” 模板字符串

1）声明

  let str =   `这是一个字符串`;
   console.log(str,typeof str);

2 ）在反引号中可以直接出现换行符

5 es6 允许在大括号里面直接写入变量和函数，作为对象的属性和方法。

 let name = '小兵子';
 let change = function(){
      console.log('我命由我，不由天');
   }
  const school = {
       name,
       change,
       improve(){
                console.log('es6对象中方法声明')
       }
     } 
     console.log(school);

6 箭头函数

1）声明函数

    let fn = function(){
       }
   let fu = (a,b) =>{
        return a + b;
   }

2）this 是静态的 this始终指向函数声明时所在作用域下的 this 的值

     function getName(){
          console.log(this.name); // 指向window
      }
      let getName2 = ()=>{
          console.log(this.name);
      }
        window.name = '测试呀';
        const shcool = {
            name:'ATGUIGU'
        }
      //   直接调用
        getName(); // 输入：测试呀
        getName2();//输出： 测试呀
          // call 方法 改变this指向
        getName.call(shcool);  //this指向改变 输出 ATGUIGU
        getName2.call(shcool); // this 没有改变  输出 测试呀

2）不能作为构造实例化对象

 let Person=(name,age)=>{
            this.name = name;
            this.age =age;
        }
        let me = new Person('xiao',30);
        console.log(me) // 报错  Uncaught TypeError: Person is not a constructor

3）不能使用 arguments 变量

  let fn = ()=>{
            console.log(arguments); //ReferenceError: arguments is not defined
        }
      fn(1,2,3)

4）箭头函数简写

    // 1) 省略小括号，当形参有且仅有一个的时候
        let add = n =>{
            return n + n;
        }
        // 2) 省略花括号 ， 当代码体只有一条语句的时候 
        // 此时 return 必须省略 而且语句的执行结果就是函数的返回值
        let pow = (n) =>  n*n;
        console.log(pow(8));

7. es6 允许给函数形参付初始值

     1） 形式初始值 具有默认值的参数，一般位置要靠后(潜规则)
          function add(a,b,c=10){
              return a+b+c;
          }
          let result =add(1,2);
          console.log(result) // 13

2）与解构赋值结合

   function connect({host="127.0.0.1",username,passddword,port}){
            console.log(host)  
            console.log(username)
            console.log(passddword)
            console.log(port)
        }
        connect({
            // host:'localhost', // 没有传，则使用默认值
            username:'root',
            passddword:'root',
            port:3306
        })

8 引入rest参数，用于获取函数的实参，用来代替 arguments

   // es5 获取实参的方式
         function date(){
             console.log(arguments)
         }
         date('baizhi','ajiao','sihui');
        
        // rest 参数  必须要放在 参数的最后
        function date(...args){
            console.log(args);
        }
        date('aj',"bz",'sih')

9. 扩展运算符能将数组转换为逗号分隔的参数序列

  // 声明一个数组
        const tfBodys = ['易烊千玺','王源','王俊凯'];
        // //声明一个函数
        function changwan(){
            console.log(arguments);  //  
        }
         changwan(...tfBodys);

数组合并

    const kuaizi = ['王太力','肖央'];
        const fenghuang = ['曾毅','零花'];
        const hebing = [...kuaizi,...fenghuang];
        console.log(hebing) //["王太力", "肖央", "曾毅", "零花"]

2）数组克隆浅拷贝

 const sanzhihua = ['f','g','m'];
        const sanyecao = [...sanzhihua];
        console.log(sanyecao)//["f", "g", "m"]

3）将伪数组转为真正的数组

10. es6 引入了一种新的原始数据类型Symbol 表示独一无二的值，js中第七种数据类型，是一种类似于字符串的数据类型

特点：
1) Symbol 的值是唯一的用来解决命名冲突问题
2) Symbol值不能与其他数据进行运算
3) Symbol 定义的对象属性不能使用for…in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所以键名

  // 创建 Symbol();
        let s = Symbol();
        // console.log(s,typeof s);
        let s2 = Symbol('小兵子');
        let s3 = Symbol('小兵子');
        console.log(s2 == s3) //返回 false 编号不一样
         // Symbol.for() 创建
        let s4 = Symbol.for('小兵子');
        let s5 = Symbol.for('小兵子');
        console.log(s4 == s5) //返回 true 
        
        // 不能与其他类型数据进行运算
        let result = s+100; // Uncaught TypeError: Cannot convert a Symbol value to a number
        let result = s > 100;  // Uncaught TypeError: Cannot convert a Symbol value to a number

Symbol 的使用给对象添加方法 up down

 let game= {
            up(){
            },
            down(){
            },
            name:'xiaofanzi '
        }
        
        //声明一个对象   不知道原对象中有没有该方法  怕引起重名
        let methods = {
            up:Symbol(),
            down:Symbol()
        }
        game[methods.up] = function(){
            console.log('我可以改变形状')
        }
        game[methods.down] = function(){
            console.log('我可以快速下降')
        }
        console.log(game) //{name: "xiaofanzi ", up: ƒ, down: ƒ, Symbol(): ƒ, Symbol(): ƒ}
        let youxi ={
            name:'狼人杀',
            [Symbol('say')]:function(){
                console.log('我可以发言')
            },
            [Symbol('zibao')]:function(){
                console.log('我可以自爆')
            }
        }
        console.log(youxi); // {name: "狼人杀", Symbol(say): ƒ, Symbol(zibao): ƒ}

Symbol 内置值

  class Person{
            static [Symbol.hasInstance](param){
                console.log(param);
                console.log('我被用来检测类型了');
                return false;
            }
        }
        let o = {};
        console.log(o instanceof Person); 
           const arr = [1,2,3];
           const arr2 = [4,5,6];
           arr2[Symbol.isConcatSpreadable] = false; 
           console.log(arr.concat(arr2));

11 迭代器迭代器是一种接口，为各种不同的数据结构提供统一的访问机制

 const xiyou = ['当僧','随悟空','zhubajie','shaseng'];
         // 使用for...of 遍历数组
        for(let v of xiyou){
            console.log(v);
        }
        console.log(xiyou); //  Symbol(Symbol.iterator)  
         let iterator = xiyou[Symbol.iterator]();
    
        //调用对象的next方法  返回一个结果 {value: "shaseng", done: false}
         const xiyou = ['当僧','随悟空','zhubajie','shaseng'];
         let iterator = xiyou[Symbol.iterator]();
        console.log(iterator.next()); //{value: "当僧", done: false}
        console.log(iterator.next()); // {value: "随悟空", done: false}
        console.log(iterator.next()); // {value: "zhubajie", done: false}
        console.log(iterator.next()); // value: "shaseng", done: false}
        console.log(iterator.next()); // {value: undefined, done: true} 最后一个 done返回true;value值为undefined；

  // 声明一个对象
       const banji = {
           name:'一班',
           stus:[
               'xiaoming',
               'xiaoning',
               'xiaotian',
               'knight'
           ],
           [Symbol.iterator](){
               let index = 0;
               let _this =this;
               return {
                   next:function(){
                       if(index < _this.stus.length){
                            const resulut = {value:_this.stus[index],done:false};
                            index++;
                            return resulut;
                       }else{
                            return {value:undefined,done:true};
                       }
                   }
               };
           }
       }
       // 遍历这个对象 中 stus 的数组值
       for(let v of banji){
           console.log(v);
       }

生成器就是一个特殊的函数

  function * gen(){
        //   console.log('hello generator')
        console.log(111);
        yield '一只没有耳朵';
        console.log(222);
        yield '一只没有尾巴';
        console.log(333);
        yield '真奇怪';
        console.log(444);
     }
     let iterator = gen();
     console.log(iterator);
    iterator.next(); //执行生成器  通过next 方法向下执行
    iterator.next();
    iterator.next();
    iterator.next();
    
        // 遍历 可以把yield 值遍历出来
    for(let v of gen()){
        console.log(v);
    }

3）生成器参数

   function * gen(arg){
        console.log(arg) //AAA
      let one = yield 111;
      console.log(one) //BBB
     let two =  yield 222;
     console.log(two) //CCC
      let three =  yield 333;
      console.log(three); //DDD
    }
    // 执行获取迭代器对象
    let iterator = gen('AAA');
    console.log(iterator.next()); //  {value: 111, done: false}
    //next方法可以传入实参的
    console.log(iterator.next('BBB')); // {value: 222, done: false}
    console.log(iterator.next('CCC')); // {value: 333, done: false}
    console.log(iterator.next('DDD')); // {value: undefined, done: true}

4）异步编程生成器函数示例

需求 ：(1) 1s 后 控制台输出111 2s后输出  222  3s后输出 333；
 //es5 写法 形成回调地狱
    setTimeout(()=>{
        console.log(111);
        setTimeout(()=>{
            console.log(222);
            setTimeout(()=>{
                console.log(333);
            },3000)
        },2000)
    },1000)
    // 生成器 新写法
    function one(){
        setTimeout(() => {
            console.log(111);
            iterator.next();
        }, 1000);
    }
    function two(){
        setTimeout(() => {
            console.log(222);
            iterator.next();
        }, 2000);
    }
    function three(){
        setTimeout(() => {
            console.log(333);
            iterator.next();
        }, 3000);
    }
    function * gen(){
        yield one();
        yield two();
        yield three();
    }
    let iterator = gen();
    iterator.next();
    
    
  (2)  模拟接口请求   获取  用户数据  订单数据  商品数据
      function getUsers(){
         setTimeout(() => {
             let data = '用户数据';
             // 调用 next 方法，并且将数据传入
             iterator.next(data);
         }, 1000);
     }
    
     function getOrders(){
         setTimeout(() => {
             let data = '订单数据';
             iterator.next(data);
         }, 1000);
     }
     
     function getGoods(){
         setTimeout(() => {
             let data = '商品数据';
             iterator.next(data);
         }, 1000);
     }
     function * gen(){
      let users =  yield getUsers();
      console.log(users)
      let orders = yield getOrders();
      console.log(orders);
      let goods  = yield getGoods();
      console.log(goods);
     }
     let iterator = gen();
     iterator.next();

12 Promise 基本语法

  const P = new Promise(function(resolve,reject){
        setTimeout(() => {
            // let data = '用户数据';
            // resolve(data);// 成功 结果
            let err = 'fail:data is fail'
            reject(err);  // 获取数据失败
        }, 1000);
    });
    //  调用promise 对象的 then方法
    P.then(function(value){
        console.log(value)
    },function(reason){
        console.error(reason);
    })

 const P = new Promise((resolve,reject)=>{
    const xhr = new XMLHttpRequest();
    xhr.open('GET','https://api.apiopen.top/getJoke');
    xhr.send();
    xhr.onreadystatechange  = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                // 表示成功
                // console.log(xhr.response);
                resolve(xhr.response);
            }else{
                // 如果失败
                // console.log(xhr.status);
                reject(xhr.status);
            }
        }
    }
   })
   P.then(res=>{
       console.log(res)
   },err=>{
       console.log(err)
   })

13集合

   let s = new Set();
   let s2 = new Set(['大事','小事','好事','坏事','小事']);
   
   // 元素个数
   console.log(s2.size);
   // 添加新的元素
   s2.add('喜事');
   // 删除元素
   s2.delete('坏事');
   // 检测
   console.log( s2.has('好事'));
   // q清空
   s2.clear();
   console.log(s2)
   for(let v of s2){
      console.log(v);
   }

1）数组去重

  let arr = [1,3,4,5,4,3,2,1];
  let result = [...new Set(arr)];
   console.log(result);//[1, 3, 4, 5, 2]

2）取交集

  let arr = [1,3,4,5,4,3,2,1];
  let arr2 = [4,5,6,5,6];
  let result = [...new Set(arr)].filter(item=>{
      let s2 = new Set(arr2);
      if(s2.has(item)){
          return true;
      }else{
          return false;
      }
  }); 
  console.log(result); //[4, 5]

3）取并集

 let arr = [1,3,4,5,4,3,2,1];
  let arr2 = [4,5,6,5,6];
  let union = [...new Set( [...arr,...arr2] )];
  console.log(union); // 去重 并取并集  [1, 3, 4, 5, 2, 6]

4）取差集

  let arr = [1,3,4,5,4,3,2,1];
  let arr2 = [4,5,6,5,6];
  let diff = [...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));
  console.log(diff); //[1, 3, 2] 两个数组相差的数

14 对象Object 新增的方法

1）Object.is判断两个值是否完全相等

  console.log(Object.is(120,120)); // true

2 ）Object.assign 对象合并

 const config1 = {
       host:'loacHost',
       port:3306,
       name:'root',
       pass:'root'
   }
   const config2 = {
       host:'http://atguigu.com',
       port:33060,
       name:'atguogu.com',
       pass:'123456'
   }
   console.log(Object.assign(config1,config2)); // config2 会覆盖  config1
    输出 {host: "http://atguigu.com", port: 33060, name: "atguogu.com", pass: "123456"}

3） Object.setPrototypeOf 设置原型对象 Object.getPrototypeof

  const school = {
        name:'尚硅谷'
    }
    const cities = {
        xiaoqu:['北京','上海','深圳']
    }
    Object.setPrototypeOf(school,cities);
    console.log(Object.getPrototypeOf(school)); //{xiaoqu: Array(3)}
    console.log(school); //{name: "尚硅谷"}  在school 的原型上会有cities数组

15 Map 的用法

概念 map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
注意：map不能对空数组进行检测操作
map不会改变原始数组
1）语法

 array.map(function(currentValue, index, arr), thisIndex)

（1）function(currentValue, index, arr) 必须传，为一个函数，数组中的每一个元素都会执行这个函数。
currentValue 必须传，当前元素的值
index 可选当前元素的索引
arr 可选当前元素属于的数组对象
（2）thisValue 可选对象作为该执行回调时使用，传递给函数用作this的值
2）实例返回由原数组中每一元素的平方组成的新数组元素

   let array = [1,2,3,4,5];
   let newArray = array.map((item)=>{
      return item * item;
   })
   console.log(newArray); // [1, 4, 9, 16, 25]

3）map 的声明

 let m = new Map();

4）添加元素

  m.set('name','11122')
   m.set('change',function(){
       console.log('我们可以改变你！！');
   })
   let key = {
       school :'ATGUIGU'
   };
   m.set(key,['北京','上海','广州'])
   console.log(m)
   console.log(m.size); // 获取大小  3
    m.delete('name') // 删除key为name的元素
    console.log(m.get('change')) // 获取key为change  的元素         
    控制台输出
    [[Entries]]
      0: {"name" => "11122"}
       1: {"change" => function(){ console.log('我们可以改变你！！'); }}
       2: {Object => Array(3)}
       size: 3

16 循环总结

1）. for-in 循环
for-in循环主要用于遍历对象
格式为 for(key in objects){}
keys 表示obj对象的每一个简直对的键因此需要使用 obj[key]来取到每个值
可以延续原型链遍历出对象的原型属性通过hasOwnProperyt判断一个属性是不是对象自身上的属性
obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原先属性

function Person(){
    this.name = "张三";
    this.age = 14;
    this.func1 = function(){
        
    }
}
//实例化这个类
var zhangsan = new Person();
//使用for-in遍历这个对象
for(keys in zhangsan){
   console.log(keys) //  打印出对应的 name age func1  
    console.log(zhangsan[keys]) // 打印属性值
}

2） for-of 循环
数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for…of循环遍历它的成员。也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法
适用范围数组 set和map结构某些类似数组的对象以及字符串

  var arr = ['a','b','c','d'];
  for(let a in arr){
     console.log(a); // 打印的时 key值 0，1，2，3
  }
  for(let a of arr){
     console.log(a) // 直接打印的时 a,b,c,d
  }
  
   var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
    for (var e of engines) {
      console.log(e);
    }
    // Gecko  Trident    Webkit
    
    var es6 = new Map();
    es6.set("edition", 6);
    es6.set("committee", "TC39");
    es6.set("standard", "ECMA-262");
    for (var [name, value] of es6) {
      console.log(name + ": " + value);
    }
    // edition: 6
    // committee: TC39
    // standard: ECMA-262
    
        // 字符串
    var str = "hello";
    
    for (let s of str) {
      console.log(s); // h e l l o
    }
    
    // DOM NodeList对象
    let paras = document.querySelectorAll("p");
    
    for (let p of paras) {
      p.classList.add("test");
    }
    
    // arguments对象
    function printArgs() {
      for (let x of arguments) {
        console.log(x);
      }
    }
    printArgs('a', 'b');// 'a' 'b'

for-of 不同于forEach方法，它可以与break、continue和return配合使用。
3） for 循环
for循环
　　1、for有三个表达式：①声明循环变量；②判断循环条件；③更新循环变量；
　　　　三个表达式之间，用;分割，for循环三个表达式都可以省略，但是两个“;”缺一不可。
　　2、for循环的执行特点：先判断再执行，与while相同
　　3、for循环三个表达式都可以有多部分组成，第二部分多个判断条件用&& ||连接，第一三部分用逗号分割；

for (var num =1; num<=10; num++) {
       document.write(num+" <br />"); //1 2 3 4 5 6 7 8 9 10 
 }

4）循环控制语句
1、break：跳出本层循环，终止循环进行。
　　　　如果循环有多层，则break只能跳出一层。
2、continue：跳过本次循环剩余的代码，继续执行下一次循环。
　　　　①对与for循环，continue之后执行的语句，是循环变量更新语句i++；
　　　　②对于while、do-while循环，continue之后执行的语句，是循环条件判断；
　　　　因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环。

5）forEach es5中数组的操作方法主要是时循环遍历数组
格式 arrays.forEach(function(value,index,array){})
value 为遍历的数组内容
index 对应的数组索引
array 原数组本身

let arr = ['a','b','c'];
arr.forEach(function(value,index,array){
   console.log(value) // 打印  a   b   c
})

6）filter 对数组进行筛选并返回一个新数组
语法格式

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。
它接受以下三个参数：
element 数组中当前正在处理的元素
index 可选正在处理的元素在数组中的索引
array 可选调用了 filter 的数组本身
thisArg 可选执行 callback 时，用于 this 的值。
1）过滤数组中的假值

 let array = [false,null,undefined,NaN,0,"",1,'xiaobingzi'];
let newarray = array.filter(Boolean)
  console.log(newarray)  // [1, "xiaobingzi"]

数组中不同的部分

let arr1 = [1, 2, 3, 4], arr2 = [3, 4, 5];
let arr= [...arr1, ...arr2].filter(item => !arr1.includes(item) || !arr2.includes(item)) //[1, 2, 5]
  console.log(arr) //[1, 2, 5]

3）数组去重

let arr = ['name','age','friends','height','weight','name','age']
let newArr = arr.filter((v, index)=> {
    return arr.indexOf(v) === index // 该元素第一次在数组中出现的位置是否等于当前索引值
})
console.log(newArr) //["name", "age", "friends", "height", "weight"]
4) es5源码实现
 if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();
   
    var len = this.length >>> 0, // 这一步是保证 this.length 为正整数
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
   
    res.length = c; // shrink down array to proper size
    return res;
  };
}