【无标题】

最新推荐文章于 2024-08-04 16:33:59 发布

m0_62137679

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量36

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_62137679/article/details/129616839

版权

JavaScript Day3(基础)

对象

可以理解为是一种无序的数据集合，注意数组是有序的数据集合
静态特征(姓名,年龄,身高,性别,爱好)=>可以使用数字，字符串，数组，布尔类型等表示
动态行为(点名,唱，跳, rap)=>使用函数表示

对象声明语法

let 对象名 = {
    属性名: 属性值, //属性名可以使用""或"，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

    方法名: 函数
}

```
let 对象名 = new Object()
```

对象操作

增

对象名.新属性 = 新值

删（了解）

delete 对象名.属性名

改

对象名.属性名 = 新值

查

对象名.属性名

对象名[‘属性名’] 一定要加引号（属性名带引号，只能用这种方法;不带两者均可）

对象方法调用

对象名.方法名()

//对象方法调用
let obj = {
    uname: 'qq',
    song: function (x, y) {
        // console.log('bingu')
        console.log(x + y)
    }
}
obj.song(1, 2)

for in

遍历数组

也能作用于数组但是很少使用，原因：k拿到的不是数字型，是字符串型

let arr = ['pink','red','blue']
for (let k in arr){
    console.log(k) //黑色，字符串型，表示数组的下标 索引号
    console.log(arr[k])
}

遍历对象

k是获得对象的属性名（字符串型），对象名[k]是获得属性值

例一：

let obj = {
    uname: 'xx',
    age: 18,
    gender: '男'
}
for (let k in obj) {
    console.log(k) //属性名，字符串 uname age gender
    //console.log(obj.k) 错误写法
    //undefined 原因: k是带字符串的属性名相当于obj.'uname',但这种方法属性名不能加引号
    console.log(obj[k]) //正确写法
}

例二：

css

table {
    width: 600px;
    text-align: center;
}
table,
th,
td {
    border: 1px solid #ccc;
    border-collapse: collapse;
}
caption {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
}
tr {
    height: 40px;
    cursor: pointer; /*光标形状*/
}
table tr:nth-child(1){
    background-color: #ddd;
}
table tr:not(:first-child):hover {
    background-color: #eee;
}

html+js

<caption>学生列表</caption>
<tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>家乡</th>
</tr>
<script>
    //1. 数据准备
    let students = [
        {name: '小明', age: 18, gender: '男', hometown: '河北省'},
        {name: '小红', age: 19, gender: '女', hometown: '河南省'},
        {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
        {name: '小莉', age: 18, gender: '女', hometown: '山东省'}
    ]
    //2. 渲染页面
    for (let 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>
        `)
    }
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dS59Egy0-1679024921603)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230315142939402.png)]

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

Math

random、ceil、floor、max、min、pow、abs

其中floor与parseInt函数类似，但parseInt参数可以为字符串,floor只能是数值

console.log(Math.ceil(1.1)) //向上取整，2
console.log(Math.floor(1.1)) //向下取整，1
//round四舍五入 五取大
console.log(Math.round(1.49)) //1
console.log(Math.round(1.50)) //2
console.log(Math.round(-1.5)) //-1
console.log(Math.round(-1.51)) //-2
console.log(Math.max(1,23,2,4)) //23

random()

示例一：猜数字游戏

不限次数

function getRandom(N, M) {
    return Math.floor(Math.random() * (M - N + 1)) + N
}
//1. 随机生成一个1 - 10的数
let random = getRandom(1, 10)
while (true) {
    //2. 用户输入一个数
    let num = +prompt('请输入1~10之间的一个数字:')
    // 3. 判断大小
    if (num > random) {
        alert('您猜大了')
    } else if (num < random){
        alert('您猜小了')
    } else {
        alert('猜对啦，真厉害')
        //4.退出循环
        break
    }

限定次数

function getRandom(N, M) {
    return Math.floor(Math.random() * (M - N + 1)) + N
}
//1. 随机生成一个1 - 10的数
let random = getRandom(1, 10)
console.log(random)
let flag = true
//2. 设定三次 三次没猜对就直接退出
for (let i = 1; i <= 3; i++) {
    let num = +prompt('请输入1~10之间的一个数字:')
    if (num > random) {
        alert(`您猜大了,还剩${3-i}次机会`)
    } else if (num < random){
        alert(`您猜小了,还剩${3-i}次机会`)
    } else {
        flag = false
        alert('猜对啦，真厉害')
        break
    }
}
if (flag) {
    alert('次数已经用完')
}

示例二：抽奖或点名

//随机抽取一个并从数组中删去
let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
let random = Math.floor(Math.random()*arr.length)
document.write(arr[random])
arr.splice(random, 1)
console.log(arr)

示例三：随机颜色

css

div {
    width: 300px;
    height: 300px;
}

html+js

<div></div>
<script>
    //1. 自定义一个随机颜色函数
    function getRandomColor(flag = true) {
        if (flag) {
            //3. 如果是 true 则返回 #ffffff
            let str = '#'
            let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
            //利用for循环随机抽6次 累加到str里面
            for (let i = 1; i <= 6; i++){
                //random是数组的索引号 是随机的
                let random = Math.floor(Math.random() * arr.length)
                str += arr[random]
            }
            return str
        } else {
            //4. 否则是false 则返回 rgb(255,255,255)
            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})`
        }
    }
    //2. 调用函数 getRandomColor(布尔值)
    console.log(getRandomColor(true))
    console.log(getRandomColor(false))
    console.log(getRandomColor())
    const div = document.querySelector('div')
    div.style.backgroundColor = getRandomColor()
