您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JS 常用的技巧和几个鲜为人知的特性

时间:2019-10-11 09:39:24  来源:  作者:

JS是一门发展迅速的语言,正因如此,有些新的特性和功能,咱们没有办法在第时间内知道。在这篇文章中,咱们主要探讨一些少有人知道的特性还有一些常用技巧。

获取查询字符串参数

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串,它已经存在了好几年了,但它在开发人员中并不流行,有点让人惊讶,咱们来看看如何使用它

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
 console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.Append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

使用 Set 对象创建一个惟一的元素列表

用JS创建唯一列表是一项常见的任务,通常通过filters或for循环来实现,但是还有另一种方法可以利用Set对象来实现这一点。

const list = [1, 2, 3, 5, 2, 5, 7];
const uniqueList = [...new Set(list)];

将原始值数组传递给Set对象,它创建一组惟一值,然后使用展开操作符语法和数组字面量将这些值转回数组。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

将原始值列表转换为另一种类型

有时候,后台或 DOM 中处理过的数据不是咱们需要的类型,我在处理数据集的属性时看到过这种情况。假设有以下列表:

const naiveList = ['1500', '1350', '4580'];

 

想要计算数组中所有元素的和,在JS中,字符串的相加把两个字符串拼接起来,像'1' + '2'它们会连接起来为 ‘12’,通常,要解决这个问题,咱们会使用parseInt函数,但还有另一种方法;咱们可以将数组中的元素转换为所需的基本类型

const castedList = naiveList.map(Number);
console.log(castedList) // [1500, 1350, 4580]

castedList现在包含具有正确Number类型的值。

扁平嵌套的数组

随着单页应用程序体系结构(如Redux)和前端数据规范化等概念的兴起,这种“数据规范化”趋势有时意味着所有元素的 id 都需要放在同一级别。

假设有下面的列表,咱们想扁平它:

const nestedList = [133, 235, 515, [513, 15]];
const flattenList = nestedList.flat();
console.log(flattenList) // [133, 235, 515, 513, 15]

就像这样,咱们的id数组被扁平了。

使用 object .freeze 避免对象被改变

随着函数式x编程的兴起,数据不可变也越来越重要,咱们可以使用 Object.freeze 来防止对象被更改。

const immutableObject = {
 name: '前端小智',
 url: 'https://小智66.com'
};
Object.freeze(immutableObject);
immutableObject.wechat = 'qq449245884'
immutableObject.name = '王大治' 
console.log(immutableObject) // {name: "前端小智", url: "https://小智66.com"}

使用 Object.seal 创建受控对象

Object.seal() 方法封闭一个对象,阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变,Object.freeze 是啥都不能做,Object.seal() 可以改变属性的值。

const controlledObject = {
 name: '前端小智'
};
Object.seal(controlledObject);
controlledObject.name = '王大冶';
controlledObject.hero = '英雄'; 
console.log(controlledObject) // {name: "王大冶"}

确保数组值

使用 grid ,需要重新创建原始数据,并且每行的列长度可能不匹配, 为了确保不匹配行之间的长度相等,可以使用Array.fill方法。

let array = Array(5).fill('');
console.log(array); // outputs (5) ["", "", "", "", ""]

 

数组 map 的方法 (不使用Array.Map)

另一种数组 map 的实现的方式,不用 Array.map。

Array.from 还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。如下:

const cities = [
 { name: 'Paris', visited: 'no' },
 { name: 'Lyon', visited: 'no' },
 { name: 'Marseille', visited: 'yes' },
 { name: 'Rome', visited: 'yes' },
 { name: 'Milan', visited: 'no' },
 { name: 'Palermo', visited: 'yes' },
 { name: 'Genoa', visited: 'yes' },
 { name: 'Berlin', visited: 'no' },
 { name: 'Hamburg', visited: 'yes' },
 { name: 'New York', visited: 'yes' }
];
const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);
// outputs ["Paris", "Lyon", "Marseille", 
// "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

有条件的对象属性

不再需要根据一个条件创建两个不同的对象,可以使用展开运算符号来处理。

nst getUser = (emailIncluded) => {
 return {
 name: 'John',
 surname: 'Doe',
 ...emailIncluded && { email : 'john@doe.com' }
 }
}
const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "john@doe.com" }
const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

动态属性名

早期,如果属性名需要是动态的,我们首先必须声明一个对象,然后分配一个属性。这些日子已经过去了,有了ES6特性,我们可以做到这一点。

const dynamic = 'email';
let user = {
 name: 'John',
 [dynamic]: 'john@doe.com'
}
console.log(user); // outputs { name: "John", email: "john@doe.com" }

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试。

作者:Euel Duran

来源: Dev

译者:前端小智



