本文总结 ES6 常用编程技巧，涵盖数组去重、变量值交换、字符串处理、箭头函数简化回调、数组合并、字符串反转及数组降维等场景。通过对比 ES5 与 ES6 写法，展示 Set、解构赋值、展开运算符及 Generator 迭代器的实际用法，帮助开发者提升代码简洁性与执行效率。
ES6 常用技巧概述
本文整理并分享 ES6 中的常用编程技巧，供读者参考学习。
数组去重与变量交换
1. 数组去重
var arr = [1,2,3,4,3,4];
var arr2 = [...new Set(arr)];
执行上述代码后，arr2 即为去除重复元素后的数组。
2. 交换两个变量的值
let [x,y] = [1,2];
[y,x] = [x,y];
console.log(y);
字符串处理与函数简化
3. 获取字符串中的指定字符
let arr= "hellomybo";
console.log(arr[3]);
4. 使用箭头函数替代传统回调函数
ES5 的传统写法
let a1 = [1,2,3].map(function (x) {
return x * x;
});
ES6 箭头函数写法
let a2 = [1,2,3].map(x => x * x);
console.log(a1,a2);
数组合并与字符串反转
5. 合并数组
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
6. 字符串反转
let str = "12345678900987654321";
传统实现方式：
str.split('').reverse().join('')
利用展开运算符的实现方式：
[...str].reverse().join('')
数值过滤、计算与数组降维
7. 过滤特定数值与计算处理后的数值
过滤操作：
['a',,'b'].filter(x => true) // ['a','b']数值计算：
let arr = [1,2,3,4].map(x=>x+1);
console.log(arr);8. 数组降维：利用 Generator 迭代器
var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
var length = a.length;
for (var i = 0; i < length; i++) {
var item = a[i];
if (typeof item !== 'number') {
yield* flat(item);
} else {
yield item;
}
}
};
for (var f of flat(arr)) {
console.log(f);
}感兴趣的用户可以使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 来测试上述代码的运行效果。
如需了解更多 JavaScript 相关内容，可查阅本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文所述的技巧对您的 JavaScript 程序设计有所帮助。