【JavaScript】基础学习记录

目录

• • [一、JavaScript toFixed() 方法](#一、JavaScript toFixed() 方法)
  • • 定义和用法
  • [二、JavaScript forEach() 方法](#二、JavaScript forEach() 方法)
  • 三、js删除字符串最后一个字符的几种方式
  • • 1、字符串截取（subString（））
    • [2、使用 slice() 方法：](#2、使用 slice() 方法：)
    • [3、使用 substr() 方法：](#3、使用 substr() 方法：)
    • [4、使用 slice 和 join 方法：](#4、使用 slice 和 join 方法：)
  • [四、JavaScript split() 方法](#四、JavaScript split() 方法)
  • • 定义和用法
    • 语法
    • 参数值
  • [五、JavaScript Array map() 方法](#五、JavaScript Array map() 方法)
  • 六、JSON.parse()
  • • 语法
    • 参数说明：
  • 七、SQL------REGEXP运算符
  • 八、本地存储空间
  • [九、JavaScript 中的 reduce](#九、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 代替：

实现 break：

try {
    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; 
};
实现 continue：

var arr = [1,2,3,4,5];
var num = 3;
arr.some(function(v){
    if(v == num) {
        return;  // 
    }
    console.log(v);
});
实现 break：

var 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会默认使用数组的第一个元素作为初始值，但这可能会导致一些意想不到的结果，所以最好总是指定初始值。