Collection Js方法
一、字符串方法
https://www.bilibili.com/video/BV1Az4y1U7f5?p=127&vd_source=30698713e5e2b66f66e6fa017646273c
https://www.bilibili.com/video/BV1WA411R7Ev?p=9&vd_source=30698713e5e2b66f66e6fa017646273c
36个js网页特效教程#能全写完就精通JavaScript了#学习猿地#高洛峰_哔哩哔哩_bilibili
字符串字面量，
字面量的英文是 literals，意思是所见既所得，看到的就是我们得到的
var str = "abcd字符串";
字符串对象
var str = new String("abcd");
console.dir(str); // 打印对象上的属性和方法
console.dir(str.__proto__); // 对象原型上的属性和方法因为有包装类，通过字符串字面量调用方法，js内部调用的是字符串对象下面的方法
1、查找方法
通过下标取值，在 IE8 以下不兼容
var str = 'abcd字符串'; console.log(str[1]); // b
charAt(index)
按照索引查找
1. index是索引值（下标）
2. 如果不填 index 索引默认为0
3. 超出 str.length 或小于0，返回一个空字符串
var str = 'abcd字符串'; console.log(str.charAt()); // a console.log(str.charAt(str.length - 1)); // 串 console.log(str.charAt(str.length)); // 空字符串 console.log(str.charAt(str.length + 10)); // 空字符串 console.log(str.charAt(-5)); // 空字符串
如果比较字符串大小，比较的是字符串Unicode编码的大小，并且是诸位比较，下面比较的是 r 和 v
var str1 = 'ruyic.com'; // r => 114 var str2 = 'v'; // v => 118 console.log(str1 > str2); // false
charCodeAt( index )
charCodeAt 方法参数是字符串的 index 索引值，
获取的数字应该字符的是 Unicode 十六位编码，转换成十进制的数字，
var str1 = "中"; var str2 = "文"; console.log(str1.charCodeAt(0) + ' ' + str2.charCodeAt(0)); // 20013 25991 console.log(str1 > str2); // false
str.charCodeAt(index) 获取当前字符串的 Unicode 编码
1. 下标index默认是0
2. 超出下标范围返回NaN，负数下标不存在也会返回NaN
var str = "中文"; console.log(str.charCodeAt()); // 20013 console.log(str.charCodeAt(10)); // NaN console.log(str.charCodeAt(-10)); // NaN
String.fromCharCode()
fromCharCode() 方法不是字符的，是字符串构造函数 String 上的静态方法，作用是把 Unicode 编码转成字符串
先把三个中文的 Unicode 编码存入一个数组
var str = "大中国";
var arr = [];
for(var i = 0; i < str.length; i++){
arr[i] = str.charCodeAt(i);
}
console.log(arr); // [22823, 20013, 22269]再转换对应的 Unicode 码
var arr = [22823, 20013, 22269]; console.log(String.fromCharCode(arr[0])); // 大 console.log(String.fromCharCode(arr[1])); // 中 console.log(String.fromCharCode(arr[2])); // 国
以逗号间隔，可以填多个Unicode编码
var arr = [22823, 20013, 22269]; console.log(String.fromCharCode(arr[0], arr[1], arr[2])); // 大中国
indexOf()
查找字符串中是否有对应的字符串，
如果有返回字符第一次出现的索引值（下标）
如果没有查找的字符串返回 -1
第一个参数searchValue，是想要查找的值，不区分大小写
var str = "abcdabcd字符串";
console.log(str.indexOf("c")); // 2
console.log(str.indexOf("d字")); // 因为从下标[7]开始出现的d，所以返回 7
console.log(str.indexOf("k")); // 查找的值不存在返回 -1第二个参数fromIndex，是搜索的启始位置，该参数是可选的，不填默认为0
console.log(str.indexOf("c", 3)); // 从d开始搜第二个的c，返回的是在整个字符串中的下标 6第二个参数为负数，返回的是正常从0位开始找，负数默认还是0
console.log(str.indexOf("d", -1)); // 3手写indexOf
实现基本的功能，第三个参数不能默认，必须填一个0
var str = "abcdabcd字符串";
function myIndex(str, searchValue, fromInedex){
for (var i = 0; i < str.length; i++) {
if(str.charAt(i) === searchValue){
return i;
}
}
return -1;
}
console.log(myIndex(str, 'd', 0)); // 3
console.log(myIndex(str, 'v', 0)); // -1还是有 bug 不能找两个字符比如 "d字"，先不管它了
var str = "abcdabcd字符串";
function myIndex(str, searchValue, fromIndex){
if(fromIndex < 0 || fromIndex === undefined){
fromIndex = 0;
}
if(fromIndex >= str.length){
return -1;
}
console.log('fromIndex ',fromIndex)
for (var i = fromIndex; i < str.length; i++) {
if(str.charAt(i) === searchValue){
return i;
}
}
return -1;
}
console.log(myIndex(str, 'd')); // 返回3，不填fromIndex默认为0
console.log(myIndex(str, 'd', -1)); // 返回3，负数fromIndex小于0默认0
console.log(myIndex(str, 'd', 50)); // 返回-1，超过字符串长度返回-1
console.log(myIndex(str, 'd', 2)); // 返回3，找到的d在字符串下标3的位置lastIndexOf
indexOf 是从前往后查找，loastIndexOf 是从后往前查找，从后面找到指定字符的索引
var str = "abcdabcd字符串";
console.log(str.lastIndexOf("d")); // 7
console.log(str.indexOf("d")); // 3第二个参数 fromIndex
不填默认为 length，
超过默认 length 则为 length，跟 indexOf 第二个参数小于0则就等于0是一样的
console.log(str.lastIndexOf("d")); // 7
console.log(str.lastIndexOf("d", str.length)); // 7
console.log(str.lastIndexOf("d", 50)); // 7如第二个参数果小于0则默认为0，从0的位开始往前查找位置
console.log(str.lastIndexOf("a", -50)); // 返回0，第0位就是a所以返回0如果找不指定的值，跟indexOf一样返回-1
console.log(str.lastIndexOf("v", -50)); // -12、截取类方法
slice(begin, end)
begin 开始截取的位置，默认为0，如果是负数，负数超过length，则默认从0开始
end 结束截取的位置，不包含在截取的部分
返回一个截取的字符串，从begin位置开始截取，到end的位置结束，但是不包含end的字符串
默认为当前 str.length
第一个参数，
从设置 begin 的位置开始截取，如果不传默认为0
var str = "1234567一个和尚有水吃"; console.log(str.slice()); // 123457一个和尚有水吃 console.log(str.slice(1)); // 23457一个和尚有水吃 console.log(str.slice(7)); // 一个和尚有水吃 console.log(str.slice(9)); // 和尚有水吃
如果 begin 是负数，则倒着截取
console.log(str.slice(-1)); // 吃 console.log(str.slice(-2)); // 水吃
如果 begin 是负数，达到 -length，起始值会设置为0
console.log(str.slice(-20)); // 1234567一个和尚有水吃
第二个参数end
表示截取的结束位置，如果不传默认为当前 length
begin 包含在截取的部分
end 不包含在截取的部分
console.log(str.slice(1, 5)); // 2345
如果 end 超过 length，则默认为 length
console.log(str.slice(1, 50)); // 234567一个和尚有水吃
end 是负值倒着截取
console.log(str.slice(1, -1)); // 234567一个和尚有水
虽然 end 可以是负值，如果超过 -length 则会为0，返回空字符串
console.log(str.slice(1, -50)); // ""
end 对应的索引值在前面，begin 对应的索引在后面，就像上面 -50 变成了 0，返回一个空字符串
console.log(str.slice(5, 0)); // ""
如果 begin 超出了 length，则返回空字符串
console.log(str.slice(50, 100)); // ""
如果 begin 和 end 是处在同一个索引上，也返回空字符串
console.log(str.slice(5, 5)); // "" console.log(str.slice(0, 0)); // ""
substr(start[, length])
start 截取的起始位置，可以是负数，如果是负数则从右向左
length 截取字符的个数，如果不填，则默认到字符串结尾的位置，其实就是在当前起始的位置加上个数，然后结束
返回也是新的字符串，并不会改变原字符串，该方法不建议使用，未来可能会被移除
第一个参数，
从起始位置截取，如果不指定第二个参数，默认截取到当前字符串结尾，这个跟 slice 是一样的
var str = "1234567一个和尚有水吃"; console.log(str.substr(2)); // 34567一个和尚有水吃 console.log(str.slice(2)); // 34567一个和尚有水吃
第二个参数，
设置的是截取字符的个数（这是与 slice 不一样的地方，它是截止位置，且不包含该位置）
console.log(str.substr(2, 1)); // 3 console.log(str.substr(2, 2)); // 34
起始位 start 可以是负数，
如果是负数倒着进行查找，从第 -5 的位置“和”字截取2个字符“和尚”
console.log(str.substr(-5, 2)); // 和尚
-5 的下标 [9]
公式： length + start
// str.length = 14 // 14 - -5 = 9 console.log(str.substr(9, 2)); // 和尚
第二个参数 length 不能太大，如果超出字符串 length 长度，则默认到字符串结尾的位置
console.log(str.substr(7, 20)); // 一个和尚有水吃
如果个数 length 是负值，则返回空字符串
console.log(str.substr(7, -5)); // ""
如果起始位置 start 是负数，则默从 0 开始截取
console.log(str.substr(-50, 2)); // 12
如果起始位置 start 的值太大，返回空字符串
console.log(str.substr(50, 2)); // ""
substring(begin[, end])
begin 截取的起始位置，默认值为0，如果小于0，则为0
end 截取结束的位置，不包含在截取范围内，默认为length，如果超过length，则等于length
返回截取的字符串
第一个参数
begin 截取的起始位置，截取掉第1个字符
var str = "1234567一个和尚有水吃"; console.log(str.substring(1)); // 234567一个和尚有水吃
如果begin的值小于0，则就会被设置为0（这一点跟 slice 倒着截取不一样，如果说 begin 的值小于0，则为0，换句话只要小于0就为0）
console.log(str.substring(-5)); // 1234567一个和尚有水吃 console.log(str.substring(-1)); // 1234567一个和尚有水吃
如果起始位置超过 length，则返回空字符串
console.log(str.substring(50)); // ""
第二个参数
截取的时候包含 begin 的值，不包含 end 的值（效果跟 slice(1, 4) 一样）
console.log(str.substring(1, 4)); // 234 console.log(str.slice(1, 4)); // 234
如果 end 的值超过 length，则默认为 length
console.log(str.substring(1, 50)); // 234567一个和尚有水吃
end 不能设置负数值，不管设置什么样的赋值，依旧是前面的字符 123
console.log(str.substring(3, -5)); // 123 console.log(str.substring(3, -3)); // 123 console.log(str.substring(3, -1)); // 123
事情是这样的，如果小于0，则设置为0
end 是负数为0，
1. begin 的索引值是 3，end 的索引值是 0
2. end 的索引位置，比 begin 更靠前，如果是slice方法会返回空字符串
3. substring方法的规则是调换 begin 和 end
如果起始的 begin 的索引在后，end的索引在前，那么就会把 begin 和 end 调换
console.log(str.substring(5, 1)); // 2345
验证一下调换，调换这一点和slice方法的差别特别大
console.log(str.substring(1, 5)); // 2345
起始位置和结束是同一个索引值，返回的是空字符串，和slice是一样的
console.log(str.substring(3, 3)); // ""
额外
slice(begin, end) 方法可以倒着查找
有一个简单的公式
公式：length - end/begin = 得到当前索引值的位置
3、其他常用方法
split(separator[, num])
将字符串分割成数组
separator 该字符的位置作为分割点，并且不在当前数组内，如果是 "" 空字符串，可以把每个一个字符分隔开来
num 可选，决定分割的数组中的个数
把当前字符串变成数组
var str = "一个和尚有水喝"; var arr = str.split(); console.log(arr); // ['一个和尚有水喝']
第一个参数 separator
var str = "一个-和尚-有-水喝";
var arr = str.split("-");
console.log(arr); // ['一个', '和尚', '有', '水喝']用“有”字进行分割，分割后“有”字就没有了
var str = "一个和尚有水喝";
var arr = str.split("有");
console.log(arr); // ['一个和尚', '水喝']separator 传一个空字符串，会把每个字间进行了分割
var str = "一个和尚有水喝";
var arr = str.split("");
console.log(arr); // ['一', '个', '和', '尚', '有', '水', '喝']第二个参数 num，是分隔出数组的个数
var str = "一个和尚有水喝";
var arr = str.split("", 3);
console.log(arr); // ['一', '个', '和']num最多就到字符串结束，如果超过了length，会以字符串最大分割为准
var str = "一个和尚有水喝";
var arr = str.split("", 300);
console.log(arr); // ['一', '个', '和', '尚', '有', '水', '喝']有一个问题
如果想要分割的字符 "_"，处在字符串的首尾部，就会出现一个空字符串
var str = "_一个和尚_有水喝";
var arr = str.split("_");
console.log(arr); // ['', '一个和尚', '有水喝']利用这个特点检测字符出现的次数，比如字符 "-" 出现几次
var str = "-ke-ke-ke"
var arr = str.split("-");
console.log(arr.length - 1); // 3k出现几次
var str = "kkk-vv-nhikask";
var arr = str.split("k");
console.log(arr.length - 1); // 5concat()
将一个或多个字符串与原字符串合并，并返回新字符串，参数可以传多个字符串
var str1 = "一个"; var str2 = "和尚"; var str3 = "有水喝"; var newStr = str1.concat(str2, str3); console.log(newStr); // 一个和尚有水喝
性能不如循环里面 +=
toLowerCase() 字符串转成小写
toUpperCase() 字符串转成大写
这两个方法返回的都是新字符串
大写字母A是否等于小写字母a
var str1 = "A"; var str2 = "a"; console.log(str1 === str2); // false console.log(str1.toLowerCase() === str2); // true console.log(str1 === str2.toUpperCase()); // true
trim()
去除首尾的空格，不能去除中间的空格
var str = " 一个和尚有水喝 "; console.log(str.length); // 13 console.log(str.trim().length); // 7
去除空格
1. 先用split()分割成数组
2. 然后在用 += 加等进行拼接
var str = " fo un d er";
var newStr = '';
var arr = str.split(""); // [' ', 'f', 'o', ' ', 'u', 'n', ' ', 'd', ' ', ' ', ' ', 'e', 'r', ' ']
for(var i = 0; i < arr.length; i++){
if(arr[i] != 0){
newStr += arr[i];
}
}
console.log(newStr); // founder
console.log(newStr.length); // 7