专栏首页终身学习者JS 10个 常用的技巧和鲜为人知的特性

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

作者:Euel Duran 来源: Dev 译者:前端小智


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

腾讯云 热门云产品限量特惠秒杀,云服务器1核2G,99元/1年

海外1核2G服务器低至2折,半价续费券限量免费领取!

新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。

获取查询字符串参数

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创建惟一列表是一项常见的任务,通常通过filtersfor循环来实现,但是还有另一种方法可以利用Set对象来实现这一点。

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

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

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

有时候,后台或 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 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文: https://dev.to/duranenmanuel/...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在JavaScript中访问暂未存在的嵌套对象

    JavaScript 是个很神奇的东西。但是 JavaScript中的一些东西确实很奇怪,让人摸不着头脑。其中之一就是当你试图访问嵌套对象时,会遇到这个错误

    前端小智@大迁世界
  • 从设计的角度看 Redux

    你知道 Redux 真正的作用远不止状态管理吗? 你是否想要了解 Redux 的工作原理? 让我们深入研究 Redux 可以做什么,它为什么做它的事情,它的缺点...

    前端小智@大迁世界
  • 浏览器将标签转成 DOM 的过程

    当浏览器获得了资源以后要进行的第一步工作就是 HTML 解析,,它由几个步骤组成:编码、预解析、标记和构建树。

    前端小智@大迁世界
  • 蚂蚁区块链第13课 如何搭建一个DAPP应用(以姓名年龄为例)

    本文介绍如何使用Cloud IDE完成name-age智能合约的编译,获取其ABI和二进制码信息。 接着,本文介绍基于EXPRESS框架搭建的前端页面,完成已...

    辉哥
  • 【DB笔试面试411】​设U1是db_datawriter角色中的成员,则U1从该角色中有_____、_____、_____。

    在SQL Server 2000中,设U1用户在某数据库中是db_datawriter角色中的成员,则用户U1从该角色中可以获得的数据操作权限有_____、__...

    小麦苗DBA宝典
  • 自己做的一个小程序 可采集、导出、模板、配置

    去年老婆要开个店铺,卖化妆品的,不过输入数据的时候真的头疼,因为我们是没有货源的,都是从代理那里找图片、介绍等,不过好在代理有个网站,闲来无事,就开发了这个小程...

    脑洞的蜂蜜
  • Maven使用本地jar包(两种方式)

    有些项目会用到一些Maven库上没有的jar包,这就需要我们自己引入了 这种情况有两种办法: 第一种方式,在pom文件中引用时使用本地路径: 首先把jar包放到...

    二十三年蝉
  • 好好编程-物流项目19【客户管理-更新客户】

    用户4919348
  • 移动端开发脱坑指南

    杨肆月
  • 实现一个靠谱的Web认证两种认证JWT怎么存储认证信息防止CSRF总是使用https认证信息不应该永久有效总结一下

    大宽宽

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动