js基础,对象,对象方法,对象操作,遍历对象,内置对象Math,简单数据类型,复杂数据类型

对象是什么

对象（object）：JavaScript里的一种数据类型 可以理解为是一种无序的数据集合 用来描述某个事物，例如描述一个人 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能 如果用多个变量保存则比较散，用对象比较统一 比如描述班主任信息： 静态特征（姓名，年龄，身高，性别，爱好）=>可以使用数字，字符串，数组，布尔类型等表示 动态行为（点名，唱，跳，rap）=>使用函数表示

小结

1.对象是什么？ 对象是一种数据类型 无序的数据的集合

2.对象有什么特点？ 无序的数据的集合 可以详细的描述描述某个事物

对象使用

定义属性

对象声明语法

let对象名={} 例如： //声明了一个person的对象 let person = {}

2.对象有属性和方法组成 属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等… 方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏… 你还能举例吗？ let对象名={ 属性名：属性值， 方法名：函数

3.属性 数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。 let person = { uname: 'andy', аве: 18, sex：'男' 属性都是成对出现的，包括属性名和值，它们之间使用英文：分隔 多个属性之间使用英文，分隔 属性就是依附在对象上的变量（外面是变量，对象内是属性） 属性名可以使用""或”，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

小结

1.对象属性有顺序吗？ 没有 2.属性和值用什么符号隔开？多个属性用什么隔开？ 属性和值用；隔开 多个属性用，逗号隔开

访问属性

小结

1.对象访问属性有哪两种方式？ 点形式对象.属性 []形式对象['属性] 2.两种方式有什么区别？ 点后面的属性名一定不要加引号 []里面的属性名一定加引号 后期不同使用场景会用到不同的写法

访问方法

<script>
    let goods ={
     uname : '小米10青春版',
     serial : 10005004100,
     weight : '0.55kg',
     address : '中国大陆',
     sayHi:function(){
       console.log('hi~~~')
     },
      //对象方法iu
     iu:function(x){
         console.log(x);
     }
​
    }
    //访问属性 得到值 对象.属性名
    console.log(goods.uname);
    console.log(goods.serial);
    console.log(goods.weight);
    console.log(goods.address);
    //调用对象方法:对象.方法名
    goods.sayHi()
    //实参赋值给iu
    goods. iu('斑马斑马')
  </script>

小结

1.对象访问方法是如何实现的？ 对象.方法（） person.sayHi() 2.对象方法可以传递参数吗？ 可以，跟函数使用方法基本一致

对象方法

调用对象的方法

<script>
    //对象是有属性和方法组成的，那么属性和方法都要写在对象里面
let ldh ={
//属性
uname:'刘德华',
//方法 方法名:function(){}
sing: function (){
console.log('唱歌')
},
dance: function(s) {
console.log(s)
//方法一定要写在对象里面
},
gongfu: function (){
  console.log('咏春拳');
},
xifu : function (h){
 console.log(h);
}
//第一种方法是是直接在方法里面输入东西
//第二种是写函数的形参和实参,然后在外部调用的时候在方法名的括号里面写值
​
}
//外部使用对象.方法名（）
//调用在对象外调用
ldh.sing()
ldh.dance('恭喜发财')
ldh.gongfu()
ldh.xifu('凤姐')
​
​
  </script>

​

对象操作

改

<script>
let obj ={
uname:'小明'，
age: 18
}
console.log(obj.age)
//修改对象、属性=新值
obj.age = 81
console.log(obj)
</script>
​

增和删

<script>
    let obj ={
    uname:'小明',
    age: 18
    }
    console.log(obj.age)
    //修改对象.属性=新值
    obj.age = 81
    //新增一个属性js可以非常方便的动态新增属性或者方法
    obj.sex='男'
    //会去对象里面找是否有sex这个属性，如果有则更新值修改,如果没有则新增这个属性
    
    //新增一个方法
      obj.sing = function (){
   console.log('hi')
    }
  
    //调用方法才会显示hi
    obj.sing('')
​
    </script>

新增一个方法

 <script>
     let goods={
      uname : '小米10',
      num : 100012816024,
      weight: '0.55kg',
      address:'中国大陆',
      //方法一
    //   play: function (x){
    //   console.log(x);
    // }
    //方法二
    play: function (){
      console.log('lol');
    }
    }
   //方法一
 goods.  play('lol')
 //方法二
 goods.play()
 //新增一个方法,方法1
 goods.son=function(z){
console.log(z);
 }
goods.son('1111')
//新增一个方法,方法2
goods.son=function(){
console.log('222');
 }
goods.son()
  </script>

查

//查总结： /1（1）对象名.属性名 obj.age console.log(obj.num) //（2）对象名['属性名'] obj['age'] console.log(obj[' num'])

对象小结

1.对象是什么？ 一种数据类型 可以理解为一堆数据的集合 用来表示某个事物 2.对象的是如何声明和使用的？ 用把一堆数据包起来 多个属性和方法之间用逗号隔开 console.log输出能方便查看对象里有哪些属性和方法 3.如何动态添加属性和方法？ 对象如果有这个属性相当于重新赋值 对象如果没有这个属性相当于动态添加一个属性

遍历对象

遍历对象 对象没有像数组一样的length属性，所以无法确定长度 对象里面是无序的键值对，没有规律.不像数组里面有规律的下标

<script>
for (let k in obj){
console.log（k）// 属性名
//console.log(obj.k)// obj.k意思是obj里面的k属性
​
// console.log(obj['k'])
console.1og(obj[k]）//属性值
​
// 为什么这么写？
//k ==='uname''sex''age'
​
// obj.k
// obj['uname']
// obj['sex']===18
​
</script>
​
 <script>
    let goods={
      uname : '小米10',
      num : 100012816024,
      weight: '0.55kg',
      address:'中国大陆'
    }
​
   //遍历对象
    for (let k in goods){
      console.log(k);
      console.log(goods[k]);
    }
​
  </script>

小结

1.遍历对象用那个语句？ for in 2.遍历对象中，for k in obj,获得对象属性是那个，获得值是那个？ 获得对象属性是k 获得对象值是obj[k]

得到数组对象里面的属性值

<script>
    let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
for (i=0;i<students.length;i++){
  console.log(students[i]);//从数组1-4得到数组对象里面的所有数据
      //得到对象里面的某个值
  console.log(students[i].name);//小明小红小刚小丽
  console.log(students[i].age);//18191718
}
</script>

学生信息综合案列

<script>
    let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
​
 //头部
 document.write(` <table>
    <h3>学生列表</h3>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>家乡</th>`
  )
  //中间
  for (i=0;i<students.length;i++){
    document.write(`<tr>
      <td>${i+1}</td>
      <td>${students[i].name}</td>
      <td>${students[i].age}</td>
      <td>${students[i].gender}</td>
      <td>${students[i].hometown}</td>
    </tr>`)
}
  
//尾部
document.write(`</table>`)
  </script>

内置对象

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

属性

• Math.PI，获取圆周率

方法

• Math.random，生成 0 到 1 间的随机数

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

• Math.ceil，数字向上取整

// 舍弃小数部分，整数部分加1
Math.ceil(3.4)

• Math.floor，数字向下取整

// 舍弃小数部分，整数部分不变
Math.floor(4.68)

• Math.round，四舍五入取整

// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)

• Math.max，在一组数中找出最大的

// 找出最大值
Math.max(10, 21, 7, 24, 13)

• Math.min，在一组数中找出最小的

// 找出最小值
Math.min(24, 18, 6, 19, 21)

• Math.pow，幂方法

// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

• Math.sqrt，平方根

// 求某数的平方根
Math.sqrt(16)

数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。

数学内置对象

<script>
//圆周率
console.log(Math.PI)
//返回的是小数但是能得到e得不到1
console.log（Math.random(）） // 随机数 随机抽奖 随机点
                       
//向上取整返回的整数
 // floor 1                  
console.log(Math.ceil(1.1))
// ceil2
console.log(Math.ceil(1.9))
​
//向下取整返回的整数
// floor 1
console.log(Math.floon(1.1))
// floor 1
console.log(Math.floor(1.9))
​
// round 就近取整（） 返回的整数
console.log(Math.round(1.1))
//round 1
console.log(Math.round(1.5))
//round 2
console.log(Math.round(1.9))
//round 2
console.log(Math.round(-1.1))
// round 1
console.log(Math.round(-1.5))
// round -1
console.log(Math.round(-1.9))
// round -1
​
//最大值和最小值
console.log(Math.max(1, 5, 9, 45))
console.log(Math.min(1, 5, 9, 45))
​
</script>

​

封装随机数函数

生成任意范围随机数 如何生成0-10的随机数呢？ Math.floor(Math.random() * (10 + 1)) 如何生成5-10的随机数？ Math.floor(Math.random() * (5 + 1)) + 5 如何生成N-M之间的随机数 Math.floor(Math.random()* (M - N + 1)) + N

<script>
    //求得是N-M之间的一个随机数公式
    // Let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
    // console.log(random)
    //封装一个随机数函数 min到 max,用的时候直接复制就行了,需要的话改一下实参里面的值
    function getRandom(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min
    }
    let random = getRandom(1, 10)//(1-10的随机数,这里给多大范围,随机数就有多大范围)
    let random1 = getRandom(1, 50)
    console.log(random)
    console.log(random1);
    </script>

​

随机点名案列

<script>
    //调用随机数函数
     function getRandom(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min
    }
  let arr=['小红','老狗','朝阳','玉米','泡','包神']
  //生成1个随机数,作为数组的索引号,这里arr.length-1的意义在于
  //一共有6个值,因为第一个数的下标是0,所以要遍历数组,实参的第一个值是就要是0
  //0-6一共要循环7次,只有6个值,所以arr.length-1让他少循环一次
  //随机点名之类的案列实参的写法基本上都是(0,arr.length-1)
  let random=getRandom(0,arr.length-1)
  //输出数组索引号对应的内容
  document.write(arr[random])
  </script>

随机点名案列改进

 <script>
     function getRandom(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min
    }
  let arr=['小红','小米','小阳','大米','小麦','小的']
  //生成1个随机数,作为数组的索引号
  let random=getRandom(0,arr.length-1)//随机数的判定范围等于数组的长度
  //输出数组索引号对应的内容
  document.write(arr[random])//random等于随机数,arr[random]随机数组的值
   //之后删除这个人的名字
// arr.splice(从哪里开始删，删几个）
//因为splice第一个值等于数组值的下标,所以让随机数等于splice第一个值,抽中他就把他从数组里删除
arr.splice(random, 1)
console.log(arr);
​
  </script>

猜数字游戏

script>
    //随机数
   function getRandom(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min
    }
    //函数的随机数范围是1-10
    let random =getRandom(1,10)
    while (true){
      let i=+prompt('请输入一个数字')
      if (i<random){
        alert('猜小了')
      }
      else if (i>random){
        alert('猜大了')
    }
    else{
      alert('猜对了你真是棒')
      break
    }
    }
  </script>

猜数字游戏限定次数

 <script>
    function getRandom(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min
    }
    let random=getRandom(1,10)
   
    //设定三次没猜对就直接退出
    let flag =true//开关变量
    for (let i=1 ; i<=3;i++){
     
      let num=+prompt('请输入一个1-10的数字')
      if (num<random){
        alert('猜小了')
      }
     else if (num>random){
        alert('猜大了')
      }
      else {
        //因为flag不等于true所以即使第一次就猜对了也不会弹出次数用完
        flag = false
        alert('猜对了')
        break
      }
     
    }
    //循环了三次后,代码会执行到这里弹出提示框
    if (flag)
    alert('次数已经用完')
  </script>

拓展-术语解释

目标:知道一些术语,让自己更专业

 

拓展-基本数据类型和引用数据类型

 

 

 

复杂类型的内存分配

 

<script>
    //简单数据类型存储的是值
    //所以即使num2被重新赋值了,也不会影响num1,因为num1的数据直接被存到了栈里面
    let num1 = 10
    let num2 = num1
    num2 = 20
    console.log(num1)//10
    
    //对象引用数据类型,栈里面存储的是地址,数据存放在堆里面
    //因为引用数据类型存的数据的地址,这里obj2=obj1,把地址给改了
    //所以这里obj1是引用的obj2的地址,所以是20
    let obj1 = {
    age: 10}
    let obj2 = obj1
    obj2.age = 20
    console.log(obj1)//20
    </script>

随机生成#ffffff和rgb类型的颜色

<script>
    
    function getRandomColor(flag){
      if (flag){
        let are = "#"
      let arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
      for (i=1;i<=6;i++){
        let random=Math.floor(Math.random()*arr.length)
      are += arr[random]
      }
      return are
      }
      else{
        let r= Math.floor(Math.random() * 256) 
        let g= Math.floor(Math.random() * 256) 
        let b= Math.floor(Math.random() * 256) 
        return `rgb(${r},${g},${b})`
​
      } 
​
    }
    let random=getRandomColor(false)
    console.log(getRandomColor(false));
    console.log(getRandomColor(true));
   
  </script>

一个函数接收一个布尔类型参数,表示最大值还是最小值

<script>
    
function getArr(arr,flag=false){
  
    let min=arr [0]
    let max=arr[0]
   
    for (let i =0 ;i<arr.length;i++){
 
      if( max<arr[i]){
      
       max=arr[i]
      }
      if( min>arr[i]) {
       
        min=arr[i]
    }
     
    }
    if (flag){
      return max
    }
    else {
      return min
    }
  
    
    // return [max ,min]
  }
  
    let arr= getArr([100,20,60,88,90])
    console.log(getArr([100,20,60,88,90],true));
    console.log(getArr([100,20,60,88,90]));
​
  </script>

js实战编程题

1. 增加年龄

<script>
     /*
        1. 增加年龄
        描述
         1. 提示用户输入年龄，用户输入年龄后，把用户输入的年龄增加 5 岁
         2. 增加 5 岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能 XX 岁了”
        */
       let age = +prompt('请输入年龄')
       age+=5
       alert(`据我估计，五年后，你可能 ${age}岁了`)
      
  </script>

2. 用户登录验证

<script>
      /*
        2. 用户登录验证
        描述
        接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功!  否则，让用户一直输入。
        ps：使用while循环
        */
       while (true){
        let uname = prompt ('请输入用户名')
        let pwm = +prompt ('请输入密码')
        if (uname==='admin' && pwm===123456){
          alert('登录成功')
          break
        }
       
       }
      
  
  </script>

用户输入一个数， 计算 1 到这个数的和。

<script>
     /*
        3. 用户输入一个数，  计算 1 到这个数的和。
         比如 用户输入的是 5， 则计算 1~5 之间的累加和 并且输出到控制台
        */
       let num = +prompt('请输入一个数')
       let sum=0
       for (i=0;i<=num;i++){
         sum+=i
       }
       document.write(sum)
  </script>

用户输入分数，根据分数奖励不同的车( 利用多分支语句 )

<script>
     /*
        4. 用户输入分数，根据分数奖励不同的车( 利用多分支语句 )
         - 90~100分     奖励法拉利
         - 80~90分      奖励奥迪
         - 60~80分      奖励奥拓
         - 60分以下      打一顿
        */
       let iu = +prompt('请输入分数')
      if (iu>=90){
        alert('奖励法拉利')
      }
      else if(iu>=80){
        alert('奖励奥迪')
      }
      else if(iu>=60){
        alert('奖励奥拓')
      }
      else{
        alert('打一顿')
      }
​
  </script>

打印输出数组里所有的奇数

<script>
     /*
        5. 打印输出数组里所有的奇数  [5, 2, 8, 10, 3, 7]
         let arrNums = [5, 2, 8, 10, 3, 7]
        */
       let arrNums =[5, 2, 8, 10, 3, 7]
       for (i=0;i<arrNums.length;i++){
         if(arrNums[i]%2!==0){
           document.write(arrNums[i])
         }
       }
       
  </script>

使用for循环 - 求出班级里同学们平均年龄

<script>
     /*
        6. 使用for循环 - 求出班级里同学们平均年龄 [15, 19, 21, 33, 18, 24, 10]
         let arrAges = [15, 19, 21, 33, 18, 24, 10]
        */
        let sum=0
        let arrAges = [15, 19, 21, 33, 18, 24, 10]
        for (i=0;i<arrAges.length;i++){
          
         sum+=arrAges[i]
​
         }
         document.write(sum/arrAges.length)
  </script>

使用for循环 - 求出数组里大于5的和, 以及能被3整除的偶数的个数

 <script>
    /*
        7. 使用for循环 - 求出数组里大于5的和,  以及能被3整除的偶数的个数
         let arrCount = [4, 9, 5, 3, 20, 6, 15, 11, 35]
        */
       let sum=0
       let sum1=0
        let arrCount = [4, 9, 5, 3, 20, 6, 15, 11, 35]
        for (i=0;i<arrCount.length;i++){
          if (arrCount[i]>5){
            sum+=arrCount[i]
           
          }
         if(arrCount[i]%3===0 && arrCount[i]%2===0){
            sum1++
            
          }
         
        }
        document.write(sum)
        document.write(sum1)
  </script>

给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中

<script>
    /*
        8. 给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中
         let arrAll = [4, 0, 9, 5, 0, 20, 3, 0, 11, 0 , 0, 10]
        */
        let arrAll = [4, 0, 9, 5, 0, 20, 3, 0, 11, 0 , 0, 10]
        let arr=[]
        for (i=0;i<arrAll.length;i++){
          if (arrAll[i]!==0){
            arr.push(arrAll[i])
          }
        }
        document.write(arr)
  </script>

操作数组对象

<script>
     /*
        15. 操作数组对象
        需求1: 遍历数组里每个对象, 判断出哪个人最大 - 打印它的名字
        需求2: 遍历数组里每个对象, 为每个人增加5岁的年龄, 最后打印整个数组在控制台查看
      
        */
   
        let arrPers = [
        {
          name: '小明',
          age: 18,
          sex: '男',
        },
        {
          name: '老刘',
          age: 38,
          sex: '男',
        },
        {
          name: '小王',
          age: 19,
          sex: '女',
        },
      ]
      let age =arrPers[0].age
      let num = 5
      //求最大年纪
      for (i=0;i<arrPers.length;i++){
        if (age<arrPers[i].age){
          age=arrPers[i].age
        }    
​
      }
     //已经求得最大年纪,如果最大年纪等于某个对象的年纪,那就把这个人的名字打印出来
      for (i=0;i<arrPers.length;i++){
        if (age === arrPers[i].age){
          console.log(arrPers[i].name);
        } 
      //每个循环每个对象的年纪加五   
        arrPers[i].age += 5
        
​
      }
     console.log(arrPers);
  </script>