js 中一些意想不到的使用技巧（持续更新，欢迎补充）

Ilikewhite 发布于2019-08-23 11:29 / 509人阅读

摘要：中一些意想不到的使用技巧持续更新，欢迎补充箭头函数返回对象一般的写法简洁的写法对象属性名不确定，需要动态的传入一般的写法简洁的写法复制一个对象，并重写其中的一些属性一般的写法简洁的写法数组解构为函数参数一般的写法简洁的写法向一个数组添加另一

js 中一些意想不到的使用技巧（持续更新，欢迎补充） 1. 箭头函数 => 返回 map 对象

// 一般的写法
const makeMap = () => {
  return {key: "value"};
};

// 简洁的写法
const makeMap = () => ({key: "value"});

2. 对象属性名不确定，需要动态的传入

// 一般的写法
const makeMap = (key, value) => {
  const obj = {};
  obj[key] = value;
  return obj;
};

// 简洁的写法
const makeMap = (key, value) => ({[key]: value});

3. 复制一个对象，并重写其中的一些属性

const source = {hello: "hello", hi: "hi"};

// 一般的写法
const target = Object.assign({}, source);
target.hello = "hello everyone";

// 简洁的写法
const target = {...source, hello: "hello everyone"};

4. 数组解构为函数参数

const arr = [1, 2, 3];
const plus = (...args) => args.reduce((a, b) => a + b);

// 一般的写法
plus(arr[0], arr[1], arr[2], 4, 5);

// 简洁的写法
plus(...arr, 4, 5);

5. 向一个数组添加另一数组的所有元素

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 一般的写法
arr1 = arr1.concat(arr2);

// 简洁的写法
arr1.push(...arr2);

6. 回调函数简写

// 一般的写法
promise.catch(e => {
  console.log(e);
});

// 简洁的写法
promise.catch(console.log);

7. 多级箭头函数 =>

// 一般的写法
const makeTimesFunc = times => {
  return value => {
    return value * times;
  };
};

// 简洁的写法
const makeTimesFunc = times => value => value * times;

8. 从右向左函数复式调用

 // 不确定元素个数，举例 3 个
const fnCollection = [str => `${str} | fisrt`, str => `${str} | second`, str => `${str} | third`];

// 一般的写法
const addManySuffixes = str => {
  let result = str;
  for(let i = fnCollection.length - 1; i > -1; i -= 1) 
    result = fnCollection[i](result);
  
  return result; 
};

// 简洁的写法
const addManySuffixes = fnCollection.reduce((a, b) => str => a(b(str)));
// 可以把 str 参数扩展成任意参数
const addManySuffixes = fnCollection.reduce((a, b) => (...args) => a(b(...args)));

后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

云服务器 GPU云服务器 vps日常维护中的一些要点总结 js中使用数组 js中reset使用 js中使用json

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97029.html

github 上有趣又实用的前端项目（持续更新，欢迎补充）

摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架一个专门用来做 HTML 幻灯片的框架，支持 HTM...

zzzmh 2019-08-23 12:09 评论0 收藏0
github 上有趣又实用的前端项目（持续更新，欢迎补充）

摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架一个专门用来做 HTML 幻灯片的框架，支持 HTM...

morgan 2019-08-30 15:54 评论0 收藏0
关于BBS的一些功能性补充以及踩坑记录(持续补充)

摘要：声明以下记录了本人实验性地探索过程，不代表正确，请谨慎食用。取消注释，并添加两个属性，。由于在中被设置成了的，所以并不适合加密存入。算法碰撞的可能性很小，因此基本可以保证和加密后都是独一无二的，防止黑客用彩虹表爆表。声明：以下记录了本人实验性地探索过程，不代表正确，请谨慎食用。也欢迎提出各种批评建议，帮助我改正错误。谢谢! 1.注册注册时在注册的jsp页面使用js函数进行合法性验证...

hightopo 2019-08-15 14:48 评论0 收藏0
程序员写简历时的技术词汇拼写规范备忘录！

摘要：写在前面每年这个时候又到了求职的旺季。求职前，我们都会花很多的时间在自己的技术水平提升笔面试的准备之上，但往往却忽略了找工作第一步所需要的一个严谨且靠谱的简历。而程序员写简历，第一步就是需要注意严谨而规范地使用各种技术词汇。 ...

h9911 2021-10-12 10:12 评论0 收藏0