【JavaScript】基础学习记录

目录

    • 一、JavaScript toFixed() 方法
      • 定义和用法
    • 二、JavaScript forEach() 方法
    • 三、js删除字符串最后一个字符的几种方式
      • 1、字符串截取(subString())
      • 2、使用 slice() 方法:
      • 3、使用 substr() 方法:
      • 4、使用 slice 和 join 方法:
    • 四、JavaScript split() 方法
      • 定义和用法
      • 语法
      • 参数值
    • 五、JavaScript Array map() 方法
    • 六、JSON.parse()
      • 语法
      • 参数说明:
    • 七、SQL——REGEXP运算符
    • 八、本地存储空间
    • 九、JavaScript 中的 reduce
      • 例子:计算数组中元素的总和

一、JavaScript toFixed() 方法

实例
把数字转换为字符串,结果的小数点后有指定位数的数字:

var num = 5.56789;
var n=num.toFixed(2);
n 输出结果:
5.57

定义和用法

toFixed() 方法将一个浮点数转换为指定小数位数的字符串表示,如果小数位数高于数字,则使用 0 来填充。

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

注意:toFixed() 方法在进行四舍五入时可能会产生一些不准确的结果,这是因为 toFixed() 方法在处理浮点数时,实际上使用的是舍入到最近的偶数(银行家舍入)策略,而不是标准的四舍五入。这种舍入策略是为了在大量运算时减小累积误差。

参考文章:JavaScript toFixed() 方法

二、JavaScript forEach() 方法

列出数组的每个元素:
定义和用法
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
forEach(): 没有返回值,本质上等同于 for 循环,对每一项执行 function 函数。即map是返回一个新数组,原数组不变,forEach 是不改变原数组(尽管回调函数 callbackFn 在被调用时可能会改变原数组)。

不支持 continue,用 return false 或 return true 代替。

不支持 break,用 try catch/every/some 代替:

实现 breaktry {var array = ["first","second","third","fourth"];        // 执行到第3次,结束循环array.forEach(function(item,index){if (item == "third") {throw new Error("EndIterative");}alert(item);// first,sencond}); 
} catch(e) { if(e.message!="EndIterative") throw e; 
};
实现 continuevar arr = [1,2,3,4,5];
var num = 3;
arr.some(function(v){if(v == num) {return;  // }console.log(v);
});
实现 breakvar arr = [1,2,3,4,5]; 
var num = 3; 
arr.every(function(v){if(v == num) {return false;}else{ console.log(v); return true;}
});

参考文章:JavaScript forEach() 方法

三、js删除字符串最后一个字符的几种方式

JavaScript 中有多种方式可以删除字符串的最后一个字符:
原文链接:https://blog.csdn.net/m0_54566205/article/details/129676021
参考文章:js删除字符串最后一个字符的几种方式

1、字符串截取(subString())

截取字符串:
String substring(int beginIndex):从传入的索引位置处,向后截取,一直截取到末尾,得到新的字符串并返回
String substring(int beginIndex, int endIndex) :从beginIndex索引位置开始截取,截取到endIndex索引位置,得到新字符串并返回(包含头,不包含尾)

使用 substring() 方法:这个方法可以截取字符串的一部分,从而删除最后一个字符。例如:

javascriptCopy codelet str = "Hello World";
str = str.substring(0, str.length - 1);
console.log(str); // 输出 "Hello Worl"

2、使用 slice() 方法:

这个方法也可以截取字符串的一部分。只需要将起始索引设置为 0,将结束索引设置为字符串的长度减一即可。例如:

javascriptCopy codelet str = "Hello World";
str = str.slice(0, -1);
console.log(str); // 输出 "Hello Worl"

参考文章:JavaScript学习–splice()函数详解

3、使用 substr() 方法:

这个方法可以从字符串中提取一个指定长度的子字符串,可以设置起始位置和子字符串的长度。将起始位置设置为 0,将子字符串的长度设置为字符串的长度减一即可。例如:

javascriptCopy codelet str = "Hello World";
str = str.substr(0, str.length - 1);
console.log(str); // 输出 "Hello Worl"

4、使用 slice 和 join 方法:

将字符串转换为数组,删除最后一个元素,然后将数组转换回字符串。例如:

javascriptCopy codelet str = "Hello World";
str = str.split("").slice(0, -1).join("");
console.log(str); // 输出 "Hello Worl"

无论使用哪种方式,都可以删除字符串的最后一个字符。选择哪种方法取决于个人喜好和代码的上下文环境。

四、JavaScript split() 方法

参考文章:JavaScript split() 方法
实例
把一个字符串分割成字符串数组:

var str="How are you doing today?";
var n=str.split(" ");
n 输出一个数组的值:How,are,you,doing,today?

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

提示: 如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

注意: split() 方法不改变原始字符串。

语法

string.split(separator,limit)

参数值

参数 描述
separator 可选。字符串或正则表达式,从该参数指定的地方分割 string Object。
limit 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

实例
使用一个字符作为分隔符:

var str="How are you doing today?";
var n=str.split("o");
n 输出数组值得结果:H,w are y,u d,ing t,day?

实例
使用 limit 参数:

var str="How are you doing today?";
var n=str.split(" ",3);
n 将输出3个数组的值:How,are,you

实例
分割每个字符,包括空格:

var str="How are you doing today?";
var n=str.split("");
n 输出数组值得结果:H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

实例
省略分割参数:

var str="How are you doing today?";
var n=str.split();
n 输出数组值得结果:How are you doing today?

五、JavaScript Array map() 方法

参考文章:JS中的map用法
参考文章:JavaScript Array map() 方法
map()
​​map()​​ 方法会返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

​​map​​​ 方法会给原数组中的每个元素都按顺序调用一次 ​​callback​​​ 函数。​​callback​​​ 每次执行后的返回值(包括 ​ ​undefined​​​)组合起来形成一个新数组。 ​​callback​​​ 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 ​​delete​​ 删除的索引则不会被调用。

因为​​map​​生成一个新数组,当你不打算使用返回的新数组却使用​​map​​是违背设计初衷的,请用​​forEach​​或者​​for-of​​替代。你不该使用​​map​​: A)你不打算使用返回的新数组,或/且 B) 你没有从回调函数中返回值。

