美文网首页
ES6JS运算符及数组扩展方法

ES6JS运算符及数组扩展方法

作者: 说辞 | 来源:发表于2022-10-17 21:01 被阅读0次

运算符

扩展运算符

扩展运算符是三个点(...),和rest参数的逆运算一样,将一个数组转为用逗号分隔的参数序列。

<script>
    // ... 扩展运算符能将 数组 转换为逗号分隔的 参数序列
    const boys = ['张三','李四','王五']
    // 声明一个函数
    function people(){
        console.log(arguments);
    }
    people(...boys)//['张三','李四','王五']
</script>

数组合并操作如下:

<script>
    // 数组的合并
    const number = [1,2,3]
    const str = ['a','b','c']
    const con = [...number,...str]
    console.log(con); //[1,2,3,'a','b','c']
</script>

数组克隆操作如下:

<script>
    // 数组的克隆
    const a = [1,2,3]
    const b = [...a]
    console.log(a); //[1,2,3]
</script>

将伪数组转为真正的数组操作如下:

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div')
        const divArr = [...divs]
        console.log(divArr); //[div,div,div]
    </script>
</body>

逻辑赋值运算符

逻辑赋值运算符,将逻辑运算符与赋值运算符进行结合,先进行逻辑运算,然后根据运算结果再视情况进行赋值运算:

<script>
    var x = 1
    var y = 2
    // 或赋值运算符
    console.log((x ||= y) === (x || (x = y)));//true
 
    // 与赋值运算符
    console.log((x &&= y) === (x && (x = y)));//true
 
    // Null 赋值运算符
    console.log((x ??= y) === (x ?? (x = y)));//true
</script>

数组扩展方法

Array.from()

用于将两类对象转换为数组:类似数组对象的和可遍历对象。

<script>
    // 类似数组对象,本质特征只有一点,必须有length属性
    let array = {
        '0':'a',
        '1':'b',
        '2':'c',
        length:3 // 长度必须要写的
    }
    let arr2 = Array.from(array)
    console.log(arr2);//['a', 'b', 'c']
 
    console.log(Array.from({ length: 3 }))
    // [ undefined, undefined, undefined ]
</script>

如果参数是一个真正的数组,返回的是一样的数组。

<script>
    console.log(Array.from([1,2,3]));//[1,2,3]
</script>

如果参数是一个字符串,则会将字符串转换为数组。

<script>
    let str = 'hello'
    console.log(Array.from(str));//['h', 'e', 'l', 'l', 'o']
</script>

Array.of()

用于将一组值转换为数组。

<script>
    console.log(Array.of(1,2,3,4,5,6));//[1, 2, 3, 4, 5, 6]
    console.log(Array.of(1));//[1]
    console.log(Array.of(2).length);//1
    // 如果没有参数,就返回一个空数组。
    console.log(Array.of());//[]
</script>

fill()

数组fill()方法,将给定值将数组内容全部覆盖或者局部覆盖。

<script>
    var arr = ['a','b','c']
    // 将数组内容全部覆盖。
    console.log(arr.fill(2));//[2, 2, 2]
 
    var arr1 = ['a','b','c','d']
    // 将数组内容局部覆盖,参数2是起始位置,参数3是终止位置,即将数组下标为1的数替换为2
    console.log(arr1.fill(8,1,2));//['a', 8, 'c', 'd']
</script>

相关文章

  • es6新增的数组方法

    扩展运算符 1.扩展运算符的使用方法 2.扩展运算符的应用(1)复制数组 (2)合并数组 (3)与解构赋值结合 (...

  • 内置对象扩展(Array)

    Array 的扩展方法 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 扩展运算符可...

  • ES6学习笔记(五):轻松了解ES6的内置扩展对象

    Array的扩展方法 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转换为用逗号分隔的参数序列 扩展运算符可...

  • ES6 的内置对象扩展

    Array 的扩展方法(★★) 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 扩展...

  • ES6的数组

    扩展运算符 将一个数组转为用逗号分隔的参数序列。 作用:替代apply方法,将数组转为函数的参数 扩展运算符取代a...

  • es6扩展运算符、concat方法合并多个数组

    1:ES6扩展运算符、合并多个数组 2:concat方法、合并多个数组

  • ES6学习之- 数组的扩展

    Part3 数组的扩展 3.1 扩展运算符和数组的解构赋值 (1)扩展运算符是三个点 ...,扩展运算符主要用于函...

  • React-Native小知识 es6 javascript的

    (1) Map 转为数组 前面已经提过, Map 转为数组最方便的方法, 就是使用扩展运算符(...)。 (2) ...

  • ES6(八)迭代器与生成器3

    1.扩展运算符与非数组的可迭代对象 2.传递参数给迭代器 扩展运算符与非数组的可迭代对象 扩展运算符( ... )...

  • ES6-数组(深浅拷贝)

    参考文章:数组的扩展 一、扩展运算符... 扩展运算符(spread)是三个点(...)。 主要作用:将一个数组转...

网友评论

      本文标题:ES6JS运算符及数组扩展方法

      本文链接:https://www.haomeiwen.com/subject/eaeszrtx.html