ES5新增数组api,字符串（创建，长度，api），ascii码

01.es5新增数组api

1.arr.indexOf(v);

a:第一次出现的下标

b:两个参数，后面参数代表从哪个下标开始查找

c：如果不存在，返回的为-1；

//数组去重
//用一个临时的数组，和传递过来的数组里面的每一项比较
//如果临时数组.indexOf(传递过来的数组的数组项)，如果值为-1，（说明临时数组里没有那一项），把传递的数组里面的某一项push到临时数组里面
var arr = [1,3,4,5,5,6,3,6];
function norepeat2(arr){
    var tempArr = [];
    for(var i = 0 ; k = arr.length ; i < k ; i++){
        if(tempArr.indexOf(arr[i]) = -1){
            tempArr.push(arr[i]);
        }
    }
    return tempArr;
}
console.log(norepeat2(arr)); // (5) [1, 3, 4, 5, 6]

2.arr.lastIndexOf();

a:从后往前找，返回的也是下标

b：接受两个参数，第二个参数，从哪个下标开始

//案例：检测数组中没有重复的数组项
var arr = [1,3,4,5,5,6,3,6];
for(var i = 0 ; j = arr.length ; i < j ; i++){
    if(arr.indexOf(arr[i]) == arr.lastIndexOf(arr[i])){
        console.log(arr[i]);   //[1,4]
    }
}

3.forEach

语法：
arr.forEach(function(value,index,arr){
​
•   //varlue  数组项
​
•   //index 下标
​
•   //arr 数组本身
​
})

var sum = 0;
        arr.forEach(function(value,index,arr){
            //console.log(value);   //1 3 4 5 5 6 3 6 遍历数组里面的所有的值
            //console.log(index);   //0 1 2 3 4 5 6 7
            sum += value;
        })
        console.log(sum);   //33

4.map

var arr = [1,3,4,5,5,6,3,6];
var arr1 = arr.map(function(value,index,arr){
    return value + 1; //把数组的每一项加1，然后映射到一个新的数组，不影响原数组
})
console.log(arr1);   //[2, 4, 5, 6, 6, 7, 4, 7]
console.log(arr);    //[1,3,4,5,5,6,3,6]

5.reduce

语法：
arr.reduce(function(acc,value,index,arr){
    //累加器
    //value 数组的每一值
    //index  下标
    //arr 数组的本身
    
    return acc + value ; //累加
    return acc - value ; //累减
    return acc * value ; //累乘
    return acc / value ; //累除
})

6.filter

arr.filter(function(value,index,arr){
    //过滤条件
})

对以上api的简单测试与分析

//indexOf和lastIndexOf
var arr = [1,3,4,5,5,6,3,6];  
console.log(arr.indexOf(1));    //0
console.log(arr.indexOf(3,4));   //6   从下标为4开始，找第一个3，返回该数的下标
console.log(arr.lastIndexOf(5));   //4
console.log(arr.lastIndexOf(1));  //0
console.log(arr.lastIndexOf(3,5));   //1
console.log(arr.lastIndexOf(7,3));   //-1   从下标3开始，从后往前找第一个7，不存在，返回-1
​
//map
var arr2 = arr.map(function(value,index,arr){
    return value + 1;    //[2, 4, 5, 6, 6, 7, 4, 7]   //给数组项的每一项加1
    //return index + 1;   //[1,2,3,4,5,6,7,8]  //索引（下标加1）
});
console.log(arr2);
​
//reduce
var res =arr.reduce(function(acc,value,index,arr){  //acc累计器
    //return acc + value;   //33
    //return acc - value;   //-31
    //return acc * value;   //32400
    return acc / value;   //0.0000308641975308642
});
console.log(res);  
​
//filter
var res = arr.filter(function(value,index,arr){
    return value > 3;
});
console.log(arr,res);    //(8) [1, 3, 4, 5, 5, 6, 3, 6] (5) [4, 5, 5, 6, 6]
​
//forEach
var sum = 0;
arr.forEach(function(value,index,arr){
    //console.log(value);   //1 3 4 5 5 6 3 6 遍历数组里面的所有的值
    //console.log(index);   //0 1 2 3 4 5 6 7
    sum += value;
})
console.log(sum);   //33

02.字符串

1.创建字符串的方法

字面量：

var str = "";

var str = String();

构造函数方法：

var str = new String();

注：console.log(typeof(str)); //object （new了一个内部对象）

2.字符串的长度

str.length;

练习：
1.判断用户名是否正确 6-10
<input type="text" id="userName">
<span id = "txt"></span>
<script>
    userName.oninput = function(){
            //console.log(this);   //id为userName的input
            if(this.value.length >= 6 && this.value.length <= 10){
                txt.innerHTML = '用户名长度正确';
            }else{
                txt.innerHTML = '用户名长度不合法';
            }
        }
