一、数组定义
ECMAScript数组特点：
- 可以动态调整，即可以随着数据的增加自动填长，没有数据的地方默认为undefined。
- 每一项可以保存任何数据类型，比如第一项存数字，第二项存对象。
数组创建方法：
1、new Array() （new可以省略）与 Array.of()
注意:当new Array()里只包含1个数字的时候，创建数字长度的数组。所以有了Array.of()方法，当我们传递1个数字的时候，会建立包含这个数字的数组
<script>
let arr1 = new Array(1, 2, 3) //[1,2,3]
let arr2 = new Array(1); //创建长度为1的数组,数组内容为空也就是undefined
let arr3 = Array.of(1) //[1]
</script>
2、数组字面量表示法
注意:1、不要随意用类似[ , ,]创建数组，会导致数组的项数不稳定。
2、使用字面量表示法创建，不会调用Array构造函数
<script>
let arr1 = [1, 2, 3]; //[1,2,3]
let arr2 = []; //创建一个空数组
let arr3 = [1, 2, ]; //不要这样，会创建含2项或3项的数组
</script>
二、检测数组
value instanceof Array与Array.isArray()
注意：instanceof存在问题：它假设在单一的全局执行环境。如果网页包含多个框架，那么实际存在两个以上的不同的全局执行环境，从而存在两个以上不同版本的Array构造函数。为了解决这个问题，es5添加了 Array.isArray()
<script>
let arr1 = [1, 2, 3, 4]
console.log(arr1 instanceof Array); //true
console.log(Array.isArray(arr1)); //true
</script>
三、数组转换成字符串
alert（value）、点语法、value.toString()、String(value)、value.toLocaleString()与value.join()
四、其他转换成数组
value.split()与Array.from(value)
五、修改数组
1、栈方法（先进后出）
push()和pop()
数组可以表现的像栈一样，限制插入和删除顶的数据结构。
注意:1、push()和pop()改变原数组
2、push()返回值为数组长度、pop()返回值为删除的数组项的值
3、push()可以添加任意数量的参数，pop()只能删除顶端一项
<script>
let arr1 = [1, 2];
let length = arr1.push(4); //[1,2,4] 返回值为3
let deleteArr1 = arr1.pop(); //[1,2] 返回值4
</script>
2、队列方法（先进先出）
shift()和unshift()
注意:1、shift()和unshift()改变原数组
2、unshift()返回值为数组长度、shift()返回值为删除的数组项的值
3、unshift()可以添加任意数量的参数，shift()只能删除顶端一项
<script>
let arr1 = [1, 2];
let length = arr1.unshift(4); //[4,1,2] 返回值为3
let deleteArr1 = arr1.shift(); //[1,2] 返回值4
</script>
3、操作方法
a、concat()和slice()
注意:concat()和slice()返回新数组
- concat()传参可以为0到任意个，如果传参为数组则会将数组的每一项添加到新数组中，如果不是数组，这些值就会被简单的添加到末尾。
- slice(起始位置，结束位置)，结束位置可以不填，默认到当前数组末尾的所有项。且起始位置<=新数组<结束位置。如果起始位置大于结束位置，则返回空数组。
- slice()的传参为负数的时候，则用数组长度加上改参数来确定位置。
<script>
let arr1 = [1, 2, 3, 4];
var arr2 = arr1.concat(["jun", "mo"]); //[1,2,3,4,"jun","mo"]
var arr3 = arr1.slice(-2, -1); //[3]
</script>
b、splice()
注意:splice()改变原数组，返回一个数组，数组包含删除的项
- 删除:splice(起始位置，删除项数）可以完成对数组任意项的删除。起始位置为负数的时候，则用数组长度加上改参数来确定位置。删除项数小于0的时候，不删除原数组的的任意项，返回空数组。
- 插入：splice(起始位置，删除项数、插入项)。
- 替换：splice(起始位置，0、插入项)
<script>
let arr1 = [1, 2, 3, 4];
let arr2 = arr1.splice(-1, 1); //arr2=[4] arr1=[1,2,3]
let arr3 = arr1.splice(1, 2, 5, 6) //arr3=[2,3] arr1=[1,5,6,4]
let arr4 = arr1.splice(0, 0, 12) //arr4=[] arr1=[12,1,5,6]
</script>
c、copyWithin()
<script>
let a = [1, 2, 3, 4];
console.log(a.copyWithin(2, 0, 2)); //[1,2,1,2]
</script>
注意:copyWithin(复制起始位置，复制内容的起始位置，复制内容结束位置)（包起不包末）改变原数组，返回原数组
4、删除数组
delete
注意:delete改变原数组,仅仅删除所删项的内容，所删项的位置保留。返回布尔类型，删除成功则返回true
<script>
let arr = [1, 2, 3, 4, 5, 6];
console.log(delete arr[0]); //返回布尔值
console.log(arr); //[empty, 2, 3, 4, 5, 6]
</script>
5、清空数组
六、数组重排序方法
reverse()和sort()
reverse()反转数组和sort()对数组排序
注意:1、sort()（不稳定）排序是对字符串进行比较，它会把接收到的参数转换为字符串，再比较他们的字符编码。所以会造成2>13的情况
<script>
var arr1 = [1, 5, 3, 10, 11];
var arr2 = ["c", "d", "v", "a", "e"];
console.log(arr1.reverse()); //11,10,3,5,1
console.log(arr1.sort()); //1,10,11,3,5 注意这里的3和5大于10和11
console.log(arr2.sort()); //"a","c","d","e","v"
</script>
为了避免这种错误，我们可以采用sort()接收一个比较函数作为参数，以便确定哪个值位于哪个值的前面。
<script>
var arr1 = [1, 5, 3, 10, 11];
function compare(value1, value2) {
return (value1 > value2 ? 1 : -1);//相等的时候不作比较，以免造成不稳定
}
arr1.sort(compare); //[1, 3, 5, 10, 11]
</script>
七、数组查找方法
1、基本概念
2、indexOf()、lastIndexOf()、includes()与find()区别举例
<script>
//全等于查找
let arr = [1, 2, 3, 4, 2, "9"];
//方法一:返回查找内容所在位置，从左往右查找
console.log(arr.indexOf(2)); //2(位置)
//方法二：返回查找内容所在位置，从右往左查找
console.log(arr.lastIndexOf(2)); //4
//以下都是新增的方法
//方法三：反回布尔值
console.log(arr.includes(2)); //true
//方法四：从左边第一个内容开始查找，如果符合则打印出内容，都没有找到则返回undefined
let res = arr.find(function(item) {
return item == 2;
});
console.log(res); //2(元素本身)
</script>
八、数组迭代方法
1、基本概念
注意：以下方法都不会改变原数组
2、some()与every()区别举例：验证输入是否包含关键词
<body>
<input type="text" name="title">
<span></span>
<script>
let keywords = ["php", "js"],
title = document.querySelector('[name="title"]'),
span = document.querySelector("span");
title.addEventListener("keyup", function() {
/**
*some()只需要包含keywords中的任意一个，返回值为true
*every()必须包含keywords中的全部，返回值为true
*/
let res = keywords.some(keywords => {
return this.value.indexOf(keywords) != -1
})
span.innerHTML = res ? "" : `请输入内容包含${keywords.join(",")}的关键词`;
})
</script>
</body>
3、forEach()与map()区别举例
<body>
<li>1</li>
<li>2</li>
<script>
//foreach可以操纵dom节点，但是map不行。
//foreach无返回值，但是map有返回值
let li = document.querySelectorAll("li");
li.forEach(function(item) {
console.log(item);//输出li标签
})
</script>
</body>
4、filter()用法举例
<script>
let arr = [1, 2, 3, 4, 5];
let a = arr.filter(function(item) {
return item > 3; //[4,5]
})
console.log(a);
</script>
九、缩小数组方法
reduce()和reduceRight()
- 这两个方法都接收2个参数：每一项上调用的函数、（可选）作为缩小基础的初始值
- reduce()从左往右开始（正序）、 reduceRight()从右往左开始（倒叙）。除此之外完全相同。
- pre:默认为第一个元素，且第一次迭代是从第一个位置开始（位置从0开始）。可以通过缩小基础的初始值来给pre赋初试值
- cur:当前数组的元素
- index:数组项的索引
- array:数组本身
如果想要从第0个位置开始索引，需要给函数加上作为缩小基础的初始值
1、reduce()用法一：求和
<script>
let arr = [1, 2, 1, 1, 2, 3],
sum = arr.reduce(function(arr, cur) {
return arr += cur;
}, 0)
console.log(sum); //10
</script>
2、reduce()用法一：找最大值（最小）
<script>
let arr = [1, 2, 1, 1, 2, 3],
newArr = arr.reduce(function(pre, cur) {
return pre > cur ? pre : cur;
})
console.log(newArr); //3
</script>
3、reduce()用法二：数组去重
方法一
<script>
let arr = [1, 2, 1, 1, 2, 3],
newArr = arr.reduce(function(arr, cur) {
arr.includes(cur) ? arr : arr.push(cur);
return arr;
}, [])
console.log(newArr); //[1,2,3]
</script>
方法二：利用es6中的set不会重复去重
<script>
//数组利用set去重
let arr3 = [1, 2, 3, 4, 5, 6, 6, 6, 6];
arr3 = [...new Set(arr3)];
console.log(arr3); //[1, 2, 3, 4, 5, 6]
</script>
4、reduce()案例：炫酷文字logo效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷文字logo效果</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
width: 100vw;
height: 100vh;
background-color: #cafedb;
}
.text {
margin: 150px auto;
width: 800px;
text-align: center;
font-size: 100px;
}
.color {
display: inline-block;
width: 150px;
color: yellow;
animation-name: move;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes move {
50% {
transform: scale(2);
filter: hue-rotate(360deg)
}
100% {
transform: scale(1);
filter: hue-rotate(720deg)
}
}
</style>
</head>
<body>
<div class="text">君莫笑</div>
<script>
let text = document.querySelector(".text");
[...text.textContent].reduce(function(pre, cur, index) {
(pre == index) && (text.innerHTML = "");
let span = document.createElement("span");
span.innerHTML = cur;
text.appendChild(span);
span.addEventListener("mouseover", function() {
this.classList.add("color");
})
span.addEventListener("animationend", function() {
console.log(1);
this.className = " ";
})
}, 0);
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
