• 【ES6】---JavaScript(一)


    一、新增数据类型Symbol

        

    概念:

        Symbol代表独一无二的

        Symbol类型的值通过Symbol函数来生成,同时Symbol函数返回的值是唯一的

        Symbol函数可以接收字符串作为参数,但是即使相同参数返回的值也是唯一的

    作用:

        属性私有化

        数据保护

    没有参数的情况
    var s1 = Symbol();
    var s2 = Symbol();
    s1 === s2 // false
    
    
    有参数的情况
    var s1 = Symbol("foo");
    var s2 = Symbol("foo");
    
    s1 === s2 // false
    
    
    
    var mySymbol = Symbol();
    
    // 第一种写法var a = {};
    a[mySymbol] = 'Hello!';
    
    // 第二种写法var a = {
    [mySymbol]: 'Hello!'
    };
    
    // 第三种写法var a = {};
    Object.defineProperty(a, mySymbol, { value: 'Hello!' });
    
    
    Object.getOwnPropertySymbols(obj)  枚举symbol的key值
    注意:Symbol作为对象的key值得时候不能被for in进行遍历
    

      

    二、块级作用域

        概念:

            在ES6中凡是{}包裹的代码都是块级作用域,凡是在块级作用域中用let const声明的变量都在有一个暂时性死区

    {
      let a = 20;
    }
    console.log(a);//报错
    

      

    三、var  let const 变量声明

        

        对比不同

    var
        支持变量声明与解析
    
        不支持块级作用域
    
        允许重复声明
    
    let
        不支持变量声明与解析
    
        支持块级作用域
    
        不允许重复声明
    
        用let声明的变量或者方法只会在代码块中有效
        {
            let a = 10;
           var b = 20;
        }
    
        console.log(a);//报错
    
    const
    
        不支持变量声明与解析
    
        支持块级作用域
        
        不允许重复声明
        
        声明常量,一旦确定不允许被修改
    
        声明常量必须赋值  不能跟var 一样声明后再定义
    

      

    四、解构赋值

            概念:

                    允许按照一定模式,从对象和数组中提取值

    // 数组解构
        let [a,b,c] = [1,2,3];
    
    // 对象解构
        let {name,age} = {name:"张三",age:19};
    //  注意对象解构  key值必须一一对应
    
    
    //  对象解构+别名
    let {name : _name , top : _top } = {name:"张三",top:20}
    //  因为name和top属于关键字,因此我们可以通过别名的方式来更改名称
    
    //  多重解构
    
    let {obj : { name }, arr:[ a, b]} = {obj:{name:"张三"},arr:[10,20]}
    
    
    //  案例:
        let {letf:l , top: t} = document.getElementById("box");
    

      

    五、扩展用算符

        概念:

            将数组或者对象转换成参数序列  使用逗号分隔的序列

        作用:

                1、数组、对象的合并

                2、函数剩余参数

                3、替代arguments

    // 数组合并
    var arr  = [10,20,30];
    var arr1 = [40,50,60];
    var newArr = [...arr,...arr1];
    // 展开数组
    console.log(Math.max(...arr));
    
    // 对象合并
    var obj = {100,height:200};
    var obj2 = {left:100,top:200};
    var newObj = {...obj,...obj2};
    

      

    六、字符串模板

        

       1、字符串太长需要换行怎么办?

    // 常规解决方案:
              var a = '<div>'+
                        '<span>'+num+'</span>'+
                      'div>';
    // ES6神器:
    var b = `
        <div>
             <span></span>
        </div>
      `;
    

        2、字符串拼接太麻烦怎么办?

    // ES6神器(字符串模板):
       var phone = 18200000000;
       var intro = `my name is pine, my phone is ${phone}`; 
       console.log(intro); //${phone}被替换成18200000000
       /* 
         说明:
              1、使用 `` 反单因号  代替 '' 或者 ""
              2、使用 ${变量} 实现变量拼接
        */
    

          3、includes  字符串搜索

    // 之前使用indexOf进行查找,利用的是indexOf方法的特性,找打了返回下标,
    // 找不到返回-1,所以每次你需要这么写:
         var str = 'abcd';
         if( str.indexOf('c') > -1 ){}  //需要判断是否>-1
         
     // ES6神器:includes方法
     // str.includes(查找的内容);  找到返回true,找不到返回false
       var str = 'good method!';
       str.includes('method'); //true
    

      4、判断首尾 startsWith endsWith

     /*
        startsWith用于判断是否位于头部,
        endsWith判断是否位于尾部,
         可以说这两个方法是includes方法的扩展
       */
       let  str = 'how are you?';
       str.startsWith('how');//true
       str.endsWith('?');//true
    

      

    5、repeat 字符串重复(懒人福利)

     //str.repeat(n); 将字符串重复n次(n是整数)
    
      let str = 'money';
      str.repeat(2); // 'moneymoney'
    

      

    七、对象新增的方法

        1、对象的简写

    var a = 10;
    var obj = {a}
    //等价
    var obj = {a:10};
    
    //当key值与value值一样的时候我们可以写一个
    

        2、Object.is

    //判断2个对象是否指向同一个内存地址
    var obj = {a:1,b:2};
    var obj1 = obj
    
    Object.is(obj,obj1);// true
    

          3、Object.assign

    /Object.assign 合并对象
    var obj = {name:"Alley",age:18};
    var obj2 = {sex:"男"}
    
    var newObj = Object.assign(obj,obj2);
    console.log(newObj); //{name:"Alley",age:18,sex:"男"}
    

      

    【ES6】---JavaScript(二)

    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    五、页脚footer
    一、页眉header
    四、(2)列布局+媒体查询
    二、导航栏nav
    coredns介绍
    pandas指定列索引和行索引
    学习笔记246—国家自然科学基金申请书写作攻略【收藏】
    Axios请求传参的格式
    NodeJspm2常用命令
    FastAPI实现谷歌DialogFlow 接口问答批量导入导出和批量删除 DialogFlow batch import and export Q&A interface
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/11683393.html
Copyright © 2020-2023  润新知