【JS】Day07

学习内容

• 数组去重
• 声明字符串
• 字符串属性
• 字符串方法
• 字符串加密
• 字符串应用
• eval

数组去重

//
function fnArrNoRepeat(arr){
    //indexOf() : 查找
    //创建一个空数组
    var list = [];
    //遍历原始数组
    arr.forEach(function(item){
        //在空数组中查找遍历出来的每一个元素
        if(list.indexOf(item) === -1){
            //如果这个数组中没有找到，则将这个元素添加到这个数组中。
            list.push(item);
        }
    })
    return list;
}
console.log(fnArrNoRepeat([1,2,1,2,2,1,1,3]));

//
function fnArrNoRepeat02(arr){
    //遍历数组
    for(var i = 0,len = arr.length;i < len;i ++){
        for(var j = i + 1;j < arr.length;j ++){ // i = 2 j = 3
            if(arr[i] === arr[j]){  // [1,2,3]
                arr.splice(j,1);
                j --;
            }
        }
    }
    return arr;
}
console.log(fnArrNoRepeat02([1,2,1,2,2,1,1,3]));

//
function fnArrNoRepeat03(arr){
    //空数组
    var list = [];
    //原始数组进行排序
    arr.sort(function(a,b){return a-b;});
    arr.forEach(function(item,index,arr){
        if(item !== arr[index + 1]){
            list.push(item);
        }
    })
    return list;
}
console.log(fnArrNoRepeat03([1,2,1,2,2,1,1,3]));

//
function fnArrNoRepeat04(arr){
    return [... new Set(arr)];
}
console.log(fnArrNoRepeat04([1,2,1,2,2,1,1,3]));

声明字符串

//字面量方式: '' ""
var str = 'hello';
//构造函数方式: new String()
var o_str = new String('world');
console.log(typeof str,typeof o_str); //'string' 'object'

字符串属性

//length : 长度
var str = '中华人民共和国';
        console.log(str.length); //7

字符串方法

//查
//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

//lastIndexOf('字符串',start) : 查找子串在父串中从右向左查找第一次出现的下标位置，如果没有找到，返回 -1
var str = 'how do you do';
console.log(str.lastIndexOf('do')); //11
console.log(str.lastIndexOf('do',12)); //11
console.log(str.lastIndexOf('do',11)); //11
console.log(str.lastIndexOf('do',10)); //4

//charAt(index): 根据下标查找字符
console.log(str.charAt(4)); //'d'
遍历字符串
for(var i = 0,len = str.length;i < len;i ++){
    console.log(str.charAt(i));
    // console.log(str[i]);
}

//charCodeAt(index): 根据下标查找字符编码
for(var i = 0,len = str.length;i < len;i ++){
    console.log(str.charAt(i) + ':' + str.charCodeAt(i));
}

var str = '呵呵';
var ss = '';
for(var i = 0,len = str.length;i < len;i ++){
    ss += String.fromCharCode(str.charCodeAt(i) + 1);
}
alert(ss);

//中文
var str = '';
for(var i = 19968;i <= 40869;i ++){
    str += String.fromCharCode(i) + ' ';
}
document.write(str);

//替
//replace(旧串，新串): 替换字符串
//声明字符串
var str = 'how do you do';
console.log(str.replace('do','de'));
console.log(str.replace('do','de'));
//如何替换全部
while(str.indexOf('do') !== -1){
    //因为replace方法不改变原字符串，所以每一次替换的都是第一个，造成了死循环。
    //人为的让它改变原字符串，怎么改？将替换后的字符串赋值给原始字符串。
    // 'how de you do'
    str = str.replace('o','e');
}
console.log(str);

//截
//substring(start,end): 从哪截取到哪，支持参数互换、不支持负数
//substr(start,length)：从哪截至多少个
//slice(start,end)：从哪截取到哪，不支持参数互换、支持负数
var str = 'good good study,day day up';
console.log(str.substring(5));  //'good study,day day up'
console.log(str.substr(5));  //'good study,day day up'
console.log(str.slice(5));  //'good study,day day up'

console.log(str.substring(5,9));  //'good'
console.log(str.substr(5,9));  //'good stud'
console.log(str.slice(5,9));  //'good'

console.log(str.substring(9,5)); //'good'
console.log(str.slice(9,5)); //''

console.log(str.substring(-9,-5)); //''
console.log(str.slice(-9,-5)); //'ay d'

//转
//toUpperCase(): 将小写转为大写字母
//toLowerCase(): 将大写转为小写字母
var str = 'How Are You';
console.log(str.toUpperCase()); //'HOW ARE YOU'
console.log(str.toLowerCase()); //'how are you'

//split('切割符',length): 将字符串切割为数组
var arr = str.split(' ');
console.log(arr); //['How','Are','You']
var list = str.split('',30); // ['H', 'o', 'w', ' ', 'A', 'r', 'e', ' ', 'Y', 'o', 'u']
console.log(list);
var array = str.split('o'); //['H','w Are Y','u']

//拼
//concat(): 合并字符串
var str = 'hello';
console.log(str.concat(' world'));

//去空白
//trim(): 删除字符串两端空白
//trimStart(): 删除字符串左端空白
//trimEnd(): 删除字符串右端空白
var str = '        a      b      ';
console.log(str.trim(str));
console.log('(' + str.trim(str) + ')');
console.log('(' + str.trimStart(str) + ')');
console.log('(' + str.trimEnd(str) + ')');

字符串加密