Tags:JS   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
今天给大家分享一款超优秀的Vue免费开源UI组件库HEYUI。 heyui 一套基于 vue2.x 构建的UI组件库,star高达2.2K+。提供 50 多种丰富的组件,支持全局方法及配置、自定义主题、国...【详细内容】
2020-11-12   JS  点击:(2)  评论:(0)  加入收藏
作者:前端小混混 来源:前端先锋作用域JavaScript 的变量被作用域所限制,如果超出了作用域,那么变量就没有办法再被使用,这样做的优点是: 可以避免当前的变量转为全局变量 有效限制...【详细内容】
2020-11-09   JS  点击:(4)  评论:(0)  加入收藏
问:如何用 JS 一次获取 HTML 表单的所有字段 ?考虑一个简单的 HTML 表单,用于将任务保存在待办事项列表中: <form> <label for="name">用户名</label> <input type="text...【详细内容】
2020-10-12   JS  点击:(5)  评论:(0)  加入收藏
yargs 是一个用来处理命令行参数的包,可以帮你处理自行设置的命令行标志和输入的任何类型的数据,其中包括布尔值、浮点数和字符串等。这个包非常简单明了,不需要在项目中编写大量的样板代码。...【详细内容】
2020-10-10   JS  点击:(3)  评论:(0)  加入收藏
沙箱环境 (Beta) 是协助开发者进行接口功能开发及主要功能联调的辅助环境,模拟了开放平台部分产品的主要功能和主要逻辑。可用于在产品上线前了解环境、组合和调试各种接口。...【详细内容】
2020-09-17   JS  点击:(24)  评论:(0)  加入收藏
FLV(Flash Video)流媒体格式,是随着 Flash MX 的推出发展而来的视频格式。其文件体积小,一般1分钟只占1MB,是普通视频文件大小的1/3,且视频质量良好,广受视频网站欢迎。然而,FLV 格...【详细内容】
2020-08-19   JS  点击:(2)  评论:(0)  加入收藏
本篇专门针对 Next.js 的 SSR 方案进行了探索和优化,一步一步带大家了解,如何基于 Serverless 架构部署一个实际的线上业务。 本文主要内容: 如何快速部署 Serverless Next.js ...【详细内容】
2020-07-24   JS  点击:(3)  评论:(0)  加入收藏
浏览器加载页面是按从上到下顺序加载的。加载 JS 并执行的时候,会阻塞其他资源的加载。这是因为 JS 可能会有 DOM 、样式等等操作,所以浏览器要先加载这段 JS 并执行,再加载放...【详细内容】
2020-05-14   JS  点击:(14)  评论:(0)  加入收藏
今天我将向大家演示如何使用 React Profiler API、Tracing API 以及 User Timing API 来分别追踪 React 的组件渲染、用户交互以及自定义性能指标。...【详细内容】
2020-04-25   JS  点击:(4)  评论:(0)  加入收藏
Java天天 2020-03-11 16:28:57 微服务已成为在 Node.js 中构建可扩展且强大的云应用的主流方法。同时也存在一些门槛,其中一些难点需要你在以下方面做出决策: 组织项目结构...【详细内容】
2020-03-15   JS  点击:(13)  评论:(0)  加入收藏
一千个读者,有一千个哈姆雷特。此系列文章将会从函数的执行机制、鲁棒性、函数式编程、设计模式等方面,全面阐述如何通过 JavaScript 编写高质量的函数。一、引言如何通过 Jav...【详细内容】
2020-03-02   JS  点击:(11)  评论:(0)  加入收藏
数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。1. 删除数组的重复项 2. 替换数组中的特定值有时在创建代码...【详细内容】
2020-02-26   JS  点击:(5)  评论:(0)  加入收藏
Adonis是一个 Node.js Web 框架,专注于易用性与速度。它甚至是一个全栈 Web 框架,解决了许多 Web 开发难题,提供了一个干净稳定的 API,用于构建 Web 应用和微服务,或者用于 TDD(...【详细内容】
2019-12-24   JS  点击:(25)  评论:(0)  加入收藏
如果您想了解并深入学习 Node.js 那么您首先要做的第一件事就是安装Node.js 。Node.js 环境怎么安装,对于新人来说肯定摸不着头脑。Node 是一个让 JavaScript运行在服务端的...【详细内容】
2019-11-11   JS  点击:(82)  评论:(0)  加入收藏
阅读JavaScript代码时,你有没有感觉: 你几乎不明白代码的作用? 代码使用了很多JavaScript技巧? 命名和编码风格相当随机?这些是编码习惯不良的迹象。在这篇文章中,我描述了JavaScr...【详细内容】
2019-10-28   JS  点击:(29)  评论:(0)  加入收藏
一切皆对象咱们经常听到JS中“一切皆对象”?有没有问想过这是什么意思?其它语言也有“一切皆对象”之说,如Python。但是Python中的对象不仅仅是像JS对象这样的存放值和值的容器...【详细内容】
2019-10-16   JS  点击:(29)  评论:(0)  加入收藏
JS是一门发展迅速的语言,正因如此,有些新的特性和功能,咱们没有办法在第时间内知道。在这篇文章中,咱们主要探讨一些少有人知道的特性还有一些常用技巧。获取查询字符串参数URLS...【详细内容】
2019-10-11   JS  点击:(32)  评论:(1)  加入收藏
你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天...【详细内容】
2019-09-26   JS  点击:(24)  评论:(0)  加入收藏
我们平时在开发部署 Node.js 应用的过程中,对于应用进程启动的耗时很少有人会关注,大多数的应用 5 分钟左右就可以启动完成,这个过程中会涉及到和集团很多系统的交互,这个耗时...【详细内容】
2019-09-20   JS  点击:(41)  评论:(0)  加入收藏
最近整理了下团队新人文档,对团队内使用的框架 riot.js 这部分内容做了一些总结。本文主要在 riot.js 源码 方面,分析一下 riot.js 的执行原理和使用优化。Riot.js 简介Simple...【详细内容】
2019-09-10   JS  点击:(45)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条