8 数组
8.1 概念和基本使用
-
数组：是一种可以按顺序保存数据的数据类型；
-
声明语法：
//字面量声明 let 数组名 = [数据1, 数据2, ..., 数据n] //使用new Array构造函数声明 let 数组名 = new Array(数据1, 数据2, ..., 数据n)- 数组是按顺序保存，所以每个数据都有自己的索引（或者称下标），编号从0开始；
- 数组可以存储任意类型的数据；
-
取值语法：
数组名[索引号]- 通过下标取数据；
- 取出来是什么类型的，就根据这种类型特点来访问；
-
数组长度：数组中数据的个数，可以通过数组的length属性获得，即
数组名.length； -
遍历数组：
for(int i = 0; i < 数组名.length; i++){ 数组名[i]; }
8.2 操作数组
8.2.1 增
-
数组.push()：将一个或多个元素添加到数组的末尾，并返回该数组的新长度；-
语法：
arr.push(元素1, ..., 元素n) -
例：
let arr = ['red', 'green'] arr.push('pink') console.log(arr) //['red', 'green', 'pink']
-
-
数组.unshift(新增的内容)：将一个或多个元素添加到数组的开头，并返回该数组的新长度；-
语法：
arr.unshift(元素1, ..., 元素n) -
例：
let arr = ['red', 'green'] arr.unshift('pink') console.log(arr) //['pink', 'red', 'green']
-
8.2.2 删
-
数组.pop()：从数组中删除最后一个元素，并返回该元素的值；-
语法：
arr.pop() -
例：
let arr = ['red', 'green'] arr.pop(); console.log(arr) //['red']
-
-
数组.shift()：从数组中删除第一个元素，并返回该元素的值；-
语法：
arr.shift(); -
例：
let arr = ['red', 'green'] arr.shift(); console.log(arr) //['green']
-
-
数字.solice()：删除指定元素；-
语法：
arr.splice(start, deleteCount)start：指定修改的起始位置；deleteCount：表示要移除的数组元素的个数。该参数是可选的，如果省略则默认从指定的起始位置删除到最后；
-
8.2.3 改
数组[下标] = 新值
8.2.4 查
数组[下标]
8.3 数组排序
-
语法：
数组.sort() -
例：
let arr = [4, 2, 5, 1, 3] // 1.升序排列写法 arr.sort(function (a, b) { return a - b }) console.log(arr) // [1, 2, 3, 4, 5] // 降序排列写法 arr.sort(function (a, b) { return b - a }) console.log(arr) // [5, 4, 3, 2, 1]
渲染柱形图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
text-align: center;
/* 平分剩余空间 */
justify-content: space-around;
/* 设置侧轴上的子元素排列方式（单行）:从下到上 */
align-items: flex-end;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
/* 以y轴为主轴 */
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
let arr = []
for (let i = 1; i <= 4; i++) {
// let num = prompt('请输入第${i}个季度的数据')
// arr.push(num)
arr.push(prompt(`请输入第${i}个季度的数据：`))
}
document.write(`<div class="box">`)
for (let i = 0; i <= arr.length; i++) {
document.write(`
<div style="height: ${arr[i]}px">
<span>${arr[i]}</span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
document.write(`</div>`)
</script>
</body>
</html>
8.4 map方法迭代数组
-
map方法可以将数组中的元素遍历出来，然后元素据进行处理，并且返回新的数组； -
例：
const arr = ['pink', 'red', 'blue'] const newArr = arr.map(function (item, index) { console.log(item) //item得到数组元素 'pink' 'red' 'blue' console.log(index) //index得到索引号 0 1 2 return item + '颜色' }) console.log(newArr) //['pink颜色', 'red颜色', 'blue颜色']
8.5 join方法
-
join()方法用于把数组中的所有元素转换成一个字符串； -
例：
const arr = ['pink颜色', 'red老师', 'blue老师'] console.log(arr, join('')) //pink颜色red老师blue老师 -
注意：数组元素是通过参数里面指定的分隔符进行分隔的；
-
若不指定分隔符，则默认以
,分隔；console.log(arr, join()) //pink颜色,red老师,blue老师 -
若以
''进行分隔，则数组元素之间没有分隔符；console.log(arr, join('')) //pink颜色red老师blue老师 -
若以
|分隔；console.log(arr, join('|')) //pink颜色|red老师|blue老师
-
8.6 forEach方法遍历数组
-
forEach()方法用于访问数组的每个元素，并将元素传递给回调函数； -
主要使用场景：遍历数组的每个元素；
-
语法：
数组名.forEach(function (当前数组元素, 当前元素索引号) { //函数体 }) -
例：
const arr = ['pink', 'red', 'green'] arr.forEach(function (item, index) { console.log(`当前数组元素是：${item}`) //依次打印数组的每一个元素 console.log(`当前数组元素的索引是：${index}`) //依次打印数组每一个元素的索引 })
-
注意：形参中
item是必须要写的，索引号可选。
8.7 filter方法筛选数组元素
-
filter()方法用于创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素后过滤得到的； -
主要使用场景：筛选数组符合条件的元素，并返回筛选之后元素的新数组；
-
语法：
数组名.filter(function (currentValue, index) { return 筛选条件 }) -
例：
//筛选数组中大于30的元素 const score = [10, 50, 3, 40, 33] const re = score.filter(function (item) { return item > 30 }) console.log(re) //[50, 40, 33] -
注意：
- 返回值是一个数组，包含了符合条件的所有元素。若没有符合条件的元素，则返回空数组；
- 形参中的
currentValue必须写，index可选。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
