什么是数组？
数组是一种有序的集合，有长度和索引，以及身上有许多的API方法
面试题：
数组和伪数组的区别：
数组和伪数组都有长度和索引，区别是数组身上有许多的API方法 而伪数组身上不存在这些API方法
创建数组的几种方式
方式1：利用字面量创建
let arr = []
方式2：利用new 关键字创建
let arr1 = new Array()
数组身上常用的属性和方法
let arr = []
arr.length :属性是数组的长度
遍历数组：我们可以使用For循环进行遍历，等到在ES6中我们可以使用map以及forEach()等方法进行遍历
面试题：forEach()和map()的区别：
forEach()是没有返回值的，
而map()是存在返回值的
深拷贝与浅拷贝
学习数组，我们可以了解到简单数据类型和复杂数据类型（引用数据类型）
简单数据类型一般存储在栈中
复杂数据类型一般存储在复杂数据类型中
浅拷贝只是复制某个对象的指针（地址），导致它们都指向了堆内存中同一个数据，互相影响。
经过赋值操作，两个对象都指向了堆内存中的同一个数据，所以其中一个发生变化时，另一个也会随着变化。
let arr = [1, 2, 3, 4];
let arr1 = arr;
arr[4] = 5;
console.log(arr1, arr);
深拷贝是赋值的内容
深拷贝是在堆内存中创建一个一模一样的数据，然后把新数据的内存地址赋给新变量，这样旧变量和新变量就指向了不同的数据，也就不会互相影响。
let arr = [1,2,3,4,5]
let arr1 = []
for(let i = 0;i<arr.length;i++){
arr1[i] = arr[i];
}
arr[4] = 6;
console.log(arr1)
console.log(arr)
数组常用的API方法
unshift()在头部添加 会改变原数组 返回值是新数组的长度
shift() 删除头部元素 会改变原数组 返回值是删除对应的元素
push()在尾部添加 会改变原数组 返回值是新数组的长度
pop()删除尾部的元素 会改变原数组 返回值是删除对应的元素
splice()可以删除也可以修改还可以添加
有两个参数 1参： 索引 2参： 长度 如果不写 删除到尾部 如果第二个参数是0则不删除 3参：用于替换的数值
删除 两个参数 并且第二个参数不能为0 返回值：删除的数据 数组
添加 三个参数 并且第二个参数只能为0 返回值：空数组
修改 三个参数 并且第二个参数不能为0 返回值：被替换的数组 数组
slice()
join()数组转字符串
concat() 数组拼接 会返回一个新的数组
reverse()数组反转
indexOf()数组查找
数组排序
可以使用冒泡排序和sort进行排序
let arr = [10, 5, 7, 3, 8, 1, 14];
冒泡排序
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}
console.log(arr);
sort()
console.log(arr.sort((a, b) => {
return a - b
}));
数组迭代
迭代就是遍历，进行循环
1.使用for循环
2.使用forEach 没有返回值
3.使用filter 过滤筛选
4.使用every 全部都为true 结果就为true 逻辑与
5.使用some 如果有一个为true 结果就为true 逻辑或
6.使用map 存在返回值
7.使用for of 内部存在迭代器 不同于forEach 它可以配合break continue return一起使用
课堂练习
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片排序title>
<style>
.all {
box-sizing: border-box;
width: 1190px;
border: 1px solid black;
margin: 20px auto;
}
h2 {
text-align: center;
color: purple;
}
.btn {
width: 100%;
text-align: center;
margin-top: 20px;
}
button {
background-image: linear-gradient(90deg, green, skyblue);
border: 1px solidblack;
outline: none;
}
.imgs-div {
width: 100%;
width: 1190px;
padding: 20px;
}
ul {
width: 100%;
height: 500px;
}
li {
margin: 5px 10px;
float: left;
width: 251px;
height: 230px;
list-style: none;
text-align: center;
}
img {
width: 100%;
height: 90%;
}
style>
head>
<body>
<div class="all">
<h2>亚索所有皮肤免费来袭h2>
<div class="btn">
<button>从大到小button>
<button>随机排序button>
div>
<div class="imgs-div">
<ul>
<li> <img src="./img/1.png"> <span>西部牛仔8span> li>
<li> <img src="./img/2.png"> <span>原计划2span> li>
<li> <img src="./img/3.png"> <span>猩红之月3span> li>
<li> <img src="./img/4.png"> <span>黑夜使者1span> li>
<li> <img src="./img/5.png"> <span>奥德赛5span> li>
<li> <img src="./img/6.png"> <span>战场boss7span> li>
<li> <img src="./img/7.png"> <span>真实伤害6span> li>
<li> <img src="./img/8.png"> <span>灵魂莲华4span> li>
ul>
div>
div>
<script>
var arr = [{
"src": "./img/1.png",
"title": "西部牛仔8",
id: '8'
}, {
"src": "./img/2.png",
"title": "原计划2",
id: '2'
}, {
"src": "./img/3.png",
"title": "猩红之月3",
id: '3'
}, {
"src": "./img/4.png",
"title": "黑夜使者1",
id: '1'
}, {
"src": "./img/5.png",
"title": "奥德赛5",
id: '5'
}, {
"src": "./img/6.png",
"title": "战场boss7",
id: '7'
}, {
"src": "./img/7.png",
"title": "真实伤害6",
id: '6'
}, {
"src": "./img/8.png",
"title": "昼夜莲华4",
id: '4'
}];
let btns = document.querySelectorAll('.btn button')
let img = document.querySelectorAll('.imgs-div li img')
let sps = document.querySelectorAll('.imgs-div li span')
let flag = true
btns[0].onclick = function () {
if (flag) {
flag = !flag
btns[0].innerHTML = '从小到大'
arr.sort((a, b) => {
return b.id - a.id
})
} else {
flag = !flag
btns[0].innerHTML = '从大到小'
arr.sort((a, b) => {
return a.id - b.id
})
}
render(arr)
}
btns[1].onclick = function () {
let arr1 = arr.sort(() => {
return Math.random() - 0.5
})
render(arr)
console.log(arr1);
}
function render(arr) {
arr.forEach((item, index) => {
img[index].src = item.src
sps[index].innerHTML = item.title
})
}
script>
body>
html>
