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

hidogs 发布于2019-08-23 14:07 / 2231人阅读

摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数

本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》
本篇文章是对之前文章的一个补充，可以使 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;
    }
}

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100109.html

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

摘要：常量变量先说说常量和变量的概念吧，常量是说那种进行一次赋值后不会更改的值，比如说游戏账户的，变量是说赋值后有更改的需求的，比如游戏名，游戏密码。常用实例交换变量的值提取数据解构赋值对提取对象中的数据，尤其有用。本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》学习 20% 的知识完成 80% 的工作关于 ...

ispring 2019-08-23 14:01 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
前端基础进阶（十四）：es6常用基础合集

摘要：在继承的构造函数中，我们必须如上面的例子那么调用一次方法，它表示构造函数的继承，与中利用继承构造函数是一样的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在实际开发中，ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格，...

Ryan_Li 2019-08-21 18:31 评论0 收藏0
快速掌握JavaScript面试基础知识(二)

摘要：第一部分请点击快速掌握面试基础知识一闭包闭包由一个函数以及该函数定义是所在的环境组成。当匿名函数执行的时候，的值为。这个问题可以改用后面会介绍方法来解决，通过对每一个匿名函数构建独立的外部作用域来实现。译者按：总结了大量JavaScript基本知识点，很有用！原文: The Definitive JavaScript Handbook for your next develope...

fyber 2019-08-26 11:43 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0