你可能不知道的JS使用技巧

news2024/11/15 16:48:45

数组扁平化

老方案

let arr = [1, 2, 4, 6,[5, 4, 5,[98, 3], [34], [7]]];
arr.toString().split(',').map(Number);

在这里插入图片描述

新方案:

flat()

const arr = [1, [2, [3, [4, 5]]], 6];
console.log(arr.flat(Infinity));

在这里插入图片描述

深拷贝

老方案:

JSON.parse(JSON.stringify(obj))

        const person = {
            name: "shaka",
            age: 18,
            hobby: ['Code']
        }

        const person2 = JSON.parse(JSON.stringify(person))

新方案

structuredClone()

        const person = {
            name: "shaka",
            age: 18,
            hobby: ['Code']
        }
        const copied = structuredClone(person)
        console.log(copied.hobby === person2.hobby);//false

at代替arr.length

支持数组和字符串,再也不用使用这种冗余的写法了 arr[arr.length-1]

        const arr = [12, 3, 4, 2, 42, 5, 59]
        console.log(arr.at(-1));//59

trimStart 和 trimEnd

trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。

trimEnd() 方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。

使用方法和trim是一致的,这里就不写了

endsWith() 检测字符串结尾

str.endsWith(searchString, length);

searchString 要搜索的子字符串。

length 在 str 中搜索 searchString 的结束位置

        const str = 'shaka is a boy'
        console.log(str.endsWith('boy'));//true
        console.log(str.endsWith('shaka', 5));//true

length 当不填写值时,默认值为str.length,也就是真正的字符串结尾处,从下标为0的字符开始,空格和符号也算字符。
也是开始的位置。

可选链运算符?.

        const person = {
            name: 'shaka',
            cat: {
                name: 'duoduo'
            }
        };

我们现在有这么一个对象

        const dog = person.dog.name
        console.log(dog);

我们去输出这样一个代码,毫无疑问会报错
在这里插入图片描述
但是有的时候,我们这个数据没有,但是我们不想让它报错,需要继续走下去开发,怎么做

        const dog = person.dog?.name
        console.log(dog);//undefined

空值合并运算符(??)

        const nullValue = null;
        const emptyText = ""; // 空字符串,是一个假值,Boolean("") === false
        const someNumber = 42;

        const valA = nullValue ?? "valA 的默认值";
        const valB = emptyText ?? "valB 的默认值";
        const valC = someNumber ?? 0;

        console.log(valA); // "valA 的默认值"
        console.log(valB); // ""(空字符串虽然是假值,但不是 null 或者 undefined)
        console.log(valC); // 42

保证常量不为 null 或者 undefined。

同时与||是有去别的

        const nullValue = null;
        const emptyText = ""; // 空字符串,是一个假值,Boolean("") === false
        const someNumber = 42;

        const valA = nullValue || "valA 的默认值";
        const valB = emptyText || "valB 的默认值";
        const valC = someNumber || 0;

        console.log(valA); 
        console.log(valB); 
        console.log(valC);

在这里插入图片描述

也就是说??只有当左侧为null和undefined的时候,返回其右侧操作数,否则返回左侧操作数。

需要注意的是将 ?? 直接与 AND(&&)和 OR(||)运算符组合使用是不可取的,会报语法错误

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/187483.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据分析:Matplotlib数据可视化详细教程

1.主要分为4种:柱状图,直方图,散点图,饼状图 可视化的工具选择:可视化的Python软件包 工具的优点:可以自制图形定义功能 绘图程序步骤: 第一步导包中Pyplot模块,以as为别名引入包…

蓝桥杯重点(C/C++)(随时更新,更新时间:2023.1.31)

点关注不迷路,欢迎推荐给更多人,大约两天更新一次,建议点赞收藏加关注 本次更新内容:2.18 递归 目录 1 技巧 1.1 取消同步(节约时间,甚至能多骗点分,最好每个程序都写上) 1.…

代谢组学文献解读:高胆固醇饮食与脂肪肝相关肝癌的关系

代谢组学文献分享,非酒精性脂肪性肝病(Non-alcoholic fatty liver disease , NAFLD)是全世界日趋普遍的慢性肝病。随着肥胖和代谢综合征在全球的流行,近20年亚洲国家NAFLD增长迅速,在上海、北京、广州和香港等地区成人NAFLD患病率…

【论文简述】Multiview Stereo with Cascaded Epipolar RAFT(arxiv 2022)

一、论文简述 1. 第一作者:Zeyu Ma 2. 发表年份:2022 3. 发表期刊:arxiv 4. 关键词:MVS、RAFT、级联、极线 5. 探索动机:3D卷积在计算和内存方面成本很高,在有限资源条件下限制重建质量。 However, a …

CISP-PTE 学习记录

CISP-PTE 学习记录 题目链接1 http://49.232.193.10:2083/start/index.php?pagehello.html write up: http://49.232.193.10:2083/start/index.php?pagephp://filter/readconvert.base64-encode/resource…/key.php 知识点: php伪协议,php伪协议是可以读取到ww…

【运维】Linux/Ec2挂载卷与NFS搭建实站讲解

英文Network File System(NFS),是由SUN公司研制的UNIX表示层协议(presentation layer protocol),能使使用者访问网络上别处的文件就像在使用自己的计算机一样。NFS在实际场景中有着不少的应用场景,比如分布式代码部署下,代码一致性…

