【译】30 secondes of ES6 (一)

栏目: JavaScript · 发布时间: 5年前

内容简介:20190121开启打卡第一周,

30 secondes of code 是一个非常优质精选的 JavaScript 项目 ,总结了大量的使用 ES6 语法实现的代码块,项目的设计目标就是更简洁,更高效,更快速的实现基础代码模块,碎片化学习实用干货, 30 秒掌握一个高质量 ES6 代码块 。

原文链接

学习初衷

  1. 学习 ES6 基础知识,提升程序算法能力;学习 JavaScript 基础从 API 开始。
  2. 每篇精选 5 段优秀代码块,和 5 个以上 API ,为前端大全栈打下坚实根基!

学习方法

  1. 认真解读英文版 30 secondes of code 的每个 ES6 代码块,并把其中的 API 重点分析。
  2. 认识新单词,提升英语水平,目标可以轻松翻阅英文版专业书,全面提升前端技术软实力。

主要内容分类

contents 模块
Adapter 适配器
Array 数组排列
Browser 浏览器
Date 日期
Function 函数
Math 数学方法
Node 节点
Object 对象
String 字符串
Type 类型
Utility 使用函数

20190121开启打卡第一周, aryallallEqualanyarrayToCSV .

20190121开启打卡第一周, ary 、 all、 allEqual、 any、 arrayToCSV .

Adapter 适配器 ary

创建一个接受最多 n 个参数的函数,忽略任何其他参数。使用 Array.prototype.slice(0,n) 方法和 spread 扩展运算符 (…) 调用提供的函数 fn (最多 n 个参数)。

const ary = (fn , n) => (...args) => fn(...args.slice(0, n));
const firstTwoMax = ary(Math.max, 2);
console.log([[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)));//[6, 8, 10]
复制代码

slice() 方法返回一个阵列的一部分的一个浅拷贝,到选自新的数组对象 beginend ( end 不包括)。原始数组不会被修改。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2,4));//['camel', 'duck']
console.log(animals);// ["ant", "bison", "camel", "duck", "elephant"]
复制代码

该 Math.max() 函数返回零个或多个数字中的最大值。

console.log(Math.max(-10, 20)); //20
复制代码

Array 数组 all

如果提供的谓词函数对集合中的所有元素都返回 true ,则返回 true ,否则返回 false 。使用 Array.prototype.every() 测试集合中的所有元素是否基于 fn 返回 true 。省略第二个参数 fn ,将布尔值用作默认值。

const all = (arr, fn = Boolean) => arr.every(fn);
console.log(all);
console.log(all([4, 2, 3], x => x >1));//true
console.log(all([1, 2, 3]));//true
复制代码

every() 方法测试数组中的所有元素是否都通过了由提供的函数实现的测试。此方法返回 true 放在空数组上的任何条件。

console.log([12, 5, 8, 130, 44].every(x => x >= 10));//false
console.log([12, 54, 18, 130, 44].every(x => x >=10));//true
复制代码

Array 数组 allEqual

检查数组中的所有元素是否相等。使用 Array.prototype.every() 检查数组中的所有元素是否与第一个元素相同。

const allEqual = arr => arr.every( val => val === arr[0]);
console.log(allEqual([1, 2, 3, 4, 5, 6]));//false
console.log(allEqual([1, 1, 1, 1]));//true
复制代码

Array 数组 any

如果提供的谓词函数对集合中的至少一个元素返回 true ,则返回 true ,否则返回 false 。使用 Array.prototype.some() 测试集合中的任何元素是否基于 fn 返回 true 。省略第二个参数 fn ,将布尔值用作默认值。

const any = (arr, fn = Boolean) => arr.some(fn);
console.log(any([0, 1, 2, 0], x => x >=2));//true
console.log(any([0, 0, 1, 0]));//true
复制代码

some () 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。此方法返回 false 放在空数组上的任何条件。

console.log([2, 5, 8, 1, 4].some(x => x > 10));//false
console.log([12, 5, 8 ,1 , 4].some( x => x >10));//true
复制代码

Array 数组 arrayToCSV

将二维数组转换为逗号分隔值( csv )字符串。使用 Array.prototype.map ()Array.prototype.join(delimiter) 将一维数组组合成字符串。使用 Array.prototype.join('\n') ,换行符号)两个组合的全行到 CSV 格式的字符串,每排分捡和一个换行符。在第二 omit 参数 delimiter ,使用 delimiter (默认)。

const arrayToCSV = (arr, delimiter = ',') => arr.map( v => v.map( x => `"${x}"`).join(delimiter)).join('\n');

console.log(arrayToCSV([['a', 'b'], ['c', 'd']]));
//"a","b" 
//"c","d"

console.log(arrayToCSV([['a', 'b'],['c', 'd']],';'));
//"a","b" 
//"c","d"
复制代码

map() 方法创建一个新数组,其结果是在调用数组中的每个元素上调用提供的函数。

var array1 = [1, 4, 9 ,16];
const map1 = array1.map(x => x * 2);
console.log(map1);// [2, 8, 18, 32]
console.log(array1);//[1, 4, 9, 16]
复制代码

另外,分享个有趣的图片,帮助更好的理解 map() .

【译】30 secondes of ES6 (一)

join() 方法通过连接数组(或类数组对象)中的所有元素(由逗号或指定的分隔符字符串分隔)来创建并返回新字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。如果元素是 undefinednull ,则将其转换为空字符串。

var elements = ['Fire', 'Wind', 'Rain'];

console.log(console.log(elements.join('-')));//Fire-Wind-Rain
复制代码

小结,每天坚持学一个优质 ES6 代码块,因为努力,所以看到了希望,一起继续加油哦。


以上所述就是小编给大家介绍的《【译】30 secondes of ES6 (一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从0开始做运营 入门篇

从0开始做运营 入门篇

张亮 / 4.99元

此书是《从零开始做运营》系列的入门篇。 在互联网产品经理热的今天,关于传统的网站与产品运营的书籍一直非常缺乏,很多有志于互联网行业的年轻人并不明白一款产品、一个网站的策划、上线、成长、成熟直到衰落的过程中,除了产品和网站本身的设计之外,还有一块非常重要的工作是针对网站与产品生命周期的持续运营。 网站与产品运营是一个非常辛苦而非常有趣的事情,希望本书可以为有志于从事互联网网站与产品运营的......一起来看看 《从0开始做运营 入门篇》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

html转js在线工具
html转js在线工具

html转js在线工具