数组去重案例
function fnNoRepeatOfArray(arr){
var list = [];
arr.forEach(function(value){
if(list.indexOf(value) === -1){
list.push(value);
}
})
return list;
}
function fn(arr){
for(var i = 0,len = arr.length;i < len;i ++){
for(var j = i + 1;j < len;j ++){
if(arr[i] === arr[j]){
arr.splice(j,1);
}
}
}
return arr;
}
function fn(arr){
var list = [];
arr.sort(function(a,b){return a - b;});
arr.forEach(function(value,index){
if(value !== arr[index + 1]){
list.push(value);
}
})
return list;
}字符串常用方法
如何声明
-
字面量方式： '' ""
-
构造函数方式： new String()
<script>
//创建字符串
var str = 'hello';
var o_str = new String('world');
console.log(typeof str,typeof o_str); //'string' 'object'
</script>属性
-
length : 长度
方法 (查、替、截、转)
查
-
indexOf('字符串',start) : 查找子串在父串中第一次出现的下标位置，如果没有，则返回-1
var str = 'how do you do';
console.log(str.indexOf('do')); //4
console.log(str.indexOf('de')); //-1
console.log(str.indexOf('do',5)); //11
console.log(str.indexOf('do',4)); //4-
lastIndexOf('字符串',start) : 查找子串在父串中从右向左查找第一次出现的下标位置，如果没有找到，返回 -1
var str = 'how do you do';
console.log(str.indexOf('do')); //4
console.log(str.indexOf('de')); //-1
console.log(str.indexOf('do',5)); //11
console.log(str.indexOf('do',4)); //4
console.log(str.lastIndexOf('do')); //11
console.log(str.lastIndexOf('de')); //-1
console.log(str.lastIndexOf('do',5)); //4
console.log(str.lastIndexOf('do',4)); //4-
charAt(index) : 根据下标查找字符。
-
charCodeAt(index) : 根据下标查找字符编码。
替
-
replace(旧串，新串) : 替换字符串
//声明字符串
var str = 'how do you do';
console.log(str.replace('do','de')); //'how de you do'
// for(var i = 0;i < str.length;i ++){
// str = str.replace('do','de');
// }
while(str.indexOf('do') !== -1){
str = str.replace('do','de');
}
console.log(str);截
-
substring(start,end) : 从哪截取到哪，支持参数互换、不支持负数
-
substr(start,length) ：从哪截取多少个
-
slice(start,end) ：从哪截取到哪，不支持参数互换、支持负数
var str = 'how do you do';
console.log(str.substring(4)); //do you do
console.log(str.substr(4)); //do you do
console.log(str.slice(4));//do you do
console.log(str.substring(4,6)); //do
console.log(str.substr(4,6)); //do you
console.log(str.slice(4,6));//do
console.log(str.substring(6,4)); //do
console.log(str.slice(6,4));//''
console.log(str.substring(-6,-4)); //''
console.log(str.slice(-6,-4));//'yo'转
-
toUpperCase() : 将小写转为大写字母
-
toLowerCase() : 将大写转为小写字母
-
split('切割符',length) : 将字符串切割为数组
<script>
var str = 'How Are You';
//小写转为大写
console.log(str.toUpperCase()); //'HOW ARE YOU';
//大写转为小写
console.log(str.toLowerCase()); //'how are you'
//字符串转为数组
var arr = str.split(' ',5); //['How','Are','You']
console.log(arr);
console.log(str.split('o')); //['H','w Are Y','u']
console.log(str.split('')); //['H','o','w',' ','A','r','e',' ','Y','o','u']
console.log(str.split(' ',2)); //['How',"Are"];
console.log(str.split('oo')); //['How Are You'];
</script>var str = 'How Are You';
console.log(str.toUpperCase()); //HOW ARE YOU
console.log(str.toLowerCase()); //how are you
var arr = str.split(' ',2); //['How', 'Are']
console.log(arr);拼
-
concat() : 合并字符串
var str = 'hello';
console.log(str.concat(' world')); // hello world去空白
-
trim() ： 删除字符串两端空白
var str = ' a b ';
console.log('(' + str.trim() + ')'); //(a b)-
trimStart() : 删除字符串左端空白
var str = ' a b ';
console.log('(' + str.trimStart() + ')'); //(a b )-
trimEnd() : 删除字符串右端空白
var str = ' a b ';
console.log('(' + str.trimEnd() + ')'); //( a b ) <script>
var str = ' a b ';
//去除所有空白
console.log('(' + str.replaceAll(' ','') + ')');
//去除左右两端的空白
console.log('(' + str.trim() + ')');
//去除左端空白
console.log('(' + str.trimStart() + ')');
//去除右端空白
console.log('(' + str.trimEnd() + ')');
</script>静态方法
-
String.fromCharCode(编码) : 根据编码返回字符
字符串操作相关案例
-
去除字符串中所有的空格。
<script>
//去除字符串中所有的空格。
function fnRemoveAllSpace(str){
while(str.indexOf(' ') !== -1){
str = str.replace(' ','');
}
return str;
}
console.log('(' + fnRemoveAllSpace(' a b ') + ')');
</script>-
去除字符串中左边的空格与右边的空格 “ a b “ “a b” (不能使用trim方法)
<script>
//去除字符串中左边的空格与右边的空格 “ a b “ “a b” (不能使用trim方法)
function fnTrim(str){
//1. 去除左边的空白
while(str.charAt(0) === ' '){
str = str.replace(' ','');
}
//2. 去除右边的空白
var arr = str.split('');
// 找到数组中最后一个元素判断是否为空格
while(arr[arr.length - 1] === ' '){
arr.pop(); //删除数组中后面的元素
}
return arr.join('');
}
console.log('(' + fnTrim(' a b ') + ')');
</script>-
统计出一个字符串中所有大写字母的数量与所有小写字母的数量
<script>
//统计出一个字符串中所有大写字母的数量与所有小写字母的数量
// ch >= 'A' && ch <= 'Z'
// ch >= 'a' && ch <= 'z'
function countNum(str){
//1. 准备两个变量，用于放置结果
var uppercase = 0;
var lowercase = 0;
//2. 遍历字符串
for(var i = 0,len = str.length;i < len;i ++){
//记录每一个字符
var ch = str.charAt(i);
//判断
if(ch >= 'A' && ch <= 'Z'){
uppercase ++;
}else if(ch >= 'a' && ch <= 'z'){
lowercase ++;
}
}
console.log('大写字母有：' + uppercase + '个\n小写字母有：' + lowercase + '个');
}
countNum('How Are You');
</script>-
一次性输入多个成绩
<script>
//一次性输入多个成绩
//一、 获取页面元素
var o_txt = document.getElementById('txt');
var o_btn = document.getElementById('btn');
//二、实现功能
function fn(){
//1. 采集用户信息
// '1,2,3,4,5'
var info = o_txt.value;
//2. 转为数组
var arr = info.split(','); //['1','2','3','4','5']
//3. 求和
var sum = arr.reduce(function(prev,next){
return Number(prev) + Number(next);
})
//4. 将总成绩放到文本框中
o_txt.value = sum;
}
//三、添加事件
o_btn.onclick = fn;
</script>-
影响职业因素
<!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>
</head>
<body>
<h1>影响职业因素</h1>
<p>请输入一个单词： <input type="text" name="" id="txt"></p>
<p>结果： <span id="result"></span></p>
<p>
<input type="button" value="计算" id="submit">
<input type="button" value="清空" id="reset">
</p>
<script>
//影响职业因素,将单词中的每一个字母在字母表中的位置相加。如： abc 1 + 2 + 3 = 6
//一、获取页面元素
//1.1 获取单词的文本框
var o_txt = document.getElementById('txt');
//1.2 获取结果的容器
var o_result = document.getElementById('result');
//1.3 获取计算按钮
var o_submit = document.getElementById('submit');
//1.4 获取清空按钮
var o_reset = document.getElementById('reset');
//二、实现功能
//2.1 求职业因素的功能
function fnJob(){
//0. 准备变量，存储结果
var sum = 0;
var str = '';
//1. 采集用户信息
var info = o_txt.value; //'money'
//2. 字母表
var letter = ' abcdefghijklmnopqrstuvwxyz';
//3. 遍历用户单词
for(var i = 0,infoLen = info.length;i < infoLen;i ++){
//遍历字母表
for(j = 0,letterLen = letter.length;j < letterLen;j ++){
//进行比较
if(info.charAt(i) === letter.charAt(j)){
//求和
sum += j;
//求表达式
str += j + '+'; //1 + 2 + 3 +
}
}
}
//将结果放到页面中
// '1+2+3+' '1+2+3=6'
o_result.innerText = str.slice(0,-1) + '=' + sum;
}
//2.2 清空所有的框
function fnclear(){
o_txt.value = o_result.innerText = '';
}
//三、添加事件
o_submit.onclick = fnJob;
o_reset.onclick = fnclear;
</script>
</body>
</html>字符串的加密解密
<script>
//一、获取页面元素
//1.1 文本框
var o_txt = document.getElementById('txt');
//1.2 加密按钮
var o_secure = document.getElementById('secure');
//1.3 解密按钮
var o_unse = document.getElementById('unsecure');
//1.4 盒子
var o_box = document.getElementById('box');
//二、封装功能
//2.1 加密
function fnSecure(){
//0. 准备一个放置结果的字符串
var str = '';
//1. 采集加密的信息
var info = o_txt.value;
//2. 找到字符串中每一个字符（遍历），获取字符的编码值（charCodeAt) 进行 加一个数 或 减一个数 ，最后将改变后的编码值再转为字符
for(var i = 0,len = info.length;i < len;i ++){
str += String.fromCharCode(info.charCodeAt(i) + 88)
}
//3. 将加密后的内容放到页面中盒子中
o_box.innerText = str;
//4. 清空文本框中的内容
o_txt.value = '';
}
//2.2 解密
function fnUnSe(){
//0. 准备一个解密的的字符串
var str = '';
//1. 采集已加密后的信息
var info = o_box.innerText;
//2. 遍历出每一个加密后的字符，进行还原
for(var i = 0,len = info.length;i < len;i ++){
str += String.fromCharCode(info.charCodeAt(i) - 88);
}
//3. 将解密后的内容放到文本框中
o_txt.value = str;
//4. 清空盒子中的内容
o_box.innerText = '';
}
//三、添加事件
//3.1 加密按钮添加点击事件
o_secure.onclick = fnSecure;
//3.2 解密按钮添加点击事件
o_unse.onclick = fnUnSe;
</script>小结
JavaScript中有许多常用的字符串方法，它们可以帮助你对字符串进行各种操作。以下是一些常见的字符串方法及其简要说明：
-
length
- 用于获取字符串的长度。
-
charAt(index)
- 返回指定索引位置的字符。
-
charCodeAt(index)
- 返回指定索引位置的字符的 Unicode 值。
-
concat(str1, str2, ...)
- 用于连接两个或多个字符串。
-
indexOf(substring, start)
- 返回指定子字符串第一次出现的位置，可指定搜索的起始位置。
-
lastIndexOf(substring, start)
- 返回指定子字符串最后一次出现的位置，可指定搜索的起始位置。
-
slice(start, end)
- 提取字符串的一部分，并返回一个新的字符串，可以指定开始和结束的位置。
-
substring(start, end)
- 类似于slice，不同之处在于当start大于end时会交换参数位置。
-
substr(start, length)
- 从起始索引位置提取指定长度的字符串。
-
toUpperCase()
- 将字符串转换为大写。
-
toLowerCase()
- 将字符串转换为小写。
-
trim()
- 去除字符串两端的空白字符。
-
split(separator)
- 将字符串分割成子字符串数组，可指定分隔符。
-
replace(searchValue, replaceValue)
- 替换字符串中的指定值。
-
match(regexp)
- 检索字符串中指定值，返回匹配的字符串数组。
这些方法只是 JavaScript 中可用的众多字符串方法中的一部分。通过灵活运用这些方法，你可以在处理字符串时更加高效和便捷。
