JavaScript进阶之道

JavaScript进阶之道

repo: github.com/alphardex/p…

Python和JavaScript在笔者看来是很相似的语言,本文归纳了JavaScript的各种tricks,相对于之前的Python版

两篇文章都读完,有没有发现它们的目录结构是一个样的呢XD

基本

模板字符串

let name = 'alphardex'
`Ore wa ${name} desu, ${
     4 * 6} sai, gakusei desu.`
// "Ore wa desu, 24 sai, gakusei desu."
复制代码

三元运算符

// if(condition){
    
// fuck
// } else {
    
// shit
// }
(condition)? fuck: shit
复制代码

字符串的拼接,反转与分割

let letters = ['咚', '哒', '呦', '!']
letters.join('')
// "咚哒呦!"
letters.reverse()
// ["!", "呦", "哒", "咚"]
let name = 'fujiwara chika'
name.split(' ')
// ["fujiwara", "chika"]
复制代码

判断元素的存在性

'fuck you'.includes('fuck')
// true
['bitch', 'whore'].includes('slut')
// false
'company' in {
   'title': 'Kaguya-sama: love is war', 'company': 'A1 Pictures'}
// true
复制代码

函数

箭头函数

函数的简化写法,配合map、filter、sort等实现函数式编程

// function foo(parameters){
    
// return expression
// }
let foo = (parameters) => expression
复制代码

map – 映射

let numbers = [1, 2, 3, 4, 5]
numbers.map(e=>e ** 2)
// [1, 4, 9, 16, 25]
复制代码

filter – 过滤

let values = [null, undefined, NaN, 0, '', true, 'alphardex', 666]
values.filter(e=>e)
// [true, "alphardex", 666]
复制代码

sort – 排序

let numbers = [4, 2, 5, 1, 3]
numbers.sort((a, b)=>a-b) // 升序
// [1, 2, 3, 4, 5]
numbers.sort((a, b)=>b-a) // 降序
// [5, 4, 3, 2, 1]
复制代码

其他骚操作

求1到100的和

[...Array(101).keys()].reduce((a, b)=>a+b)
// 5050
// 或者用lodash实现,写法简直跟Python一模一样
// _.sum(_.range(101))
复制代码

扁平化数组

const flatten = (arr, depth=1) => arr.reduce((a, v)=>a.concat(depth>1 && Array.isArray(v)?flatten(v, depth-1):v), [])
let arr = [1, [2, 3, ['a', 'b', 4], 5], 6]
flatten(arr, 2)
// [1, 2, 3, "a", "b", 4, 5, 6]
// 或者用ES10新增的flat
// arr.flat(2)
复制代码

扩展运算符

数据结构的合并

let arr1 = ['kaguya', 'miyuki']
let arr2 = ['chika', 'ishigami']
[...arr1, ...arr2]
// ['kaguya', 'miyuki', 'chika', 'ishigami']
let obj1 = {
   'name': 'rimuru'}
let obj2 = {
   'kind': 'slime'}
{...obj1, ...obj2}
// {name: 'rimuru', kind: 'slime'}
复制代码

函数参数的打包与解包

// 打包
let foo = (...args) => console.log(args)
foo(1, 2)
// [1, 2]
// JS只能打包位置参数,无法正确地打包关键词参数
// foo(name='hayasaka', job='maid')
// ["hayasaka", "maid"] (keyword没了)

// 解包
let divmod = (a, b) => [Math.floor(a/b), a % b]
let t = [10, 3]
let [quotient, remainder] = divmod(...t)
quotient
// 商:3
remainder
// 余:1
复制代码

生成器

只要函数中包含yield关键词,这函数就是一个生成器函数

调用生成器函数时,会返回一个生成器对象

正如yield本身的意思(产出),对生成器对象调用next()会使其不断产出值,直到无值才终止遍历,done属性变为true

function* genHello() {
    yield 'hello'
    yield 'world'
}

g = genHello()
// genHello {<suspended>}
g.next()
// {value: "hello", done: false}
g.next()
// {value: "world", done: false}
g.next()
// {value: undefined, done: true}
复制代码

如果生成器函数需要产出另一个生成器生成的值,就要用到yield*

function* chain(...iterables){
    for(let it of iterables){
        yield* it
    }
}

let s = 'ABC'
let t = [...Array(3).keys()]
[...chain(s, t)]
// ["A", "B", "C", 0, 1, 2]
复制代码

数据结构

数组

同时迭代元素与其索引

相当于Python的enumerate

let li = ['umaru', 'ebina', 'tachibana']
li.map((e, i)=>`${i+1}. ${e}`)
// ['1. umaru', '2. ebina', '3. tachibana']
复制代码

元素的追加与连接

push在末尾追加元素,concat在末尾连接元素

let li = [1, 2, 3]
li.push([4, 5])
li
// [1, 2, 3, [4, 5]]
li.concat([4, 5])
li
// [1, 2, 3, [4, 5], 4, 5]
复制代码

测试是否整体/部分满足条件

