ES6扩展字符串和数组

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

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

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值