数组
-
数据结构(数据的结构形态,数据表现时的形态方式)
var a = 1; var b = 2; var c = 3; var d = 4; var obj = { a: 1, b: 2, c: 3, d: 4 };
-
不关心 key,只关心值,并且希望值可以排序,希望可以统计到数据的数量
-
⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇
-
数组,数据组合,一组数据
var arr = [1, 2, 3, 4];
数组如何创建
- 字面量创建
var arr = [1, 2, 3, 4]; var arr = [1, , 2, undefined, 3, 4];
- 实例化(函 shu)创建(按照实际案例的格式化创建出来)
var arr = new Array(); var arr = new Array(10); //建立了一个长度为10空数组,里面有10个空元素
- 使用 new Array 或者 Array 时,如果,参数只有一个并且是数值类型,这个数值就是数组创建的长度,并且放入对应个数的空元素,所以这个数值必须是正整数,如果是小数或者负数时,就会抛出错误
(Invalid array length 长度错误)function fn() { // 抛出错误 // throw new Error("错误"); // throw new TypeError("数据类型错误") // throw new RangeError("Invalid array length"); // console.error("错误") } fn(); console.log("aa"); var arr = new Array(-2);
- 使用 new Array 或者 Array 时,如果,参数只有一个并且是数值类型,这个数值就是数组创建的长度,并且放入对应个数的空元素,所以这个数值必须是正整数,如果是小数或者负数时,就会抛出错误
- 构造函数创建
var arr = Array();
- 对象创建法(用的不多)
var arr = new Object([1, 2, 3]);
数组的下标和长度
-
var arr=[1,2,3,4];
-
数组里面的所有内容称为元素,简称元
-
每个元素,对应的一个索引数,这个索引数叫做下标
-
根据变量[下标]就可以获取到这个变量数组的下标所对应索引的元素
console.log(arr[0]); arr[0] = 1; //1 元素 //arr 数组变量 //0 下标 索引值 //arr[0] 下标变量
-
下标是从 0 开始,第一个元素对应的下标是 0
-
因为这个 100 表示第 101 个元素,因此,数组先有 101 个元素,可是原数组只有 4 个元素,就会自动生,成 96 个元素,在里面,这些都是空元素
var arr = [1, 2, 3, 4]; arr[100] = 20; //输出结果是 ➡(101) [1, 2, 3, 4, 空属性 × 96, 20]
length (长度 数组的元素数量)
-
length 是最大下标+1 最大下标=length-1
console.log(arr.length); //在末尾添加一个元素1 arr[arr.length] = 1;
-
如果设置的 length 的长度比原有的长度大,这就会将数组的元素数量增多,并且补充空元素在数组末尾
var arr = [1, 2, 3, 4]; arr.length = 10;
-
如果设置的 length 的长度比原有的长度小,这就将数组的元素进行删除,只保留给定的长度
var arr = [1, 2, 3, 4]; arr.length = 2;
-
如果设置 length 为 0 时,表示清空数组
var arr=[1,2,3,4]; arr.length=;
-
如果设置 length–时,表示删除数组的最后一个元素
var arr = [1, 2, 3, 4]; arr.length--;
push
-
给数组的尾部添加多个元素,并且返回数组的新长度,改变原数组
var arr = [1, 2, 3, 4, 5]; //arr.push(6); arr.push(6, 7, 8); var len = arr.push(6, 7, 8); console.log(arr, len); var arr = Array(10); arr.push(1); console.log(arr); var arr = []; var i = 1; while (arr.length <= 10) { arr.push(i); i++; } console.log(arr); var arr = []; var i = 1; while (arr.push(i++) <= 10); console.log(arr);
-
unshift 在数组的最前面添加一个或多个元素,并且返回数组的新长度,改变原数组,每往前面添加一个元素,会往数组最后添加一个空间,把原元素整体往后挪一位,当第一个空间没有值,再给这个空间添加新元素,效率太低,尽量少用
-
pop 删除数组尾部的一个元素,并且返回这个删除的元素,改变原数组
var arr = [1, 2, 3, 4, 5, 6, 7]; for (var i = 0; i < arr.length; i++) { arr.pop(); } console.log(arr); //当长度是3时,i的值已经是4不再满足条件,停止循环 //所以有两种方法解决: var len = arr.length; for (var i = 0; i < len; i++) { arr.pop(); } console.log(arr); while (arr.length > 0) arr.pop(); console.log(arr);
shift
- 删除数组头部的一个元素,并且返回这个删除的元素,改变原数组
arr.shift()
concat
-
将多个数组及元素,合并为一个新数组,原数组不发生改变
//连接一个数组 var arr2 = arr.concat(arr1); //连接多个数组 var arr2 = arr.concat(arr1, [9, 10, 11]); //连接多个数组及元素 var arr2 = arr.concat(arr1, 9, 10, [11, 12], 13); //复制一个新数组,浅复制 var arr2 = arr.concat();
toString
-
将数组转换为字符串,使用,连接每个元素
-
数组隐式转换为字符串时,会自动调用 toString
// var obj={}; // obj[arr]=1; // console.log(obj) // var obj={}; // var arr=["a"]; // 因为转换为字符串变成"a" // obj[arr]=3; // console.log(obj.a); var arr = []; // 因为是空数组,转换为字符串时会变成"" console.log(arr.toString()); console.log([] == ""); //true console.log([] == false); //true console.log([] == 0); //true console.log([] == [].length); //true console.log([] == []); //false //""==false console.log([] == ![]); //![] []是一个引用类型,直接转换为布尔值时就是true !true-->false
join
-
将数组以给入的参数作为间隔符连接为一个字符串,如果间隔符是空字符串,则将每个元素紧密连接在一起,返回这个字符串,原数组不发生改变
var arr = [1, 2, 3, 4]; //var str=arr.join("|"); var str = arr.join(""); console.log(str); console.log(arr.join("+")); var arr = ["FF", "00", "00"]; console.log("#" + arr.join(""));
slice
-
将数组中第几位开始到第几位之前的所有元素截取返回一个新数组,原数组不变
-
slice(开始位置,结束位置)
arr.slice();
开始位置没有赋值,结束位置也没有赋值,开始位置默认从 0 开始,结束位置默认到数组尾部,这样做可以复制数组var arr1=arr.slice(2);
结束位置也没有赋值,结束位置默认到数组尾部- 开始和结束位置都可以给负数,负数就是倒数第几位,也可以使用 arr.length+(负数)
var arr=["a","b","c","d","e"];
var arr1=arr.slice(1,4);
console.log(arr1)
var arr=["a","b","c","d","e"];
var arr1=arr.slice();
arr[0]="z";
console.log(arr1,arr);
var arr=["a","b","c","d","e"];
var arr1=arr.slice(2);
console.log(arr1);
var arr=["a","b","c","d","e"];
var arr1=arr.slice(-3);
console.log(arr1);
var arr1=arr.slice(-1);
console.log(arr1);
var item=arr.slice(-1)[0];
console.log(item)
//连缀 用前面方法返回得到结果用于后面的方法
var str=arr.slice(-3).join("");
console.log(str);
var arr1=arr.slice(2).concat("f")
console.log(arr1);
splice
-
在数组中删除,替换,插入,新的多个元素,改变原数组,并且返回一个由删除元素组成的新数组
-
arr.splice(开始位置,删除几个,插入的元素…);
-
var arr1=arr.splice();如果没有开始位置,不会删除元素,返回一个空数组
-
var arr1=arr.splice(2); 如果只有开始位置,没有删除几个,就会删除到数组的尾部
-
var arr1=arr.splice(1,2);从下标为 1 的位置开始删除 2 个元素,返回被删除的这两个元素
-
var arr1=arr.splice(1,2,“z”); 从下标为 1 的位置开始删除 2 个元素,并且在这个位置插入一个字符 z,返回被删除的两个元素组成的新数组
-
var arr1=arr.splice(1,2,“y”,“z”);
-
var arr1=arr.splice(1,0,“y”,“z”); 如果删除的数量为 0 时,表示不删除,在这个位置插入 y,z 两个字符,并且返回一个空数组
-
遍历
var arr = ["a", , "b", "c", "d", "e", "f"];
console.log("for遍历");
for (var i = 0; i < arr.length; i++) {
console.log(arr[i], i);
}
console.log("for in遍历");
for (var index in arr) {
console.log(arr[index], index);
}
-
- for 会遍历到空元素,但是 for in 不会遍历到
- for in 遍历时 主要是针对对象的,目的是遍历 key value 这种键值对,因此 for in 使用变量会自动转换为字符串,数组是由对象创建来的,所以可以理解为数组中的下标就相当于对象中 key,元素相当于对象中 value,for in 的前提必须是键值对,也就是说必须有键有值,数组中空元素,仅有下标没有值,不能称为键值对,因此,在 for in 中不做遍历
-
- for 循环时仅遍历数组的元素,但是 for in 循环时会遍历到数组元素之外的数组属性
var arr = ["a", , "b", "c", undefined, "d", "e", "f"]; arr.a = 10; for (var i = 0; i < arr.length; i++) { if (i in arr) console.log(arr[i]); } //在这里的话,if(i in arr)是判断元素在数组中成没成键值对,也就是过滤空元素(空元素只有键没有值)
forEach
-
遍历数组的每个元素,并且执行 forEach 函数中回调函数 arr.forEach(回调函数) 回调函数中里面有 3 个参数,分别对应的是数组的元素,下标,数组本身
arr.forEach(function (item) {});
map
- 遍历数组的每个元素,并且执行 map 函数中回调函数,将这个回调函数中 return 的结果分别存储在一个新数组的当前下标对应位置,并且返回这个新数组,原数组不改变
var arr1 = arr.map(function (item) { return value; });
forEach 和 map 的区别
- forEach 仅遍历数组的每个元素,map 不但遍历数组的每个元素,还会将回调函数 return 返回的结果放在一个新数组对应下标的位置,返回这个新数组,map 使用后,返回的新数组与数组的长度相等如果没有使用 return,则该项就是 undefined
indexOf
- arr.indexOf(元素,从下标第几位开始向后查找)
- 查找元素所对应的下标,如果找到了就返回找到第一个下标,如果没有找到返回-1
lastIndexOf
- arr.lastIndexOf(元素,从下标第几位开始向后查找)
- 从后向前查找元素所对应的下标,如果找到了就返回找到第一个下标,如果没有找到返回-1
includes
- arr.includes(元素);
- 判断当前数组中是否有这个元素,如果有返回 true,否则返回 false
some
- 数组中是否有满足条件的,返回布尔值,如果遇到一个满足条件的就会直接跳出
var arr = [1, 2, 3, 4, 5, 6, 7];
var bool = arr.some(function (item, index, arr) {
return item > 4; //判断每个元素是不是都大于4
});
every
- 数组中是否所有元素都满足条件,返回布尔值,如果遇到一个不满足条件的就会直接跳出
var arr = [1, 2, 3, 4, 5, 6, 7];
var bool = arr.every(function (item, index, arr) {
return item > 2; //判断所有元素是不是都大于2
});
filter
- 筛选数组中满足条件的元素,返回满足条件元素组成的数组
var arr = [1, 2, 3, 4, 5, 6, 7];
var arr1 = arr.filter(function (item, index, arr) {
return item > 3; //把所有大于3的元素都放在arr1中
});
var arr = [
{ id: 1001, name: "计算机1", price: 1200, num: 1 },
{ id: 1002, name: "计算机2", price: 3200, num: 1 },
{ id: 1003, name: "计算机3", price: 6800, num: 1 },
{ id: 1004, name: "计算机4", price: 7200, num: 1 },
{ id: 1005, name: "计算机5", price: 13000, num: 1 },
];
var arr1 = arr.filter(function (item) {
return item.price > 5000;
});
console.log(arr1);
var arr1 = arr.filter(function (item) {
return item.id === 1003;
});
var o = arr1[0];
console.log(o);
find
- 在数组中找到满足条件的第一个元素,返回,并且不在继续向后循环
var o = arr.find(function (item) {
return item.id === 1003;
});
reduce
- 归并,返回一个元素
var arr = [12, 13, 14, 15, 16, 17];
//reduce return结果会传递给下一次遍历时的value,遍历完成后返回最终value值
var sum = arr.reduce(function (value, item, index, arr) {
console.log(value, item, index, arr);
return value + item;
});
console.log(sum);
- 用 reduce 求和
var arr = [12, 13, 14, 15, 16, 17];
//求和
var sum = arr.reduce(function (v, t) {
return v + t;
});
console.log(sum);
- 用 reduce 从初始值是一百开始求和
- 如果有 reduce 的初始值,value 开始就是这个初始值,并且 item 会从第 0 项开始遍历
// 如果有reduce的初始值,value开始就是这个初始值,并且item会从第0项开始遍历
var arr = [12, 13, 14, 15, 16, 17];
var sum = arr.reduce(function (value, item, index) {
console.log(value, item, index);
return value + item;
}, 100);
console.log(sum);
- 数据驱动显示
// 数据驱动显示
var arr = [
{ site: "网易", url: "http://www.163.com" },
{ site: "腾讯", url: "http://www.qq.com" },
{ site: "淘宝", url: "http://www.taobao.com" },
{ site: "京东", url: "http://www.jd.com" },
{ site: "百度", url: "http://www.baidu.com" },
{ site: "小米", url: "http://www.mi.com" },
{ site: "华为", url: "http://www.huawei.com" },
];
var ul = document.getElementById("ul");
ul.innerHTML = arr.reduce(function (value, item) {
return value + "<li><a href='" + item.url + "'>" + item.site + "</a></li>";
}, "");
//初始值是空字符串
- 用 reduce 替代 map
// map输出新数组
var arr = [1, 2, 3, 4, 5];
var arr1 = arr.map(function (item) {
return item + 10;
});
// 用reduce替代map
var arr1 = arr.reduce(function (value, item) {
value.push(item + 10);
return value;
}, []);
console.log(arr1);
- 用 reduce 替代 some
var arr = [1, 2, 3, 4, 5];
var bool = arr.some(function (item) {
return item > 3;
});
// 用reduce替代some
var bool = arr.reduce(function (v, t) {
if (t > 3) v = true;
return v;
}, false);
console.log(bool);
- 用 reduce 替代 every
var bool = arr.every(function (item) {
return item > 3;
});
//用reduce替代every
var bool = arr.reduce(function (v, t) {
if (t <= 3) v = false;
return v;
}, true);
- 用 reduce 去重
//去重
var arr = [1, 2, 2, 3, 4, 4, 5, 6, 5, 6, 7, 8, 9];
var arr1 = arr.reduce(function (v, t) {
if (v.indexOf(t) < 0) v.push(t);
return v;
}, []);
console.log(arr1);
var arr = [
{ id: 1001, name: "计算机1", price: 1200, num: 1 },
{ id: 1002, name: "计算机2", price: 3200, num: 1 },
{ id: 1003, name: "计算机3", price: 6800, num: 1 },
{ id: 1004, name: "计算机4", price: 7200, num: 1 },
{ id: 1005, name: "计算机5", price: 13000, num: 1 },
];
//筛选price大于5000的数组,替代filter,返回的是数组
var arr1 = arr.reduce(function (v, t) {
if (t.price > 5000) v.push(t);
return v;
}, []);
console.log(arr1);
//筛选id 是 1003的对象,替代find,返回的是对象
var o = arr.reduce(function (v, t) {
if (t.id === 1003) v = t;
return v;
}, null);
console.log(o);
// var arr=[[1,2,3],[5,6,7],8,9];
// // 扁平化数组
// var arr1=arr.flatMap(function(item){
// return item;
// });
// console.log(arr1);
var arr = [[1, 2, 3], [4, 5, 6], 7, 8, 9, [[11, 12], [13, 14], 15]];
// 扁平化数组
function flat(arr, target) {
if (!target) {
target = [];
}
for (var i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
flat(arr[i], target);
} else {
target.push(arr[i]);
}
}
return target;
}
var arr1 = flat(arr);
console.log(arr1);
fill
- 填充数组
- arr.fill(值,从什么位置开始填充,到什么下标之前结束)
// fill
var arr = Array(6);
var arr = [];
arr[3] = 2;
arr.length = 20;
arr.fill(10);
console.log(arr);
var arr = Array(10);
arr.fill(1, 5);
arr.fill(1, 2, 6);
console.log(arr);
Math.random()
- 随机数 Math.random()
- 随机颜色
// console.log(Math.random())//0-1
var div = document.getElementById("div1");
div.onclick = function () {
div.style.backgroundColor = Array(6)
.fill(1)
.reduce(function (value, item) {
return value + parseInt(Math.random() * 16).toString(16);
}, "#");
};
reverse
- 反转数组,改变原数组,并且返回这个原数组
// 数组反转
var len = parseInt(arr.length / 2);
for (var i = 0; i < len; i++) {
var temp = arr[i];
arr[i] = arr[arr.length - 1 - i];
arr[arr.length - 1 - i] = temp;
}
console.log(arr);
Aarry 的静态方法(Array.isArray())
- arr.puth() 实例化方法
- **Array.isArray();静态方法;**判断给入的内容是不是数组
- arr.constructor===Array;判断这个变量的构造函数是不是 Array
- Array.from()将迭代器对象转换成数组(ES6)
- iterable 迭代器
- 常用的迭代器有:HTMLCollection arguments NodeList Set Map
var divs = document.getElementsByClassName("div1");
var arr = Array.from(divs);
console.log(arr.pop());
console.log(divs);
function fn() {
console.log(Array.from(arguments));
console.log(arguments);
}
fn(1, 2, 3, 4, 5, 6);
//可以将迭代器对象转换为数组(ES5)
var arr = Array.prototype.slice.call(divs);
var arr = Array.prototype.concat.apply([], divs);
console.log(arr);
- 可以将迭代器对象转换为数组(ES5)
- var arr=Array.prototype.slice.call(divs);
- var arr=Array.prototype.concat.apply([],divs);
console.log(arr)
sort 排序
- arr.sort()
var arr = [1, 4, 5, 3, 2, 11, 15, 6, 7, 9, 1, 12, 3, 1, 22, 8, 9];
// arr.sort();
// console.log(arr);
arr.sort(function (a, b) {
return a - b; //从小到大排序
return b - a; //从大到小排序
});
console.log(arr);
var arr = [
{ id: 1001, name: "计算机1", price: 1200, num: 1 },
{ id: 1002, name: "计算机2", price: 3200, num: 1 },
{ id: 1003, name: "计算机3", price: 6800, num: 1 },
{ id: 1004, name: "计算机4", price: 7200, num: 1 },
{ id: 1005, name: "计算机5", price: 13000, num: 1 },
];
arr.sort(function (a, b) {
return b.price - a.price;
});
console.log(arr);
var arr = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
];
arr.sort(function () {
return Math.random() - 0.5;
});
算法
- 冒泡算法
for (var j = 0; j < arr.length - 1; j++) {
for (var i = 0; i < arr.length - j - 1; i++) {
if (arr[i] > arr[i + 1]) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
}
}
}
console.log(arr);
//找最大的往后放
- 选择排序
// 选择排序
for (var i = 0; i < arr.length; i++) {
var min = i;
for (var j = i + 1; j < arr.length; j++) {
if (arr[min] > arr[j]) {
min = j;
}
}
if (i !== min) {
var temp = arr[i];
arr[i] = arr[min];
arr[min] = temp;
}
}
console.log(arr);
//直到比较完才交换,找最小的往前放
- 快速排序
function qSort (arr) {
if (arr.length == 0) {
return []
}
var left = []
var right = []
var pivot = arr[0]
for (var i = 1; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i])
} else {
right.push(arr[i])
}
}
return qSort(left).concat(pivot, qSort(right))
}
二维数组
// 二维数组
var arr = [
[1, 2],
[3, 4],
];
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = [];
for (var j = 0; j < 10; j++) {
arr[i][j] = i * 10 + j;
}
}
console.log(arr[4][5]);
//arr[3][4]-->arr[3][5];
对象型数组
- 不能用 typeof 查询
// 对象型数组
var arr = [
{ id: 1001, name: "计算机1", price: 1200, num: 1 },
{ id: 1002, name: "计算机2", price: 3200, num: 1 },
{ id: 1003, name: "计算机3", price: 6800, num: 1 },
{ id: 1004, name: "计算机4", price: 7200, num: 1 },
{ id: 1005, name: "计算机5", price: 13000, num: 1 },
];