【学习笔记27】JavaScript字符串方法的练习

---

笔记首发

一、统计字符串中每个字符出现的次数(以对象的形式记录)

1、拿到字符串所有的值

        var str = 'aaabbccdddeeee';
​
        // 定义变量 存储数据
        var obj = {};
​
        // 循坏遍历 拿到字符串所有的值
        for (var i = 0; i < str.length; i++) {
​
            // 当obj中为undefined时 将数值写入obj中
            if (obj[str[i]] == undefined) {
​
                obj[str[i]] = 1;
            }
            console.log(`当前 i == ${i}; str[i] == ${str[i]}`, obj);
        }
        console.log(obj);

2、累加统计次数

        var str = 'aaabbccdddeeee';
​
        // 定义变量 存储数据
        var obj = {};
​
        // 循坏遍历 拿到字符串所有的值
        for (var i = 0; i < str.length; i++) {
​
            // 当obj中为undefined时 将数值写入obj中
            if (obj[str[i]] == undefined) {
​
                obj[str[i]] = 1;
            }else{
                // 累加统计字数
                obj[str[i]]++;
            }
            // console.log(`当前 i == ${i}; str[i] == ${str[i]}`, obj);
        }
        console.log(obj);

3、小优化

                /*  解释说明
                    if(obj[a] === undefined){ true  
                        // undefined的布尔值是false    
                        // !undefined=true   !obj[str[i]]=true

                        obj[str[i]] = 1;
                    }else{  false
                        obj[str[i]]++;
                    }
                */

        var str = 'aaabbccdddeeee';
​
        // 定义变量 存储数据
        var obj = {};
​
        // 循坏遍历 拿到字符串所有的值
        for (var i = 0; i < str.length; i++) {
​
            // 当obj中为undefined时 将数值写入obj中
            // if (obj[str[i]] == undefined) {
            if (!obj[str[i]]) {
                
                obj[str[i]] = 1;
            } else {
                // 累加统计字数
                obj[str[i]]++;
            }
            // console.log(`当前 i == ${i}; str[i] == ${str[i]}`, obj);
        }
        console.log(obj);

二、反转字符串

1. 转化为数组 字符串.split(分隔符)
2. 反转数组
3. 将数组的每一项合并为一个字符串

        var str = 'aabbccdd';
        console.log('原字符串：', str);
​
        // split 分割
        var str1 = str.split('');
        console.log(str1);
​
        // reverse 反转
        var str2 = str1.reverse();
        console.log(str2);
​
        var str3 = str2.join('');
        console.log('反转字符串：',str3);

优化代码

    var str = 'aabbccdd';
    var str1 = str.split('').reverse().join('');
    console.log(str1);

三、替换违禁词

1、需求:将字符串中的’6666’, 替换为 “****”

• 查找字符串中是否拥用 ‘6666’ ，( includes)
• 将其替换掉 “” (replace)

        var str = '66661234666612347771234777';
        console.log('原字符串', str);
​
        // 判断是否满足条件
        while (str.includes('6666')) {
​
            str = str.replace('6666', '****');
        }
        console.log('替换字符串', str);

2、需求: 批量替换违禁词 [‘6666’, ‘777’]

        var str = '66661234666612347771234777';
        console.log('原字符串', str);
    
        // 定义变量 存储要替换的违禁词
        var arr = ['6666', '777'];
        
        // for循坏遍历
            for (var i = 0; i < arr.length; i++) {
            while (str.includes(arr[i])) {
​
                str = str.replace(arr[i], '****')
            }
        }
        console.log('替换字符串', str);
​
        // forEach循坏遍历
        arr.forEach(function (item) {
            while (str.includes(item)) {
                
                str = str.replace(item, '****')
            }
        })
        console.log('替换字符串', str);

四、查询字符串

1. 查询字符串 (约定)
   • 数字字符串 ‘1234567’
   • 标签字符串 ‘<div></div>’
2. 查询字符串：‘key=value’
3. 多个查询字符串：‘key=value;key1=value1;key2=value2’

1、模拟一个查询字符串

• 需求:将查询字符串转换为对象格式

2、分析

• 拿到字符串中所有的key
• 拿到字符串中所有key对应的value

4、逻辑

• 将字符串分隔为key=value (分隔完应该有3个)
• 拿到每一个key添加到对象中, 并且给值赋值为对应的value

方法一：for循坏

        // 模拟一个查询字符串
        var str = 'username=QF;age=18;abc=123'
        console.log('原字符串：', str);
​
        // 定义变量 存储数
        var obj = {};
​
        var arr = str.split(';');
        console.log('分号分割字符串：', arr);
​
        // 循坏遍历
        for (var i = 0; i < arr.length; i++) {
            // 等号分割字符串
            var newArr = arr[i].split('=');
            console.log('等号分割字符串：', newArr);
​
            var key = newArr[0]
            var value = newArr[1]
            // console.log(key, value)
            obj[key] = value
        }
        console.log(obj);

最终代码

        // 模拟一个查询字符串
        var str = 'username=QF; age=18;abc=123';
        console.log(str);

        // 定义变量 存储数据
        var obj = {};

        // 分号分割字符串
        var arr = str.split(';');

        // 循坏遍历 
        for (var i = 0; i < arr.length; i++) {
            // 等号分割字符串
            var newArr = arr[i].split('=');

            var key = newArr[0];
            var value = newArr[1];
            obj[key] = value;
        }
        console.log(obj);

方法二：forEach循坏

        // 模拟一个查询字符串
        var str = 'username=QF;age=18;abc=123'
        console.log('原字符串：', str);
​
        // 定义变量 存储数
        var obj = {};
​
        var arr = str.split(';');
        console.log(arr);
​
        arr.forEach(function (item) {
            //等号分割字符串
            var newArr = item.split('=')
            // var key = newArr[0]
            // var value = newArr[1]
            // obj[key] = value
            
            obj[newArr[0]] = newArr[1]
        })
​
        console.log(obj)

五、将对象转为查询字符串格式

        var obj = {
            username: 'QF',
            age: 18,
            abc: 124
        };
        console.log('原对象：', obj);
​
        var newStr = '';
        for (var key in obj) {
            // 累加键值对
            newStr += 'key' + '=' + obj[key] + ';';
            console.log(newStr);
        }
        // 字符串.slice(开始下标, 结束下标)
        newStr = newStr.slice(0, newStr.length - 1);
        console.log('查询字符串：', newStr);