• 【JavaScript】基础学习记录


    一、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;
        }
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    参考文章: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"
    
    • 1
    • 2
    • 3

    2、使用 slice() 方法:

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

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

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

    3、使用 substr() 方法:

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

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

    4、使用 slice 和 join 方法:

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

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

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

    四、JavaScript split() 方法

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

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

    定义和用法

    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?
    
    • 1
    • 2
    • 3
    • 4
    • 5

    实例
    使用 limit 参数:

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

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

    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,?
    
    • 1
    • 2
    • 3
    • 4
    • 5

    实例
    省略分割参数:

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

    五、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]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    可以链式调用
    
    arr.map(item=>item.time).map(item=>item.scaner)
    
    • 1
    • 2
    • 3

    注意点:

    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}],
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    简单实例

     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]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    六、JSON.parse()

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

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

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

    语法

    JSON.parse(text[, reviver])
    
    • 1

    参数说明:

    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
    
    • 1
    • 2
    • 3

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

    十、JS 数组拍平(多种方法)

    参考文章:JS 数组拍平(多种方法)
    JavaScript如何实现数组拍平(扁平化)方法?

  • 相关阅读:
    端口映射的几种常见应用场景
    CentOS 7.9 安装 nginx
    Sql依赖注入-架构案例(五十五)
    开发人员必备常用工具
    八大排序算法----堆排序
    河南灵活用工系统开发|灵活用工模式适合电商行业吗?
    泰山OFFICE技术讲座:着重号的大小与字号关系
    红米K40解BL锁以及刷国外EU版系统
    2023年美国代理IP推荐,哪家IP代理好用?
    [Unity2D独立/合作开发]实现记录物品在不同场景的存在状态,附:场景的淡入淡出功能和预加载
  • 原文地址:https://blog.csdn.net/DecorateCC/article/details/132208160