蝙蝠岛资源网

JavaScript 扩展运算符用法实例小结【基于ES6】
网络编程 2024/12/27 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

本文实例讲述了JavaScript 扩展运算符用法。分享给大家供大家参考，具体如下：

扩展运算符格式

扩展运算符格式很简单，就是三个点(…)

重点：需要ES6 语法支持

扩展运算符作用？？？

扩展运算符允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。

1、将一个数组放入另一个数组中

下面开始通过四个例子来深刻理解扩展运算符

①. 创建一个数组middle
②. 创建第二个包含middle的数组
③. 输出结果

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];
console.log(arr);
// [1, 2, [3, 4], 5, 6]

在上例中，没有使用扩展运算符。middle作为数组放入另一个数组中

2、如果想让输出结果只有一个数组？？？

这时候就用到扩展运算符，看下面例子，除了使用扩展运算符其他都与上面例子相同。

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];
console.log(arr);
// [1, 2, 3, 4, 5, 6]

当创建数组arr和使用在middle数组上使用扩展运算符时，不是将middle数组直接插入到arr中，而是将middle数组扩展，然后将元素插入到arr中。

3、复制数组

slice()是JavaScript数组的方法，作用是复制数组。我们同样可以使用扩展运算符复制数组。

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
// ['a', 'b', 'c']

arr数组中的元素扩展成为单独元素被分配到arr2中。现在可以随意改变arr2数组，且都不会对源数组arr产生影响

这是因为，arr数组值被扩展后添加到arr2数组中，我们设置arr2等于arr的值，而不是其本身。我们可以关注没有扩展运算符时发生事情，就能理解了。

如果创建数组然后设置另一个数组等于其本身，如下：

var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
// ['a', 'b', 'c']

现在我们将arr2数组赋值给arr数组，这意味着只要改变arr2，arr数组就会发生变化。

arr2.push('d');
console.log(arr2);
// ['a', 'b', 'c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd']

4、拼接数组

使用扩展运算符可以代替concat()来拼接数组。

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

使用扩展运算符

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

5、Math

也可以使用math函数连同扩展运算符。如这个例子中，将使用Math.max()

Math.max()将返回一组数最大值。
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

在没有扩展运算符，在数组上使用Math.max()最容易方法就是使用.apply()。

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}
console.log(max(arr));
// 8

现在看看使用扩展运算符做同样事情。只需要两行代码就可以做到同样效果。

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
// 8

6、字符串转数组

使用扩展运算符将字符串转换为数组。

var str = "hello";
var chars = [...str];
console.log(chars);
// ['h', 'e',' l',' l', 'o']

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

标签：
JavaScript,扩展运算符,ES6
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“JavaScript 扩展运算符用法实例小结【基于ES6】”

暂无JavaScript 扩展运算符用法实例小结【基于ES6】的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com