建企业网站需要多少钱,宜春网站开发公司电话,设置网站首页,网站开发客户需求… 作用
扩展运算符#xff08;spread#xff09;是三个点#xff08;…#xff09;#xff0c;用于取出参数对象中的所有可遍历属性#xff0c;浅拷贝到当前对象之中。
常见用法
1.浅拷贝数组
const a1 [test1, test2];
const a2 [...a1];a2[0] test2;
a2 // [te…… 作用
扩展运算符spread是三个点…用于取出参数对象中的所有可遍历属性浅拷贝到当前对象之中。
常见用法
1.浅拷贝数组
const a1 [test1, test2];
const a2 [...a1];a2[0] test2;
a2 // [test2, test2]
2.合并数据
const arr1 [a, b];
const arr2 [c];
const arr3 [d, e];// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ a, b, c, d, e ]// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ a, b, c, d, e ]
3. 解构赋值
const [first, ...rest] [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]const [first, ...rest] [];
first // undefined
rest // []const [first, ...rest] [foo];
first // foo
rest // []
4.字符串/类数组转为真正的数组
因为任何定义了遍历器Iterator接口的对象都可以用扩展运算符转为真正的数组。
[...test]
// [ t, e, s, t][...document.querySelectorAll(div)]
// [div, div, div]
基本实现原理
如果不用 …如何实现一样的功能由上面的用法可以知道。扩展运算符主要就是浅拷贝可遍历对象属性那么我们可以用es5的写法实现如下
// 简单版实现
function _spread() {for (var ar [], i 0; i arguments.length; i){ar ar.concat(arguments[i]);}return ar;
};
用上面的例子测试一下结果如下
const a1 [test1, test2];
const a2 _spread(a1);a2[0] test2;
a2 // [test2, test2]
可以看出上面的例子没有考虑到属性的可遍历性判断那么需要进一步优化。
严谨实现
这里分几种情况来考虑就好
判断是否为数组数组一定可迭代则直接复制数组后返回结果即可。判断是否为实现了遍历器Iterator接口的对象若实现了则转为数组。如果没有实现遍历器Iterator接口的对象则判断是否为普通字符串/Map/Set等。均不满足以上条件的话则抛错。 所以最后实现为
function _toConsumableArray(arr) {return (_arrayWithoutHoles(arr) || // 判断是否为数组_iterableToArray(arr) || // 判断是否为实现了遍历器Iterator接口的对象_unsupportedIterableToArray(arr) || // 判断是否为普调字符串/Map/Set等_nonIterableSpread() // 则抛错);
}function _nonIterableSpread() {throw new TypeError(Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.);
}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o string) return _arrayLikeToArray(o, minLen);var n Object.prototype.toString.call(o).slice(8, -1);if (n Object o.constructor) n o.constructor.name;if (n Map || n Set) return Array.from(o);if (n Arguments || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o, minLen);
}function _iterableToArray(iter) {if ((typeof Symbol ! undefined iter[Symbol.iterator] ! null) ||iter[iterator] ! null)return Array.from(iter);
}function _arrayWithoutHoles(arr) {if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}function _arrayLikeToArray(arr, len) {if (len null || len arr.length) len arr.length;for (var i 0, arr2 new Array(len); i len; i) {arr2[i] arr[i];}return arr2;
}
