• 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);
  • 相关阅读:
    防抖、节流函数
    vue如何监听数组的变化
    scss的循环和数组
    linux更新node版本
    函数节流和防抖函数
    vue-cli 使用,更新
    webstorm自动编译scss
    git冲突的处理
    linuix 安装 mysql8
    脚本安装mysql 8
  • 原文地址:https://www.cnblogs.com/zyq982796687/p/14755318.html
Copyright © 2020-2023  润新知