<script>
2.检测留言板中的字符数量（oninput事件，时刻监听文本框是否发生变化。元素.oninput）
<style>
    textarea{
        500px;
        height:300px;
        resize:none; /*禁止用户拖拽*/
        font-size:22px;
    }
    #num{
        color:red;
    }
</style>
​
<textarea name="" id="txt"></textarea>
<span id="info">剩余字符数量<em id="num">200</em>个</span>
<script>
    txt.oninput = function(){
            var valLength = txt.value.length;
            num.innerHTML = 200 - valLength;
            if(valLength >= 200){
                txt.disabled = 'disabled';   //禁用input元素，被禁用的用户不可点击，也不可用
            }
        }
<script>

03.字符串api

1.字符串.charAt(index)

根据下标获取字符串的某一个字符

2.字符串.indexOf("")

查询字符在字符串中第一次出现的下标（如果没有找到，返回-1），如果是两个参数，第二个参数代表的是从第几个查找

3.字符串.lastIndexOf("")

查找字符在字符串中最后一次出现的位置

4.字符串.substring(start,end)

字符串的截取（从start开始截取到end，不包括end）(不操作原字符串)

注：如果start等于end，substring返回一个空字符串

如果省略end,substring提取字符一直到字符串末尾

如果任一参数小于0 或者为NaN，则被当做0

如果任一参数大于str.length，则被当做str.length.

如果start大于end，则substring的执行效果就像两个参数调换了一样。

5.字符串.slice(start,end)

字符串的截取（从start开始截取到end)(接受一个负的参数，-1代表从最后一个开始)(不操作原字符串) str.slice(-3,-1)倒数第三个不包括倒数第一个

6.字符串.substr(start,length)

从start开始截取长度为length的部分。（如果参数是一个的情况下，是删除几个字符）（不操作原字符串）

7.字符串.split(分割符)

字符串翻转（转数组，数组翻转再赋值给字符串）（不操作原字符串）

8.字符串.replace(old,newStr)

替换字符，不改变原字符串，返回新字符串，每次只能替换一个

对字符串api的简单测试与分析

//substring(start,end)
var str = 'diaonfjhdhjf';
console.log(str.substring(3,2));     //a（如果start大于end，则substring的执行效果就像两个参数调换了一样。）
console.log(str.substring(3,6));  //onf  从下标3开始截取到下标为6，不包括下标6
//substr(start,length)
var str = 'koafjsgjdkf';
console.log(str.substr(3,5));   //fjsgj  从下标为3开始，截取长度为5个
console.log(str.substr(3));   //fjsgjdkf   当参数为一个的时候，代表从前往后删除3个字符

​
//slice
var str = 'ksofnkhgdhfnsg';
console.log(str.slice(-3,-1));    //ns  从倒数第三位开始，到倒数第一位，不包括倒数第一个（注：其它的是由下标决定，当为负值的时候这个代表的是位置）
console.log(str.slice(3,7));    //fnkh  从下标为3开始，截取到下标为7，不包括7.
​
//charAt(i);  i为下标
var str = 'ksfsdk';
for (var i = 0; i < str.length; i++) {
    //console.log(str.charAt(i));    // ksfsdk
    console.log(str[i]);   // ksfsdk 
}
​
//replace();  每次只能替换一个，如果要将所有的都替换，需要用循环
var str = 'wwwwdwedwderwer';
console.log(str.replace('w','s'));   //swwwdwedwderwer  每次只能替换一个
for (var i = 0; i < str.length; i++) {
    //str = str.replace('w','s');    将所有的w替换成s   
    str = str.replace('wd', '*');  //www*wed*erwer  replace不操作原数组，所以，将替换了的数组，再重新赋值给原数组，就能改变多个字符
}
console.log(str);   //sssssseserser
​
//split();截取
//取cookie里面的1557282068
var str = 'BAIDUID=9FF0B8AA8FC08CF64DD8378684FCC8C8:FG=1; PSTM=1557282068; BIDUPSID=2CF37A79FA3C0115B2D5D9E5571F67D9; BD_UPN=12314753; MCITY=-131%3A; H_WISE_SIDS=125704_133106_128700_133850_106370_133676_120170_134720_132909_133043_131247_132440_130762_132378_131518_118884_118861_118839_118834_118795_107319_132781_134391_133351_134855_132553_129656_134434_132250_127027_131861_128968_133473_133838_133847_132551_134462_134319_133577_134213_129644_131423_134608_134601_110085_134153_127969_131296_128201_134150_134231_134655_134298_134354; ispeed_lsm=2; sug=3; sugstore=0; ORIGIN=0; bdime=0; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; delPer=0; BD_HOME=0; H_PS_PSSID=1423_21091_29522_29520_29721_29567_29221_29461_28701';
//split将字符串转成数组
var newStr = str.split('; ');  //以; 为分割符，将字符串分割成数组
//console.log(newStr);   //转成了数组的形式
console.log(newStr[1]);  //PSTM=1557282068
//以=为分割，分割成数组，取下标为1的数组，就得到了想要的结果
console.log((newStr[1].split("="))[1]);   //1557282068