every测试所有元素是否都满足于某条件,some则是测试部分元素是否满足于某条件

[1, 2, 3, 4, 5].every(e=>e<20)
// true
[1, 3, 4, 5].some(e=>e%2===0)
// true
复制代码

同时迭代2个以上的数组

相当于Python的zip

let subjects = ['nino', 'miku', 'itsuki']
let predicates = ['saikou', 'ore no yome', 'is sky']
subjects.map((e,i)=>`${e} ${predicates[i]}`)
// ["nino saikou", "miku ore no yome", "itsuki is sky"]
复制代码

去重

利用集合的互异性,同时此法还保留了原先的顺序

let li = [3, 1, 2, 1, 3, 4, 5, 6]
[...new Set(li)]
// [3, 1, 2, 4, 5, 6]
复制代码

解构赋值

最典型的例子就是2数交换

let [a, b] = [b, a]
复制代码

用rest运算符可以获取剩余的元素

let [first, ...rest] = [1, 2, 3, 4]
first
// 1
rest
// [2, 3, 4]
复制代码

对象

遍历

let obj = {
   'name': 'sekiro', 'hobby': 'blacksmithing', 'tendency': 'death'}
Object.keys(obj)
// ["name", "hobby", "tendency"]
Object.values(obj)
// ["sekiro", "blacksmithing", "death"]
Object.entries(obj).map(([key, value])=>`${key}: ${value}`)
// ["name: sekiro", "hobby: blacksmithing", "tendency: death"]
复制代码

排序

let data = [{
   'rank': 2, 'author': 'beta'}, {
   'rank': 1, 'author': 'alpha'}]
data.sort((a, b)=>a.rank - b.rank)
// [{'rank': 1, 'author': 'alpha'}, {'rank': 2, 'author': 'beta'}]
复制代码

反转

let obj = {
   'name': 'sakurajima mai', 'suit': 'bunny girl'}
Object.fromEntries(Object.entries(obj).map(([key, value])=>[value, key]))
// {sakurajima mai: "name", bunny girl: "suit"}
// 或者用lodash实现
// _.invert(obj)
复制代码

缺失键处理

如果键不在字典中,返回一个默认值,类似Python的dict.get

let obj = {
   'name': 'okabe rintaro', 'motto': 'elpsycongroo'}
obj.job || 'mad scientist'
// mad scientist
复制代码

如果键不在字典中,将会添加它并设置一个默认值,类似Python的dict.setdefault

let obj = {
   'name': 'okabe rintaro', 'motto': 'elpsycongroo'}
obj.job = obj.job || 'mad scientist'
// "mad scientist"
obj
// {name: "okabe rintaro", motto: "elpsycongroo", job: "mad scientist"}
复制代码

语言专属特性

待整理

转载于:https://juejin.im/post/5cc45bf5e51d456e671c7e3c

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100951.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Qt中的QFile读写文件操作

    Qt中的QFile读写文件操作1.首先记录一下QString,QByteArray,char*之间的转换(1)QString-&amp;gt;QByteArrayQStringbuf=&quot;123&quot;;QByteArraya=buf.toUtf8();//中文a=buf.toLocal8Bit();//本地编码(2)QByteArray-&amp;gt;char*char*b=a.data…

  • 三菱数据移位指令_三菱PLC移位指令「建议收藏」

    三菱数据移位指令_三菱PLC移位指令「建议收藏」(2011-05-2014:09:54)转载▼标签:杂谈分类:技术三菱PLC移位指令分左移和右移,分别是SFTL和SFTR。而针对位的移位则是SFTLP和SFTRP,前几天给学生讲这个指令时专门做了个跑马灯的例子,用的就是这个指令。下面简单讲解一下SFTLP。指令格式为SFTLPM20M0K8K1SFTLP——对位进行左移;M20——移进来的是“1”还是“0”得看M20的状态,M…

  • java线程池浅析

    java线程池浅析简介    线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的。在jdk1.5之后这一情况有了很大的改观。Jdk1.5之后加入了java.util.concurrent包,这个包中主要介绍java中线程以及线程池的使用。为我们在开发中处理线程的问题提供了非常大的帮助。线程池线程池的作用: …

  • yum卸载软件

    yum卸载软件yum可以安装软件,也可以卸载软件yum安装软件的命令为:yuminstallfileNameyum卸载软件的命令:sudoyumremovedocker\docker-client\docker-client-latest\docker-common…

  • SVM资料

    SVM资料解释SMO算法比较好的文档http://wenku.baidu.com/view/aeba21be960590c69ec3769e.html参考博客:http://myjuno.blogbus.com/logs/242581064.htmlSMO算法http://cs229.stanford.edu/materials/smo.pdf外层循环(主程…

  • 怎么新建pytest的ini文件_pytest.ini配置

    怎么新建pytest的ini文件_pytest.ini配置前言pytest配置文件可以改变pytest的运行方式,它是一个固定的文件pytest.ini文件,读取配置信息,按指定的方式去运行查看pytest.ini的配置选项pytest-h找到以下

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号