赞
踩
比较JavaScript中的数据结构(数组与对象)
在某些情况下,我们会创建一个处在两个数之间的数组。假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法 ?
let start = 1900, end = 2000;[...new Array(end + 1).keys()].slice(start);// [ 1900, 1901, ..., 2000]// 还有这种方式,但对于很的范围就不太稳定Array.from({ length: end - start + 1 }, (_, i) => start + i);
在某些情况下,我们需要将值收集到数组中,然后将其作为函数的参数传递。使用 ES6,可以使用扩展运算符(...
)并从[arg1, arg2] > (arg1, arg2)
中提取数组:
const parts = { first: [0, 2], second: [1, 3],}["Hello", "World", "JS", "Tricks"].slice(...parts.second)// ["World", "JS"]
当我们需要在数组中使用Math.max
或Math.min
来找到最大或者最小值时,我们可以像下面这样进行操作:
const elementsHeight = [...document.body.children].map( el => el.getBoundingClientRect().y);Math.max(...elementsHeight);// 474const numbers = [100, 100, -1000, 2000, -3000, 40000];Math.min(...numbers);// -3000
Array 有一个很好的方法,称为Array.flat
,它是需要一个depth参数,表示数组嵌套的深度,默认值为1
。但是,如果我们不知道深度怎么办,则需要将其全部展平,只需将Infinity
作为参数即可 ?
const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]arrays.flat(Infinity)// [ 10, 50, 100, 2000, 3000, 40000 ]
在代码中出现不可预测的行为是不好的,但是如果你有这种行为,你需要处理它。
例如,常见错误TypeError
,试获取undefined/null
等属性,就会报这个错误。
const found = [{ name: "Alex" }].find(i => i.name === 'Jim')console.log(found.name)// TypeError: Cannot read property 'name' of undefined
我们可以这样避免它:
const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}console.log(found.name)// undefined
对于这个方法,一个很好的用例就是styled-components
,在ES6中,我们可以将模板字符中作为函数的参数传递而无需使用方括号。如果要实现格式化/转换文本的功能,这是一个很好的技巧:
const makeList = (raw) => raw .join() .trim() .split("\n") .map((s, i) => `${i + 1}. ${s}`) .join("\n");makeList`Hello, WorldHello, World`;// 1. Hello,World// 2. World,World
使用解构赋值语法,我们可以轻松地交换变量 使用解构赋值语法 ?:
let a = "hello"let b = "world"// 错误的方式a = bb = a// { a: 'world', b: 'world' }// 正确的做法[a, b] = [b, a]// { a: 'world', b: 'hello' }
需要在跨国际的项目中,对于按字典排序,一些比较特殊的语言可能会出现问题,如下所示 ?
// 错误的做法["a", "z", "ä"].sort((a, b) => a - b);// ['a', 'z', 'ä']// 正确的做法["a", "z", "ä"].sort((a, b) => a.localeCompare(b));// [ 'a', 'ä', 'z' ]
localeCompare() :用本地特定的顺序来比较两个字符串。
最后一个技巧是屏蔽字符串,当你需要屏蔽任何变量时(不是密码),下面这种做法可以快速帮你做到:
const password = "hackme";password.substr(-3).padStart(password.length, "*");// ***kme
相关推荐
javaScript 测试系列实战(四):掌握 React Hooks 测试技巧
JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互
JavaScript 测试系列实战(二):深层渲染和快照测试
JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件
用Js实现人脸识别功能
JavaScript 启动性能瓶颈分析与解决方案
从零看清Node源码createServer和负载均衡整个过程
【项目实战】sass使用进阶篇(下)
【项目实战】sass使用基础篇(上)
最详细的从零开始配置 TypeScript 项目的教程
5 款非常好用的开源 Docker 工具
WebSocket 全面知识补全
7个处理JavaScript值为undefined的技巧
immutablejs 是如何优化我们的代码的?
Chrome 新功能尝鲜!— CSS Overview
又一个布局利器, CSS 伪类 :placeholder-shown
封装一个vue视频播放器组件
对于组件的可重用性,大佬给出来6个建议
学习 TS 不要错过的八个工具
Node 中的全链路式日志标记及处理
使用 Node 开发服务器项目时如何高效地打日志?
用TypeScript学设计模式(享元模式)
用TypeScript学设计模式(模板方法模式)
TypeScript 设计模式之适配器模式
用TypeScript学设计模式(观察者模式)
用TypeScript学设计模式(单例模式)
点在看的人特别帅/美
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。