​​callback​​ 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

var map = Array.prototype.map
var a = map.call("Hello World", function(x) {return x.charCodeAt(0);
})
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
可以链式调用arr.map(item=>item.time).map(item=>item.scaner)

注意点:

1,map 方法不会对空数组进行检测;
2,map 方法遍历数组时会返回一个新数组,不会改变原始数组;
3,map 方法有返回值,可以return出来,map的回调函数中支持return返回值;
4,map 方法无法遍历对象,仅适用于数组的遍历。
​​5,map​​​ 方法处理数组元素的范围是在​​callback​​​ 方法第一次调用之前就已经确定了。调用​​map​​​方法之后追加的数组元素不会被​​callback​​​访问。如果存在的数组元素改变了,那么传给​​callback​​​的值是​​6,map​​​访问该元素时的值。在​​map​​函数调用后但在访问该元素前,该元素被删除的话,则无法被访问到。

场景实例:使用 map 重新格式化数组中的对象var kvArray = [{key: 1, value: 10},{key: 2, value: 20},{key: 3, value: 30}];var reformattedArray = kvArray.map(function(obj) {var rObj = {};rObj[obj.key] = obj.value;return rObj;
});// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],

简单实例

 let a=[1,2,3,4];let array=a.map((item,index) =>{if(item==2){return item[index]=22;}return item;})console.log(array);//[1, 22, 3, 4]let array02=a.map(item=> {return item*item;})console.log(array02)//[1, 4, 9, 16]

六、JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明:

text:必需, 一个有效的 JSON 字符串。
reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
参考文章:JSON.parse()

七、SQL——REGEXP运算符

REGEXP运算符,是正则表达式(regular expression)的缩写,正则表达式在搜索字符串时非常强大
总结:

^表示字符串开头

¥表示字符串结尾

|表示逻辑上的or,可以给出多个搜索模式

[]表示任意在括号里列举的单字符

[-]表示任意在括号内范围内的单字符

参考文章:SQL学习笔记——REGEXP运算符

八、本地存储空间

前端本地存储空间可以使用HTML5提供的localStorage API来实现。localStorage是一种在客户端存储数据的新方法,它允许您将数据存储在浏览器中,而无需使用服务器。localStorage API提供了一种将数据存储在浏览器中的方法,这些数据将在页面刷新或关闭后仍然存在。

九、JavaScript 中的 reduce