　　// var arr = [2323,23,2,2,4];

        // // arr.splice(0);

        // // console.log(arr);    //[]  代表从下标为0开始删除，删除到最后一个，改变原数组，所以，把所有的都删除了

        // var arr1 = arr.splice(0);   //将原数组都截取出来存放在arr1里面

        // console.log(arr1);

        // var arr = [1,2,3,4];

        // arr.splice(1,0,[1,2,3,4],5);

        // console.log(arr);   //[1,[1,2,3,4],5,2,3,4] 

        /*

            解析:arr.splice(1,0,[1,2,3,4]);

            console.log(arr);   //[1,Array(4),2,3,4]   从下标为1，删除0个，插入数组[1,2,3,4];得到结果

            arr.splice(1,0,[1,2,3,4],5);

            console.log(arr);   //[1,Array(4),5,2,3,4]   从下标为1，删除0个，将数组[1,2,3,4],5插入到1的位置，得到结果

        */

        // var arr = [1,2,3,4];

        // console.log(arr.join('0'));    //1020304

        // console.log(arr.join('0').split(''));  //["1","0","2","0","3","0","4"]

04.字符串案例

//str.charAt(下标);应用
1.判断字符串的首字母是否大写
var str = 'Aihaopld';
var firstLetter = str.charAt(0);
if(firstLetter >= 'A' && firstLetter <= "Z"){
    console.log('大写');     //大写
}else{
    console.log('false');
}
2.任意给定的一串字母，统计字符串里面的大写字母和小写字母的个数
var
str = 'rrrpppKKKddK',
    upperCase = 0,
    lowerCase = 0;
for(var i = 0 ; i < str.length ; i++){
    if(str.charAt(i) >= 'A' && str.charAt(i) <= 'Z'){
        upperCase++;
    }else{
        lowerCase++;
    }
}
console.log('大写' + upperCase + ' ,小写 '+ lowerCase);    //大写4 ,小写 8
​
//str.indexOf()和str.lastIndexOf()的应用
3.判断密码中是否含有特殊字符  #$%^&*;
var special = '#$%^&@';
var pwd = 'jinwfkanfk@ko#$%';
for(i = 0 ; i < special.length ; i++){
    if(pwd.indexOf(special.charAt(i)) != -1){
        console.log("有特殊字符");
        break;
    }
}
4.字符串去重
var str = 'aadddggiengiew';
var tempStr = '';
for(var i = 0 ; i < str.length ; i++){
    if(tempStr.indexOf(str.charAt(i)) == -1){
        tempStr += str.charAt(i);
    }
}
console.log(tempStr);     //adgienw
5.判断字符串中的某个字符是不是唯一的
var str = 'dsifisewifsfkskgk';
function onlyLetter(str,letter){
    if(str.indexOf(letter) == str.lastIndexOf(letter)){
        console.log(letter + '唯一的');
    }else{
        console.log(letter + '有重复');
    }
}
onlyLetter(str,'d');   //d唯一的
6.从字符串中找出没有重复的字符
var str = 'fkaofjifjdjg';
function strNorepeat(str){
    var strTemp = '';
    for(var i = 0 ; i < str.length ; i++){
        if(str.indexOf(str.charAt(i)) == str.lastIndexOf(str.charAt(i))){
            strTemp += str.charAt(i);
        }
    }
    return strTemp;
}
console.log(strNorepeat(str));    //kaoidg

05.敏感词过滤

将敏感词用*代替
分析：
    给按钮绑定单击事件
    获取文本框里面的value
    过滤里面的信息(敏感词汇)
    把过滤后的信息放在div里面
<style>
        *{
            margin:0;
            padding:0;
        }
        #txt{
           display:block;
           500px;
           height:50px;
           margin:100px auto; 
        }
        #btn{
            display:block;
            margin:0 auto 50px;
            100px;
            height:30px;
        }
        #box{
            500px;
            font-size:20px;
            color:red;
            margin:0 auto;
        }
