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

站长资源 2024/11/26 佚名

2 0 1

本文实例讲述了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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

通过js给网页加上水印背景实例

通过实例解析js简易模块加载器

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接