//一、获取元素对象
// document.getElementById(id名)
var o_txt = document.getElementById('txt');
// alert(o_txt);
var o_secure = document.getElementById('secure');
var o_unse = document.getElementById('unsecure');
var o_div = document.getElementById('box');
//二、封装功能
//加密
function fnSecure(){
    //1. 获取输入的内容
    var content = o_txt.value;
    //空变量，接收加密后的内容
    var str = '';
    //2. 遍历内容中的每一个字符
    for(var i = 0,len = content.length;i < len;i ++){
        str += String.fromCharCode(content.charCodeAt(i) + 666);
    }
    //3. 加密后的内容放到盒子中
    o_div.innerText = str;
    //4. 清空文本框
    o_txt.value = '';
}
//解密
function fnUnSecure(){
    //1. 获取盒子中的加密内容
    var content = o_div.innerText;
    //空变量，接收解密后的内容
    var str = '';
    //2. 遍历内容中的每一个字符
    for(var i = 0,len = content.length;i < len;i ++){
        str += String.fromCharCode(content.charCodeAt(i) - 666);
    }
    //3. 加密后的内容放到盒子中
    o_txt.value = str;
    //4. 清空盒子
    o_div.innerText = '';
}
//三、添加事件
//调用函数：
//1. 函数名()
//2. 事件触发调用函数。
o_secure.onclick = fnSecure;
o_unse.onclick = fnUnSecure;

字符串应用

//声明字符串
var str = '    a    b    ';

while(str.indexOf(' ') !== -1){
    str = str.replace(' ','');
}
console.log('(' + str + ')');

//去除字符串中左边的空格与右边的空格 “     a     b     “  “a  b”  (不能使用trim方法)
function fnTrim(str){
    //先去掉左边空白
    while(str.charAt(0) === ' '){ //“a     b     “
        str = str.replace(' ','');
    }
    //再去掉右边空白
    //转为数组
    var arr = str.split('');
    while(arr[arr.length - 1] === ' '){
        arr.pop();
    }
    return arr.join('');
}
console.log('(' + fnTrim('    a     b     ') + ')')
</script>

//统计出一个字符串中所有大写字母的数量与所有小写字母的数量
//有一个字符串
//遍历出第一个字符
//ch >= 'a' && ch <= 'z'
//ch >= 'A' && ch <= 'Z'
function fn(str){
    //未统计之前，数量为0
    var uppercase_count = 0;
    var lowercase_count = 0;
    //遍历原始字符串
    for(var i = 0,len = str.length;i < len;i ++){
        //取出一个字符
        var ch = str.charAt(i);
        //判断这个字符是否为小写
        if(ch >= 'a' && ch <= 'z'){
            //如果是小写，就 + 1
            lowercase_count ++;
        }else if(ch >= 'A' && ch <= 'Z'){ //判断这个字符是否为大写
            //如果是大写，就 + 1
            uppercase_count ++;
        }
    }
    console.log('大写字母有：' + uppercase_count + '\n小写字母有：' + lowercase_count);
}
fn('How Are You');

//一次性输入多个成绩
//一、获取页面元素对象
var o_txt = document.getElementById('txt');
var o_btn = document.getElementById('sum');
//二、实现功能
function fn(){
    //1. 采集用户输入的信息
    var content = o_txt.value;   //'1,2,3,4'
    //2. 转为数组，以逗号切割
    var arr = content.split(','); //['1','2','3','4']
    //3. 数组中求和的方法reduce
    var sum = arr.reduce(function(a,b){
        return Number(a) + Number(b);
    })
    //4. 将sum放到页面中
    o_txt.value = sum;
}
//三、添加事件
//o_btn: 元素对象
//click: 点击事件(名词)
//onclick: 事件驱动(动词)
//fn: 事件处理程序（触发事件了，会执行什么）
o_btn.onclick = fn;

o_btn.onclick = function (){
    //1. 采集用户输入的信息
    var content = o_txt.value;   //'1,2,3,4'
    //2. 转为数组，以逗号切割
    var arr = content.split(','); //['1','2','3','4']
    //3. 数组中求和的方法reduce
    var sum = arr.reduce(function(a,b){
        return Number(a) + Number(b);
    })
    //4. 将sum放到页面中
    o_txt.value = sum;
}

//影响职业因素
//技术   学历   颜值  运气  智商  情商  钱   态度
//这个单词中的每一个字母在26个字母表中的位置 进行相加
//如： abc   1 + 2 + 3 = 6
//一、获取页面元素对象
//文本框
var o_txt = document.getElementById('txt');
//计算按钮
var o_btn = document.getElementById('btn');
//清空按钮
var o_reset = document.getElementById('reset');
//盒子
var o_div = document.getElementById('box');
//二、实现功能 
function fn(){
    //1. 采集用户输入的单词
    var content = o_txt.value;
    //2. 创建一个字母表
    var letter = ' abcdefghijklmnopqrstuvwxyz';
    //2.1 和
    var sum = 0;
    //2.2 表达式
    var str = '';
    //3. 遍历单词
    for(var i = 0,len = content.length;i < len;i ++){
        //遍历字母表
        for(var j = 0;j < letter.length;j ++){
            //判断是否相等
            if(content.charAt(i) === letter.charAt(j)){
                //求和
                sum += j;
                //连接表达式
                // str += '+' + j; // '+1+2+3'
                str += j + '+'; //'1+2+3+'
            }
        }
    }
    //结果放到页面中
    o_div.innerText = str.slice(0,-1) + '=' + sum;
}
//清空功能
function fnClear(){
    o_txt.value = o_div.innerText = '';
}
//三、添加事件
o_btn.onclick = fn;
o_reset.onclick = fnClear;

eval

//eval() : 将字符串解析为表达式，并返回结果
var str = 'a + 1';   a + 1
console.log(eval(str));