JavaScript 里三个点 ... 的用法

 // table表头数据
        let tableHeadData = deepClone(data);
        let tableCacheData = [];
        //表格缓存对比
        if (!parent && isCacheHeadData) {
            // 缓存数据key
            let tableCacheKey = `${window.location.pathname}-${$self.attr('id')}`
            if (localStorage.getItem(tableCacheKey)) {
                //根据缓存数据更新列表数据
                let cacheData = JSON.parse(localStorage.getItem(tableCacheKey))
                let datas = []
                cacheData.map(e => {
                    let index = tableHeadData.findIndex(v => e.id === v.name)
                    if (index !== -1) {
                        datas.push({ ...tableHeadData[index], ...{ ishide: !e.checked, width: e.width } })
                        tableHeadData.splice(index, 1)
                    }
                })
                tableHeadData = [...datas, ...tableHeadData]
            }
            //设置更新缓存数据
            tableHeadData.map(e => {
                tableCacheData.push({ id: e.name, pId: "", width: e.width, name: e.label, checked: e.ishide === true ? false : true })
            })
            localStorage.setItem(tableCacheKey, JSON.stringify(tableCacheData))
        }

示例一

function myFunc(a, b, ...args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);

示例二

function myFunc(...[x, y, z]) {
  return x * y* z;
}

myFunc(1)          // NaN
myFunc(1, 2, 3)    // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

示例三

function myFunc(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}

var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]

示例四

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

示例五

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

JavaScript 里三个点 ... 的用法

合并数组或者对象

当我们在代码中看到三个点 (…) 时，它要么是 rest 参数，要么是展开运算符。

有一个简单的方法来区分它们：

当三个点 (…) 位于函数参数的末尾时，它是“rest 参数”并将参数列表的其余部分收集到一个数组中。

当三个点 (…) 出现在函数调用或类似函数中时，它被称为“扩展运算符”并将数组扩展为 list.