function foo(...args) {
console.log( args[3] );
} var arr = [ 1, 2, 3, 4, 5 ]; foo( ...arr ); //

Think of ... in this symmetric sense: in a value-list position, it spreads. In an assignment position -- like a parameter list, because arguments get assigned to parameters -- it gathers.

...在函数定义的时候作为数组聚合,作为变量使用的时候将分散。

Whichever behavior you invoke, ... makes working with arrays of arguments much easier. Gone are the days of slice(..)concat(..) and apply(..) to wrangle our argument value arrays.

用了这种新技巧后,不再需要时候slice/concat 去处理变量数组了。

But now we start to uncover the first bits of a principle that we'll come back to many more times in this text: declarative code often communicates more cleanly than imperative code.

声明式代码比指令式代码更清晰

Declarative code, like destructuring in the earlier snippet, focuses on what the outcome of a piece of code should be. Imperative code, like the manual assignments just shown, focuses more on how to get the outcome. If you later read the code, you have to mentally execute it to understand the desired outcome. The outcome is coded there, but it's not as clear.

声明式代码关注代码的结果,指令式代码关注结果的实现,阅读指令式代码的时候,还要在脑海中运行一下,蛋疼。

解构对象参数

function foo( {x,y} = {} ) {
console.log( x, y );
} foo( {
y: 3
} );

这种写法的好处在于,不必在意参数的顺序了,如果按以前的常见写法十分蛋疼:

function foo(x,y,z){

}

foo(null,null,1);//即使只想要参数z,前面参数仍需要占个坑

In FP, we'll want our functions to be unary whenever possible, and sometimes we'll even use a variety of functional tricks to transform a function of higher arity to a unary form.

函数式编程中,总是希望函数尽可能是一元的。

另外,根据参数类型不同,在函数里做不同处理,虽然方便,但是从长远来看,会有麻烦。

FP 精神之一,函数永远有显式返回值 ,而且通常不是undefined

除了在参数上面解构,还可以在表达式中解构数组或对象值。

function foo() {
var retValue1 = 11;
var retValue2 = 31;
return [ retValue1, retValue2 ];
} var [ x, y ] = foo();
console.log( x + y ); //42

Early Return

作者提到一个例子,在逻辑判断中,return语句要尽可能考虑延后或者只有一个return语句。比如避免下面这种写法,

function foo(x) {
if (x > 10) return x + 1; var y = x / 2; if (y > 3) {
if (x % 2 == 0) return x;
} if (y > 1) return y; return x;
}

写代码的时候还有一种常见的情况,即函数隐式地对全局参数做处理,并没有返回值。

var y;

function foo(x) {
y = (2 * Math.pow( x, 2 )) + 3;
} foo( 2 ); y; //

那么它和下面这种写法,有什么区别呢?

function foo(x) {
return (2 * Math.pow( x, 2 )) + 3;
} var y = foo( 2 ); y;

首先,用返回值的方式赋值说明这是显式的,前者隐式。developers prefer explicit patterns over implicit ones.

另外一个更隐晦的例子:

function sum(list) {
var total = 0;
for (let i = 0; i < list.length; i++) {
if (!list[i]) list[i] = 0; total = total + list[i];
} return total;
} var nums = [ 1, 3, 9, 27, , 84 ]; sum( nums ); //

显然,返回值是124,这没有什么问题,但是外部变量 nums呢? 在控制台输出的时候会发现nums数组变成了

[ 1, 3, 9, 27, 0, 84 ]

外部变量被隐式改变了!! 这涉及到 Javascript 引用的问题:JS uses references and reference-copies for arrays, objects, and functions

参考 http://www.cnblogs.com/linhp/p/6085826.html

这种问题在函数式编程的世界里有一个专有名词:side effects,而一个没有副作用的函数则是纯函数。如果可能,纯函数最高 = =。

高阶函数的定义:

Functions can receive and return values of any type. A function that receives or returns one or more other function values has the special name: higher-order function.

This technique of specifying inputs in successive function calls is very common in FP, and comes in two forms: partial application and currying. We'll dive into them more thoroughly later in the text.

也就是说,下面这种函数体内的函数使用了输入值的形式在函数式编程中很常见。

function makeAdder(x) {
return function sum(y){
return x + y;
};
}

What I'm getting at is there's multiple reasons why named functions are always more preferable to anonymous functions.As a matter of fact, I'd go so far as to say that there's basically never a case where an anonymous function is more preferable. They just don't really have any advantage over their named counterparts.

基本上,匿名函数没什么好处,尽量避免。

Name every single function. And if you sit there stumped, unable to come up with a good name for some function you've written, I'd strongly suggest you don't fully understand that function's purpose yet -- or it's just too broad or abstract. You need to go back and re-design the function until this is more clear. And by that point, a name will become more apparent.

方法名称如果想不出好的,说明这个函数方法多少都有点问题,需要重新设计。

From my perspective, the problem is not with using objects to organize behavior. It's that we're trying to use implicit input instead of being explicit about it. When I'm wearing my FP hat, I want to leave this stuff on the shelf.

函数式编程 say no to this.

Functional-Light-JS 摘录笔记(1)的更多相关文章

  1. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  2. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  3. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  4. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  7. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  8. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  9. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  10. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

随机推荐

  1. 递归---Day29

    递归的概述 递归:指在当前方法内自己调用自己的方式叫做递归 递归的分类: 1.直接递归称为方法自身调用自己. 2.间接递归可以用A方法调用B方法,用B方法调用C方法,用C方法调用A方法. 递归的注意事 ...

  2. Java 之 JDK1.8之前日期时间类

    一.JDK1.8之前日期时间类 二. java.lang.System类 System类提供的public static long currentTimeMillis()用来返回当前时间与1970年1 ...

  3. Spring项目配置多数据源

    项目中有用到多数据源,并进行动态切换,使用的是阿里的druid.看网上有一篇大致一样的就偷偷懒 import java.sql.SQLFeatureNotSupportedException; imp ...

  4. angular6 导出Excel文件

    1.安装file-saver.@types/file-saver和xlsx npm install file-saver --save npm install @types/file-saver -- ...

  5. 前端性能优化 css和js的加载与执行

    一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字 ...

  6. Mybatis-plus中不列出全部字段

    //不列出全部字段 @Test public void test10() { QueryWrapper<User> wrapper = new QueryWrapper<>() ...

  7. Elasticsearch 报错:Fielddata is disabled on text fields by default. Set `fielddata=true` on [`your_field_name`] in order to load fielddata in memory by uninverting the inverted index.

    Elasticsearch 报错: Fielddata is disabled on text fields by default. Set `fielddata=true` on [`your_fi ...

  8. eclipse中解决/**/多行注释代码后,格式变乱的问题

    1 2 3 4 5

  9. @Data注解简化代码

    1 Lombok背景介绍 官方介绍如下: Project Lombok makes java a spicier language by adding 'handlers' that know how ...

  10. Linux下网络socket编程——实现服务器(select)与多个客户端通信

    一.关于socket通信 服务器端工作流程: 调用 socket() 函数创建套接字 用 bind() 函数将创建的套接字与服务端IP地址绑定 调用listen()函数监听socket() 函数创建的 ...