Go to comments

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"); // -1


2、截取类方法

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); // 5


4、其他字符串方法

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); // 7


5、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));



Leave a comment 0 Comments.

Leave a Reply

换一张