美文网首页
TS语法补充

TS语法补充

作者: 家乡的蝈蝈 | 来源:发表于2024-02-19 17:55 被阅读0次

    数组:

    • pop(): 从数组中删除最后一个元素,并返回该元素的值,改变原数组。
    • push(): 将一个或多个元素添加到数组的末尾,并返回该数组的新长度,改变原数组。
    • shift(): 从数组中删除第一个元素,并返回该元素的值,改变原数组。
    • unshift(): 将一个或多个元素添加到数组的开头,并返回该数组的新长度,,改变原数组。

      在 TypeScript 中,处理包含对象元素的数组是一种常见的场景。当我们只知道对象中的某个值,希望从数组中取出整个对象时,可以使用 find 和 filter 这两个方法。

    1.1、find 方法

      find 方法返回数组中第一个满足条件的元素,如果没有找到满足条件的元素,则返回 undefined

    interface MyObject {
        id: number;
        name: string;
        // 其他属性
    }
    
    const myArray: MyObject[] = [
        { id: 1, name: 'Object1' },
        { id: 2, name: 'Object2' },
        { id: 3, name: 'Object3' },
    ];
    
    const targetId = 2;
    const foundObject = myArray.find(obj => obj.id === targetId);
    console.log(foundObject); // 输出:{ id: 2, name: 'Object2' }
    

    1.2、filter方法

      filter 方法返回一个数组,其中包含所有满足条件的元素。如果没有找到满足条件的元素,返回空数组 []。

    interface MyObject {
        id: number;
        name: string;
        // 其他属性
    }
    
    const myArray: MyObject[] = [
        { id: 1, name: 'Object1' },
        { id: 2, name: 'Object2' },
        { id: 3, name: 'Object3' },
    ];
    
    const targetId = 2;
    const filteredArray = myArray.filter(obj => obj.id === targetId);
    console.log(filteredArray); // 输出:[{ id: 2, name: 'Object2' }]
    

    总结:

    • 当只知道对象中的一个值,且希望找到数组中第一个匹配项时,使用 find 方法。
    • 当需要找到所有满足条件的元素,或者可能有多个匹配项时,使用 filter 方法。

    1.3、splice方法

    • 删除功能,第一个参数为第一项位置,第二个参数为要删除几个
      用法:array.splice(index,num),返回值为删除内容,array为结果值
    • 插入功能,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)
      用法:array.splice(index,0,insertValue),返回值为空数组,array值为最终结果值
    • 替换功能,第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)
      用法:array.splice(index,num,insertValue),返回值为删除内容,array为结果值

    1.4、findIndex

    为数组中的每个元素都调用一次函数执行:

    • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数
    • 如果没有符合条件的元素,则返回 -1


      image.png

      例子:
        在一个对象数组中,我们经常需要查找符合某个条件的对象。这时就可以使用findIndex()方法来实现。

    const users = [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 28 },
        { name: 'Tom', age: 31 },
      ];
      const result = users.findIndex(user => user.age === 28);
      console.log(result); // Output: 1
    

    1.5、reduce

    array.reduce(function(prev, cur, currentIndex, arr), initialValue)
      reduce()方法为归并类方法,会遍历数组的每一项
    第一个参数:每次遍历都会调用的函数

    • prev:必需。初始值, 或者计算结束后的返回值。
    • cur:必需。当前元素
    • currentIndex:可选。当前元素的索引
    • arr:可选。当前元素所属的数组对象。
      而这个函数的返回值,回传给下一次遍历时,执行的这个方法的第一个参数prev。

    第二个参数:归并基础的初始值
    总结:

    • 当reduce()方法的第二个值为空时,第一次循环方法中的第一个参数(prev)为数组的第一项值,第二个参数(cur)为数组的第二项值
    • 当reduce()方法的第二个值不为空时,第一次循环方法中的第一个参数(prev)为reduce的第二个参数值initialValue,第二个参数(cur)为数值的第一项值。
    • reduce()方法的第一个参数,就是每次遍历都会执行的匿名函数,当前函数的返回值就会传给下一次执行函数的第一个值。也就是prev

    1.6、 == 和===

    • 对于String, number这些基础类型,==操作符会先把两边的变量进行类型强制转换成相同的类型再比较是否相等;===操作符则不会进行类型转换,而是直接进行比较。
    • 对于array, object这些高级类型,==和 ===是没有区别的,因为它们比较的是 “指针地址” 。
    • 对于基础类型和高级类型,== 和 ===是有区别的;==操作符会先把高级类型转换为基础类型之后,进行值的比较;===操作符则不会进行转换,类型不同,直接返回false
      结论:
        ==操作符只要求比较两个变量的值是否相等,===操作符则是要求两个变量的值和类型都要相同;类似地,!=操作符会去做类型强制转换,!==操作符则不会转换类型。
    1 == true    结果为true
    1 === true   结果为false
    1 == "1"     结果为true
    1 ===  "1"   结果为false
    

    1.7、短路运算符&& 和 ||

    1.7.1、逻辑与 && 的运算方式

    var a = 5 && 6;
    console.log(a); //返回的结果为 6
    

      如果逻辑与运算符左边的值布尔转换后为true,那么返回右边的值(不管右边的值是真还是假)。

    var a = false && 6;
    console.log(a); //返回的结果为 false
    

      如果逻辑与运算符左边的值布尔转换后为false,那么返回左边的值,但是当逻辑与的左边为 null/NaN/undefined ,结果就会得到null/NaN/undefined。

    1.7.2、逻辑或 || 的运算方式

    var a = false || 6;
    console.log(a); //返回的结果为 6
    

      如果逻辑或运算符左边的值布尔转换后为false,那么返回右边的值(不管右边的值是真还是假)。

    var a = true || 6;
    console.log(a); //返回的结果为 true
    

      如果逻辑或运算符左边的值布尔转换后为true,那么返回左边的值,如果两个操作数都是是null(NaN/undefined),返回null(NaN/undefined)
      实际代码中常用于为变量配置默认值,当||符号左边为null或undefined时,将||符号右边的{}赋值给变量,以避免定义的变量为null或undefined:

    // 当JSON.parse(AppStorage.Get<string>("user_cart")为null时,取默认[]
    JSON.parse(AppStorage.Get<string>("user_cart") || '[]')
    

    相关文章

      网友评论

          本文标题:TS语法补充

          本文链接:https://www.haomeiwen.com/subject/nriqadtx.html