es6 字符串、数值、数组扩展

字符串扩展

字符串扩展
1.includes startsWith endsWith
2.repeat
一、includes startsWith endsWith
这三个方法是非常相似的,返回的结果也都是布尔类型。

        let a = "starry";
        console.log(a.includes("s")) //是否包含s,包含返回 true
        console.log(a.includes("s",1)) //可以接收参数,这里表示从下标为1开始查找,所以返回 false

        console.log(a.startsWith("st")) // 表示是不是以st为开头,是返回 true
        console.log(a.startsWith("st",1)) // 同样可以接收参数,所以返回 false

        console.log(a.endsWith("rry")) //是不是以rry结尾,是返回 true
        console.log(a.endsWith("rry",1)) // !!!这里是false,因为他是从下标为1往前找
        console.log(a.endsWith("s",1)) // true

二、repeat
顾名思义就是重复字符串

        let a = "starry";
        console.log(a.repeat(3)) //starrystarrystarry 重复三次
        console.log(a.repeat(2.8)) //starrystarry  小数向下取整,重复两次
        console.log(a.repeat(0)) //  返回空字符串
        console.log(a.repeat("3")) //starrystarrystarry 字符串数组转换为数字重复
        console.log(a.repeat("sta")) //无意义返回空字符串

字符串常用方法回顾
1.字符串拼接: 使用加号运算符或模板字符串(ES6引入的新特性)来拼接字符串。

// 使用加号运算符
const name = "Alice";
const greeting = "Hello, " + name + "!";

// 使用模板字符串
const name = "Alice";
const greeting = `Hello, ${name}!`;

2.字符串长度: 使用length属性获取字符串的长度。

const str = "Hello";
console.log(str.length); // 输出:5

3.字符串查找和替换: 使用indexOf、lastIndexOf、search等方法查找字符串,并使用replace方法进行替换。

const str = "Hello, world!";
console.log(str.indexOf("world")); // 输出:7
console.log(str.lastIndexOf("o")); // 输出:8
console.log(str.search("world"));  // 输出:7
console.log(str.search(/world/i)); // 输出:7(不区分大小写)
console.log(str.replace("world", "Universe")); // 输出:Hello, Universe!

4.大小写转换: 使用toUpperCase将字符串转换为大写,使用toLowerCase将字符串转换为小写。

const str = "Hello, World!";
console.log(str.toUpperCase()); // 输出:HELLO, WORLD!
console.log(str.toLowerCase()); // 输出:hello, world!

5.字符串分割和连接: 使用split方法将字符串分割成数组,并使用join方法将数组连接成字符串。

const str = "Apple, Banana, Cherry";
const arr = str.split(", ");
console.log(arr);           // 输出:["Apple", "Banana", "Cherry"]
const newStr = arr.join(" - ");
console.log(newStr);       // 输出:Apple - Banana - Cherry

数值扩展

1.支持二进制、八进制、十六进制写法
2.Number.isFinite Number.isNaN
3.isInteger
4.EPSILON
5.Math.trunc
6.Math.sign
一、支持二进制、八进制、十六进制写法

    let num1 = 100;
    let num2 = 0b100; //二进制写法
    let num3 = 0o100; //八进制写法
    let num4 = 0x100; //十六进制写法
    console.log(num1); //100
    console.log(num2); //4
    console.log(num3); //64
    console.log(num4); //256

