JS第八天学习(数组去重、字符串)

一、数组去重的三种方法

1.删除原数组中相同项

      //遍历数组 拿到所有元素
     for(var i=0;i<arr.length;i++){
         // arr[i]   
         for(var j=i+1;j<arr.length;j++){
            // 用arr[i]和arr[j]比较  相同 删掉arr[j]
         if(arr[i]===arr[j]){
                arr.splice(j,1);
                // 将j-1 索引前移一位
               j--;
            }
        }
         console.log(arr);
     }

2.创建新的空数组

遍历数组 进行对比 将新数组中不存在的项 进行添加 indexOf() 返回-1 push()

 var newArr=[];
   for(var i=0;i<arr.length;i++){
       // arr[i]
       if(newArr.indexOf(arr[i])===-1){
           newArr.push(arr[i])
       }
   }
   console.log(newArr);

3. 使用fliter()筛选

    // fliter(function(val,index,arr){})  筛选 过滤  
    var newArr2=arr.filter(function(val,index,arr){
        return arr.indexOf(val)===index;
    })
    console.log(newArr2)
    // indexOf(值)  检索 值 在数组中第一次出现的位置的索引

二、省市二级联动练习实例

  // 1.获取元素   
   var oProv = document.getElementById("province");
   var oCity = document.getElementById("city");

   // 2.创建省市二维数组
   var aProvs = new Array();
   aProvs['江苏省'] = ['南京', '苏州', '无锡', '常州', '徐州'];
   aProvs['浙江省'] = ['杭州', '宁波', '温州', '台州', '绍兴'];
   aProvs['安徽省'] = ['合肥', '芜湖', '黄山', '宿州', '滁州'];

   // 初始时,将省份列表加载到省份下拉列表中
   // add(): DOM方法 添加元素  selectObject.add(option,before) before不存在时,往末尾添加  
   // new Option("文本","值"): 动态创建下拉列表的选项  

   for (prov in aProvs) {
       // console.log(prov)
       oProv.add(new Option(prov, prov))
   }

   // 3.切换省份时 更新城市列表
   // 1)如何获取省份  oProv.value
   // 2)如何检测下拉选项的改变   onchange

   oProv.onchange = function () {
       // console.log("选项发生改变")
       // 清空城市列表
       oCity.length=1;
       for (city in aProvs[oProv.value]) {
           // console.log(aProvs[oProv.value][city])
           oCity.add(new Option(aProvs[oProv.value][city], aProvs[oProv.value][city]))
       }
   }

三、字符串

  • 字符串的创建

   1.字面量 "" '' ``
   var str1="hello";
   var str2='hello';
   var str3=`hello`;
   console.log(str1);

   2.使用new关键字  构造函数
   var str5=new String();
   str5="hello China";
   var str6=new String("hello Nanjing");
   console.log(str6);

    区别
   console.log(typeof str1);//string
   console.log(typeof str6);//object
  • 字符串的属性

   1.(length  字符串的长度   空格字符算字符长度)
   console.log(str1.length);//7
   console.log(str6.length);//12

   2.( constructor  对创建改对象的函数的应用  构造函数)
   console.log(str1.constructor);
   console.log(str6.constructor);

   3.( prototype 原型  向对象添加属性和方法)
   console.log(String.prototype);//原型对象

   console.log(str6.name);
   String.prototype.name="字符串";
   console.log("字符串的名字".name);
  • 字符串的拼接

   var str1="hello";
   var str2="world";
   var str3=" ";

   // concat() 连接两个或更多字符串,并返回新的字符串。  拼接字符串
   console.log(str1.concat(str3,str2));
   // 使用 + 拼接字符串   外单内双  外双内单
   console.log(str1+str3+str2);
   var num=10;
   var str="10";
   console.log(typeof(num+str));//string 
   // += :拼接字符串
   console.log(str+=" world"); 
   // ``  模板字符串 es6
   console.log(`${str1}${str3}${str2}`);
  • 字符串的方法

