qq免费搭建网站,中山市住房建设局网站,山东阳信建设局网站,攀枝花网站推广什么是数组#xff1f;
数组是一种有序的集合#xff0c;有长度和索引#xff0c;以及身上有许多的API方法
面试题#xff1a;数组和伪数组的区别#xff1a;数组和伪数组都有长度和索引#xff0c;区别是数组身上有许多的API方法 而伪数组身上不存在这些API方法创建数组…什么是数组
数组是一种有序的集合有长度和索引以及身上有许多的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;// console.log(arr1, arr);arr[4] 5;console.log(arr1, arr);
深拷贝是赋值的内容
深拷贝是在堆内存中创建一个一模一样的数据然后把新数据的内存地址赋给新变量这样旧变量和新变量就指向了不同的数据也就不会互相影响。
let arr [1,2,3,4,5]
let arr1 []
for(let i 0;iarr.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]) {// let temp 0;// temp arr[j];// arr[j] arr[j 1];// arr[j 1] temp;[arr[j], arr[j 1]] [arr[j 1], arr[j]];}}}
console.log(arr);sort()//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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图片排序/titlestyle.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
/headbodydiv classallh2亚索所有皮肤免费来袭/h2div classbtnbutton从大到小/buttonbutton随机排序/button/divdiv classimgs-divulli img src./img/1.png span西部牛仔8/span /lili img src./img/2.png span原计划2/span /lili img src./img/3.png span猩红之月3/span /lili img src./img/4.png span黑夜使者1/span /lili img src./img/5.png span奥德赛5/span /lili img src./img/6.png span战场boss7/span /lili img src./img/7.png span真实伤害6/span /lili img src./img/8.png span灵魂莲华4/span /li/ul/div/divscript// 1.点击第一个按钮 从大到小排序 然后button字体变成从小到大// 2.再次点击 再变回来 一直切换// 3.点击第二个按钮进行随机排序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 truebtns[0].onclick function () {if (flag) {flag !flagbtns[0].innerHTML 从小到大arr.sort((a, b) {return b.id - a.id})} else {flag !flagbtns[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) {// console.log(item); img[index].src item.srcsps[index].innerHTML item.title})}/script
/body/html
