ES6扩展字符串和数组

最新推荐文章于 2022-08-20 16:39:16 发布

很小白的小白

最新推荐文章于 2022-08-20 16:39:16 发布

阅读量2.1k

点赞数 1

分类专栏： es6

es6 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了字符串原型上的常用方法和新增方法，如charAt()、includes()等，还给出了判断子串方法的封装示例及筛选应用。同时阐述了ES6数组扩展，包括创建方式、类数组转化、查找方法和fill()方法等，最后提供了深入学习链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新的方法出现时为了使功能更加完善和性能更加给力。

字符串原型上常用方法和新增方法：

charAt()方法可返回指定位置的字符（包括空格）

String.prototype.charAt()
let str = 'asasa';
console.log(str.charAt(3)) //返回结果为s

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

let str = 'asasa';
console.log(str.charCodeAt(3))//返回结果为unicode编码中s对应的编码

slice(A,B) 表示从字符串的A位子开始，截取当前B的长度（光标定位在B截取不包括B）.B可以不填，默认返回从A开始后面的

let str = 'asasa';
console.log(str.slice(2,3))//返回结果为a

indexOf(A,B) 索引查找。A表示需要查找字符串的子集或自己。B代表要查找的开始位子（优化查找），结果返回查找到的最开始位子索引值。（但是现实中我们想要的是判断字符串中有没有他返回结果是true或者false）

let str = 'as asa';
console.log(str.indexOf('sa',2)) //返回结果为4

自己封装一个判断子串方法

String.prototype.isInclude  = function (str){
    if(this.indexOf(str)!==-1){
        return true
    }else{
        return false
    }
}
console.log('1234'.isInclude('12')); //返回结果为true

split('A') 方法用于把一个字符串分割成字符串数组。参数A为分割的标准A可以不填写。常常和split一起使用的还有数组上的Array.join()方法（用于把数组中的所有元素放入一个字符串，不传参默认逗号分割）。

let str = '1,2,3,4,5,6,7,8';
console.log(str.split(',')) //返回结果为一个数组。数组的每位还是一个单独的字符串

toUpperCase() 把字符串中有小写字母变成大写，其他数字汉字不变。

let str = 'nihao 123 好';
console.log(str.toUpperCase()) //返回结果把小写字母变成大写，其他不变。

toLowerCase() 把字符串中有大写的转化成小写，其他不变

let str = 'NIHAO 123 好';
console.log(str.toLowerCase()) //返回结果把大写字母变成小写，其他不变。

新增方法：

includes(A，B) 判断子串A在不在字符串中，B代表从哪个位子开始判断。结果返回true或者false

let str = '12213';
console.log(str.includes('12'));//返回结果true

startsWith（A,B）和 endsWith(A.B) 分别表示从B位子开始（不写默认开头和结尾），起始位子（结束位子）是不是A这个子串（从以下代码可以看出直接传入数字会发生类型转换）（适用：前缀和后缀的筛选和分类）

let str = '12213';
console.log(str.startsWith(12),str.endsWith(12));

小应用：筛选.定义一个数组，里面存放着不同字符串，先利用数组的筛选方法，在筛选函数中添加筛选规则

let arr = ['bai-A', 'lu-A', 'bai-B', 'lu-B', 'bai-C', 'lu-C']
let myfilter = arr.filter(ele => ele.startsWith('bai') && ele.endsWith('B'))

筛选规则：筛选出数组中元素以‘bai’开头并且是‘B’结尾的元素。

repeat(A) 把当前子串重复A次

let a = 'a'.repeat(10)
//输出结果为'aaaaaaaaaa'

模板字符串：`${xxx}`（``反撇号）${}中可以放原始值和引用值（引用值会调用自身类型的toString方法），表达式和函数执行

let ele = 'bai';
let ele1 = 'lll';
let str = `${ele} love ${ele1}`;

let  obj = {
    name:'xxx',
    age:'18'
};
let arr= [1,2,3,4];
let str = `${obj} + ${arr}`;
//结果为"[object Object] + 1,2,3,4"

和常用的字符串拼接，有很大的便利性。字符串拼接插入dom结构时。常用方法需要加转义字符来保证换行语法正确。

在模板字符串中就有了很大的便利性。

let ele = 'bai';
let ele1 = 'lll';
let str = `<div>
                <div>
                    <p>${ele}</p>
                </div>
            </div>`;

es6 数组扩展：

数组的创建方式：字面量和构造函数：

构造函数：

var  arr = new Array(8)  //数字且只有一个参数的时候，创建一个长度为8的数组（每个值为空empty）
var  arr1 = new Array('8') //非数字创建，创建一个数组['8']
var  arr2 = new Array('8',1,2) //多个参数，创建多个参数的数组

对于es6版本前的构造函数创建，不够人性化和语义化。

所以在es6中引入了Array.of //增强版数组，统一返回由参数构成的数组。

var arr = Array.of(8) 
var arr1 = Array.of('8') 
var arr2 = Array.of('8', 1, 2)

类数组转化成数组：为了方便使用数组的方法

Array.from()和扩展运算符

Array.from()将两类对象转换为真正的数组：类似数组的对象和可遍历的对象

let odiv = document.getElementsByTagName('div');
let obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}
let arr = Array.from(obj) //数组本身方法
let arr1 = [...odiv]  //扩展运算符

查找：

indexOf（ele）//查找元素ele 找到返回相对应的索引值。找不到返回-1，（查找不到NaN，因为NaN自己不等于自己。）

find（fn）//模糊查找，找到返回函数中对应的结果。

findIndex(fn) //精确查找。找到返回索引值。找不到返回-1

let arr = [1, 2, 3, NaN]
console.log(arr.indexOf(NaN)) //返回-1
console.log(arr.find(x => Object.is(x, NaN))) //有值返回对应的查找值
console.log(arr.findIndex(x => Object.is(x, NaN))) //有值，返回对应的索引

fill(value, start=0, end=length) //作用，从数组的start位开始，到end结束。这其中的元素全部替换成value（只传value。默认从初始位置开始到结束位子,什么都不传，整个数组就会变成undefined）。一般做数组的初始化。

深入学习：https://github.com/chanceLe/ES6-Basic-Syntax/blob/master/%5Bes6%5D-03-%E6%95%B0%E7%BB%84.html