JS进阶day02
目录
前言
JS进阶02学习开始
一、复习
二、模板字符串
- 简化了字符串的拼接
- ` 反引号之间的内容就是模板字符串 ${JS表达式} `
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模板字符串</title> </head> <body> <p id="cont"></p> <script> var emp={ ename: '新', sex: 1, salary: 50000 } var str=` 姓名：${emp.ename} <br> 性别：${emp.sex===1 ? '男' : '女'} <br> 工资：${emp.salary} ` console.log(str) // 渲染 cont.innerHTML=str </script> </body> </html>
三、对象中的方法
- 方法对应的是一个函数
var person = { play: function(){ this 指向调用当前方法的对象 } } person.play() //调用方法<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>对象中的方法</title> </head> <body> <script> var person={ name: '新', // 方法：对应的是一个函数 play: function(){ // this 指向调用方法的对象 console.log(this) console.log(this.name+'正在玩单杠') }, tan: function(){ console.log('新哥正在摊煎饼') } } // console.log(person) // 调用方法 // person.play() // person.tan() // 练习：创建一个圆的对象， 包含的属性有半径、圆周率，添加方法计算圆的面积；添加方法计算圆的周长 var circle = { r: 5, pi: 3.14, area: function(){ console.log( this.pi*this.r*this.r ) }, len: function(){ console.log( 2*this.pi*this.r ) } } console.log(circle) circle.area() circle.len() </script> </body> </html>
四、数据存储
- 原始类型：直接将数据存储在栈内存
- 引用类型：将数据存储在堆内存，同时会自动生成一个地址，如果把对象赋给变量，实际变量存储的是地址。
- 引用类型数据的销毁：对象不被任何的地址所引用就会自动销毁
null：表示一个空地址，不指向任何堆内存中的数据，用于销毁引用类型的数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据存储</title> </head> <body> <script> /* // 原始类型数据存储 var a = 1 // 把a的值拷贝一份，然后赋给b，a和b之间都是独立 var b = a a = 2 console.log(b) */ // 引用类型数据存储 var xin = { color: '绿色', size: 'XXXL' } var ming=xin ming.color='红色' xin.size='XXXXL' // console.log(xin) // console.log(ming) // // 两个对象比较，比较的是对象的地址 // console.log(xin===ming) // 引用类型数据销毁 xin = null ming = null /* var p1={a:1} var p2={a:1} console.log(p1===p2) */ // console.log(typeof null) //object // 查看以下程序的输出结果 var n=3 function fn(n){ // 形参n属于局部变量 // var n=3 // 将当前作用域的n改为3，不会往上找全局变量n n=7 } // 将n作为参数传递，拷贝一份n的值过来，和原来的n没有关系 fn(n) //fn(3) // console.log(n) //3 var obj={ b:2 } function foo(o){ //var o=obj o.b = 4 } // 把对象作为参数传递，传递的地址 foo(obj) console.log(obj.b) //4 </script> </body> </html>
五、数组对象
- 数组：就是一组数据的集合，每个数据称作元素
5.1创建数组 —— 数组字面量
- [ 元素1, 元素2, .... ]
5.2访问数组元素
- 为了获取每一个数据
下标：是数组为每个元素自动添加的编号，是一个>=0的整数
数组[下标]
如果元素不存在，返回的是undefined
5.3数组的长度
- 数组.length
获取数组元素的个数
- 在末尾添加新的元素
数组[ 数组.length ] = 值
清空数组
数组.length = 0
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数组</title> </head> <body> <script> // 数组字面量 var arr=['xin','ming',20,true,function(){},{}] // console.log(arr, typeof arr) // 练习：创建数组，包含一组成绩 var score=[81,93,70,64] // 练习：创建数组，包含一组城市的名称 var city=['北京','西安','郑州','深圳'] // 访问数组元素 // console.log( city[5] ) city[0]='成都' city[4]='广州' city[7]='上海' // console.log(city) // 练习：创建数组，包含若干个汽车品牌名称，修改元素的值，在末尾添加新的元素 var car = ['比亚迪','特斯拉','蔚来'] car[1]='小鹏' // car[3]='长城' // car[4]='奥迪' car[car.length]='长城' car[car.length]='奥迪' // console.log(car) // 获取数组的长度 // console.log(car.length) // 练习：创建一个空数组，使用数组长度往数组中添加若干手机品牌名称 var phone=[] phone[phone.length]='华为' phone[phone.length]='小米' phone[phone.length]='OPPO' // 清空数组元素 phone.length=0 console.log(phone) </script> </body> </html>
5.4创建数组 —— 内置构造函数
- new Array(元素1, 元素2,...)
- new Array(3)初始化长度为3，可以添加更多个元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内置构造函数</title> </head> <body> <script> var arr = new Array('a','b','c') var arr2 = new Array(3) arr2[0]='d' arr2[1]='e' arr2[2]='f' arr2[3]='g' // console.log(arr2) // 练习：创建数组，添加若干个国家 var country=new Array('俄罗斯','乌克兰','美国') // 练习：创建数组，初始化长度为4，添加4门课程 var course=new Array(4) course[0]='HTML' course[1]='CSS' course[2]='JS' course[3]='MYSQL' console.log(course) </script> </body> </html>
5.5数组的分类
- 索引数组：以>=0的整数作为下标
- 关联数组：以字符串作为下标，需要单独添加元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数组分类</title> </head> <body> <script> var person=[] // 关联数组：以字符串作为下标 person['name']='xin' person.sex='男' // console.log(person) // 练习：创建数组，包含一组新闻数据，每一条新闻包含的属性有标题、发表时间 var list = [ {title:'新闻1',ctime:'2022-10-10'}, {title:'新闻2',ctime:'2021-12-1'}, {title:'新闻3',ctime:'2020-5-1'} ] console.log(list[0].title, list[0].ctime) </script> </body> </html>
5.6对比数组和对象
- 两者都是用于存储一组值，对象存储在了属性中，数组存储在了元素
- 对象的这组值是无序的，数组的这组值是有序的
5.7遍历数组
- 访问到数组中的每个元素
for(var k in 数组){ k 下标 数组[k] 元素 } // for(var i=0;i<数组.length;i++){ i 下标 数组[i] 元素 }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遍历数组元素</title> </head> <body> <script> var arr = ['a','b','c','d','e'] // 遍历 /* for(var k in arr){ // k 下标 （0~3） arr[k] 元素 console.log(k, arr[k]) } // 练习：使用for循环遍历数组 循环产生0~3 for(var i=0;i<arr.length;i++){ // i 下标 console.log(i,arr[i]) } // 练习：创建数组，包含一组成绩，遍历数组，计算出总成绩和平均成绩 var score = [74,62,88,96,78] // 遍历数组，获取每个成绩 for(var i=0,sum=0;i<score.length;i++){ // console.log(i, score[i]) // 将每个成绩加到sum sum+=score[i] } console.log(sum, sum/score.length) */ // 练习：创建数组包含一组工资，计算出工资在8000~10000之间所占的比例 -> 82.5% var salary=[7000,8500,9000,13000,15000] // 声明变量，保存数量 for(var i=0,count=0;i<salary.length;i++){ // console.log(i, salary[i]) // 判断工资是否在8000~10000之间 if(salary[i]>=8000 && salary[i]<=10000){ count++ //数量加1 } } // console.log(count/salary.length*100+'%') // 练习：创建数组，包含一组数字，遍历数组，获取最大值 var arr=[6,9,23,78,45] // 声明变量，用于保存最大值 for(var i=0,max=0;i<arr.length;i++){ // console.log(arr[i]) //每个数字 // 用max和每个数字比较，如果小于任意一个数字，则把数字放入到max if(max<arr[i]){ max = arr[i] } } // 循环结果后，max保存了最大数 console.log(max) </script> </body> </html>
总结
JS进阶02学习结束
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
