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>