[ES6] 快速掌握常用 ES6（二）
本篇文章是对之前文章的一个补充，可以使 JavaScript 代码更简洁
函数
参数默认值
在 JavaScript 传统语法中如果想设置函数默认值一般我们采用判断的形式
function example (a,b,c) {
a = a|’string’;
b = b|’number’;
c = c|’json’;
console.log(a);
console.log(b);
console.log(c); // ‘string’ ‘number’ ‘json’
}
在新的语法中我们可以在参数声明的同时赋予默认值
function example (a = ‘string’,b = ‘number’,c = ‘json’) {
console.log(a);
console.log(b);
console.log(c); // ‘string’ ‘number’ ‘json’
}
参数展开
在 JavaScript 传统语法中如果不确定参数的数量，并且想获取所有的参数，一般使用 arguments（函数自带的变量，数组类型，存放所有的参数）
function example (){
console.log(arguments);
}
在新的语法中我们可以在参数声明的同时赋予默认值
function example (…oVar){
console.log(oVar);
}
还可以结合结构赋值，实现不用按顺序传递参数
function (…opaction){
let {url,type,succ,err} = opaction;
if(!url){
return false;
}else{
console.log(url);
console.log(type);
console.log(succ);
console.log(err);
}
}
数组
map() 方法创建一个新数组，然后每次从开始给回调函数传递一个原来数组的成员，直到结束
let oArray = [5, 7, 1, 56];
const oMap = array1.map(x => x * 3);
console.log(oArray);// Array [15, 21, 3, 168]
// 映射：一个对一个
reduce() 方法接收一个函数作为累加器 ( 升序执行)，最终计算为一个值
var numbers = [1, 2, 3, 4];
function getSum(total, num) {
return total + num;
}
console.log(numbers.reduce(getSum)); // 10
// 汇总：一堆 返回 一个
filter() 方法创建一个新的数组，新数组中的元素是回调函数中符合条件的所有元素。
var ages = [95, 59, 18, 21];
function checkAdult(age) {
return age >= 60;
}
console.log(ages.filter(checkAdult));// 95
// 过滤：一堆 返回 部分
forEach() 方法调用数组的每个元素, 并将元素传递给回调函数
// 遍历：以上的都可以通过 forEach() 来手动实现，并且可以实现更加个性的自定义操作
var array1 = [‘a’, ‘b’, ‘c’];
array1.forEach(element => {
console.log(element);
});// a b c
Array.from() 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象
// 常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象
// NodeList 对象
let ps = document.getElementsByClassName(‘p’);// 所有取到的 dom 元素都是 NodeList 格式，不是真正意义上的数组
Array.from(ps).filter(p => {
return p.textContent.length > 9;// 先用 from() 将所有取到的 p 标签转换为真正的数组 然后过滤掉前十个
});
// arguments 对象
function foo() {
var args = Array.from(arguments);
// arguments 也不是真正意义上的数组
}
json
关于什么是 json 这里不过多介绍，主要看看 ES6 里 json 是怎样的
key and value
当键名和键值是一样的情况下可以只写一个，在引入组件与库中特定方法时，可以看到（关于如何引入其他文件，将在之后的文章写）
// 传统
{
name: name,
}
//ES6
{
name
}
function
如果在之前了解过微信小程序，vue，或者将要学习那么应该会经常看到这两种函数的写法
{
onLoad() {
butClick() {
return false;
}
}
methods: {
butClick() {
return false;
}
}
}
但是如果不用框架，写这样的代码，会报错 这是因为框架其实可以看做一个函数，上面这种代码是传递给函数的参数（这个参数的接收方法在本篇文章的开头）这个参数是以 json 对象的形式传递的，而 ES6 中当 value 旳值是一个函数时可以省略冒号和 function 关键字
// 传统 json
{
butClick: function (){
return false;
}
}
//ES6 json
{
butClick() {
return false;
}
}
本系列文章仅适合快速入门，想深入学习的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》
[ES6] 快速掌握常用 ES6（一）[ES6] 快速掌握常用 ES6（二）