var str1 = "hello";
    var str2 = "world";
    var str3 = " ";

    // concat() 连接两个或更多字符串,并返回新的字符串。  拼接字符串
    console.log(str1.concat(str3, str2));
    // 使用 + 拼接字符串   外单内双  外双内单
    console.log(str1 + str3 + str2);
    var num = 10;
    var str = "10";
    console.log(typeof (num + str)); //string 
    // += :拼接字符串
    console.log(str += " world");
    // ``  模板字符串 es6
    console.log(`${str1}${str3}${str2}`);
    var str1 = "hello";
    var str2 = "world";
    var str3 = " ";

    // indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。  索引
    console.log(str1.indexOf("l"));//2   第一次出现的索引
    console.log(str1.indexOf("a"));//-1  不存在时返回-1
    // lastIndexOf() 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。 最后一次出现的索引
    console.log(str1.lastIndexOf("l"));//3
    // slice(start,end)	提取字符串的片断,并在新的字符串中返回被提取的部分。
    console.log(str1.slice(0,2));

    // charAt(索引) 返回指定位置的字符
    console.log("你好,南京".charAt(2));
    // charCodeAt(索引) 返回在指定的位置的字符的 Unicode 编码。
    console.log("一".charCodeAt(0));//19968
    // fromCharCode(unicode编码) 将 Unicode 编码转为字符。
    console.log(String.fromCharCode(19971));

    // substr(start,length) 从起始索引号提取字符串中指定数目的字符。
    var str6="abcdefg";
    console.log(str6.substr(0,3));//abc
    console.log(str6.slice(0,3));
    console.log(str6);    
    // substring(start,end) 提取字符串中两个指定的索引号之间的字符。
    console.log(str6.substring(0,3));

    // trim() 去除字符串两边的空白
    console.log(" 你好 ");
    console.log(" 你好 ".trim())
    console.log(" 你好 ".length);
    console.log(" 你好 ".trim().length);

    // split("匹配的条件") 把字符串分割为字符串数组
    console.log(str1.split());//["hello"]
    console.log(str1.split("e"));//['h', 'llo']
    console.log(str1.split(""));//['h', 'e', 'l', 'l', 'o']

    // toLowerCase() 把字符串转换为小写。
    console.log("HELLO China".toLowerCase());
    // toUpperCase() 把字符串转换为大写。
    console.log("HELLO China".toUpperCase());

    // toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
    // toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。
    console.log("HELLO China".toLocaleLowerCase());

    // toString() 返回一个字符串。
    console.log("hello".toString());
    // valueOf() 返回某个字符串对象的元始值。
    console.log("hello".valueOf());

    // search() 查找与正则表达式相匹配的值。
    console.log(str1.search(/l/));//2
    // match() 查找 找到一个或多个正则表达式的匹配。
    console.log(str1.match("l"));//
    console.log(str1.match(/l/g));//['l', 'l']

    // replace() 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串。
    console.log("你好,南京".replace(/你/,"您"))
    console.log(str1.replace(/l/g,"A"));

    // replaceAll()	在字符串中查找匹配的子串,并替换与正则表达式匹配的所有子串。
    console.log(str1.replace("l","A"));
    console.log(str1.replaceAll("l","A"));
  • 字符串HTML包装方法

  • anchor() 创建 HTML 锚。
    link() 将字符串显示为链接。
    big() 用大号字体显示字符串。
    blink() 显示闪动字符串。
    bold() 使用粗体显示字符串。
    fixed() 以打字机文本显示字符串。
    fontcolor() 使用指定的颜色来显示字符串。
    fontsize() 使用指定的尺寸来显示字符串。
    italics() 使用斜体显示字符串。
    small() 使用小字号来显示字符串。
    strike() 用于显示加删除线的字符串。
    sub() 把字符串显示为下标。
    sup() 把字符串显示为上标。
var text="我要结婚啦";
		document.write(text.link("top"));
		document.write("<p>大号字体:"+text.big()+"</p>");
		document.write("<p>小号字体:"+text.small()+"</p>");
		document.write("<p>加粗字体:"+text.bold()+"</p>");
		document.write("<p>倾斜字体:"+text.italics()+"</p>");
		document.write("<p>打印机字体:"+text.fixed()+"</p>");
		document.write("<p>删除线字体:"+text.strike()+"</p>");
		document.write("<p>下标字体:"+text.sub()+"</p>");
		document.write("<p>上标字体:"+text.sup()+"</p>");
		document.write("<br>");
		document.write("<p>颜色字体:"+text.fontcolor("green")+"</p>");
		document.write("<p>小号字体:"+text.fontsize("20")+"</p>");
		document.write("<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>");
		document.write(text.link("#top"));
  • 转义字符

 document.write('"');
    document.write("\"");
    document.write('\\');
    // \t 制表符 \b 退格符 \f 换页 \n 换行符 \r回车
    console.log("hello");
    console.log("\thello");
    console.log("\bhello\bworld");
    console.log("hello\nworld");
    document.getElementById("text").value="hello\rworld"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值