</script>

综合案例

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1200px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }   
 

.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    position: relative;
    top: 0;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all .3s;
   
}
.box-bd ul li a {
    display: block;
}
.box-bd ul li:hover {
    top: -8px;
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info span {
    color: #ff7c2d;
}

html + js

<div class="box w">
    <div class="box-hd">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
        <ul class="clearfix">
            <script>
                let data = [
                    {
                        src: 'images/course01.png',
                        title: 'Think PHP 5.0 博客系统实战项目演练',
                        num: 1125
                    },
                    {
                        src: 'images/course02.png',
                        title: 'Android 网络动态图片加载实战',
                        num: 357
                    },
                    {
                        src: 'images/course03.png',
                        title: 'Angular2 大前端商城实战项目演练',
                        num: 22250
                    },
                    {
                        src: 'images/course04.png',
                        title: 'Android APP 实战项目演练',
                        num: 389
                    },
                    {
                        src: 'images/course05.png',
                        title: 'UGUI 源码深度分析案例',
                        num: 124
                    },
                    {
                        src: 'images/course06.png',
                        title: 'Kami2首页界面切换效果实战演练',
                        num: 432
                    },
                    {
                        src: 'images/course07.png',
                        title: 'UNITY 从入门到精通实战案例',
                        num: 888
                    },
                    {
                        src: 'images/course08.png',
                        title: 'Cocos 深度学习你不会错过的实战',
                        num: 590
                    },
                ]
                for (let i = 0; i < data.length; i++){
                    document.write(`
    <li>
        <a href="#">
            <img src=${data[i].src} title="${data[i].title}">
            <h4>
                ${data[i].title}
            </h4>
            <div class="info">
                <span>高级</span> · <span>${data[i].num}</span>人在学习
            </div>
        </a>
    </li>
    ` )
                }
            </script>
        </ul>
    </div>
</div>

内存分配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bq2CpyhG-1679024921605)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230317113219926.png)]

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型:简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string , number, boolean,undefined ,null

引用类型:复杂数据类型，在存储时变量中存储的仅仅是地址（引用)，因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象)，如 Object、Array、Date等

堆栈空间分配区别:

1、栈（操作系统）︰由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。

简单数据类型存放到栈里面

2、堆（操作系统)︰存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面（引用类型变量(栈空间)里存放的是地址，真正的对象实例存放在堆空间中）

//通过栈中地址操作堆中数值
let obj1 = {
    age: 18
}
let obj2 = obj1 //把obj1的地址赋给obj2,指向堆中同一地址
obj2.age = 20
console.log(obj1.age) //20,堆中的数值改变

(js中没有栈和堆的概念，仅仅借助其理解)

m0_62137679

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

JavaScript对象及综合案例
复制链接

扫一扫