二、Number.isFinite Number.isNaN
这个两个方法,主要区别与之前直接挂载在window下的isFinite和isNaN方法,使Number的方法归Number管,更加的模块化。Number.isFinite判断是否为有限数值,Number.isNaN判断是否为非数值。

    let num1 = isFinite(100);
    let num2 = isFinite(100/0); 
    let num3 = isFinite(Infinity); 
    let num4 = isFinite("100"); 
    console.log(num1); // true
    console.log(num2); // 0为除数,无限返回false
    console.log(num3); // 无穷大 无限返回false
    console.log(num4); // window下的isFinite会把字符串转化为数字,所以是true
    -------------------------------------------------------------------------
    let num1 = Number.isFinite(100);
    let num2 = Number.isFinite(100/0); 
    let num3 = Number.isFinite(Infinity); 
    let num4 = Number.isFinite("100"); 
    console.log(num1); // true
    console.log(num2); // 0为除数,无限返回false
    console.log(num3); // 无穷大 无限返回false
    console.log(num4); // !!!不会转化,直接返回false
    --------------------------------------------------------------------------
    let num1 = isNaN(100);
    let num2 = isNaN(NaN); 
    let num3 = isNaN("starry"); 
    let num4 = isNaN("100"); 
    console.log(num1); // false
    console.log(num2); // true
    console.log(num3); // true
    console.log(num4); // false
    --------------------------------------------------------------------------
    let num1 = Number.isNaN(100);
    let num2 = Number.isNaN(NaN); 
    let num3 = Number.isNaN("starry"); 
    let num4 = Number.isNaN("100"); 
    console.log(num1); // false
    console.log(num2); // true
    console.log(num3); // false 只要不是NaN直接false
    console.log(num4); // false

三、isInteger
整数判断

    let num1 = Number.isInteger(100)
    let num2 = Number.isInteger(100.0) //!!!这里是true
    let num3 = Number.isInteger(100.1)
    let num4 = Number.isInteger("starry")
    let num5 = Number.isInteger("100")
    console.log(num1,num2,num3,num4,num5) //true true false false false

四、EPSILON
极小常量,表示1与大于1的最小浮点数之间的差,总所周知,JS中0.1+0.2是不等于0.3,这个时候就可以用极小常量来让他们相等。

    function isEqual(x,y){
        return Math.abs(x - y) < Number.EPSILON
    }
    console.log(isEqual(0.1+0.2,0.3)) //true
    console.log(0.1+0.2===0.3) //false

五、Math.trunc
将小数部分抹掉,返回一个整数

    console.log(Math.trunc(1.2)) //1
    console.log(Math.trunc(1.8)) //1
    console.log(Math.trunc(-1.2)) // -1 如果是floor是-2 ceil是-1
    console.log(Math.trunc(-1.8)) // -1 如果是floor是-2 ceil是-1

六、sign
判断一个数到底是正数、复数、0。对于非数字会先转换

    console.log(Math.sign(-100)) // -1
    console.log(Math.sign(100)) // 1
    console.log(Math.sign(0)) // +0
    console.log(Math.sign(-0)) // -0
    console.log(Math.sign("starry")) // NaN

数值常用方法回顾
1.toFixed():将数字四舍五入为指定小数位数,并返回一个字符串表示结果。

const num = 3.14159;
console.log(num.toFixed(2)); // 输出:3.14

2.toPrecision():将数字转换为指定的有效位数,并返回一个字符串表示结果。

const num = 123.456;
console.log(num.toPrecision(4)); // 输出:123.5

3.parseInt():将字符串解析为整数。

const str = "123";
console.log(parseInt(str)); // 输出:123

4.parseFloat():将字符串解析为浮点数。

const str = "3.14";
console.log(parseFloat(str)); // 输出:3.14

5.Math.round():将数字四舍五入为最接近的整数。

console.log(Math.round(3.6)); // 输出:4

6.Math.ceil():将数字向上取整。

console.log(Math.ceil(3.1)); // 输出:4

7.Math.floor():将数字向下取整。

console.log(Math.floor(3.9)); // 输出:3

8.Math.max():返回一组数字中的最大值。

console.log(Math.max(1, 2, 3)); // 输出:3

9.Math.min():返回一组数字中的最小值。

console.log(Math.min(4, 5, 6)); // 输出:4

数组扩展

1.展开运算符 …
2.Array.from
3.Array.of
4.find findIndex
5.fill
6.flat flatMap !!!
一、展开运算符 …
三个功能,复制、拼接以及和解构赋值混合使用

    // 1.复制
    let arr1 = [1,2,3]
    let arr2 = arr1.concat() //传统复制
    let arr3 = [...arr1] // 展开运算符复制,浅复制
    console.log(arr2,arr3) // [1,2,3] [1,2,3]
    // 2.拼接
    let arr4 = [1,2,3]
    let arr5 = [4,5,6]
    let arr6 = [...arr4,...arr5]
    console.log(arr6) //[1, 2, 3, 4, 5, 6]
     // 3.和解构赋值混合使用
     let myarr = [1, 2, 3, 4, 5, 6]
     let [a,b,...c] = myarr
     console.log(a,b,c) // 1 2  [3, 4, 5, 6]

