温故而知新之- Javascript 数组类型 （展开语法、解构赋值）
【摘要】 尽量采取短文章形式进行温故知识，而不长篇大论的介绍，好让大家吸收。在平时的学习或者项目中，虽然我们可以运用Javascript数组的各种方法来完成我们各种需求。然而还有两个知识点，可以提高我们操作数组的效率，那就是 展开语法、解构赋值。
展开语法
展开语法可以用于哪些操作？合并数组、函数参数、节点转换等等。
合并数组
让我们来回顾一下，如果我们想合并数组，可以使用什么方法？没错，contact(), 但我们现在要讲的展开语法要比contact()更简单。
何为展开语法？就是使用 ... 可以将数组展开为多个值。
let info = ['hw91364016', '余人杰']; let msg = ['学习Javascript', ...info]; console.log(msg); // ["学习Javascript", "hw91364016", "余人杰"]
函数参数
但我们不确定函数参数的数量时，可以用展开语法来解决这个问题。
function test(...args) {
console.log(args); // ["hw91364016", 8, 9, "余人杰"]
}
test('hw91364016', 8, 9, "余人杰");
这样一来，任意数量的参数，都可以使用展开语法，进而代替arguments。
当然，也可以接收部分参数
function test(id, ...args) {
console.log(id, args); // hw91364016 (3) [8, 9, "余人杰"]
}
test('hw91364016', 8, 9, "余人杰");
节点转换
可以使用展开语法把dom节点转换为数组。
<body>
<button info="余人杰">点击</button>
<button info="hw91364016">点击</button>
</body>
<script>
let btns = document.querySelectorAll('button');
btns.map((item) => {
console.log(item); //TypeError: btns.map is not a function
})
</script>
上面栗子中，querySelectorAll获取到的不是数组，而是节点列表，所以不能使用map之类的数据方法。
我们可以使用展开语法进行转换
<body>
<button info="余人杰">点击</button>
<button info="hw91364016">点击</button>
</body>
<script>
let btns = document.querySelectorAll('button');
[...btns].map((btn) => {
btn.addEventListener("click", function() {
this.classList.toggle("show");
});
})
</script>
解构赋值
何为解构？可以简单理解为分解一个数据的结构，是一种更简洁的赋值特性。
使用方式
let [name, id] = ['余人杰', 'hw91364016']; console.log(id); // 'hw91364016'
还可以使用剩余结构来接收剩余参数。
let [name, ...info] = ['余人杰', 'hw91364016', '学无止境']; console.log(info); // ["hw91364016", "学无止境"]
字符串解构
const [...info] = "余人杰"; console.log(info); // ["余", "人", "杰"]
赋值部分变量
let [,id]=['余人杰','hw91364016']; console.log(id); // 'hw91364016'
展开语法获取多个值
let [name, ...info] = ['余人杰', 'hw91364016', '学无止境']; console.log(name, info); // 余人杰 (2) ["hw91364016", "学无止境"]
为变量设置默认值
let [name, id = 'hw91364016'] = ['余人杰']; console.log(id); // 'hw91364016'
数组参数
function info([name, id]) {
console.log(name, id); // 余人杰 hw91364016
}
info(['余人杰', 'hw91364016']);
心里话：希望每次复习，对大家也有帮助，即使细微，我也进我努力，能把知识点总结得简洁易懂，容易吸收，学无止境，有你我同行，加油。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）