zoukankan      html  css  js  c++  java
  • ES6 (总结篇二)

    一.字符串扩展

    1.indexOf和index

     之前做项目,遇到判断一个字符串是否存在,不清楚用index还是indexOf,百度之后,用了indexOf。indexOf:返回某个指定的字符串值在字符串中首次出现的位置 ,如果没有找到这个值就返回-1,这一点很好用,注意,indexOf对大小写敏感。index返回下拉列表中选项的索引位置。

      而ES6提供了3种判断字符串是否存在的方法。①.includes() 返回布尔值,是否找到该字符串 ②.startsWith() ③.endsWith() 他们可以提供第二个参数,表示搜索的位置,endsWith()和他们不同,他是针对前n个字符,二其他的是针对从第n个开始直到结束。

    二.函数的扩展

    1.箭头函数使用注意事项:

    (1).函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

    (2).不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出错误

    (3).不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用rest参数代替

    (4).不可以使用yield命令,因此箭头函数不能用作Generator函数

    注意,this对象的指向是可变的,但是在箭头函数中,它是固定的

    function foo() {
      setTimeout(() => {
        console.log('id:', this.id);
      }, 100);
    }
    var id = 21;
    foo.call({ id: 42 });
    // id: 42
    //如果是普通函数,执行时this应该指向全局对象window,这时输出21

     三.数组扩展

    1.Rest

      rest参数,形式为 "...变量名",用于获取函数多余参数,将多余参数放在数组中,和扩展运算符可以理解为互为逆函数

      扩展运算符:形式为"...",它是rest参数的逆运算,将一个数组转为用逗号分隔的参数序列

      例如:var list = ['大家好']  list.length =1,list[0]=大家好

      var list = [...'大家好']  list.length =3,list[0]=大,list[1]=家,list[2]=好

      扩展运算符最有用之一是:Math.max(...arr),比较数组中的最大值 ES5的写法是:Math.max.apply(null,[1,2,3])

    2.扩展运算符的作用

    (1).复制数组

    // ES5
    const a1 = [1,2]
    const a2 = a1.concat()
    // ES6
    const a1 = [1,2]
    const a2 = [...a1] 或者 const[...a2] = a1

    (2).合并数组

    // ES5
    [1, 2].concat(more)
    // ES6
    [1, 2, ...more]
    
    var arr1 = ['a', 'b'];
    var arr2 = ['c'];
    var arr3 = ['d', 'e'];
    
    // ES5的合并数组
    arr1.concat(arr2, arr3);
    // [ 'a', 'b', 'c', 'd', 'e' ]
    
    // ES6的合并数组
    [...arr1, ...arr2, ...arr3]
    // [ 'a', 'b', 'c', 'd', 'e' ]

    (3).与解构赋值结合(如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则报错)

    // ES5
    a = list[0], rest = list.slice(1)
    // ES6
    [a, ...rest] = list
  • 相关阅读:
    Auto Mapper01
    一个ActionResult中定位到两个视图—<团委项目>
    网站根目录的问题
    数据库基础和断点调试
    linux 环境下jmeter+ant+jenkins
    Postman 下载和使用
    用ExtentReports美化你的测试报告
    extentreports报告插件与testng集成
    SourceTree使用图解
    charles4.2下载与破解方法以及配置https
  • 原文地址:https://www.cnblogs.com/alhh/p/8252211.html
Copyright © 2011-2022 走看看