二、Array.from
把类似与arguments这样的伪数组转换为真正的数组

    function text(){
        console.log(Array.from(arguments))
    }
    text(1,2,3,4)

三、Array.of
新建数组,解决Array创建数组只有一个值会初始化为长度的问题

    let arr1 = Array(3)
    console.log(arr1) // [空属性 × 3]
    let arr2 = Array.of(3) 
    console.log(arr2)// [3]

四、find findIndex
查值

    let arr = [2,3,5,4,6,1,2]
    let res1 = arr.find(function(item){
        return item > 3
    })
    let res2 = arr.findIndex(function(item){
        return item > 3
    })
    let res3 = arr.findLast(function(item){
        return item > 3
    })
    let res4 = arr.findLastIndex(function(item){
        return item > 3
    })
    console.log(res1) // 5  返回第一个大于3的值
    console.log(res2) // 2  返回第一个大于3的值的下标
    console.log(res3) // 6  返回从后往前第一个大于3的值
    console.log(res4) // 4  返回从后往前第一个大于3的值的下标

五、fill
填充

    //新建时填充,在一些源码测试中用到
    let arr = new Array(3).fill("staryy") //新建一个长度为3的空数组并且全部填充
    console.log(arr) // ['staryy', 'staryy', 'staryy']
    let arr1 = [1,2,3]
    console.log(arr1.fill("starry")) //['starry', 'starry', 'starry']  全部替换
    let arr2 = [1,2,3]
    console.log(arr2.fill("starry",1,2)) //  [1, 'starry', 3]  传入参数,从下标1开始到下标2结束替换

六、flat flatMap !!!
扁平化!!!开发中经常使用

    //简单示例
    let arr1 = [1,2,3,[4,5,6]]
    let arr2 = arr1.flat()
    console.log(arr2) //[1, 2, 3, 4, 5, 6]
    // 模拟开发环境
    let arr3 = [
        {
            name:"A",
            list:[1,2,3]
        },
        {
            name:"B",
            list:[2,3,4]
        }
    ]
    let arr4 = arr3.flatMap(function(item){
        return item.list
    })
    console.log(arr4) //[1, 2, 3, 2, 3, 4]

数组常用方法回顾
1.push():向数组末尾添加一个或多个元素,并返回新的长度。

const array = [1, 2, 3];
array.push(4);
console.log(array); // 输出: [1, 2, 3, 4]

2.pop():移除并返回数组的最后一个元素。

const array = [1, 2, 3];
const lastElement = array.pop();
console.log(lastElement); // 输出: 3
console.log(array); // 输出: [1, 2]

3.unshift():向数组开头添加一个或多个元素,并返回新的长度。

const array = [1, 2, 3];
array.unshift(0);
console.log(array); // 输出: [0, 1, 2, 3]

4.shift():移除并返回数组的第一个元素。

const array = [1, 2, 3];
const firstElement = array.shift();
console.log(firstElement); // 输出: 1
console.log(array); // 输出: [2, 3]

5.concat():将两个或多个数组合并为一个新数组,并返回结果。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log(newArray); // 输出: [1, 2, 3, 4, 5, 6]

6.slice():返回数组的指定部分(浅拷贝)。

const array = [1, 2, 3, 4, 5];
const newArray = array.slice(1, 4);
console.log(newArray); // 输出: [2, 3, 4]

7.splice():从数组中删除、替换或添加元素,并返回被删除的元素。

const array = [1, 2, 3, 4, 5];
const deletedElements = array.splice(1, 2, 6, 7);
console.log(deletedElements); // 输出: [2, 3]
console.log(array); // 输出: [1, 6, 7, 4, 5]

8.forEach():对数组中的每个元素执行提供的函数。

javascript
const array = [1, 2, 3];
array.forEach((element) => {
  console.log(element);
});
// 输出:
// 1
// 2
// 3
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值