标签：arr 遍历 console name -- let 数组 log
数组-- 对象的遍历
- 1.啥是数组?
- 2.为什么要数组？
- 3.概念总结:
- 4.数组的语法以及使用
- 5.数组的初体验
- 6.数组的一些术语(下标)
- 7.动态添加属性
- 8.数组的遍历
- 9.对象的遍历-for in 循环
- 10.模仿取出后端数据打印后台
- 11.数组方法
- 12数组的小练习仅供了解
- 13.模仿工作中将数据渲染到页面上
- 总结
1.啥是数组?
数组(Array)是一种可以按顺序保存数据的数据类型
2.为什么要数组？
可以将多个数据有序的保存,我们在工作中从后端接收的数据很多都是数据套对象的形式,所以数组必不可少!
3.概念总结:
// 数组:将一堆数据,按照顺序保存数据的数据类型
// 数组:Array -- 是有序的,数据的集合(多个数据)
// 数组中可以储存任何数据,对象也可以
4.数组的语法以及使用
// let 数组名 =[数据1,数据2,数据3...数据n]
// 相当于将有序的数据的集合,赋值给变量,每个数据都有自己的编号
// 因为计算机的编号是从0开始的,所以数据1的编号就是0
// 数据的编号:索引或者下标 -- 管理数据的方便
// let 数组名 =[数据1,数据2,数据3...数据n]
// 索引 / 下标 0 , 1 , 2 ....0+1 --- 为了管理数据的方便
5.数组的初体验
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
// 数据可以存任何数据 - 字符串 - 对象 - 布尔类型
let uname = ['张三', 1, true, null]
// 取值: -------- 通过下标取值 ------ 数组里边存的什么数据类型,取出来就是什么数据类型
// 数组名[下标]
console.log(uname[0]); // 张三
document.write(uname[2]) // 取出下标就是数组元素位置-1
// 在数组中存放星期一到星期日,并打印
let week = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日' ]
console.log(week);
console.log(week[6]);
</script>
</body>
</html>
6.数组的一些术语(下标)
// 元素:就是数组中存放的每个数据
// 下标:也叫做索引,是数据(元素)的编号
// 长度:数组中数据(元素)的个数,可以通过属性获得
7.动态添加属性
数组声明完了后，也可以通过下标动态添加数组元素
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
// 元素:就是数组中存放的每个数据
// 下标:也叫做索引,是数据(元素)的编号
// 长度:数组中数据(元素)的个数,可以通过属性获得
let name =['张三','李四','王五',true,12]
console.log(name); // 打印数组
console.log(name[0]); // 打印第一个数据
// 数组名.length = 数组的元素的个数
console.log(name.length); // 打印数组的长度
// --------- 通过下标,动态添加数组元素 ------------
// 数组名[索引] = "添加内容"
name[5]="田六" // 1.动态添加数组元素
name[0]="刘六" // 2.如果索引位置已经存在,会覆盖原有的内容
console.log(name);
console.log(name.length);
</script>
</body>
</html>
8.数组的遍历
用循环把数组中每个元素都访问到,一般会用for循环遍历
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
// 用循环拿到数组中的每一个元素 --- 一般用for循环
// 语法:
// for(let i = 0; i < 数组名.length; i++){ i 代表数组中的索引值
// 数组名[i]
// }
// 数组的长度是5个,但是最后一个索引为4 所以< name.length = i<5 从0开始最后取到4
// 数组的每个元素都访问一遍
let name = ['张三', '李四', '王五', true, 12]
for (let i = 0; i < name.length; i++) { // i为索引值,0的时候就是'张三',循环遍历每个索引值
console.log(name[i]); // i = index(代表索引值) 必须是数组[i],不然是 打印i只是索引
}
</script>
</body>
</html>
9.对象的遍历-for in 循环
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
// 遍历输出对象里的元素
// 数组也属于对象类型 ---- 返回的类型是object
// 对象可以用[] 访问属性值
let a = {
name: "jikel",
age: '25',
home: "中国"
}
console.log(a['home']); // 中括号访问对象的属性值
// ---------- 对象的遍历 -------------
// 对象是无序的数据集合 -- 元素没有顺序
// 语法: for in 循环
// for (let k(代表属性名/方法名) in a(函数名)) {
// console.log(k);(打印属性的名)
// console.log(obj[k]);(打印属性的值) // []中不加引号,因为k代表属性,是动态变化的
// }
for (let k in a) { // 不一定使用k ,只是常用
console.log(k);
console.log(a[k]); // 访问全部的属性
}
for (let k in a){
console.log(k);
console.log(a[k]);
}
</script>
</body>
</html>
一定记住：
k 是获得对象的属性名， 对象名[k] 是获得 属性值
10.模仿取出后端数据打印后台
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
let students =[
{ name:'小张',age:18,work:'前端架构师' },
{ name:'小李',age:18,work:'后端架构师' },
{ name:'小王',age:18,work:'测试架构师' },
{ name:'小诸葛',age:18,work:'UI架构师' },
{ name:'小刘',age:18,work:'产品经理' },
{ name:'小花',age:18,work:'实习生' },
]
// 将信息打印出来
for(let i=0;i<students.length;i++){
let obj = students[i]
document.write(`
现有公司${students.length}人:<br>
名字为${obj.name}, 年龄为${obj.age}, 职位是${obj.work}
`)
console.log(obj.name);
for( let k in obj){
// console.log(k); // 属性名
// console.log(obj[k]); // 访问属性值
// console.log(k,obj[k]);
}
}
</script>
</body>
</html>
11.数组方法
数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法
- push() 动态向数组的尾部添加一个单元
- unshift() 动态向数组头部添加一个单元
- pop() 删除最后一个单元
- shift() 删除第一个单元
- splice() 动态删除任意单元
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
// 创建一个数组
let arr = ['张三', '李四', '王五']
// 数组的方法
// 1.push() 动态的向数组的尾部添加一个单元
arr.push('老六')
arr.push('老王')
// 2.unshift() 动态的向数组的头部添加一个单元
arr.unshift('王小二')
arr.unshift('张大仙')
// 3.pop() 删除最后一个单元
arr.pop()
// 4.shift() 删除第一个单元
arr.shift()
// 5.splice(从索引值开始,删除几个) 动态的删除任意单元
arr.splice(3, 1)
arr.splice(3, 1) // 删除一个就是删除本身
// 打印数组
console.log(arr);
</script>
</body>
</html>
12数组的小练习仅供了解
1.封装函数求平均数-最高值
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
let arr = [97, 87, 79, 94, 90, 100]
// 求平均分
function svg(x) {
// 先求和
let sum = 0
for (let i = 0; i < x.length; i++) {
sum += arr[i]
}
return `平均值是${sum / x.length}` // 将返回值给函数
}
let add = svg(arr)
console.log(add);
// 求最高分
// 1.我们先假设,第一个元素是最大的,用后边的值和第一个元素对比
// 2.如果后面的比前面的大,就将后边的值,赋值给第一个元素
// 循环遍历,if判断
function vMax(y) {
let max = y[0]
for (let a = 0; a < y.length; a++) {
console.log(y[a]);
if (max < arr[a]) {
max = arr[a]
}
}
return max // 注意只在函数内return
}
let mMax = vMax(arr)
console.log(`最大值是${mMax}`);
</script>
</body>
</html>
2.向数组中添加数据
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<script>
// 给一个数组数组,该数组中有很多的数字,将不为0的数据储存到新的数组中
let arr = [1, 2, 0, 4, 5, 0, 7, 8, 0]
let list = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) { // 如果数据不为0
list.push(arr[i]) // 就让数据动态添加到新数组中-从尾部添加
}
}
console.log(arr);
console.log(list);
</script>
</body>
</html>
13.模仿工作中将数据渲染到页面上
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
<style>
body {
text-align: center;
}
table {
margin: 0 auto;
width: 600px;
height: 200px;
border: 1px solid #ddd;
/* 合并表格的边框 */
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
}
th {
background-color: #eee;
}
</style>
</head>
<body>
<script>
let arr = [
{ name: "张楚岚", sex: '男', age: '18', aad: '哪都通' },
{ name: "张灵玉", sex: '男', age: '20', aad: '龙虎山' },
{ name: "宝儿姐", sex: '女', age: '未知', aad: '哪都通' },
{ name: "刮骨刀", sex: '女', age: '25', aad: '随性' },
{ name: "王也", sex: '男', age: '21', aad: '武当山' },
{ name: "诸葛青", sex: '男', age: '20', aad: '八卦镇' },
]
function num(x) {
// 固定不用渲染的地方
document.write(`
<h3>一人之下信息表</h3>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>势力</th>
</tr>
`)
// 渲染动态数据---利用循环
for (let i = 0; i < x.length; i++) {
let aRr = x[i] // i为索引值
document.write(`
<tr>
<td>${i+1}</td>
<td>${aRr.name}</td>
<td>${aRr.age}</td>
<td>${aRr.sex}</td>
<td>${aRr.aad}</td>
</tr>
`)
}
document.write(`</table>`)
}
num(arr)
</script>
</body>
</html>
总结
数组在js中的地位斐然
js的结构以及算法很大一部分就是来源于对数组的操作
本章仅仅对数组进行简单介绍
后续会在数组专栏中对一些简单的算法进行简单介绍!
标签：arr,遍历,console,name,--,let,数组,log 来源： https://blog.csdn.net/weixin_54902466/article/details/117883437
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。