JavaScript ES6中的扩展运算符

前端 · 2020-08-18 ·

扩展运算符(展开语法)

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
let ary = ["zhao", "qian", "sun", "li"];
// ...ary 为 "zhao", "qian", "sun", "li"
console.log(...ary); // zhao qian sun li 逗号被当作log方法的参数分隔符
console.log(1, 2, 3); // 1 2 3

扩展运算符可以应用于合并数组

// 方法一
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// ...ary1 1, 2, 3
// ...ary2 4, 5, 6
let ary = [...ary1, ...ary2];
console.log(ary); //  [1, 2, 3, 4, 5, 6]

// 方法二
ary1.push(...ary2); // push()可以接收多个参数,常用的是push一个参数
console.log(ary1); // [1, 2, 3, 4, 5, 6]

扩展运算符可以应用于将类数组或可遍历的对象转为真正的数组

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
        // 利用扩展运算符将伪数组转换为真正的数组
        var oDivs = document.getElementsByTagName('div');
        // 长相很像数组,但是将他的原型_proto_为HTMLCollection,它没有数组的splice,concat,pop等方法
        console.log(oDivs);
        var ary = [...oDivs];
        console.log(ary);
    </script>
  • 伪数组没有数组 Array.prototype 的属性值,类型是 Object ,而数组类型是 Array
  • 数组是基于索引的实现, length 会自动更新,而对象是键值对
  • 使用对象可以创建伪数组,伪数组可以利用扩展运算符很方便的转化为真数组
%