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{
       width: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));   //fjsgj   当参数为一个的时候,代表从后往前删除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

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;
          width:500px;
          height:50px;
          margin:100px auto;
      }
       #btn{
           display:block;
           margin:0 auto 50px;
           width:100px;
           height:30px;
      }
       #box{
           width: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;
       width: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>

猜你喜欢

转载自www.cnblogs.com/ljp1997/p/11462877.html