参考文章:JS 中的 reduce
reduce是JavaScript 中的数组方法, 它可以用来对数组中的元素进行累计操作,从而得到一个单一的值。reduce的基本用法是接受一个回调函数和一个初始值作为参数,然后遍历数组,将每个元素和累计值传递给回调函数,最后返回最终的累计值。

例子:计算数组中元素的总和

这是reduce最常见的用法之一,可以用来计算数组中所有元素的总和。例如,如果我们有一个包含数字的数组,我们可以用reduce来求和:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

这里,我们传递了一个箭头函数作为回调函数,它接受两个参数:acc表示累计值,cur表示当前元素。我们将它们相加并返回新的累计值。我们还传递了一个初始值0作为reduce的第二个参数,表示累计值的初始值。如果不传递初始值,reduce会默认使用数组的第一个元素作为初始值,但这可能会导致一些意想不到的结果,所以最好总是指定初始值。

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

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

相关文章

龙讯旷腾PWmat发PRL:多k点计算的NAMD方法应用于小型超胞与在等效的大型超胞中进行的单个Γ点模拟之间的一致性

文章信息 作者信息:郑帆,汪林望 通信单位:上海科技大学 中国科学院半导体所 背景导读 固态材料中的超快载流子动力学在能源材料、光电子学、传感器和量子材料等领域起着关键作用。随着超快实验技术在固态系统中载流子动力学研究中的快速发…

纯CSS动态渐变文本特效

如图所示,这是一个炫酷的文本渐变效果,如同冰岛的极光一般。本次的文章让我们逐步分解代码,了解其实现原理。 基于以上动图效果可以分析以下是本次动效实现的主要几点: 文本中有多个颜色的动画每个颜色显示的半径不同&#xff0…

MCU内存基础知识

文章目录 一、存储器分类二、C语言内存分区内存区三、STM32启动文件分析四、应用分析 一、存储器分类 RAM(Random Access Memory) :掉电之后就丢失数据,读写速度块 ROM (Read Only Memory) :掉电之后仍然可以保持数据 单片机的RA…

vue 移动端布局自适应

vue 移动端布局字体自适应 安装插件 //根节点会根据页面视口变化而变化font-size大小 // 版本推荐 1.0.2 npm install lib-flexible-computer -S //自动将px转换为rem //版本推荐 0.1.9 npm i px2rem-loader -D //将代码中px自动转化成对应的rem的一个插件 npm install post…

Springboot 项目启动类放置位置

文章目录 Springboot 项目启动类放置位置springboot 默认包扫描机制启动类放在特定位置springboot 启动注解理解配置启动类扫描特定的包1、 ComponentScan2、利用 SpringBootApplication 注解的 scanBasePackages 属性 Springboot 项目启动类放置位置 如果我们使用 IDEA 或者 …

SpringBoot中企业微信的API调用

说明 企业微信官方提供的均为API接口,没有提供集成SDK。因此无需引入Maven依赖,直接以Https方式请求即可。 有些第三方提供了集成的Java SDK,可根据需求自行选用。 本文采用直接调用官方API的方式。 基础配置 企业微信注册后,可…

将Agent技术的灵活性引入RPA,清华等发布自动化智能体ProAgent

近日,来自清华大学的研究人员联合面壁智能、中国人民大学、MIT、CMU 等机构共同发布了新一代流程自动化范式 “智能体流程自动化” Agentic Process Automation(APA),结合大模型智能体帮助人类进行工作流构建,并让智能…

Openlayer【二】—— 绘制不同的点、线以及给其添加监听事件

Openlayer【二】—— 绘制不同的点、线以及给其添加监听事件 接上篇:OpenLayer初始化 在openlayer当中,图层Layer与地图源Source是一对一的关系。当创建了一个图层Layer,相应的需要给图层添加地图源Source,然后将图层Layer添加到…

浅谈无线测温产品在菲律宾某工厂配电项目的应用

摘要:配电系统是由多种配电设备和配电设施所组成的变换电压和直接向终端用户分配电能的一个电力网络系统。由于配电系统作为电力系统的一个环节直接面向终端用户,它的完善与否直接关系着广大用户的用电可靠性和用电质量,因而在电力系统中具有…

第14届蓝桥杯青少组python试题解析:23年5月省赛

