-
目录
-
数组对象
-
数组索引
-
-
语法：indexOf(数组元素)
-
返回数组元素的索引号
-
且只返回满足条件的第一个
-
如不存在该元素 则返回-1
-
-
语法：lastIndexOf()
-
查找的时候倒着查询
-
但是索引号还是从前往后不变
-
如果找不到也是返回-1
-
-
数组去重案例
-
实现原理：遍历旧数组，拿着旧数组元素去查询新数组，如果该元素===-1，则存入新数组
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组去重</title> <script> function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); } } return newArr; } var demo = unique(['blue', 'pink', 'blue', 'green']); console.log(demo); </script> </head> <body> </body> </html> -
结果
-
-
-
数组转换为字符串
-
语法：toString()
-
直接转换为字符串
-
默认使用,作为分隔符
-
-
语法：join('分隔符')
-
转换为字符串之后使用不同的分隔符链接
-
默认条件下是，分隔
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组转换为字符串</title> <script> //1.toString() var arr = [1, 2, 3]; console.log(arr.toString()); //2.join('分隔符') var arr1 = ['green', 'pink', 'blue']; console.log(arr.join('&'));//分隔符为& </script> </head> <body> </body> </html> -
结果
-
-
-
-
字符串对象
-
基本包装类型
-
定义：把简单数据类型转换为复杂数据类型，这样简单的数据类型就有了属性和方法
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var str = 'andy'; console.log(str.length);//简单数据类型却有length属性 //上面代码相当于做了一个简单的包装 //1.把简单的数据类型包装为复杂的数据类型 var temp = new String('andy'); //2.把临时变量的值给 str str = temp; //3.销毁临时变量 temp = null; </script> </head> <body> </body> </html> -
结果
-
-
字符串的不可变性
-
指的是里面的值不可变，只是地址变了，内存中开辟了新的内存空间
-
因为字符串的不可变性，所以不要大量拼接字符。
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var str = 'andy'; console.log(str); str = 'red'; console.log(str); </script> </head> <body> </body> </html> -
结果
-
-
根据字符串返回位置
-
如果出现两个重复出现的值，返回不同的值出现的位置
-
str.indexOf('要查找的字符',[起始位置])
-
其中起始位置需要是第一个出现的值+1
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>返回字符串位置</title> <script> var str = '多云，晴朗，下雨，晴朗' console.log(str.indexOf('晴'));//返回第一个晴的值 3 //str.indexOf('要查找的字符',[起始位置])获取第二个晴 console.log(str.indexOf('晴', 4));//起始位置从 第一个晴的后一个值开始查找 </script> </head> <body> </body> </html> -
结果
-
-
返回重复字符出现的位置及次数
-
核心算法：先查找第一个o出现的位置
-
只要indexOf不是-1就继续往后查找
-
利用第二个参数，从当前索引+1，继续往后查找
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>查找字符出现的位置及次数</title> <script> var str = "abcdabcdabcd"; var index = str.indexOf('a');//把第一个a的索引找到 var num = 0; while (index !== -1) {//判断字符串中是否存在字符a console.log(index); num++; index = str.indexOf('a', index + 1);//从前一个a索引值 的后一个数往后查找 } console.log('a出现的次数' + num); </script> </head> <body> </body> </html> -
结果
-
-
根据位置返回字符
-
-
charAt（index）根据位置返回字符串
-
str[index]根据位置返回字符
-
charCodeAt（index）返回相应索引号字符的ASCII值
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //1.charAt(index) 根据位置返回字符串 var str = 'andy'; console.log(str.charAt(3)); //2.使用charAt()遍历所有的字符 for (var i = 0; i < str.length; i++) { console.log(str.charAt(i)); } //3.charCodeAt(index) 返回相应索引号字符的ASCII值 目的：判断用户按下了哪个键 console.log(str.charCodeAt(0));//返回a 的ASCII值 97 //4.str[index] h5新增的 console.log(str[0]);//结果是a </script> </head> <body> </body> </html> -
结果
-
-
判断是否有该属性
-
语法：对象['属性名']
-
-
统计出现次数最多的字符和次数
-
算法：
-
利用charAt遍历这个字符串
-
把每个字符都存储给对象，如果没有该属性，就为1，否则就+1
-
遍历对象得到最大值和该字符
-
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>统计出现次数最多的字符和次数</title> <script> var str = 'abcoooooabc'; var o = {};//创建一个新的o对象 for (var i = 0; i < str.length; i++) { var chars = str.charAt(i);//取出str里面的每个字符 if (o[chars]) {//判断chars里面的每个字符 o[chars]++; } else { o[chars] = 1;//o[char]得到的是属性值 } } console.log(o); //2.遍历对象 var max = 0; var ch = ''; for (var k in o) { if (o[k] > max) { max = o[k];//o[k]得到的是属性名 ch = k;//k得到是属性 } } console.log('得到出现最多的字符出现的次数' + max); console.log('出现最多的字符是' + ch); </script> </head> <body> </body> </html> -
结果
-
-
字符串操作方法
-
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //1.concat('字符串1','字符串2'...) var str = 'andy'; console.log(str.concat('red')); //2.substr('截取起始位置','截取几个字符') var str1 = '改革春风吹满地'; console.log(str1.substr(2, 2));//取出 春风 </script> </head> <body> </body> </html> -
结果
-
-
替换字符串以及转换为字符串
-
replace('被替换的字符','替换为的字符')
-
只会替换第一个字符
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>替换字符串以及转换为字符串</title> <script> //1.替换字符串 replace('被替换的字符','替换为的字符') 只会替换第一个字符 var str = 'andy'; console.log(str.replace('a', 'b'));//替换为bndy //2.替换重复的字符 利用循环 var str1 = 'abcooooabc'; while (str1.indexOf('o') != -1) { str1 = str1.replace('o', '*'); } console.log(str1); //3.字符转换为数组split('分隔符') join把数组转换为字符串 var str2 = 'red&pink&blue'; console.log(str2.split('&'));//分隔符取决于字符串用什么分隔符进行分开的 </script> </head> <body> </body> </html> -
结果
-
-
-
-
简单数据类型与复杂数据类型
-
简单数据类型又称值类型
-
复杂数据类型又称引用类型
-
简单数据类型
-
值类型：string、number、boolean、undefined、null
-
null返回的是一个空对象 是一个object 用于没有想好的暂时的对象
-
-
复杂数据类型
-
通过new关键字创建的对象 如object、Array、Date
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //1.简单数据类型 null 返回的是一个空对象 object var timer = null; console.log(typeof timer); //2.简单数据类型存放在栈里面， 存储的是值 //3.复杂数据类型 首先在站里面存放地址，十六进制表示 然后这个地址指向堆里面的数据 </script> </head> <body> </body> </html> -
结果
-
-
堆和栈
-
栈（操作系统）：由操作系统自动分配释放存放函数参数值、局部变量等。简单数据类型放在栈里面
-
堆（操作系统）：存储复杂类型（对象），一般有程序员分配释放。复杂数据类型存放在堆里面
-
-
简单数据类型传参
-
案例
-
结果
-
-
本文详细探讨JavaScript中数组对象的操作，包括索引查找、去重案例，以及字符串对象的转换、基本包装类型、不可变性与各种方法。还涉及简单数据类型与复杂数据类型的对比，以及堆栈原理在数据存储中的应用。
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
