欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-15 17:06:00
本文实例讲述了es6学习笔记之字符串、数组、对象、函数新增知识点。分享给大家供大家参考，具体如下： 1、模板字符串 反引号`` 内用于输入格式化的字符串文本，在``内可以将表达式用...

本文实例讲述了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);

输出为：

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

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数组

2、当有多个参数时，需要给参数加括号：() =>表达式，例如遍历数组输出索引与值：

let arr=['data0','data1','data2'];
arr.foreach((value,index)=>   //通过foreach遍历数组，传入两个参数value与index
  console.log(index+':'+value)
);

输出如下：

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

3、当有多行表达式时，要用{}将函数包含成一块：() =>{}，并且使用块语句时，函数不会自动返回值，需要使用return将值返回。

4、javascript的{}也可以表示一个对象，当使用箭头函数返回对象时，为了与函数体区别需要将对象用()包含起来：() =>({})，否则会报错，例如在react中使用setstate方法，需要返回一个对象:

this.setstate((prevstate) =>({
  flag: !prevstate.flag
}))

8、promise函数

在使用接口调用时，有时需要根据调用返回是否成功分别去调用不同的函数，es6提供了promise函数来解决这个问题。在调用成功时，执行.then方法，失败时执行.catch方法来分别处理不同情况，返回不同的数据。

例如定义一个检查登陆的promise方法，当传入参数为true时登陆成功，回调函数为then，false失败，调用catch：

    //定义promise函数
    let checklog=function (flag) {    
     return new promise(function(resolve,reject){
      if(flag){        //如果判定条件为真，执行resolve函数
       resolve({       //其括号内的参数作为结果返回
        status:1,
        info:"登陆成功"
       })
      }else{          //判定为假执行reject函数
       reject({
        status:0,
        info:"登陆失败"
        }
       )
      }
     })
    };
    //使用promise函数
    checklog(false).then(res=>{  //根据promise返回的不同值分别执行then或catch
     console.log(`成功信息：${res.info}`);
    }).catch(err=>{
     console.log(`错误信息：${err.info}`);
    })

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

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。

上一篇： 随手记贷款可靠吗，随手记贷款利息费用详解

下一篇： 在字符串中把网址改成超级链接

推荐阅读