[ 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 = oArray.map(x => x * 3);
console.log(oMap);//  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 JavaScript对象字面量

关于什么是 json 这里不过多介绍，主要看看 ES6 里 json JavaScript对象字面量 是怎样的
不少JavaScript开发人员都错误地把JavaScript对象字面量（Object Literals）称为JSON对象（JSON Objects）包括我本身
在这里推荐一篇文章,感谢那些帮我指出错误并告诉我正确知识的人，谢谢

• key and value

当键名和键值是同样的状况下能够只写一个，在引入组件与库中特定方法时，能够看到（关于如何引入其余文件，将在以后的文章写）

//传统
{
    name: name,
}

//ES6
{
    name
}
复制代码

• function
  若是在以前了解过微信小程序，vue ，或者将要学习那么应该会常常看到这两种函数的写法

{
    onLoad() {
        butClick() {
            return false;
        }
    }
    
    methods: {
        butClick() {
            return false;
        }
    }
}
复制代码

可是若是不用框架，写这样的代码，会报错
这是由于框架其实能够看作一个函数，上面这种代码是传递给函数的参数（这个参数的接收方法在本篇文章的开头）
这个参数是以 json 对象的形式传递的， 而 ES6 中当 value 旳值是一个函数时能够省略冒号和 function 关键字

//传统 
{
    butClick: function (){
        return false;
    }
}

//ES6 
{
    butClick() {
        return false;
    }
}
复制代码

本系列文章仅适合快速入门，想深刻学习的小伙伴能够看看阮一峰老师的《ECMAScript 6 入门》

[ ES6 ] 快速掌握经常使用 ES6 （一）
[ ES6 ] 快速掌握经常使用 ES6 （二）