JavaScript之数组
2018-03-05 本文已影响0人
追逐_chase
timg.jpg
数组
- 数组:是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示;
- 就是一个容器可以存储很多的值,任何类型的数据都可以存放
- 本质上，数组属于一种特殊的对象，typeof运算符会返回数组的类型是object。
数组的声明
- var array1 = [];
<script>
var arr = [1,2,3,4,5];
console.log(arr);
</script>
数组的访问
- 数组名[索引值]
- 索引值是从0开始的
var array = ["IT001","CC","DD","哈哈"];
console.log(array[1]);
//打印结果是：CC
数组的长度
- 数组的length属性，返回数组的成员数量。
- 访问方法是: 数组名.length；
- 清空数组的一个有效的方法就是可以length设为0
var arr1 = ['a', 'b'];
console.log(arr1.length);
//打印结果是：2
数组遍历
- for循环遍历
var array = ["IT001","CC","DD","哈哈"];
for (var i = 0; i < array.length; i++){
console.log(array[I]);
}
//打印结果：
IT001
CC
DD
哈哈
- for…in 循环遍历
var a = [1, 2, 3];
for (var i in a) {
console.log(a[I]);
}
// 1
// 2
// 3
数组的添加和删除
- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr = [1,3,5];
arr.push(7);
console.log(arr);
结果变成 : [1,3,5,7];
- unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
var arr = [1,3,5]
arr.unshift(0)
结果变成 [0,1,3,5]
- pop() 删除最后一个元素
var arr = [1,3,5] → arr.pop() → 结果 [1,3]
- shift() 删除第一个元素
var arr = [1,3,5] → arr.shift() → 结果 [3,5]
数组中一些常用的方法
拼接
- concat() 用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本
var aa = [1,3,5]; var bb = ["a","b","c"];
var cc = aa.concat(bb);
console.log(cc);
// Array [ 1, 3, 5, "a", "b", "c" ]
数组的截取
- slice("开始位置"，"结束位置")； 用来截取数组的部分元素，返回一个新的数组
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
数组转化成字符串
- join() 将数组各个元素是通过指定的分隔符进行连接成为一个字符串。
- 数组名.join(符号)
var arr = [1,2,3];
var str = arr.join("-");
console.log(str);
console.log(typeof str);
// 打印结果: 1-2-3
// string
字符串转化成数组
- split()把一个字符串分割成字符串数组
- 语法: stringObject.split(separator,howmany)
var string1 = "h/2/3/l";
var newArr = string1.split("/");
console.log(newArr);
//结果是:Array [ "h", "2", "3", "l" ]
- Array.isArray("object") 判断一个对象是否是数组 ，返回时bool值
//数组
var obj = [];
var isTR = Array.isArray(obj);
console.log(isTR);
- every()方法 返回一个bool值
/*
arra.every(function(数组元素,索引) {
})
*/
var arra = ["123","345","12"];
arra.every(function (ele,index) {
console.log(index);
return true;
});
- filer() 过滤 返回一个新的数组
/*
* 3个参数
* 1.数组的元素
* 2.数组的索引
* 3.被遍历的数组
* */
var arra = [10,20,30,40,50,60,70,80,90];
var arr1 = arra.filter(function (ele,index,array) {
return ele>40;
})
console.log(arr1);
-
splice("开始的位置"，"要删除的个数"，"要插入的元素")函数
- 如果是前2个参数则是删除元素，3个参数都在则是添加元素
-
从第2位开始删除0个元素，插入“drum”
var myFish = ["angel", "clown", "mandarin", "surgeon"];
//从第 2 位开始删除 0 个元素，插入 "drum"
var removed = myFish.splice(2, 0, "drum");
//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]
//被删除元素数组：[]，没有元素被删除
- 从第3位开始删除1个元素
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
//运算后的myFish：["angel", "clown", "drum", "sturgeon"]
//被删除元素数组：["mandarin"]
- 从第2位开始删除1个元素，然后插入“trumpet”
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");
//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"]
//被删除元素数组：["drum"]
排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选 排他思想</title>
<style>
.damao{
background-color: #FF6B39;
}
</style>
<script>
window.onload = function () {
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i ++){
btns[i].onclick = function () {
for (var j = 0; j < btns.length; j++){
btns[j].className = "";
}
this.className = "damao";
}
}
}
</script>
</head>
<body>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
</body>
</html>
110.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
<style>
.box {
width: 300px;
height: 30px;margin: 100px auto;
position: relative;
}
.box input {
width: 200px;
height: 25px;
}
.box label {
font-size: 12px;
color: #ccc;
position: absolute;
top: 8px;
left: 10px;
cursor: text;
}
</style>
<script>
window.onload = function () {
function $(id) {
return document.getElementById(id);
}
$("txt").oninput =function () {
if (this.value == "") {
$("message").style.display = "block"
} else {
$("message").style.display = "none"
}
}
}
</script>
</head>
<body>
<div class="box">
<input type="text" id="txt">
<label for="txt" id="message">国际大牌</label>
</div>
</body>
</html>
搜索框.png
