博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[ ES6 ] 快速掌握常用 ES6 (二)
阅读量:5930 次
发布时间:2019-06-19

本文共 2784 字,大约阅读时间需要 9 分钟。

本系列文章适合快速掌握 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对象字面量

关于什么是 这里不过多介绍,主要看看 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;    }}


转载地址:http://viutx.baihongyu.com/

你可能感兴趣的文章
pkg版本规范管理自动化最佳实践
查看>>
iOS检测系统弹窗并自动关闭
查看>>
助力APP尽情“撒币”!阿里云正式上线移动直播问答解决方案
查看>>
webpack动态创建入口
查看>>
聊聊Go工作空间
查看>>
ReactNative学习笔记1
查看>>
vue 开发 2048/围住神经猫 小游戏
查看>>
Android:Fragment懒加载的实现以及自己的封装思路
查看>>
k8s使用kube-router暴露集群中的pod和svc到外部
查看>>
ServiceWorker入门
查看>>
『中级篇』在centos上安装docker(九)
查看>>
Nodejs阿里云OSS获取STS 授权
查看>>
JavaScript this 绑定规则
查看>>
Vue.js单向绑定和双向绑定实例
查看>>
每天一道leetcode88-合并两个有序数组
查看>>
Netty学习笔记
查看>>
java B2B2C 仿淘宝电子商城系统-Spring Cloud与Dubbo对比
查看>>
新氧大数据:2.8%城市占53.7%医美医生,咋找靠谱医生?
查看>>
双重夹击之下,优信如何走出困局?
查看>>
SpringMVC学习笔记1(整合Mybatis&参数绑定)
查看>>