</style>
​
<!-- autocomplete = "off" 关闭自动提示功能 -->
<input type="text" id="txt" autocomplete = "off">
<button id="btn">发送</button>
<div id="box"></div>
<script>
//方法一：replace
var special = ['fuck','md','kao','laji'];
btn.onclick = function(){
    var txtValue = txt.value;
    //过滤
    for(var i = 0 ; i < special.length ; i++){
        for(var k = 0 ; k < txtValue.length ; k++){
            //由于replace不能改变原字符串，所以需要重新给它赋值
            txtValue = txtValue.replace(special[i],'*');
        }
    }
    box.innerHTML = txtValue;
}
//方法二：正则表达式
var special = ['fuck','md','kao','laji'];
btn.onclick = function(){
    var txtValue = txt.value;  //获取文本框的信息
    for(var i = 0 ; i < special.length ; i++){
        var reg = new RegExp(special[i],"g");  //正则表达式  g匹配全局
        //循环遍历敏感词
        txtValue = txtValue.replace(reg,'*');
    }
    box.innerHTML = txtValue;
}
</script>

06.验证密码强度

<script>
    /*
            i.长度为6-16
            ii.全是数字 提示弱
            iii.含有特殊字符（！！@#等）  提示强
            iv.否则提示中
    */
    var special = '@#$%^&*';
//找到页面中的元素，然后绑定事件(oninput事件，时刻监听文本框是否发生变化。元素.oninput)
pwd.oninput = function(){
    var pwdVal = pwd.value;
    if(pwdVal.length < 6 || pwdVal.length > 16){
        return txt.innerHTML = '密码长度不合法';
    }
    if(Number(pwdVal) == pwdVal){
        return txt.innerHTML = '密码强度弱';
    }
    for(var i = 0 ; i < special.length ; i++){
        if(pwdVal.indexOf(special[i]) != -1){
            return txt.innerHTML = '密码强度强';
        }
    }
    return txt.innerHTML = '密码强度适中';
}
</script>

07.ascii码

str.charCodeAt('下标');  //获取的是ASCII码
eg:
var str = 'akdaogj';
        console.log(str.charCodeAt(3));   //a的ascii码为97
String.fromCharCode(97);  //把ascii码转成字符
console.log(String.fromCharCode(97));   //97 == a

<style>
    span{
        display:block;
        200px;
        height:30px;
        border:1px solid red;
        text-align:center;
        font-size:24px;
    }
</style>
​
<!-- 获取随机验证码(引用了自己封装的函数，随机数) -->
    <span id="code"></span>
    <button id="btn">获取验证码</button>
    <script src="../myApi.js"></script>  
<script>
        //获取随机数
        //console.log(randomNum(48,122));
        分析：
/*
            给按钮绑定事件
            添加循环4次每次获取随机数48-122,之间的随机数
            做判断 48-57（0-9） 65-90(A-Z) 97-122(a-z)  在这个范围的时候正确，如果不在，重新获取
            添加在code里面
        */
btn.onclick = function(){
    var str = '';
    //四个随机数，循环四次
    for(var i = 0 ; i < 4 ; i++){
        //获取随机数
        var num = randomNum(48,122);
        //判断随机数的范围
        if(num >= 48 && num <= 57 || num >= 65 && num <= 90 || num <= 97 && num >= 122){
            //把数字转成字符，拼接成一个字符串
            str += String.fromCharCode(num);
        }else{
            //不满足条件重新获取;
            i--;
        }
    }
    //把验证码放在code里面
    code.innerHTML = str;
    //把code里面的文本随机颜色
    code.style.color = randomColor();
}
​
/*
            随机色：
                16进制颜色值
                0-9 a-f
        */
function randomColor(){
    var str = '0123456789abcdef';
    var color = '#';
    //颜色值为#6个16进制数
    for(var i = 0 ; i < 6 ; i++){
        //charAt()根据下标获取字符串中的某一个字符
        color += str.charAt(parseInt(Math.random()*16));
    }
    return color;
}
</script>

作业

1：统计每个字符出现的次数;
<script>
    var str = 'idafifhushddjs';
​
//先对str去重，得到新的字符串放在temp中
var temp = '';
for (var i = 0; i < str.length; i++) {
    if (temp.indexOf(str.charAt(i)) == -1) {
        temp += str.charAt(i);
    }
}
// return temp;
//比较temp与str的每个字符，如果相等，就加1.
for (var k = 0; k < temp.length; k++) {
    var count = 0;
    for (var j = 0; j < str.length; j++) {
        if (temp.charAt(k) == str.charAt((j))) {
            count++;
        }
    }
    console.log(temp.charAt(k) + '出现的次数为' + count);
}
</script>