当前位置：首页 > news >正文

JavaScript 年后复习

news 来源：原创 2025/5/16 21:00:26

1.函数定义

有名函数

定义一个函数 sum，接收两个参数 a 和 b，返回它们的和。然后调用该函数并输出结果。

实现代码：

 function sum(a, b) {
    return a + b;
  }
  console.log(sum(1, 2));

函数的定义需要用到function，sum作为函数名，后面的括号跟的是形参列表。

函数体的作用是返回两数相加之和

然后我们使用console.log输出打印函数的结果到浏览器控制台

相同的输出还有1、alert()提示框输出 2、document.write()输出到浏览器

匿名函数

定义函数，接收两个参数a和b，把这个匿名函数赋值给变量f，通过f调用函数

实现代码：

let f = function (a,b){
  return a+b;
}
console.log(f(12,34));

匿名函数也就是只有function （）{函数体}，匿名函数直接抛弃了函数名，也就是说这个函数写出来基本就只能调用一次。我们也可以把匿名函数赋值给一个变量。通过变量调用函数

箭头函数

定义箭头函数，接收两个参数a和b，把箭头函数赋值给变量f，输出f调用箭头函数的结果到控制台

let f = (a,b)=> a+b;
console.log(f(12,34))

箭头函数相对于前两个来说更加简洁。如果箭头函数的函数体只有一条语句，我们就可以省略大括号，如果不知一个语句大括号就不能省略

2.数组操作

给定一个数组arr = [1,2,3,4,5,6]通过map（）方法让数组的每个元素都平方，返回一个新的数组

let arr = [1,2,3,4,5,6]
let arr2 = arr.map(item => {
  return item*item
})
console.log(arr2)

首先定义了一个数组，我们通过数组的map（）方法去挨个处理数组的元素。然后通过return语句返回这些元素给数组arr2

map()方法的作用是遍历对应的数组，括号内是一个函数，用于处理数组元素。处理函数有两个参数，item值，index下标。在这里我们只用了item也就是数组的值。我们用的函数就是箭头函数，因为只有一个形参，所以省略了小括号。如果需要用到下标我们可以改写为：（item，index）=>{}

3.构解赋值

给定一个对象 person = { name: 'Alice', age: 25, job: 'Engineer' }，使用解构赋值将 name 和 age 提取到变量中，并输出它们。

let person = {
 name : "alice",
  age : 25,
  job : "engineer"
}
const {name, age}= person
console.log(name,age)

我们首先定义了对象，对象包含三个属性name，age，job我们需要解构出这三个属性，但是由于题目并没有要求我们解构job属性，我们就省略

一般来说只可以省略最后面的属性，这个只针对对象的解构。数组的结构可以省略中间的元素。我们只需要const [a,,c]就可以了。在结构数组的时候我们用的是[]方括号，对象使用的是{}大括号

4.事件监听与事件委托

创建一个嵌套div，大的div600*600，小的div300*300 小的div水平垂直居中。设置大div事件监听为单击触发，通过事件委托判断是否是点击小div触发的大div

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 600px;
            height: 600px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #div2{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id = "div1">
    <div id = "div2">
    </div>
</div>
<script>
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

div1.addEventListener('click', (e) => {
    if(e.target.id === 'div2')
    {
        alert("div2")
    }else{
        alert("div1")
    }
})
</script>

我们先看body部分，我们按照题目要求创建了嵌套div。

然后再看head里面的style，我们给两个div设置了宽高，然后又给第一个div设置了flex布局，让它的项目都水平垂直居中。

通过document.getElementById（）获取对应的元素对象。通过对象.addEventListener（）添加事件监听，这里我们是给div1也就是大的div添加了事件监听，因为小div是包含再div1里面的，所以我们点击小的div也会触发大div的事件监听。这就是事件委托

事件监听里面对应的箭头函数有一个e，这个e可以帮我们判断出我们点击的到底是哪个div。

5.数据渲染

用户输入姓名、性别、年龄、住址、体重（kg）把数据渲染到表格，数据不能为空并且渲染后数据要清空，表格要求有头部标题。姓名单元格背景色改为灰色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       body{
           display: flex;
           align-items: center;
           justify-content: center;
           flex-direction: column;
       }
       td{
           border: 1px solid black;
           width: 250px;
           text-align: center;
       }
       table{
           border-collapse: collapse;
       }
       .td_color{
           background-color: dimgrey;
       }
    </style>
</head>
<body>
<form>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>住址</td>
            <td>体重</td>
            <td>提交</td>
        </tr>
        <tr>
            <td><input type="text" id="name"></td>
            <td><input type="text" id="gender"></td>
            <td><input type="text" id="age"></td>
            <td><input type="text" id="address"></td>
            <td><input type="text" id="height"></td>
            <td><input type="submit" value = "提交"></td>
        </tr>
    </table>
</form>

<br>
<br>
<br>
<br>


<table id="table">
    <tr>
        <td class ="td_color">姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>住址</td>
        <td>体重</td>
    </tr>
</table>


<script>
const form = document.querySelector('form')
const table = document.querySelector('#table')
form.addEventListener('submit', function(e){
    e.preventDefault()
    const name = document.querySelector('#name')
    const gender = document.querySelector('#gender')
    const age = document.querySelector('#age')
    const address = document.querySelector('#address')
    const height = document.querySelector('#height')
    if(name.value!=""&&gender.value!=""&&age.value!=""&&address.value!=""&&height.value!=""){
        table.innerHTML += `
    <tr>
        <td class ="td_color">${name.value}</td>
        <td>${gender.value}</td>
        <td>${age.value}</td>
        <td>${address.value}</td>
        <td>${height.value}</td>
    </tr>
    `
        name.value = ""
        gender.value = ""
        age.value = ""
        address.value = ""
        height.value = ""
    }else{
        alert("data not found")
    }
})
</script>
</body>
</html>

根据题目要求我们可以得出以下结论：数据要手动输入，不能为空。写好的数据要渲染到表格，姓名那一栏需要我们把背景色设置为灰色。

我们首先把HTML代码写好，为了美观我们设置body使用flex布局居中。我们首先使用了一个表单，在表单内内置一个表格，然后进行用户输入的一些相应设置。

然后我们再在表单下面写一个表格，这个表格用于数据的渲染操作。这里值得一提的是我们使用flex布局之后默认的排序方式是左到右的排序，我们需要通过flex-direction设置主轴方向

至此我们HTML的代码写完了，我们再来看js的代码

我们首先获取了form和table的对象。通过给form添加监听事件来触发接下来的操作
当我们按下提交按钮之后会触发相应的函数，我们在函数内首先阻止默认提交行为，通过：事件对象.preventDefault()来阻止。

然后分别获取相应内容的对象，通过对象.value获取输入的值，继续判断输入的值是否是空的，如果是空的提示：data not found

获取到数据之后我们就需要渲染到表格内，我们先前已经获取到表格对象了，我们通过表格对象.inner HTML来进行数据的追加渲染。

到此，这个题就被解出来了