字符串对象、数组对象

最新推荐文章于 2023-04-26 15:30:59 发布

h54211

最新推荐文章于 2023-04-26 15:30:59 发布

阅读量180

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/h54211/article/details/128243957

版权

1、字符串对象

（1）创建

字面量创建

var str = '1234'

new关键词创建

var str1 = new String('1234')

(2)字符串属性

字符串.length 长度

(3)字符串方法

（1）字符串.charAt(下标) 查找某个下标对应的字符哪个

（2）字符串.charCodeAt(下标) 查找某个下标对应的字符的编码哪个

(3)字符串.indexOf(字符[,从哪个下标开始查询]) 查找某个字符串在另一个字符串中首次出现的位置，如果找到了返回对应的下标，没有找到返回-1

     (4)字符串.lastIndexOf(字符[,从哪个下标开始查询]) 查找某个字符串在另一个字符串中最后一次出现的位置，如果找到了返回对应的下标，没有找到返回-1

                 （5）字符串.substring(start,end)

字符串从下标为start这开始截取，到end的位置(不包含)结束

（6）字符串.slice(start,end)

字符串从下标为start这开始截取，到end的位置(不包含)结束

（7）字符串.substr(start,要截取几位)

字符串从下标为start这开始截取,截几位

（8）、大小写转换

字符串.toUpperCase()

字符串.toLowerCase()

  （9）、替换

字符串.replace(需要替换的字符串,替换成什么) 只能替换一次

（10）、去掉字符串的首尾空格

          字符串.trim()

(11、字符串分割

  字符串.split(以什么标识来分割) 返回的是分割后的数组

查询案例

<!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>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active {
            background-color:  yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName('box')[0]
        //看看box身上有没有active这个类名，有就不用加了，没有就加上active
        if(box.className.indexOf('active') == -1) {
            //没有
            box.className = 'box active'
        }else {
            box.className = 'box'
        }
    </script>
</body>
</html>

截取案例

<script>
        var str = 'hello world'
        console.log(str.substring(2));   //从第二位开始截取，一直截到末尾
        console.log(str.substring(2,4));   //从第二位开始截取，一直截到第4位（不包含第4位）

        console.log(str.slice(2));   //从第二位开始截取，一直截到末尾
        console.log(str.slice(2,4));   //从第二位开始截取，一直截到第4位（不包含第4位）

        console.log(str.substring(2,0));   // 自己换了一下位置 0-3（不包含3）
        console.log(str.slice(2,0));

        console.log(str.substring(2,-2));   // 负数默认是0
        console.log(str.slice(2,-1)); //llo worl    负数是从后往前的倒数第几位
        
        console.log(str.substr(2,4));
    </script>

// 检测数据类型 typeof如果是null、array、object得到的结果都是object

 //检测具体是什么数据类型
<script>
console.log(Object.prototype.toString.call(undefined)); console.log(Object.prototype.toString.call(function 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>
    <input type="text" placeholder='请输入手机号码'>
    <button>确定</button>
    <div class="box"></div>
    <script>

        //用户输入了一个手机号码，将中间的四位替换成****在显示出来
        var inp = document.getElementsByTagName('input')[0]
        var btn = document.getElementsByTagName('button')[0]
        var box = document.getElementsByClassName('box')[0]

        var tel = '18391841847'
        var reStr = tel.substring(3,7)
        console.log(reStr);
        console.log(tel.replace(reStr,"****"));

    </script>
</body>
</html>

json字符串

<!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>
    <form action="#">
        <input type="text" name="username">
        <input type="password" name="userpass">
        <input type="submit" value="提交">
    </form>
    <script>
        var json =  {
            'username':12345,
            'userpass':2345678
        }
        console.log(json);
        var str =  JSON.stringify(json)
        console.log(str,typeof str); //json字符串

        //将json字符串还原成json对象
        var json2 = JSON.parse(str)
        
        console.log(str['username']);
        console.log(json2['username']);
        console.log(json2.username);
    </script>
</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>
</head>
<body>
    <script>
        var str = 'abcdaaabbbccdde'  
        //结果 abcde
            // 思路： 
            //在新的字符串中找找看有没有刚才拿到的这一项，没有就放入新的字符串中
            // 输出新字符串  
           //新的字符串
        var newStr = ''
        for(var i = 0;i<str.length;i++) {
            // 先循环str,拿到字符的每一个 
            var a = str[i]
            console.log(a);
            if(newStr.indexOf(a) == -1) {
                newStr += a
            }
        }
        console.log(newStr);
        for (var i = 0; i < newStr.length; i++) {
        var count = 0;
        for (var j = 0; j < str.length; j++) {
            //判断newStr里的元素是否等于str里的元素 如果相等 则次数加1
            if(newStr[i]==str[j]){
                count++;
            }
        }
        console.log(newStr[i],count);
    }
    </script>
</body>
</html>

数组对象

1、数组

（1）创建

new关键词 new Array(10)

字面量

(2) 数组的属性

数组.length

(3) 遍历数组

for(var i = 0;i<arr.length;i++) {

console.log(arr[i])

}

(4) 数组的方法

查找某个数组元素首次出现的位置

数组.indexOf(要查找的东西,从哪个下标开始查找)

添加、删除

数组.push() 数组的末尾追加

数组.pop() 数组的末尾删除

数组.unshift() 数组的开头添加

数组.shift() 数组的开头删除

数组.splice(开始删除的下标位置,删除的个数，替换的内容) 添加、删除、替换

截取数组

数组.slice(开始截取的下标位置,结束截取的下标位置) 不包含结束位置

组合

数组.join(标识) 组合成一个新的字符串

数组.concat(内容) 组成一个新的数组

数组.reverse() 反转，返回值是反转后的数组

排序

数组.sort(function(a,b){

//return a-b //从小到大

return b-a //从大到小

return 0.5 - Math.random() //随机排序

})

h54211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字符串对象、数组对象

（1）创建字面量创建new关键词创建(2)字符串属性字符串.length 长度(3)字符串方法（1）字符串.charAt(下标) 查找某个下标对应的字符哪个（2）字符串.charCodeAt(下标) 查找某个下标对应的字符的编码哪个(3)字符串.indexOf(字符[,从哪个下标开始查询]) 查找某个字符串在另一个字符串中首次出现的位置，如果找到了返回对应的下标，没有找到返回-1。
复制链接

扫一扫