选择题 T1. 执行以下代码&#xff0c;输出结果是&#xff08;&#xff09;。 lst "abc" print(lstlst)abcabc abc lstlst abcabc T2. 执行以下代码&#xff0c;输出的结果是&#xff08;&#xff09;。 age {16,18,17} print(type(sorted(age)))<class set&…

js深拷贝function

js拷贝函数怎么操作 使用bind()方法 JavaScript的函数提供了bind()方法&#xff0c;可以用来创建一个新函数&#xff0c;该函数与原函数具有相同的代码&#xff0c;但其上下文和部分参数可以绑定。通过使用空的上下文和参数&#xff0c;可以实现函数的拷贝。 function original…

C++基础从0到1入门编程(三)

系统学习C 方便自己日后复习&#xff0c;错误的地方希望积极指正 往期文章&#xff1a; C基础从0到1入门编程&#xff08;一&#xff09; C基础从0到1入门编程&#xff08;二&#xff09; 参考视频&#xff1a; 1.黑马程序员匠心之作|C教程从0到1入门编程,学习编程不再难 2.系统…

微信小程序数据传递的方式-页面数据的存取

我们在把数据显示到页面的时候&#xff0c;为了实现良好的互动&#xff0c;都希望在用户点击某个栏目后&#xff0c;获取这个栏目的捆绑数据&#xff0c;然后执行后续的操作。 例如&#xff0c;从数据库里取出对应的记录后&#xff0c;显示在页面上&#xff0c;是一条条的大横条…

企业计算机服务器中了faust勒索病毒怎么办,faust勒索病毒解密文件恢复

网络技术的不断应用发展&#xff0c;为企业注入了新的生产运营方式&#xff0c;计算机服务器为企业的数据存储提供了便利&#xff0c;让企业的生产运营得到了有力保障&#xff0c;近期&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的计算机服务器遭到了…

基于单片机设计的电子指南针(LSM303DLH模块(三轴磁场 + 三轴加速度)

一、前言 本项目是基于单片机设计的电子指南针&#xff0c;主要利用STC89C52作为主控芯片和LSM303DLH模块作为指南针模块。通过LCD1602液晶显示屏来展示检测到的指南针信息。 在日常生活中&#xff0c;指南针是一种非常实用的工具&#xff0c;可以帮助我们确定方向&#xff0…

人工智能-循环神经网络通过时间反向传播

到目前为止&#xff0c;我们已经反复提到像梯度爆炸或梯度消失&#xff0c; 以及需要对循环神经网络分离梯度。 例如&#xff0c;我们在序列上调用了detach函数。 为了能够快速构建模型并了解其工作原理&#xff0c; 上面所说的这些概念都没有得到充分的解释。 本节将更深入地探…

CDN的发展和作用。当前网站被攻击适用什么样的CDN。

随着互联网的高速发展&#xff0c;网络中也出现各种日新月异的DDOS攻击&#xff0c;让人防不甚防&#xff0c;在这样的环境下&#xff0c;网络安全的地位也就不断的上升和重视&#xff0c;其防护手段也是随着攻击的变化不停的升级更新&#xff0c;从事这一行业多年&#xff0c;…

MTK Pump Express 快速充电原理分析

1 MTK PE 1.1 原理 在讲正文之前&#xff0c;我们先看一个例子。 对于一块电池&#xff0c;我们假设它的容量是6000mAh&#xff0c;并且标称电压是3.7V&#xff0c;换算成Wh(瓦时)为单位的值是22.3Wh(6000mAh*3.7V)&#xff1b;普通的充电器输出电压电流是5V2A(10W)&#xff0c…

纯CSS实现炫酷文本阴影效果

如图所示&#xff0c;这是一个文本阴影效果&#xff0c;阴影有多个颜色&#xff0c;鼠标悬停时文本阴影效果消失&#xff0c;文本回到正常的效果。让我们逐步分解代码&#xff0c;看看如何使用纯CSS实现这个效果的。 基于以上动图可以分析出以下是本次实现的主要几个功能点&am…

【软件工程师从0到1】- Java面向对象基础 (知识汇总)

前言 介绍&#xff1a;大家好啊&#xff0c;我是hitzaki辰。 社区&#xff1a;&#xff08;完全免费、欢迎加入&#xff09;日常打卡、学习交流、资源共享的知识星球。 自媒体&#xff1a;我会在b站/抖音更新视频讲解 或 一些纯技术外的分享&#xff0c;账号同名&#xff1a;hi…