Collection Js方法
一、字符串方法
js 中字符串有两种
1. 字符串字面量
2. 字符串对象
通过单引号或双引号创建字符串，叫字符串字面量
var str = "abcd字符串";
什么是“字面量”？
字面量的英文是 literals，翻译过来叫直接量，
直接量的意思是所见既所得，也就是我们看到的就是我们得到的
创建字符串对象之前，先看一下日期对象
Date() 直接调用，得到的是日期的字符串
new Date() 通过 new 得到的是一个日期对象，该对象上有日期相关的操作方法
创建字符串对象
1. 通过 new 操作构造函数 String() 创建字符串对象，
2. 参数传我们的字符串 "abcd"，
3. 返回的字符串对象，它其实是一个类数组
var str = new String("abcd");
console.log(typeof str); // object
console.log(str); // String {'abcdef'}什么是类数组？
顾名思义类似于数组，类数组和数组非常像，但是并不是数组，因为不具备数组的所有方法
可以通过 console.dir 打印 str 上面的属性和方法，返回的是一个 String 字符串对象，对象上面有一个 __proto__ 指向原型
var str = new String("abcd");
console.dir(str); // String继续打印 str.__proto__ 可以看到原型上有很多方法，看到的这个 ƒ 表示方法，我们要学的就是原型上面的这些方法
var str = new String("abcd");
console.log(str.__proto__); // String {'', anchor: ƒ, at: ƒ, big: ƒ, blink: ƒ, …}“字符串字面量”的类型是 string 字符串，但是可以像数组一样通过下标获取字符，这个叫包装类
var str = "abcd字符串"; console.log(typeof str); // string console.log(str[0]); // a
因为有包装类，
“字符串字面量”可以调用的方法，其实 js 内部调用的是“字符串对象”上面的方法，
下面学习字符串对象上面有哪些方法
1、查找方法
str[index]
通过下标取值有兼容问题，IE8 以下无法使用
var str = 'abcd字符串'; console.log(str[1]); // b
charAt( index )
该字符串方法按照字符串下标查找
1. index 表示字符串的下标，也就是索引值
2. index 可以不填，默认引值为 0
var str = 'abcd字符串'; console.log(str.charAt()); // a console.log(str.charAt(str.length - 1)); // 串
超出 str.length 或小于 0，回返回一个 "" 空字符串
console.log(str.charAt(str.length)); // 空字符串 console.log(str.charAt(str.length + 10)); // 空字符串 console.log(str.charAt(-5)); // 空字符串
indexOf( searchValue， fromIndex )
查找的字符串中是否有对应的值（字符）
如果有，返回该值第一次出现时候，对应的索引值，就是下标
如果不存，返回 -1
参数一 searchValue 表示要查找的字符，
比如查找字符串中是否有 a，并返回 a 所在位置的索引，
字符串中有两个a，只会返回一个值，在字符串中第一次出现 a 的位置
var str = "abcdabcd字符串";
console.log(str.indexOf("a")); // 0查找两个字符 "cd"，
因为第一个字符 c 是从下标 [ 2 ] 的位置开始出现的，所以返回一个 2
str.indexOf("cd"); // 2如果查找的值不存在返回 -1
str.indexOf("k"); // -1第二个参数 fromIndex，
表示是搜索的启始位置，可选的，不填默认为0
"abcdabcd字符串"
第二个参数 3，表示从字符 d 开始进行搜索，搜索到的 c 在整个字符串中的下标 6
str.indexOf("c", 3); // 6第二个参数为负数，负数默认还是正常从 0 位开始
str.indexOf("d", -1); // 3手写 myIndexOf 实现基本的功能，不能找两个字符比如 "cd"
String.prototype.myIndexOf = function(searchValue, fromIndex){
if(!fromIndex){
fromIndex = 0;
}
if(fromIndex >= str.length || typeof fromIndex != "number"){
return -1;
}
for (var i = fromIndex; i < str.length; i++) {
if(str.charAt(i) === searchValue){
return i;
}
}
return -1;
}
var str = "abcdabcd字符串";
console.log(str.myIndexOf('a')); // 0
console.log(str.myIndexOf('c')); // 2
console.log(str.myIndexOf('c', 3)); // 6
console.log(str.myIndexOf('c', 50)); // -1
console.log(str.myIndexOf('c', "a")); // -1
console.log(str.myIndexOf('v')); // -1验证第二个参数 fromIndex
fromIndex < 0 || fromIndex === undefined 如果没有传，或小于等于0，默认为0，简写为 !fromIndex，
fromIndex >= str.length || typeof fromIndex != "number" 大于等于字符串的 length，或不是数字，返回 -1
lastIndexOf()
indexOf 是从前往后查找，
loastIndexOf 是从后往前查找，指定字符的所对应的索引
var str = "abcdabcd字符串";
console.log(str.lastIndexOf("d")); // 7
console.log(str.indexOf("d")); // 3第二个参数 fromIndex 起始搜索的位置，是从后往前
1. 不填默认为 str.length，
2. 超过 str.length 则为 str.length（ 这点跟 indexOf 第二个参数小于 0，则就等于 0 是一样的）
str.lastIndexOf("d"); // 7
str.lastIndexOf("d", str.length); // 7
str.lastIndexOf("d", 50); // 7如果第二个参数小于 0，则默认为 0，
也就是说它从 0 的位置开始查找，第 0 位就是 a 所以返回 0
str.lastIndexOf("a", -50); // 0如果找不指定的值，跟 indexOf 一样返回 -1
str.lastIndexOf("v"); // -12、截取类方法
slice(begin [, end])
调用 slice 返回一个新字符串，
返回的是一个从 begin 位置开始截取，到 end 的位置结束，但是不包含 end 的字符串
begin 截取的起始位置，默认为0。如果是负数 -n，则倒数 n 位进行截取。如果负数超过 length，则默认从 0 开始
end 结束截取的位置，不包含在截取的部分，默认为当前 str.length
从设置的 begin 开始截取，
不传 begin 默认为 0，从 0 位的数字 1 开始截取
begin 为 1，从的第 1 位数字 2 开始截取
begin 为 2，从的第 2 位数字 3 开始截取，余下同理...
var str = "1234567一个和尚有水吃"; console.log(str.slice()); // 1234567一个和尚有水吃 console.log(str.slice(1)); // 234567一个和尚有水吃 console.log(str.slice(2)); // 34567一个和尚有水吃 console.log(str.slice(7)); // 一个和尚有水吃 console.log(str.slice(9)); // 和尚有水吃
如果 begin 是负数，则倒数 n 位截取
console.log(str.slice(-1)); // 吃 console.log(str.slice(-2)); // 水吃
begin 负数也不能太小，
如果负数达到 -length 的程度，起始值会被设置为 0
console.log(str.slice(-20)); // 1234567一个和尚有水吃 console.log(str.slice(-24)); // 1234567一个和尚有水吃
第二个参数 end，表示截取的结束位置，不传默认为当前 str.length
begin 包含在截取的部分
end 不包含在截取的部分
console.log(str.slice(1, 5)); // 2345
1 2 3 4 5 6 7 一 个 和 尚 有 水 吃
0 1 2 3 4 5 6 7 8 9 ...
如果 end 大到超过 str.length，则默认为 str.length
console.log(str.slice(1, 50)); // 234567一个和尚有水吃
end 为负数，则倒着截取，比如 -1 倒着截取 1 位
console.log(str.slice(1, -1)); // 234567一个和尚有水
一些注意事项（这些都会返回一个空字符串）
1. end 比 begin 小
2. begin 超出了字符串的 length
3. begin 和 end 一样
后面 end 的索引在 begin 前面，也就是 end 比 begin 小，会返回一个空字符串
console.log(str.slice(1, -50)); // "" console.log(str.slice(5, 0)); // ""
如果 begin 超出了 length，则返回空字符串
console.log(str.slice(50, 100)); // ""
因为包含 begin 不包含 end，
如果 begin 和 end 是处在同一个位置上，也返回空字符串
console.log(str.slice(5, 5)); // "" console.log(str.slice(0, 0)); // ""
substr(start[, length])
也是返回截取的字符串，并不会改变原字符串，该方法不建议使用，未来可能会被移除
start 截取的起始位置，可以是负数。如果是负数，则从右向左
length 截取字符的个数，如果不填，则默认到字符串结尾的位置。其实就是在当前起始的位置加上个数，然后结束
从 start 位置的字符开设截取，如果不指定第二个参数，默认截取到当前字符串结尾，这个跟 slice 是一样的
var str = "1234567一个和尚有水吃"; console.log(str.substr(2)); // 34567一个和尚有水吃 console.log(str.slice(2)); // 34567一个和尚有水吃
第二个参数 length 设置的是截取字符的个数
console.log(str.substr(2, 1)); // 3 console.log(str.substr(2, 2)); // 34
第二个参数是 substr 跟 slice 不一样的地方
slice 是截止位置，且不包含该位置
substr 是截取的个数
start 为负数，则倒着进行查找，比如从第 -5 的位置“和”字截取2个字符“和尚”
console.log(str.substr(-5, 2)); // 和尚
负数的计算公式
-5 的下标为 [9]
公式： length + start
console.log(str.substr(9, 2)); // 和尚
str.length = 14
14 - -5 = 9 加负数就变成了减 5
注意一些事情，
第二个参数 length 不能太大，如果超出字符串 length 长度，则默认到字符串结尾的位置
console.log(str.substr(7, 20)); // 一个和尚有水吃
如果 length 是负值，则返回空字符串
console.log(str.substr(7, -5)); // ""
如果起始位置 start 负数值太大，超过 -length，则默从 0 开始截取（直觉是这样）
console.log(str.substr(-50, 2)); // 12
如果起始位置 start 的值超过 length，返回空字符串（直觉是这样）
console.log(str.substr(50, 2)); // ""
substring(begin[, end])
返回截取的字符串，
使用上 substring 和 slice 有点像，
begin 截取的起始位置，默认值为 0。如果小于 0，则为 0。如果超过 length 返回空字符串
end 截取结束的位置，不包含在截取范围内，默认为 length。如果超过 length，则等于 length。如果 end 小于 0，则默认为 0
第一个参数
从 begin 的位置开始截取，截取掉第 1 个字符
var str = "1234567一个和尚有水吃"; console.log(str.substring(1)); // 234567一个和尚有水吃
如果 begin 的值很小，
小于 0，则就会被设置为 0，也就是只要比 0 小就为 0（这一点跟 slice 不一样，slice 负数是倒着截取）
console.log(str.substring(-5)); // 1234567一个和尚有水吃 console.log(str.substring(-1)); // 1234567一个和尚有水吃
如果 begin 的值很大，
起始位置超过 length，则返回空字符串
console.log(str.substring(50)); // ""
第二个参数
截取的字符串包含 begin 的值，不包含 end 的值（跟 slice 一样）
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 不能设置负数值，
end 小于则默认为0，不管设置什么样的负数值，依旧是前面的字符 123
console.log(str.substring(3, -5)); // 123 console.log(str.substring(3, -3)); // 123 console.log(str.substring(3, -1)); // 123
end 的索引位置，比 begin 更靠前
1. 如果是 slice 方法会返回空字符串
2. 但是 substring 方法比较特效，它的规则是调换 begin 和 end
起始的 begin 的索引在后，end 的索引在前，那么就会把 begin 和 end 调换
console.log(str.substring(5, 1)); // 2345 console.log(str.substring(1, 5)); // 2345
调换这一点和 slice 方法的差别特别大，剩下的和 slice 查不多，
比如起始位置和结束是同一个索引，返回的是空字符串
console.log(str.substring(3, 3)); // ""
额外说下一下，
slice(begin, end) 方法可以倒着查找 n 位，它有一个简单的公式，可以得到当前索引值的位置
length - end = 当前索引位置 length - begin = 当前索引值位置
3、打散
字符串中除了 split 方法，其他的方法全部返回一个字符串
split(separator [, num])
可以把字符串分割成数组
separator 决定分割的字符，该字符串的位置作为分割点，并且该字符不在当前数组内，如果是 "" 空字符串，可以把每个一个字符分隔开来
num 可选，决定分割的数组中的个数
把字符串变成一个数组
var str = "一个和尚有水喝"; var arr = str.split(); console.log(arr); // ['一个和尚有水喝']
以字符 - 的位置作为分割点，分割后 - 不在数组中
var str = "一个-和尚-有-水喝";
var arr = str.split("-");
console.log(arr); // ['一个', '和尚', '有', '水喝']传一个空字符串，会把每个字间进行了分割
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); // ['', '一个和尚', '有水喝']这是一个问题，不过也是一个好处，
如果检测一个字符在字符串中出现过的次数，传统的方式是 for 循环，然后一位一位的判断，
如果检测的字符不只一位，是两位字符就不能诸位对比了，
这时候就可以感到 split 有多好用了
在字符串中 - 出现了几次？
1. 以 - 为分割符，一个分割符，必然是会分成左右两个部分
2. 数组的 length 减 1，就是 - 出现的次数
var str = "ke-ke"
var arr = str.split("-");
console.log(arr.length - 1); // 1分割符 - 的数量，永远是分割出数组的 arr.length 减 1
var str = "-ke-ke-ke"
var arr = str.split("-");
console.log(arr.length - 1); // 3字符串就两个 kk，用 k 分割呢？
上面说过，分割符处在首尾，会各有一个空的字符串，
以及中间没有内容分割的部分，数组有三位
var str = "kk";
var arr = str.split("k");
console.log(arr.length - 1); // 2通过这种方式，很快就能得出 k 出现几次
var str = "kkk-vv-nhikask";
var arr = str.split("k");
console.log(arr.length - 1); // 54、其他字符串方法
1. toFixed()
该方法可把 Number 四舍五入为指定小数位数的数字，参数放 3 就保留 3 位有效数字并且四舍五入
var num = 123123.345789; console.log(num.toFixed(3)); // 123123.346
2. replace()
替换方法
3. concat()
连接字符串方法，返回的是一个新字符串，不会改变原有字符串
var str1 = "一个"; var str2 = "和尚"; var newStr = str1.concat(str2); console.log(newStr); // 一个和尚
参数可以传多个字符串，以逗号间隔
var str1 = "一个"; var str2 = "和尚"; var str3 = "有水喝"; var newStr = str1.concat(str2, str3); console.log(newStr); // 一个和尚有水喝
+= 的性能比 concat 更好
4. 转换大小写
两个方法返回的都是新字符串，不会影响原字符串
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
5. 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); // 75、Unicode 码转换方法
如果比较字符串，实际比较的是字符串 Unicode 编码的大小，并且是逐位比较，比如下面比较的是 r 跟 v，然后返回的是一个布尔值
r 的编码 => 114
v 的编码 => 118
var str1 = 'ruyic.com'; var str2 = 'v'; console.log(str1 > str2); // false
charCodeAt( index )
用于获取当前字符的 Unicode 编码（实际是 Unicode 十六位编码转换成的十进制的数字）
参数 index 指的是字符串的索引值（也就是下标）
var str1 = "中"; var str2 = "文"; console.log(str1.charCodeAt(0)); // 20013 console.log(str2.charCodeAt(0)); // 25991 console.log(str1 > str2); // false
如果不写下标，index 默认是 0
var str = "中文"; console.log(str.charCodeAt()); // 20013
如果下标不存在返回 NaN，
超出下标范围返回 NaN，负数下标不存在也返回 NaN，
因为返回的 Unicode 编码是数字，如果不是数字就返回一个 NaN
var str = "中文"; console.log(str.charCodeAt(10)); // NaN console.log(str.charCodeAt(-10)); // NaN
String.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]使用 fromCharCode() 方法把数组里面三个 Unicode 码，转成对应的三个中文字
var arr = [22823, 20013, 22269]; console.log(String.fromCharCode(arr[0])); // 大 console.log(String.fromCharCode(arr[1])); // 中 console.log(String.fromCharCode(arr[2])); // 国
fromCharCode() 方法参数可以填多个 Unicode 编码，以逗号间隔
var arr = [22823, 20013, 22269]; console.log(String.fromCharCode(arr[0], arr[1], arr[2])); // 大中国
6、案例文字搬运工
二、数组方法
push、pop
unshift、shift
splice
sort
concat、reverse、join
indexOf、lastIndexOf
slice
forEach
filter
map
reduce
some和every
对象方法
keys 和 values 删除对象属性
三、Math
Math 常用方法
| 功能 | 方法 | 说明 |
| 取整 | ceil | |
| floor | ||
| round | ||
| 随机数 | random | |
| 最大最小值 | max | |
| min | ||
| 绝对值 | abs |
Math() 和 Date() 一样都是 js 定义好的内置构造函数，但是又有点不一样
1. Math 不需要 new 操作，它上面提供了一些和数学相关的静态方法或属性
2. Date() 需要 new 操作创建一个对象，然后调用该对象上面的方法获取日期等等
var date = new Date(); console.log(date.getFullYear()); // 2025
PI 属性
π * 直径 = 园的周长
console.log(Math.PI); // 3.141592653589793
1、取整
ceil()
向上取整，该单词的意思天花板
var num = 1.1; console.log(Math.ceil(num)); // 2
floor()
向下取整，单词是地板的意思
var num = 1.9; console.log(Math.floor(num)); // 1
round()
四舍五入
>=5 小数大于或等于5 就进位，向上取整
var num = 1.5; console.log(Math.round(num)); // 2
< 5 小数小于 5，向下取整
var num = 1.4999; console.log(Math.round(num)); // 2
注意一下，
向上 ceil/向下floor/四舍五入round，会首先调用 Number() 方法进行转换
如果输入的不能转化为数值返回 NaN
var str = "aaa"; console.log(Math.round(str)); // NaN
可以转化为数字类型的可以取整
var str = "1.1"; console.log(Math.round(str)); // 1
2、随机数
random()
返回 0 ~ 1 之间的随机属性，包含 0，不包含 1
抽奖游戏
1. 乘 4 可以放大随机数，得到 0 ~ 4 之间的随机数，但是不包含 4
var num = Math.random() * 4; console.log(num);
2. 解决取整的问题
向下取整，0 ~ 4 之间随机不能取到 4
向上取整，0 出现的概率太低，不一定能取到 0
所以使用 round() 可以得到 0 ~ 4 之间的随机整数
var arr = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖"]; var num = Math.random() * 4; var n = Math.round(num); console.log(arr[n]);
任意区间随机数整数，比如获取 5 ~ 10
1. 首先实现 0 ~ 5 之间随机，很简单乘以 5
2. 然后在上面的基础上加 5，就得到 5 ~ 10
var num = Math.random() * 5; var n = Math.round(num + 5); console.log(n);
归纳上面的规律，比如获取 2 ~ 17 之间的随机
1. 首先变成 0 ~ ? 之间的随机？前后都减 2
2 - 2 = 0
17 - 2 = 15
换句话说得到 0 ~ 15 之间的
2. 然后把减掉的 2 在加上，就得到 2 ~ 17 之间的随机数
var num = Math.random() * 15; var n = Math.round(num + 2); console.log(n);
把上面的规律，封装一个随机数方法
function getNum(min, max){
return Math.random() * (max - min) + min;
}
var n = getNum(2, 17);
console.log(Math.round(n));3、最大/最小值
max()
获取一组数中最大的值
console.log(Math.max(10, 50, 15, 20, 60)); // 60
如果不传参数返回负无穷
console.log(Math.max()); // -Infinity
min()
返回一组数中最小的值
console.log(Math.min(10, 50, 15, 20, 60)); // 10
不传参数返回正无穷
console.log(Math.min()); // Infinity
注意事项，
这两个方法内部都会调用 Number 方法，参数不是数字会返回 NaN
如果传非数字返回 NaN
console.log(Math.max("5", "aaa")); // NaN如果都是数字的字符串返回66
console.log(Math.max("5", "66")); // 66小示例
var btn = document.querySelectorAll("button");
var span = document.querySelector("span");
btn[0].onclick = function(){
var num = +span.innerHTML; // +号的意思是字符串转数字，也可以使用Number方法
num--;
// if(num < 0){
// num = 0;
// }
num = Math.max(num, 0); // 商品不能可能出现0件以下，当num为负数时返回0
span.innerHTML = num;
}
btn[1].onclick = function(){
var num = +span.innerHTML;
num++;
// if(num 》 10){
// num = 10;
// }
num = Math.min(num, 10); // 最多购买10件，当大于10的时候num就为10
span.innerHTML = num;
}4、绝对值
abs()
取绝对值
2 - 17 = -15
17 - 2 = 15
console.log(Math.abs(2 - 17)); console.log(Math.abs(17 - 2));