目录
数组对象
数组是存储任意数据的集合，数组由索引和值组成，天生自带length属性，索引0对应第一项，1对应第二项依次类推，最后一项的索引是arr.length -1;
数组对象的创建
-
字面量 ： [] 不给数据就是空数组
-
构造函数：new Array(); 不给数据就是空数组
// 字面量
var arr = [10, 20, "hello", true, {
name: "哈哈"
}];
console.log(arr);
console.log(arr.length);
// 构造函数
// 不传递参数 返回空数组
var arr1 = new Array(); //new反悔了数组类下具体的实例
console.log(arr1);
// 设置 原来没有就是增加 原来有就是修改
arr1[0] = 100;
arr1[1] = 200;
console.log(arr1);
// 传递一个参数 规定数组的长度
var arr2 = new Array(10);
console.log(arr2); //[空属性 × 10]
// 设置 原来没有就是增加 原来有就是修改
arr2[0] = "哈哈";
console.log(arr2);
// 传递多个参数 设置数组中的数据
var arr3 = new Array(10,20,30,"哈哈");
console.log(arr3);
// length属性是一个可读可写的属性 （既可以获取又可以设置）
var arr4 = [10,20,30,100,200];
// 获取长度
console.log(arr4.length);
// 设置
arr4.length = 100;
console.log(arr4);
arr4.length = 2;
console.log(arr4);
// 删除数组末尾最后一项
var arr5 = [100,20,300,"哈哈",1000,2000];
console.log(arr5);
// arr5.length = 5;
// console.log(arr5);
arr5.length--;
console.log(arr5);-
length属性可以改变原数组
检测是否是数组的方法
(1) instanceof 运算符 它可以用来检测是否为数组
（2）Array.isArray(参数); H5新增的方法 ie9以上版本支持
// 翻转数组
function reverse(arr) {
// if (arr instanceof Array) {
if (Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error 这个参数要求必须是数组格式 [1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));
// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj))数组对象的增加和删除
var arr1 = [10, 20, 30, 100, 200, 1000, 2000];
/*
push(数据,...);
作用:在数组末尾进行增加
参数：增加的数据,数据可以是一个也可以是多个，多个之间用逗号隔开
是否改变原数组：改变
返回值：返回增加后数组的长度
*/
var resArr1 = arr1.push("哈哈", "呵呵");
console.log(resArr1, arr1);
/*
pop();
作用:在数组末尾进行删除，删除一项
参数：无
是否改变原数组：改变
返回值：返回删除的哪一项
*/
var arr2 = [10, 20, 30, 100, 200, 1000, 2000];
var resArr2 = arr2.pop();
console.log(resArr2, arr2);
/*
unshift(数据,...);
作用:在数组开头进行增加
参数：增加的数据,数据可以是一个也可以是多个，多个之间用逗号隔开
是否改变原数组：改变
返回值：返回增加后数组的长度
*/
var arr3 = [10, 20, 30, 100, 200, 1000, 2000];
var resArr3 = arr3.unshift({
name: "哈哈"
});
console.log(resArr3, arr3);
/*
shift();
作用:在数组开头进行删除，删除一项
参数：无
是否改变原数组：改变
返回值：返回删除的哪一项
*/
var arr4 = [10, 20, 30, 100, 200, 1000, 2000];
var resArr4 = arr4.shift();
console.log(resArr4, arr4);
// splice(startIndex,n);
// 作用：从startIndex索引开始删除n项
// 参数：startIndex开始索引 n:个数
// 是否改变原数组：改变
// 返回值：将删除的每一项以一个新的数组进行返回 ,没有删除返回空数组
var arr5 = [10, 20, 30, 100, 200, 1000, 2000];
var resArr5 = arr5.splice(2, 3);
console.log(resArr5, arr5);
// splice(startIndex); 只传递开始索引，从当前索引开始删除到末尾
var arr6 = [10, 20, 30, 100, 200, 1000, 2000];
var resArr6 = arr6.splice(3);
console.log(resArr6, arr6);
// 替换
// splice(startIndex,n,content,...); 从当前索引开始删除n项用content进行替换
var arr7 = [10, 20, 30, 100, 200, 1000, 2000];
var resArr7 = arr7.splice(2, 3, "哈哈", {
name: "哈哈"
});
console.log(resArr7, arr7);
// 增加
// splice(startIndex,0,content,...); 从当前索引开始删除0项用content进行替换，插入到开始索引之前
var arr8 = [10, 20, 30, 100, 200, 1000, 2000];
var resArr8 = arr8.splice(2, 0, "哈哈", {
name: "哈哈"
});
console.log(resArr8, arr8);
筛选数组元素
// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);数组对象方法
// 数组对象的方法
// indexOf(数据,[index])/lastIndexOf(数据,[index]); 首次/最后一次出现的索引，不包含返回-1 (不兼容IE8及以下）
var arr4 = [10, 20, 30, 10, 200, 10, 2000];
console.log(arr4.indexOf(10, 2));
console.log(arr4.indexOf(100000));
console.log(arr4.lastIndexOf(10, 2));//返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
// 数组转换为字符串
// 1. toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join(分隔符)
// join(拼接符);
// 作用：将数组用拼接符进行拼接返回一个字符串
// 参数：字符串
// 返回值：字符串
var arr5 = [10, 20, 30, 10, 200, 10, 2000];
var resStr5 = arr5.join("+");
console.log(resStr5, arr5);
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink
// concat(数据1,数据2,..);
// 作用：做数据的拼接(数组的合并)
// 参数：任意数据
// 返回值：一个新的数组
var arr = [10, 20];
var resArr = arr.concat([10, 20, 30], "哈哈", {
name: "哈哈"
});
console.log(resArr, arr);
var arr1 = [20, 30, 40];
var arr2 = [200, 300, 400];
var newArr = arr1.concat(arr2);
console.log(newArr);
// reverse(); 倒叙，翻转
// 作用:将原数组进行倒叙
// 参数：无
// 是否改变原数组：改变
// 返回值:倒叙后的数组
var testArr = [10, 20, 30, 40, 50, 60];
var resTestArr = testArr.reverse();
console.log(resTestArr);
console.log(testArr);
// slice(startIndex,endIndex);
// 作用：数组的截取
// 参数：startIndex->开始索引 endIndex->结束索引 (不包含结束索引)
// 是否改变原数组：不变
// 返回值：将截取到的内容以一个新的数组返回，截取不到返回空数组
// 不传递参数，默认从索引0开始截取到末尾相当于克隆一份一模一样的
// 传递一个：从当前索引开始截取到末尾
// 支持负数索引：最后一项是-1 ，截取都是从前向后截取的 开始索引要小于结束索引
var test1Arr = [10, 20, 30, 40, 50, 60];
var resTest1Arr = test1Arr.slice(1,4);
console.log(resTest1Arr);
console.log(test1Arr);
console.log(test1Arr.slice());
console.log(test1Arr.slice(3));
console.log(test1Arr.slice(-5,-2));
简单数组排序
// 2. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);数组的算法
数组去重
// 第一种方式
// var arr = [1, 1, 2, 1, 1, 2, 4, 4, 2];
var arr = [10, 20, 30, 40, 100, 200, 10, 20, 30, 40, 100, 200, 10, 20, 30, 40, 100, 200];
/*
[1(0), 1(1), 2(2), 1(3), 1(4), 2(5), 4, 4, 2]
i = 0;
j = 0 + 1 =>1
1 == 1 成立 删除某一项后边的都会往前错一位
[1(0), 2(1), 1(2), 1(3), 2(4), 4, 4, 2]
j = 2
1 == 1
[1(0), 2(1), 1(2), 2(3), 4, 4, 2]
j = 3
1 == 2
[1(0), 2(1), 1(2), 2(3), 4, 4, 2]
...
数组塌陷:数组中某一项删除以后，后边的每一项都要向前移动一位，索引值都也移动了一位
*/
//核心思想 用当前项和数组当中后边的每一项进行比较，如果当前项和后边这一项相等就删除后边一项
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
// 当前项和后边这一项
if (arr[i] == arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
console.log(arr);
// 第二种方式 (indexOf/lastIndexOf->IE8及以下不兼容)
var arr1 = [10, 20, 30, 40, 100, 200, 10, 20, 30, 40, 100, 200];
// 新创建一个数组
var newArr = [];
for (var i = 0; i < arr1.length; i++) {
var cur = arr1[i];
// 如果新的数组中不包含这一项 就添加到新的数组中
if (newArr.indexOf(cur) == -1) {
newArr.push(cur);
}
}
console.log(newArr);数组去重函数封装
// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
// 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
// 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
// 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
// 封装一个 去重的函数 unique 独一无二的
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
// var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
var demo = unique(['blue', 'green', 'blue'])
console.log(demo);数组排序
// 默认升序
// 选择排序
// 核心思想：用数组中当前项和数组中后边的每一项进行比较如果当前项大于后边这一项就交换位置
/*
[8,6,3]
i = 0;
j = 1;
8 > 6 => [6,8,3]
j = 2;
6 > 3 => [3,8,6]
i = 1;
j = 2;
8 > 6 => [3,6,8]
i = 2
...
*/
// var arr = [8,6,3];
var arr = [8, 6, 3, 10, 20, 30, 99, 10, 22, 88, 1000, 222, 36];
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
// 当前项大于后边这一项
if (arr[i] > arr[j]) {
// 交换位置
var temp;
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
// 冒泡排序
// 核心思想：用当前项和后一项进行比较，如果当前项大于后一项就交换位置
// var arr = [4, 3, 5, 2, 1];
var arr = [999, 66, 10, 22, 10000, 88, 66, 11];
/*
第一轮比较 首先不用和自己比，经过第一轮比较把最大值放到末尾
4, 3, 5, 2, 1
第一次 4 > 3: 3,4,5,2,1
第二次 4 < 5: 3,4,5,2,1
第三次 5 > 2: 3,4,2,5,1
第四次 5 > 1: 3,4,2,1,5
第二轮比较 首先不用和自己比,把第二大的值放到倒数第二位
3,4,2,1,5
第一次 3 < 4 3,4,2,1,5
第二次 4 > 2 3,2,4,1,5
第三次 4 > 1 3,2,1,4,5
第三轮比较 首先不用和自己比 ...
3,2,1,4,5
第一次 3 > 2 2,3,1,4,5
第二次 3 > 1 2,1,3,4,5
第四轮比较
2,1,3,4,5
第一次 2 > 1 1,2,3,4,5
轮数 ：arr.length - 1;
次数：arr.length -1 - i;
轮数 次数
i j
0 arr.length -1- 0 4
1 arr.length -1 -1 3
2 arr.length -1 -2 2
3 arr.length -1 -3 1
*/
// 轮数
for (var i = 0; i < arr.length - 1; i++) {
// 次数
for (var j = 0; j < arr.length - 1 - i; j++) {
// 当前项大于后一项就交换位置
if (arr[j] > arr[j + 1]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
// 交换值
var a = 10;
var b = 20;
// 中间变量
var temp;
temp = a;
a = b;
b = temp;
console.log(a, b);数组排序方法sort（）
// sort方法改变原数组，返回值是排好序的数组
var arr = [11, 9, 8, 5, 2, 1, 4, 22, 3];
// 不传递参数 默认是按照字符串的ASCII值比较的 默认升序
// sort();
var resArr = arr.sort();
console.log(resArr);
console.log(arr);
// 传递参数
// sort(callBack);
// callBack:函数
// 数值排序
//callBack 函数是sort方法内部去给我们调用的，是根据返回值的正负进行比较 (相减的结果要么是正数，要么是负数)
var arr1 = [11, 9, 8, 5, 2, 1, 4, 22, 3, 100, 200, 88, 66, 55];
var resArr1 = arr1.sort(function (a, b) {
console.log(a, b);
// return a - b; //升序
return b - a; //降序
});
console.log(resArr1);
console.log(arr1); var arr2 = [{
name: "王五",
age: 100,
date: "1910-4-2",
name1: "Hllo"
},
{
name: "张三",
age: 80,
date: "1960-8-2",
name1: "hi"
},
{
name: "李四",
age: 70,
date: "1970-8-2",
name1: "Joy"
},
{
name: "王二麻子",
age: 70,
date: "1970-4-2",
name1: "bors"
},
];
console.log(arr2);
// 按照年龄排序
var resArr2 = arr2.sort(function (aObj, bObj) {
console.log(aObj, bObj);
console.log(aObj.age, bObj.age);
return aObj.age - bObj.age;
});
console.log(resArr2);
// 出生日期
var resArr2 = arr2.sort(function (aObj, bObj) {
return new Date(bObj.date) - new Date(aObj.date);
});
console.log(resArr2);
// 按照名字(中文)进行排序
return 字符串.localeCompare(字符串,"zh"); //按照拼音进行排序的
var resArr2 = arr2.sort(function(a,b){
// return a.name.localeCompare(b.name,"zh"); //升序
return b.name.localeCompare(a.name,"zh"); //降序
});
console.log(resArr2);
console.log(arr2);
//return 字符串.localeCompare(字符串); //按照英文字母进行排序的
var resArr2 = arr2.sort(function (a, b) {
return b.name1.localeCompare(a.name1);
});
console.log(resArr2);
console.log(arr2);
// 随机排序
var testArr = [10,5,8,20,99,78,66,99,1000,2000];
var resTestArr = testArr.sort(function(){
// // 返回随机的正负数
return Math.random() - 0.5;
});
console.log(resTestArr);
console.log(testArr);案例：价格排序
<p>
<button>升序</button>
<button>降序</button>
</p>
<ul id="show">
<!-- <li>
<p>商品名称:诺基亚手机</p>
<p>商品价格:1000</p>
</li> -->
</ul>
<script>
// 获取元素
var show = document.getElementById("show");
var btns = document.getElementsByTagName("button");
// 数据
var goods = [
{
"name": "诺基亚手机",
"price": 1000
},
{
"name": "联想电脑",
"price": 3000
},
{
"name": "一双鞋老北京布鞋",
"price": 200
},
{
"name": "一杯奶茶",
"price": 20
},
];
console.log(goods);
// 页面初始化
show.innerHTML = bindData(goods);
// 升序
btns[0].onclick = function(){
var resArr = goods.sort(function(a,b){
return a.price - b.price;
});
// 重新做数据绑定
show.innerHTML = bindData(resArr);
}
// 降序
btns[1].onclick = function(){
var resArr = goods.sort(function(a,b){
return b.price - a.price;
});
// 重新做数据绑定
show.innerHTML = bindData(resArr);
}
// 数据绑定
// arr:数组
function bindData(arr) {
// 字符串拼接
var str = '';
for (var i = 0; i < arr.length; i++) {
// 获取当前这一项
var curData = arr[i];
str += '<li><p>商品名称:' + curData.name + '</p><p>商品价格:' + curData.price + '</p></li>'
}
return str;
}
</script>数组的迭代方法
every(callBack)
every(callBack);
作用：针对数组进行判断，都为真才为真，一假即假
参数：callBack->函数 定义形参 val->值,index->索引
返回值：布尔值
var arr = [10, 20, 30, 5, 2, 1000, 2000];
var resBool = arr.every(function (val, index) {
console.log(index, val);//3 5
// return val > 5;
return val % 2 == 0;
});
console.log(resBool);//falsesome(callBack)
some(callBack);
作用：针对数组进行判断,一个为真即为真，都假才假
参数：callBack->函数 定义形参 val->值,index->索引
返回值：布尔值
var resBool1 = arr.some(function (val, index) {
console.log(index, val);//3 5
return val % 2 != 0;
});
console.log(resBool1);//truefilter(callBack）
filter(callBack);
作用：针对数组进行过滤，将符合条件的以一个新的数组返回，没有符合条件的返回空数组
参数：callBack->函数 定义形参 val->值,index->索引
返回值：数组
var arr1 = [10, 20, 30, 5, 2, 1000, 2000];
var resArr1 = arr1.filter(function (val, index) {
console.log(val, index);
return val > 25;
});
console.log(resArr1);//30 1000 2000map(callBack)
map(callBack);
作用：针对数组进行一些操作，将操作完成的数组以一个新的数组返回
参数：callBack->函数 定义形参 val->值,index->索引
返回值：数组
var arr2 = [10, 20, 30, 5, 2, 1000, 2000];
var resArr2 = arr2.map(function (val, index) {
console.log(val, index);
// 扩大10倍
return val * 10;
// return val - 5;
});
console.log(resArr2);//[100,200,300,50,20,10000,20000]forEach(callBack)
forEach(callBack);
作用：针对数组进行迭代
参数：callBack->函数 定义形参 val->值,index->索引
返回值：无
var arr3 = [10, 20, 30, 5, 2, 1000, 2000];
var resArr3 = arr3.forEach(function (val, index) {
console.log(val, index);
});
console.log(resArr3);//undefined