ES6新特性:Function函数扩展, 扩展到看不懂
本文所有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 ...
随机推荐
- 移动测试会Ebay沙龙PPT
Bill Liu --如何让你的测试更敏捷ebay沈斌峰 --Mobile Automation TestingJason Woo -- Full Stack Testing http://teste ...
- 图的全局最小割的Stoer-Wagner算法及例题
Stoer-Wagner算法基本思想:如果能求出图中某两个顶点之间的最小割,更新答案后合并这两个顶点继续求最小割,到最后就得到答案. 算法步骤: --------------------------- ...
- jQuery UI常用插件使用
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
- AC日记——删除单词后缀 openjudge 1.7 20
20:删除单词后缀 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个单词,如果该单词以er.ly或者ing后缀结尾, 则删除该后缀(题目保证删除后缀后的单词长度不为0), 否 ...
- 原创:Eclipse 上网代理设置(亲测有效)
直接上图:
- ES5特性Object.seal
一个对象在默认状态下: 1,extensible:可扩展(可以添加新的属性) 2,configurable:可配置(可以改变原有属性的特性,比如修改属性的enumerable) Object.seal ...
- HTML 学习笔记 CSS样式(文本)
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
- Mysql占用过高CPU时的优化手段
Mysql占用CPU过高的时候,该从哪些方面下手进行优化?占用CPU过高,可以做如下考虑:1)一般来讲,排除高并发的因素,还是要找到导致你CPU过高的哪几条在执行的SQL,show processli ...
- DEDECMS之九 文章采集
到很多网友都为织梦(DEDECMS)的采集教程头疼,的确,官方出的教程太笼统了,什么都没说,换个网站你什么都做不了,这个教程是最详尽的教程,让你一看即会! 一.列表采集 第一步.我们打开织梦后台点击采 ...
- Windows 8.1 新增控件之 Flyout
本篇为大家介绍Flyout 控件,Flyout 属于一种轻量级交互控件,可以支持信息提示或用户交互.与传统Dialog 控件不同的是Flyout 控件可通过直接点击对话框外部区域忽略. Flyout ...