[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂

news2025/2/22 3:40:29

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://blog.csdn.net/m0_69908381/article/details/140754278
出自【进步*于辰的博客】

参考笔记一,P10.4、P13.2;笔记三,P48.1。

文章目录

  • 先言
  • 1、通用函数
  • 2、Global对象函数
  • 3、数组相关函数
    • 3.1 arr.find(item => {})
    • 3.2 Array.from(obj)
    • 3.3 arr.copyWithin(a, b, c)
  • 最后

先言

  1. 下文所列举函数可能隶属ES5或ES6(特别是数组相关函数),我列举的是一些常用函数,并且一些“成对”函数我不会列举,如:lastIndexOf()(PS:一般情况下,lastIndexOf()会与indexOf()共同存在)。
  2. 诸如函数的学习与使用,建议大家查看源码,稍作测试便可掌握。

1、通用函数

摘要参数说明返回值类型/返回值说明
parseInt(str)将字符串中的数字部分转换成数字,以字符截止。可用于去除小数。若首字符不是数字,得NaN
Number(str)将字符串转换成数字。若字符串中包含非数字,得NaN
str.slice(i)截取字符串
eval(str)将字符串作为js脚本执行
type(a)返回变量类型。同指令type a

2、Global对象函数

摘要参数说明返回值类型/返回值说明
encodeURI(url)对URL进行编码。作用对象:不属于URI的特殊字符,如:特殊符号、汉字
encodeURIComponent(url)对URL进行编码。作用对象:任何非标准字符(即非字母)
decodeURI(url)对URL进行解码。作用对象:不属于URI的特殊字符,如:特殊符号、汉字
decodeURIComponent(url)对URL进行解码。作用对象:任何非标准字符(即非字母)

示例。

var url = 'https://blog.csdn.net/m0_69908381?type=blog&name=进步*于辰'
var enurl1 = encodeURI(url)
var enurl2 = encodeURIComponent(url)
console.log(enurl1)
console.log(enurl2)

var deurl1 = decodeURI(enurl1)
console.log(deurl1)
var deurl2 = decodeURIComponent(enurl2)
console.log(deurl2)

打印结果:
在这里插入图片描述

3、数组相关函数

参考笔记二,P9.4~8、P41.5;笔记三,P48.7、P12.3。

摘要参数说明返回值类型/返回值说明
Array.of(a,b,...)类似Java中的Arrays.asList()
Array.from(obj)obj 可以是数组、对象将 obj 按照一定规则转化成数组
for(let i in arr)i 是下标,不是元素。arr 可以是数组或对象加强for
for(let e of arr)e-元素。arr 只能是数组加强for
arr.forEach((e, i) => {})e-元素,i-下标遍历数组
arr.indexOf(a)a-查找元素返回匹配的第一个元素的下标,找不到返回-1
arr.findIndex(item => {})item-数组元素返回满足条件的第一个元素的下标,找不到返回-1
arr.find(item => {})item-数组元素返回满足条件的第一个元素,条件由函数内自定义,找不到返回undefined
arr.copyWithin(a, b, c)a-目标开始位置,b-开始位置,c-结束位置arr将arr中,[b,c)的元素复制到arr的a处

3.1 arr.find(item => {})

业务:返回满足条件的第一个元素,条件由函数内自定义。遍历时以true(满足条件)作为结束,若数组中无满足条件的元素或使用了return false,返回undefined。(注:item 是数组元素,遍历时作为参数传入函数,并作为返回值)

1:查找普通数组。

let arr = Array.of(10, 20, 30)
let e = arr.find(item => {
    return item > '10'
})
console.log(e);// 20

可见,JS中在比较时忽略数据类型。

2:查找对象数组。

var platform = [{
    id: 1,
    name: 'C站'
}, {
    id: 2,
    name: 'B站'
}]

var e = platform.find(item => {
    if(item.id == '1')
        return true
})
console.log(e)// { id: 1, name: 'C站' }

e = platform.find(item => {
    if (item.id == '1')
        return false
})
console.log(e)// undefined

3.2 Array.from(obj)

1:转化数组。

let arr = Array.from([1, 2, 3])
console.log(arr);// [ 1, 2, 3 ]

2:转化对象。

let obj = {
    id: 1,
    name: 'yc'
}
obj = Array.from(obj)
console.log(obj);// []

obj = {
    0: 1,
    1: 'yc',
    length: 2
}
obj = Array.from(obj)
console.log(obj);// [ 1, 'yc' ]

由于数组的打印结果与对象相似,在满足以下两个条件的情况下,Array.from()可将对象转化成数组:

  1. 对象属性名改为下标;
  2. 添加属性length,值为属性数。

满足条件的对象一般称为“对象数组”。

3:转化标签数组。

有5个按钮:
在这里插入图片描述
获取并遍历:

let tags = document.getElementsByTagName('button')
for(let i in tags)
    console.log(tags[i])

打印结果:
在这里插入图片描述
可见,多出了最后两个“额外”信息,这是标签数组本身自带的,与遍历无关。可是,若遍历中存在“标签操作”(如:设置标签属性),则会报错。

解决方案:

let tags = document.getElementsByTagName('button')
tags = Array.from(tags)
for(let i in tags)
    console.log(tags[i])

打印结果:在这里插入图片描述

这样就可以去掉“额外”信息。

3.3 arr.copyWithin(a, b, c)

示例:

let arr1 = Array.of(2, 3, 4, 5, 6)
arr1.copyWithin(1, 3, 5)
console.log(arr1)// [ 2, 5, 6, 5, 6 ]
let arr1 = Array.of(2, 3, 4, 5, 6)
arr1.copyWithin(1, 3, 4)
console.log(arr1)// [ 2, 5, 4, 5, 6 ]

最后

暂无言。

本文持续更新中。。。

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

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

相关文章

城市交通工具目标检测数据集自行车、公交车、小汽车、行人

数据整理不易,下载地址点这里; yolo格式数据集之交通工具检测5种; 数据集已划分好|可以直接使用|yolov5|v6|v7|v8|v9|v10通用; 本数据为交通工具检测检测数据集,数据集数量如下: 总共有:6633张 训练集&…

尚庭公寓(四)

房间基本属性管理共有五个接口,分别是**保存或更新属性名称**、**保存或更新属性值**、**查询全部属性名称和属性值列表**、**根据ID删除属性名称**、**根据ID删除属性值**。下面逐一是实现。 首先在AttrController中注入AttrKeyService和AttrValueService&#xf…

计数器与阻塞队列

目录 一:阻塞队列 模拟阻塞队列 二:线程池: 三:计数器: 定时器模拟实现 一:阻塞队列 阻塞队列是在原有的普通队列上做了扩充,标准库中原有的队列和子类都是线程不安全的。 1.线程安全 2.…

OSMDroidOfflineDemo源码调试记录

文章目录 源码下载环境配置尝试不同离线加载遇到的问题 尝试安卓端加载离线地图,下载了使用osmdroid的离线版项目源码,更改JDK环境、gradle环境,一顿操作下来,踉踉跄跄的把程序跑起来了,但是离线的地图一直加载不出来。…

49.TFT_LCD液晶屏驱动设计与验证(2)

(1)Visio视图: (2)控制模块Verilog代码: module tft_ctrl(input clk_33M ,input reset_n ,input [23:0] data_in ,output [9:0] hang…

如何使用 SQLite ?

SQLite 是一个轻量级、嵌入式的关系型数据库管理系统(RDBMS)。它是一种 C 库,实现了自给自足、无服务器、零配置、事务性 SQL 数据库引擎。SQLite 的源代码是开放的,完全在公共领域。它被广泛用于各种应用程序,包括浏览…

Python | ValueError: could not convert string to float: ‘example’

Python | ValueError: could not convert string to float: ‘example’ 在Python编程中,类型转换是一个常见的操作。然而,当尝试将一个字符串转换为浮点数时,如果字符串的内容不是有效的浮点数表示,就会遇到“ValueError: could…

【python_将一个列表中的几个字典改成二维列表,并删除不需要的列】

def 将一个列表中的几个字典改成二维列表(original_list,headersToRemove_list):# 初始化一个列表用于存储遇到的键,保持顺序ordered_keys []# 遍历data中的每个字典,添加其键到ordered_keys,如果该键还未被添加for d in original_list:for …

SpringCloud之@FeignClient()注解的使用方式

FeignClient介绍 FeignClient 是 Spring Cloud 中用于声明一个 Feign 客户端的注解。由于SpringCloud采用分布式微服务架构,难免在各个子模块下存在模块方法互相调用的情况。比如订单服务要调用库存服务的方法,FeignClient()注解就是为了解决这个问题的…

Vim 文本编辑工具

Vim 基础命令 一、Vim 命令速查 Vim 是一款功能强大的文本编辑器,广泛应用于Linux系统中。以下是一些基础但非常有用的Vim命令,它们将帮助你更高效地使用Vim。 使用单个字母键通常需要进一步的输入以形成完整命令。特殊符号用来表示操作的位置。 命令…

Linux网络:传输层TCP协议(四)拥塞控制及延迟应答

目录 一、拥塞控制 二、延迟应答 一、拥塞控制 虽然 TCP 拥有滑动窗口这个大杀器机制来根据具体情况对发送的数据大小和速度进行实时控制, 能够高效并且可靠的发送大量的数据. 但是如果在双方建立好连接后的刚开始阶段就发送大量的数据。仍然可能引发一些问题. 因为同一个网…

【2024蓝桥杯/C++/A组/团建】

题目 代码 #include<bits/stdc.h> using namespace std;const int N 2e510;int a[N], b[N]; int ans; vector<int> Ga[N], Gb[N];void dfs(int ap, int af, int bp, int bf, int dep) {ans max(ans, dep);map<int, int> bk;for(auto ason : Ga[ap])if(aso…

免费【2024】springboot 程序设计基础视频学习系统的设计与实现

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

CSS:mix-blend-mode属性(设置元素的混合模式)

目录 一、mix-blend-mode属性介绍 二、mix-blend-mode常用属性值 三、mix-blend-mode属性应用 四、文字智能适配背景 1、原始样式 2、添加混合 3、实现代码 一、mix-blend-mode属性介绍 CSS中的【mix-blend-mode属性】描述了元素的内容应该与元素的直系父元素的内容和…

nodejs安装及环境配置轨道交通运维检测系统App-OA人事办公排班故障维修

✌网站介绍&#xff1a;✌10年项目辅导经验、专注于计算机技术领域学生项目实战辅导。 ✌服务范围&#xff1a;Java(SpringBoo/SSM)、Python、PHP、Nodejs、爬虫、数据可视化、小程序、安卓app、大数据等设计与开发。 ✌服务内容&#xff1a;免费功能设计、免费提供开题答辩P…

【前端 09】JavaScript中的对象与JSON

JavaScript中的对象与JSON 在JavaScript中&#xff0c;对象和JSON&#xff08;JavaScript Object Notation&#xff09;是两个紧密相连但又有区别的概念。它们都在数据处理和交换中扮演着重要角色。本文将详细讲解JavaScript中的自定义对象以及JSON对象的基本概念、格式、用法…

赵本山:我跟你找游大队去,王平:实话告诉你,我就是游队长——小品《卖梨》(下)的台词与解说

赵本山&#xff1a;我跟你找游大队去&#xff0c;王平&#xff1a;实话告诉你&#xff0c;我就是游队长 ——小品《卖梨》&#xff08;下&#xff09;的台词与解说 &#xff08;接上&#xff09; 王平&#xff08;饰演警察&#xff09;&#xff1a;你少废话 你赶紧给我挪地方…

视觉SLAM第二讲

SLAM分为定位和建图两个问题。 定位问题 定位问题是通过传感器观测数据直接或间接求解位置和姿态。 通常可以分为两类&#xff1a;基于已知地图的定位和基于未知地图的定位。 基于已知地图的定位 利用预先构建的地图&#xff0c;结合传感器数据进行全局定位。SLAM中的全局…

USB 2.0 协议专栏之 USB 2.0 连接与枚举(二)

前言&#xff1a;本篇博客为手把手教学的 USB 2.0 协议栈类精品博客&#xff0c;该专栏博客侧重针对 USB 2.0 协议进行讲解。本篇博客将针对 USB 2.0 中的连接与枚举进行教学&#xff0c;USB 的枚举过程是 USB 协议中至关重要的一环&#xff0c;也是嵌入式工程师必须掌握的内容…