一、数组去重的三种方法
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"