关于 微软商店无法加载页面 显示错误代码0x80131500的解决办法

目录一、误删系统文件导致Microsoft Store无法打开1.运行 SFC 和 DISM2.尝试修复或者重置微软应用商店3.重新部署 Microsoft Store4.运行Windows疑难解答5.对系统镜像进行无损修复二、其他原因导致Microsoft Store无法打开1.调整网络连接2.更改DNS3.清理应用商店的缓存4.调整 I…

java-raft框架之atomix进行分布式管理

共识算法 在一个分布式的系统中,管理各个节点的一致性(共识)一直是个很有难度的问题。 在近几十年的发展中,于1990年诞生的Paxos算法是其中最为经典的代表,并一统江湖数几十载。 如著名的zookeeper、chubby都是基于…

操作系统(day03)-- 进程

文章目录进程进程的定义进程的组成进程的组织进程的特征进程的状态-五种基本状态进程状态的转换进程控制进程控制的定义进程控制相关的原语进程 系统并发运行多个程序,它需要将程序代码、数据段存放到内存的某个位置,那系统怎么知道哪个内存的数据在哪呢…

注册公司选择认缴or实缴?如何查验公司实际资金?

目录 前言 实缴制 认缴制 认缴制还是实缴制呢,哪个更好? 1、如果你的启动资金比较少,建议选认缴制: 2、有27类的公司暂不推行注册资金认缴制: 3、如何查看公司实际的公司实缴金额? 4、认缴不需要验资&#xf…

【原文核心对照代码】【一文足以系列】A-LOAM里程计部分简短精解

前言 本文将通过论文对照代码的方式阐述A-LOAM这一神奇算法。全文保持各个章节短小精悍的风格。本文会省去一些细节,但是了解大部分的论文和代码实现已经足够了。 点曲率计算与边缘点面点区分 论文中通过对点云点的曲率进行如下求曲率的计算。将计算的结果跟阈值…

org.slf4j.Logger无法输出日志的BUG

场景依赖<dependency><groupId>org.apache.zookeeper</groupId><artifactId>zookeeper</artifactId><version>3.4.13</version></dependency><dependency><groupId>org.slf4j</groupId><artifactId>s…

第一章 Iceberg入门介绍

1、Iceberg简介 本质&#xff1a;一种数据组织格式 1.1、应用场景 ①面向大表&#xff1a;单表包含数十个PB的数据 ②分布式引擎非必要&#xff1a;不需要分布式SQL引擎来读取或查找文件 ③高级过滤&#xff1a;使用表元数据&#xff0c;使用分区和列级统计信息修建数据文…

技术管理者如何获得下属的认同?

你好&#xff0c;我是童军&#xff0c;目前是华锐技术资管营销研发团队总监。今天我将从自己的工作场景出发&#xff0c;讲讲我是如何和团队小伙伴相处沟通&#xff0c;并获得认同的。 我们先看一个小故事。 我刚当上主管那会儿&#xff0c;在和新入职同事沟通具体工作时&…

【数组相关面试题】LeetCode试题

前言&#xff1a;在之前我们已经学习过了顺序表的相关概念以及实现的方法&#xff0c;今天我们通过几个题来进行应用了解。 目录1.第一题([oj链接](https://leetcode.cn/problems/remove-element/))2.第二题&#xff08;[oj链接](https://leetcode.cn/problems/remove-duplicat…

Ubuntu和Linux开发板网络环境搭建

参考&#xff1a;https://www.bilibili.com/video/BV1n541197rk?spm_id_from333.999.0.0 目录前言STM32MP157 开发板网络环境搭建开发工具网络拓扑结构Ubuntu 常用工具安装同一网段ping 测试概念关闭Ubuntu 和Windows 防火墙电脑和开发板直连同个路由器准备工作VMware 设置查看…

Java:每个开发人员职业生涯的基本Java技能

早在1996年&#xff0c;Java就首次被引入世界&#xff0c;如今仍然非常受欢迎。2021&#xff0c;全球超过35%的程序员使用这种语言。此外&#xff0c;它是TIOBE索引中最受欢迎的三种编程语言之一。作为Java初学者&#xff0c;这对你意味着什么?这意味着你必须获得竞争优势&…

浏览器的URL中每个中字符的“乱码”问题,字符集的解码和编码

uft-8和Unicode字符表对应&#xff0c;查找可参考&#xff1a;https://www.utf8-chartable.de/unicode-utf8-table.pl 几个好用的字符集转换网址&#xff1a;http://web.chacuo.net/charseturlencode&#xff0c;https://123.w3cschool.cn/webtools&#xff0c;http://mytju.co…

JVM详解--内存结构

文章目录什么是JVM内存结构程序计数器&#xff08;Program Counter Register&#xff09;虚拟机栈&#xff08;Java Virtual Machine Stacks&#xff09;概述栈内存溢出本地方法栈堆&#xff08;Heap&#xff09;堆内存溢出堆内存诊断方法区方法区内存溢出常量池运行时常量池St…

PHP手册

NULL 未定义和unset()的变量都将解析为值null unset() unset( $var, ...$vars) 如果在函数中 unset() 一个全局变量&#xff0c;则只是局部变量被销毁&#xff0c;而在调用环境中的变量将保持调用 unset() 之前一样的值。 <?php function destroy_foo() {global $foo;un…