ES6新特性:Function函数扩展, 扩展到看不懂

时间:2022-08-30 18:38:54

  本文所有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函数扩展, 扩展到看不懂的更多相关文章

  1. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  2. ES6新特性箭头函数和常用function()对比

    // 无参 var fn1 = function() {} var fn1 = () => {} // 单个参数 var fn2 = function(a) {} var fn2 = a =&g ...

  3. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

  4. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  5. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  6. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  7. 34.js----JS 开发者必须知道的十个 ES6 新特性

    JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&&gt ...

  8. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  9. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  10. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

随机推荐

  1. SpringMVC,3种不同的URL路由配置方法

    1. 先说说一种比较常见的: <servlet> <servlet-name>theDispatcher</servlet-name> <servlet-cl ...

  2. 【转】C&plus;&plus;类中对同类对象private成员访问

    私有成员变量的概念,在脑海中的现象是,以private关键字声明,是类的实现部分,不对外公开,不能在对象外部访问对象的私有成员变量. 然而,在实现拷贝构造函数和赋值符函数时,在函数里利用对象直接访问了 ...

  3. &lpar;7&sol;18&rpar;重学Standford&lowbar;iOS7开发&lowbar;视图、绘制、手势识别&lowbar;课程笔记

    第七课: 1.View 一般来说,视图是一个构造块,代表屏幕上一块矩形区域,定义了一个坐标空间,并在其中绘制及添加触控事件等. ①视图的层级关系 一个视图只能有一个父视图,可以有多个子视图 - ( - ...

  4. 在unity3d中连接sql server

    虽然在Unity3D中能够通过PlayerPrefs类来保存和读取数据,但是一旦数据量增大,仅仅通过代码的方式存取数据,这样的工作量是非常大的.那么如何通过使用Sql Server数据库来存取数据呢? ...

  5. UCOS 堆栈大小 计算 (堆栈的决定性因素)

    决定栈空间的大小,不仅需要计算任务本身的需求(局部变量.函数调用等),还要计算最多中断嵌套层数(保存寄存器.中断服务程序中局部变量等) 原文地址:uCOS任务堆栈的深入分析.作者:jiecou 堆栈作 ...

  6. Java基础——集合&lpar;持续更新中&rpar;

    集合框架 Java.util.Collection Collection接口中的共性功能 1,添加 booblean add(Object obj);  往该集合中添加元素,一次添加一个 boolea ...

  7. linux学习历程-不熟悉的linux命令

    一:man(执行查看帮助命令) 二:常用的系统工作命令 1:echo echo命令用于显示在终端输出字符串或变量提取后的值,格式“echo [字符串]|[$变量]” 2:date 用于显示系统的时间和 ...

  8. Android Studio 获取数字签名

    下面介绍下调试版本和发布版本,获取数字签名的方法,通过以下方法可以获取到SHA1和MD5 1.调试版本 在调试模式下,Android studio会默认生成一个debug.keystore签名文件,因 ...

  9. Oracle开窗函数笔记及应用场景

    介绍Oracle的开窗函数之前先介绍一下分析函数,因为开窗函数也属于分析函数 分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返回多行,而聚合函数对于每个组只返回一行. 上面是 ...

  10. Hbase-2&period;0&period;0&lowbar;04&lowbar;Hbase原理

    参考博客:Hadoop HBase概念学习系列 参考博客:Hadoop HBase概念学习系列之HBase里的Zookeeper(二十一) 参考博客:Hadoop HBase概念学习系列之HBase里 ...