JavaScript(下)｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第3天 String相关的一些方法，S

这是我参与「第四届青训营」笔记创作活动的第3天

String

1.获取字符串指定位置的值

charAt()

string.charAt(index) 返回指定位置的字符

const str = 'hello';
str.charAt(1)  // 输出结果：e 
str[1]         // 输出结果：e 
str.charAt(5)  // 输出结果：'' 
str[5]         // 输出结果：undefined

2.检索字符串是否包含特定序列

indexOf()

string.indexOf(searchvalue, [fromindex]) 查找某个字符的位置，有则返回第一次匹配到的位置，否则返回-1

let str = "abcdefgabc";
console.log(str.indexOf("a"));   // 输出结果：0
console.log(str.indexOf("z"));   // 输出结果：-1
console.log(str.indexOf("c", 4)) // 输出结果：9

includes()

string.includes(searchvalue, [start]) 该方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false

startsWith()

string.startsWith(searchvalue,[fromindex]) 该方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true，否则 false

endsWith()

string.endsWith(searchvalue, [length])

该方法用来判断当前字符串是否是以指定的子字符串结尾。如果传入的子字符串在搜索字符串的末尾则返回 true，否则将返回 false

length:第二个参数设置为5时，就会从字符串的前5个字符中进行检索

3.连接字符串

concat()

string.concat(string1, string2, ..., stringX) concat() 方法用于连接两个或多个字符串,但是在开发中使用最多的还是加操作符+

4.字符串分割成数组

split()

string.split(separator, [limit]) separator：必需，字符串或正则表达式，从该参数指定的地方分割 string，如果为空字符串，那么字符串中的每个字符之间都会被分割 limit：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度

let str = "abcdef";
str.split("c");    // 输出结果：["ab", "def"]
str.split("", 4)   // 输出结果：['a', 'b', 'c', 'd'] 
str.split("");     // 输出结果：["a", "b", "c", "d", "e", "f"]

5.截取字符串

slice()

string.slice(start,[end]) slice() 方法用于提取字符串的某个部分，并以新的字符串返回被提取的部分该方法返回的子串包括开始处的字符，但不包括结束处的字符

substr()

string.substr(start,[length]) substr() 方法用于在字符串中抽取从开始下标开始的指定数目的字符

substring()

6.字符串大小写转换

toLowerCase()

该方法用于把字符串转换为小写

toUpperCase()

该方法用于把字符串转换为大写

7.字符串模式匹配

replace()

string.replace(searchvalue, newvalue) 该方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串

let str = "abcdef";
str.replace("c", "z") // 输出结果：abzdef

match()

search()

8.移除字符串收尾空白符

trim()、trimStart()和trimEnd()这三个方法可以用于移除字符串首尾的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等

trim()

trim() 方法用于移除字符串首尾空白符，该方法不会改变原始字符串该方法不适用于null、undefined、Number类型

trimStart()

trimStart() 方法的的行为与trim()一致，不过会返回一个从原始字符串的开头删除了空白的新字符串，不会修改原始字符串

trimEnd()

trimEnd() 方法的的行为与trim()一致，不过会返回一个从原始字符串的结尾删除了空白的新字符串，不会修改原始字符串

const s = '  abc  ';
str.trim() //"abc"
s.trimStart()   // "abc  "
s.trimEnd()   // "  abc"

9.字符串转为数字

parseInt()

parseInt(string, [radix]) parseInt() 方法用于可解析一个字符串，并返回一个整数 redix:表示要解析的数字的基数。该值介于 2 ~ 36 之间

只有字符串中的第一个数字会被返回，当遇到第一个不是数字的字符为止
parseInt("40 4years")   // 40

如果字符串的第一个字符不能被转换为数字，就会返回 NaN
parseInt("new100")     // NaN

parseFloat()

parseFloat() 方法可解析一个字符串，并返回一个浮点数 parseFloat 将它的字符串参数解析成为浮点数并返回。如果在解析过程中遇到了正负号（+ 或 -）、数字 (0-9)、小数点，或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略

parseFloat("10.00")      // 输出结果：10.00
parseFloat("10.01")      // 输出结果：10.01
parseFloat("-10.01")     // 输出结果：-10.01
parseFloat("40.5 years") // 输出结果：40.5

Number

toFixed() 设置保留小数位的长度

const price = 12.345
// 四舍五入
console.log(price.toFixed(2)) //12.35

Symbol

概述

Symbol是ES6新增的原始数据类型，表示独一无二的值

通过symbol函数生成,可以接受一个字符串作为参数

symbol函数的参数只是对当前symbol值的描述，因此相同参数的symbol函数其返回值也是不相等的

let s1 = Symbol('liubo')
let s2 = Symbol('jyd')
console.log(s2) //Symbol(jyd)
console.log(String(s2)) //"Symbol(jyd)"

Symbol值不能与其他类型的值进行运算 Symbol值能显性转换为字符串和布尔值，但不能转换为数值

Symbol.prototype.description

实例属性 description 能直接返回Symbol的描述

let s1 = Symbol('jyd')
console.log(String(s1)) //"Symbol(jyd)"
console.log(s2.description) //"jyd"

作为属性名的Symbol

在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中

Symbol 值作为对象属性名时，不能用点运算符

let s1 = Symbol()
let s2 = Symbol()
let s3 = Symbol()
let a = {
    [s1]: 'Hello',
    [s2]() {
        console.log('World')
    },
    s3: 'Hello!',
}
console.log(a.s1) //undefined
console.log(a[s1]) //Hello
a[s2]() //World

属性名的遍历

Object.getOwnPropertySymbols()方法可以得到对象的symbol属性名以 Symbol 值作为键名，不会被常规方法遍历得到，可以利用这个特性，为对象定义一些非私有的、但又希望只用于内部的方法

Symbol应用

1.消除魔法字符

const tabTypes = {
    basic: Symbol(),
    super: Symbol(),
}

if (type === tabTypes.basic) {
    return <div>basic tab</div>
}

if (type === tabTypes.super) {
    return <div>super tab</div>
}

Set&Map数据结构

Set

类似于数组，但它的成员都是唯一的，没有重复的值

Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化

const set = new Set([1, 2, 3, 3, 4, 4])
console.log(set) //Set(4) {1, 2, 3, 4}
set.size = 4
[...set] //[1,2,3,4] 使用...转换为真正的数组

Set实例属性和方法

1.属性:size

返回Set实例的成员总数

2.方法

操作方法	作用
add	添加某个值，返回 Set 结构本身
delete	删除某个值，返回一个布尔值，表示删除是否成功
has	返回一个布尔值，表示该值是否为Set的成员
clear	清除所有成员，没有返回值

s.add(1).add(2).add(2);
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2)
s.has(2) // false

遍历方法	作用
keys	返回键名的遍历器
values	返回键值的遍历器
entries	返回键值对的遍历器
forEach	使用回调函数遍历每个成员

Set结构的键名和键值是一样的

应用场景

[...new Set(arr)] 数组去重

[...new Set('aabbc')].join('') 字符串去重

使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集

Map

它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

遍历器

凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象

改变this指向

此处可以延伸下call,apply,bind区分和各自的用法 1)、bind会产生新的函数，（把对象和函数绑定死后，产生新的函数）

2)、call和apply不会产生新的函数，只是在调用时，绑定一下而已。

3)、call和apply的区别，第一个参数都是要绑定的this，apply第二个参数是数组（是函数的所有参数），call把apply的第二个参数单列出来。

JavaScript(下)｜ 青训营笔记