当前位置 主页 > 网站技术 > 代码类 >

    ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    栏目:代码类 时间:2020-01-22 12:10

    本文实例讲述了ES6学习笔记之字符串、数组、对象、函数新增知识点。分享给大家供大家参考,具体如下:

    1、模板字符串

    反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来

      let str=`
        <!DOCTYPE html>
          <html lang="en">
            <body>
              <div>
                <p class="pClass">格式化字符串</p>
              </div>
            </body>
          </html>
      `;
      console.log(str);
    
    

    2、转化为数组

    Array.form将伪数组、集合转化为数组

    let allLi=document.querySelectorAll('li');
    console.log(Array.isArray(allLi));//输出false,allLi不是个数组
    let arr=Array.from(allLi);
    console.log(Array.isArray(arr));//输出true,arr被转化为数组
    
    

    Array.of将元素构建为数组

    let arrayOf=Array.of('str',2,{});  //创建由字符串、数字、对象构成的数组
    let arr=Array.of(7);         //数组包含一个元素7
    let arr=Array(7);          //数组包含7个空元素
    
    

    3、类的封装

    通过class来包装类

      class Person{    
        constructor(name,age){  //Person类的构造函数
          this.name=name;
          this.age=age;
        }
        
         print(){        //类函数输出
          console.log("My name is "+this.name+",I'm "+this.age+" years.");
        }
      }
      let p=new Person('tony',15);
      p.print();
    
    

    4、对象的使用

    在用变量作为对象的元素时,会将变量名作为键值,将变量值作为值

    let name='tony';
    let age=15;
    let person={
      name,
      age
    }  
    console.log(person);
    
    

    输出结果为:

    Object { name: "tony", age: 15 }

    Object.assign()方法实现对象合并,参数为:合并目标,合并源1,合并源2...

    let obj1={'name':'tony'};
    let obj2={'age':15};
    let obj3={'sex':'男'};
    let obj={};
    Object.assign(obj,obj1,obj2,obj3);  //将后面的对象并到第一个对象
    console.log(obj);
    
    

    输出为:

    Object { name: "tony", age: 15, sex: "男" }

    5、延展操作符...

    将整体字符串、对象等拆成单个元素  

    let str="这是一个字符串";
    let arr=[...str];
    console.log(arr);
    
    

    输出为:

    6、函数Rest参数

    当不确定传入的参数个数时,可以采用"...参数"的方式,然后遍历操作每个参数

      function sum(name,...num) {
        console.log(name);
        let res=0;
        for (let value of num){  //将后面未知个数的参数当作数组num遍历
          res+=value;      
        }
        return res;
      }
      console.log(sum('tony',10,2,3));
    
    

    7、箭头函数

    箭头函数可以将函数function (参数) {表达式}简化为:(参数...)=>{表达式...},无需输入function,甚至省略(),{},return。

    1、当只有一个参数时,可以写为参数 => 表达式,例如使用map函数遍历一个数组,使每个元素乘2:

    var arr = [1, 4, 9, 16];
    const map1 = arr.map(x => x * 2);  //利用map()遍历数组,传入一个参数当作x,并返回x*2
    
    

    map中的函数以x为参数遍历每个arr中的元素,*2之后自动返回,形成map1数组