web.jpeg
数组
- 数组:是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示;
- 就是一个容器可以存储很多的值,任何类型的数据都可以存放
- 本质上，数组属于一种特殊的对象，
typeof运算符会返回数组的类型是object。
1.数组的声明 和创建
- 通过
构造函数创建数组
var arr = new Array();
console.log(arr);
- 通过
字面量创建数组
<script>
var arr = [1,2,3,4,5];
console.log(arr);
</script>
2. 数组元素添加和删除
- 直接添加
var arr = new Array();
/向数组为0的位置 添加一个为10 的元素
arr[0] = 10;
-
push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr = [1,3,5];
arr.push(7);
console.log(arr);
结果变成 : [1,3,5,7];
//添加多个元素
arr.push(8,9,10);
-
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]
3.数组的访问
数组名[索引值]- 索引值是从0开始的
- 如果读取不到
索引值为undefiend
var array = ["IT001","CC","DD","哈哈"];
console.log(array[1]);
//打印结果是：CC
4. 数组的长度
- 数组的
length属性，返回数组的成员数量。 - 访问方法是:
数组名.length； - 清空数组的一个有效的方法就是可以
length设为0
var arr1 = ['a', 'b'];
console.log(arr1.length);
//打印结果是：2
5.数组遍历
- for循环遍历
var array = ["IT001","CC","DD","哈哈"];
for (var i = 0; i < array.length; i++){
console.log(array[I]);
}
//打印结果：
IT001
CC
DD
哈哈
- for…in 循环遍历 【不推荐使用】,
forin循环是专门用于遍历对象的, 但是对象的属性是无序的, 所以forin循环就是专门用于遍历无序的东西的, 所以不推荐使用forin循环来遍历数组
var a = [1, 2, 3];
for (var i in a) {
console.log(a[I]);
}
// 1
// 2
// 3
- 利用ES6中推出的for of循环来遍历数组
let arr = [1,3,5];
for (const value of arr) {
console.log(value); // 1,3,5
}
-
some(allback(element,index,array))方法 遍历
allback(element, index, array)回调函数,其中element数组里面的元素，index是遍历的索引，array被遍历的数组
var list = [
{id:1,name:"奔驰",time: new Date()},
{id:2,name:"宝马",time: new Date()},
{id:3,name:"大众",time: new Date()}
]
//毁掉函数
list.some(function (item,index) {
console.log(item + "------"+ index);
})
-
forEach(allback(item,index))方法 遍历 类似some()回调函数的参数一样
var list = [
{id:1,name:"奔驰",time: new Date()},
{id:2,name:"宝马",time: new Date()},
{id:3,name:"大众",time: new Date()}
]
list.forEach(function (item,index) {
console.log(item + "----" + index);
})
求最大值，平均值，和
- 注意在求最大值的时候，假设数组中的一个值最大，
不能直接赋值给0
<script>
let arry = [1,4,7,6,3,10,88,9];
let sum = 0;
let pj = 0;
// 假设最大值 ，不能直接赋值为0，因为数组里面 可能的数据 都为负数
let max = arry[0];
for (let index = 0; index < arry.length; index++) {
sum += arry[index];
if(max < arry[index]){
max = arry[index];
}
}
console.log(sum);
console.log(max);
pj = sum/arry.length;
console.log(pj +"++++++"+ arry.length)
</script>
数组元素位置调换
- 调换比较的次数是
length/2
let arr1 = [10,20,30,40,50];
for (let i = 0; i < arr1.length/2; i++) {
let temp = arr1[i];
arr1[i] = arr1[arr1.length - 1 -i];
arr1[arr1.length - 1 - i] = temp;
}
console.log(arr1);
[50, 40, 30, 20, 10]
冒泡排序
image.png
<script>
// 冒泡排序
let array = [30,20,60,40,10,5];
//外层循环控制比较的 轮数 array.length - 1
for(var i = 0; i < array.length - 1; i++){
//内层循环比较次数 array.length - 1 - I
for(var j = 0; j < array.length - 1 - i; j ++){
if (array[j] > array[j + 1]) {
let temp = array[j];
array[j] = array[j + 1];
array[j + 1] = temp;
}
}
}
console.log(array);
</script>
image.png
6.数组中一些常用的方法
拼接
-
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); // [50,60,70,80,90]
自定义函数实现filter方法
Array.prototype.myFilter = function (fn) {
let newArray = [];
for(let i = 0; i < this.length; i++){
let result = fn(this[i], i, this);
if(result){
newArray.push(this[i]);
}
}
return newArray;
}
- map方法：将满足条件的元素映射到一个新的数组中
注意:map方法会把数组中的元素都会调用一次callback函数，callback函数执行后的返回值(包括undefined)组合成一个新的数组 返回
let arr = [1, 2, 3, 4, 5];
// 2.数组的map方法:将满足条件的元素映射到一个新的数组中
//注意:map方法会把数组中的元素都会调用一次fcallback函数，
//callback函数执行后的返回值(包括undefined)组合成一个新的数组 返回
let newArr2 = arr.map(function (item,index,itemArray) {
if(item % 2 === 0){
return item; //满足条件返回item,不满足返回的是undefined
}
});
console.log(newArr2); // [undefined,2,undefined,4,undefined];
- 自定义map函数
// map实现
Array.prototype.myMap = function (fn) {
let newArray = new Array(this.length);
newArray.fill(undefined);
for(let i = 0; i < this.length; i++){
let result = fn(this[i], i, this);
if(result !== undefined){
newArray[i] = result;
}
}
return newArray;
}
-
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"]
es6中2个数组的方法
find()
//es6中的一个数组方法：find
// 需要接受一个函数作为参数
//当某个遍历对象符合 return条件的时候，find终止遍历，同时返回遍历对象
var stu = students.find(function (item) {
return item.id === student.id
})
console.log(stu);
for (var key in student){
stu[key] = student[key];
}
-
findIndex()查询元素的索引值
function (id) {
//根据 ID 找到元素的 索引 根据索引删除元素
//es6 查找元素的Index
//数组里面存放的是 对象
var index = this.list.findIndex(function (item) {
return item.id === id;
});
this.list.splice(index,1);
}
数组去重的2种方式
- 双for循环
var arr = [1,2,2,2,3,4,5,2,3,4];
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if(arr[i] == arr[j]){
//相同删除这个元素
arr.splice(j,1);
//如果有连续相同的元素,那么出现问题,当删除元素时，索引发生了变化
j--;
}
}
}
console.log("huiswh");
console.log(arr);
//结果是 [1,2,3,4,5]
- 利用 json对象去重
- 原理是:
key是唯一的
- 原理是:
//数组去重
var arr = [1,2,2,2,3,4,5,2,3,4];
//利用对象 去重
var arrDic = {};
arr.forEach(function(item,index){
arrDic[item] = item;
});
console.log(arrDic);
排他思想
<!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>
