本文所有Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 ;
函数的默认值:
如果有参数 ,那就用参数, 如果没有参数, 那就用默认的参数;
ajax的请求经常要做这些判断, ES6规定了新的表达式, 让判断参数的逻辑更加简单;
function fn(a = , b = , c = ) {
console.log(a,b,c);
}
fn(); //输出 1, 2, 3;
fn(,,); //输出 4, 5, 6
如果调用函数的时候不想给函数传参, 用函数的默认值, 那么要传一个undefined;
function fn(a = , b = , c = ) {
console.log(a,b,c);
}
fn(undefined, ,); //输出 1, 1, 2
// 以下这种写法, 会要报异常的;
fn( , ,);
要注意的一种情况, 如果要给函数传了默认值, 函数的length为: 该函数预期传入的参数的长度, 不包含已经定义默认值的参数;
function fn(a = , b = , c = ) { };
console.log(fn.length); //输出: 0
函数默认值也可以是一个函数;
function fn(x,y,f = (x,y) => x*y ) {
return f(x,y);
};
console.log( fn(,) ); //输出:20
console.log( fn(,, (x,y) => x+y) ); //输出:9
函数默认值得一个实际应用, 设置一个参数为必须传, 不传者报错;
function fn( foo = (()=>{throw new Error("Missing parameter")})()) {
console.log(foo)
}
fn();
fn(); //如果没有传参数 , 那么会抛 异常;
rest参数和扩展运算符
rest参数和扩展运算符这两个表达式是相反的操作, 用处比较广, 方便了不少
function (...args) {}这里面的...args就叫做rest参数;
...[1,2,3,4]这种方式叫做扩展运算符;
下面这个Demo可以看出来 arr 和 [...arr]是相等的, 这个等式适用于一般的数组:
let arr = [,,,];
console.log( arr.toString() ===[...arr].toString() ); //输出 : true
rest参数, 一般都是作为定义函数时候的参数, 一般是function( (...args) ){}或者function (foo, bar, ...args) {} 这样用的:
let fn = (...args) => {
return args;
};
console.log(fn(,,,)); // 输出 : [ 1, 2, 3, 4 ]
获取元素的最小值的demo, 虽然没有什么卵用
let min = (...args) => {
return Math.min.apply(null, typeof args[] === "object" ? args[] : args);
};
console.log(min([,,,,-])); //输出 -2;
console.log(min(,,,,-)); //输出 -2;
...rest 这种获取参数的方式不能用默认值, 否则要抛异常;
let min = (...args = [2,1]) => {
return Math.min.apply(null, args);
};
console.log(min());
扩展运算符的使用:
let args = [,,,];
console.log(...args);
扩展运算符能用作函数的调用, 没发现其他的好处:
let fn = function (...args) {
let insideFn = () => {
console.log(arguments);
};
insideFn(...args);
};
console.log( fn(,,,) );
实际应用,我们想给一个数组的头部加一个数据,尾部再加一个数据;
let fn = function(...args ) {
console.log(args)
};
let arr = [,,,];
fn(,...arr,); //输出 [ 0, 1, 2, 3, 4, 5 ]
或者用来合并数组:
console.log([...[,],...[,],...[,]]); //输出[ 1, 2, 3, 4, 5, 6 ] let [arr0, arr1, arr2] = [[],[],[]];
console.log([...arr0,...arr1, ...arr2] ); //输出 : [ 0, 1, 2 ]
扩展运算符内部调用的是Inerator接口, 只要是具有Iterator接口的对象,都可以用扩展运算符,比如Map和Generator:
let map = new Map([
[,"one"],
[,"two"],
[,"three"]
]);
console.log(...map.keys()); // 1 2 3
console.log(...map.values()); //one two three
let fn = function* () {
yield ;
yield ;
yield ;
yield ;
};
console.log( ...fn() ); //输出 1 2 3 4;
ES6的箭头函数:
ES5和ES3定义函数基本都这样:
function Fn() { }
ES6以后就厉害了, 我们还能用箭头函数表达一个函数, 如下表示的是返回参数的平方:
let fn = (x) => x*x;
console.log(fn());
在使用箭头函数的时候, 要直接返回 一个对象的话,return的对象要用括号()括起来, 因为大括号是底层开始解释js代码标志, 所以用括号括起来;
let fn = () => ({a:,b:});
console.log(fn())
箭头函数的this指向一定要注意:
let fn = () => {
return this;
};
console.log(fn); //此时的this为fn; let fn1 = () => console.log(this); //如果是在浏览器环境运行的话, 那么此时this为window,如果在node环境下运行this为undefined;
fn1();
箭头函数里面的this不是调用箭头函数的this, 箭头函数虽然也有自己的作用域链, 但是箭头函数没有this, 箭头函数的this为:离箭头函数最近的一个通过function(){}创建的函数的this, 说不清的话, 看下Demo....
(function fn(){
let Fn = () => {
this.x = ;
this.y = ;
return this;
};
//Fn = Fn.bind(new Object);
console.log( Fn.call(new Object) ); //输出结果: { obj: 1, x: 0, y: 1 }
}.bind({obj:}))();
以上Demo能够说明, 箭头函数的作用域内的this和谁调用它没有关系;
当然, 箭头函数的this跟方法也没有关系;
(function() {
let obj = {
method : () => {
console.log(this);
}
};
obj.method();
}.bind("hehe"))()
也正因为箭头函数的this和箭头函数一点关系都没有, 所以箭头函数不能作为构造函数;
箭头函数的内部无法获取到arguments;
箭头函数不能作为Generator;
ES7提供了一个很方便去绑定作用域的写法
ES3和ES5和ES6, 绑定作用域都用bind, 或者call, 或者apply, 好家伙, 现在用 :: 两个冒号
foo::bar;
// 等同于
bar.bind(foo); const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return obj::hasOwnProperty(key);
};
*/ let query = document.querySelectorAll.bind(document)
等同于:
let query = document::document.querySelectorAll;
参考:
Arrow functions :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
ruanyifeng:http://es6.ruanyifeng.com/#docs/function
作者: NONO
出处:http://www.cnblogs.com/diligenceday/
QQ:287101329
微信:18101055830
ES6新特性:Function函数扩展, 扩展到看不懂的更多相关文章
-
ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
-
ES6新特性箭头函数和常用function()对比
// 无参 var fn1 = function() {} var fn1 = () => {} // 单个参数 var fn2 = function(a) {} var fn2 = a =&g ...
-
javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
-
ES6新特性三: Generator(生成器)函数详解
本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...
-
ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
-
前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
-
34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
-
前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
-
ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
-
ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
随机推荐
-
SpringMVC,3种不同的URL路由配置方法
1. 先说说一种比较常见的: <servlet> <servlet-name>theDispatcher</servlet-name> <servlet-cl ...
-
【转】C++类中对同类对象private成员访问
私有成员变量的概念,在脑海中的现象是,以private关键字声明,是类的实现部分,不对外公开,不能在对象外部访问对象的私有成员变量. 然而,在实现拷贝构造函数和赋值符函数时,在函数里利用对象直接访问了 ...
-
(7/18)重学Standford_iOS7开发_视图、绘制、手势识别_课程笔记
第七课: 1.View 一般来说,视图是一个构造块,代表屏幕上一块矩形区域,定义了一个坐标空间,并在其中绘制及添加触控事件等. ①视图的层级关系 一个视图只能有一个父视图,可以有多个子视图 - ( - ...
-
在unity3d中连接sql server
虽然在Unity3D中能够通过PlayerPrefs类来保存和读取数据,但是一旦数据量增大,仅仅通过代码的方式存取数据,这样的工作量是非常大的.那么如何通过使用Sql Server数据库来存取数据呢? ...
-
UCOS 堆栈大小 计算 (堆栈的决定性因素)
决定栈空间的大小,不仅需要计算任务本身的需求(局部变量.函数调用等),还要计算最多中断嵌套层数(保存寄存器.中断服务程序中局部变量等) 原文地址:uCOS任务堆栈的深入分析.作者:jiecou 堆栈作 ...
-
Java基础——集合(持续更新中)
集合框架 Java.util.Collection Collection接口中的共性功能 1,添加 booblean add(Object obj); 往该集合中添加元素,一次添加一个 boolea ...
-
linux学习历程-不熟悉的linux命令
一:man(执行查看帮助命令) 二:常用的系统工作命令 1:echo echo命令用于显示在终端输出字符串或变量提取后的值,格式“echo [字符串]|[$变量]” 2:date 用于显示系统的时间和 ...
-
Android Studio 获取数字签名
下面介绍下调试版本和发布版本,获取数字签名的方法,通过以下方法可以获取到SHA1和MD5 1.调试版本 在调试模式下,Android studio会默认生成一个debug.keystore签名文件,因 ...
-
Oracle开窗函数笔记及应用场景
介绍Oracle的开窗函数之前先介绍一下分析函数,因为开窗函数也属于分析函数 分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返回多行,而聚合函数对于每个组只返回一行. 上面是 ...
-
Hbase-2.0.0_04_Hbase原理
参考博客:Hadoop HBase概念学习系列 参考博客:Hadoop HBase概念学习系列之HBase里的Zookeeper(二十一) 参考博客:Hadoop HBase概念学习系列之HBase里 ...