21js学习第八天第1部分数组去重，多维数组，二级联动-优快云博客

本文链接：https://blog.youkuaiyun.com/liuyaoshun123456/article/details/124279603

// 01数组去重
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)));

// 02多维数组
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])
}
}

// 三维数组
// var arr5=[[[]]];

<body>
<h1>省市二级联动</h1>
<form>
请选择你所在的城市：
<select name="province" id="province">
<option>请选择省份...</option>
</select>
<select name="city" id="city">
<option>请选择城市...</option>

</select>
<input type="submit">

</form>
</body>
<script>
// 03JavaScript二维数组实现二级联动

// 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>