数组去重
var arr=[1,1,1,1,2,2,2,2,3,3,4,4,5,5,"a","a"];
// console.log(arr.indexOf(1));
// 去重后得到 [1,2,3,4,5,"a"]
// 两类方式
1.操作原数组 改变原数组 // 删除原数组中相同的项 splice(开始的索引,截取的长度,添加的元素)
// 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()
// 1)创建空数组
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);
// fliter(function(val,index,arr){}) 筛选 过滤
var newArr2=arr.filter(function(val,index,arr){
return arr.indexOf(val)===index;
})
console.log(newArr2)
// indexOf(值) 检索 值 在数组中第一次出现的位置的索引
// ES6的方式
// Set() 数据结构 不可以出现相同的元素
console.log([...new Set(arr)]);
// Array.from()
console.log(Array.from(new Set(arr)));
多维数组
var arr=[1,2,3];//一维数组
// 数组项 还是数组 多维数组
// 二维数组
var arr2=[[1,2,3],[4,5,6],[7,8,9]];
// 访问二维数组
console.log(arr2[0][0]);
var arr3=new Array();
// arr3[0][0]=1;
// arr3[0][1]=2;
arr3[0]=[1,2,3];
arr3[1]=[4,5,6];
arr3[2]=[7,8,9];
console.log(arr3[0][0]);
// 二维数组进行遍历
for(var i=0;i<arr3.length;i++){
// console.log(arr3[i]);
for(var j=0;j<arr3[i].length;j++){
console.log(arr3[i][j])
}
}
JavaScript二维数组实现二级联动
<body>
<h1>省市二级联动</h1>
<form>
请选择你所在的城市：
<select name="province" id="province">
<option>请选择省份...</option>
</select>
<select name="city" id="city">
<option>请选择城市...</option>
<!-- <option value="南京">南京</option> -->
</select>
<input type="submit">
</form>
</body>
<script>
/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]))
}
}
// for(city in aProvs['江苏省']){
// // console.log(aProvs['江苏省'][city])
// oCity.add(new Option(aProvs['江苏省'][city],aProvs['江苏省'][city]))
// }
// var obj={};
// obj["name"]="张三";
// obj["age"]=20
// for(prop in obj){
// console.log(prop)
// }
</script>
JavaScript字符串的创建
// 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
JavaScript字符串的属性
// 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);
// length 字符串的长度 空格字符算字符长度
console.log(str1.length);//7
console.log(str6.length);//12
// constructor 对创建改对象的函数的应用 构造函数
console.log(str1.constructor);
console.log(str6.constructor);
// prototype 原型 向对象添加属性和方法
console.log(String.prototype);//原型对象
console.log(str6.name);
String.prototype.name="字符串";
console.log("字符串的名字".name);
JavaScript字符串的方法
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}`);
JavaScript字符串方法
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"));
JavaScript字符串HTML包装方法
// anchor() 创建 HTML 锚。
// link() 将字符串显示为链接。
// big() 用大号字体显示字符串。
// blink() 显示闪动字符串。
// bold() 使用粗体显示字符串。
// fixed() 以打字机文本显示字符串。
// fontcolor() 使用指定的颜色来显示字符串。
// fontsize() 使用指定的尺寸来显示字符串。
// italics() 使用斜体显示字符串。
// small() 使用小字号来显示字符串。
// strike() 用于显示加删除线的字符串。
// sub() 把字符串显示为下标。
// sup() 把字符串显示为上标。
var text="hello world";
document.write(text.anchor("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("<p>字体颜色："+text.fontcolor("yellow") +"</p>")
document.write("<p>字体大小："+text.fontsize(16)+"</p>")
document.write("<br><br><br><br><br><br><br><br><br><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"))
JavaScript转义字符
// 转义字符 \ 使用\可以插入特殊符号
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"
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
