zoukankan      html  css  js  c++  java
  • ES6

    箭头函数有几个使用注意点。

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

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

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

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

    定时器执行时指向的window对象,但是在箭头函数中可以修改定时器中this的指向
    对象的方法不建议使用箭头函数

     扩展运算符:扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,只能放在最后一位。

    console.log(...[1, 2, 3])
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。
    // ES5 的写法 接收一个数组然后返回参数序列
    Math.max.apply(null, [14, 3, 77]) // ES6 的写法 Math.max(...[14, 3, 77])

    可以克隆数组

    const a1 = [1, 2];
    // 写法一
    const a2 = [...a1];
    // 写法二
    const [...a2] = a1;

    实现了 Iterator 接口的对象 Map 和 Set 结构,Generator 函数(看完lterator再看数组)

     call(可以继承父类)和apply(传递数组)都可以调用函数;bind不可以调用函数,返回一个新的函数

     Array.from方法用于将两类对象转为真正的数组:类似数组的对象(常见的是:DOM的NodeList,以及函数内部的arguments,任何有length属性的对象,都可以通过Array.from方法转为数组)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)

    Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种 Unicode 字符,可以避免 JavaScript 将大于uFFFF的 Unicode 字符,算作两个字符的 bug。

    Array.of()方法用于将一组值,转换为数组。

    slice(start,end)//返回的是截取的数组
    

      

    Array.of(3, 11, 8) // [3,11,8]
    Array.of(3) // [3]
    Array.of(3).length // 1
    // NodeList对象
    let ps = document.querySelectorAll('p');
    Array.from(ps).filter(p => {
      return p.textContent.length > 100;
    });
    
    // arguments对象
    function foo() {
      var args = Array.from(arguments);
      // ...
    }

     copywithin():在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

    Array.prototype.copyWithin(target, start = 0, end = this.length)

    它接受三个参数。

    • target(必需):从该位置开始替换数据。如果为负值,表示倒数。
    • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
    • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

    这三个参数都应该是数值,如果不是,会自动转为数值。

    // 将3号位复制到0号位
    [].copyWithin.call({length: 5, 3: 1}, 0, 3)
    // {0: 1, 3: 1, length: 5} 不懂

    数组的find()和findindex():

    数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

    [1, 5, 10, 15].find(function(value, index, arr) {
      return value > 9;
    }) // 10

    数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

    [1, 5, 10, 15].findIndex(function(value, index, arr) {
      return value > 9;
    }) // 2

    这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。

    数组实例的fill()

    fill方法使用给定值,填充一个数组。

    //fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
    ['a', 'b', 'c'].fill(7, 1, 2)
    // ['a', 7, 'c']
    
    //注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
    
    let arr = new Array(3).fill({name: "Mike"});
    arr[0].name = "Ben";
    arr
    // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
    
    let arr = new Array(3).fill([]);
    arr[0].push(5);
    arr
    // [[5], [5], [5]]

    ES6 提供三个新的方法——entries()keys()values()——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1
    
    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
    // 'a'
    // 'b'
    
    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"

    Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016 引入了该方法,第二个参数表示开始搜索的起始位置。 

    [1, 2, 3].includes(2)     // true
    [1, 2, 3].includes(4)     // false
    [1, 2, NaN].includes(NaN) // true

    创建类

    语法: 

    class name {  //class body }

     模板字符串:

            //2. 内容中可以直接出现换行符
            let str = `<ul>
                        <li>沈腾</li>
                        <li>玛丽</li>
                        <li>魏翔</li>
                        <li>艾伦</li>
                        </ul>`;
            //3. 变量拼接
            let lovest = '魏翔';
            let out = `${lovest}是我心目中最搞笑的演员!!`;
            console.log(out);

    简化对象写法

       //ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
            //这样的书写更加简洁
            let name = '尚硅谷';
            let change = function(){
                console.log('我们可以改变你!!');
            }
    
            const school = {
                name,
                change,
                improve(){
                    console.log("我们可以提高你的技能");
                }
            }
    
            console.log(school);
  • 相关阅读:
    LeetCode 123. Best Time to Buy and Sell Stock III (stock problem)
    精帖转载(关于stock problem)
    LeetCode 122. Best Time to Buy and Sell Stock II (stock problem)
    LeetCode 121. Best Time to Buy and Sell Stock (stock problem)
    LeetCode 120. Triangle
    基于docker 搭建Elasticsearch5.6.4 分布式集群
    从零开始构建一个centos+jdk7+tomcat7的docker镜像文件
    Harbor实现容器镜像仓库的管理和运维
    docker中制作自己的JDK+tomcat镜像
    docker镜像制作---jdk7+tomcat7基础镜像
  • 原文地址:https://www.cnblogs.com/zyq982796687/p/14755318.html
Copyright © 2011-2022 走看看