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

javaScript蓝桥杯----偷梁换柱

article 2024/12/25 0:32:05

一、介绍

随着医疗水平的进步，人的平均寿命在慢慢提升。现在全球平均预期寿命是 73.2 岁，而在 1950 年则只有 47 岁。那么人类的寿命有极限吗？根据最新的研究，人类寿命或超过 120 岁，达到 150 岁。

因此，有关年龄的应用普遍将当今人类的合理年龄范围设置在 0 - 150 岁之间。那么，当一个年龄被录入，我们又是如何判断其是否合理的呢？

二、目标

在文件 age.js 中，有一个 person 对象，当它的 age 属性值改变时需要对新值做判断，将其永远控制在 0 - 150 之间。具体需求如下
在这里插入图片描述

如果新属性值在 0 -150 之间（包含 0 和 150），则直接更新。
如果新属性值小于 0，则属性值更新为 0。
如果新属性值大于 150，则属性值更新为 150。

三、代码

html

<!DOCTYPE html>
<html lang="en">
  <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>合理设置人的年龄</title>
  </head>
  <style>
    body {
      padding: 100px;
    }
    .input-container{
      margin-bottom: 15px;
    }
    .input-container,.output-container{
      width: 500px;
      margin:0 auto;
    }
    .text{
      width: 30%;
      text-align: right;
      display: inline-block;
    }
  </style>
  <body>
    <div class="input-container">
      <span class="text">请输出具体的年龄：</span>
      <input type="number" id="input">
    </div>
    <div class="output-container">  
      <span class="text">实际输出：</span>
      <span id="output"><span>
    </div>
    <script>
      module={}
    </script>
    <script type="text/javascript" src="./age.js"></script>
    <script>
      const p=module.exports;
      const input=document.getElementById("input");
      const output=document.getElementById("output");
      
      input.addEventListener("input",(e)=>{
        p.age=e.target.value;
        output.innerText=p.age;
      })
    </script>
  </body>
</html>

// 请不要更改这个对象里面的内容
let person = {
  age: 0,
};
// TODO:在这里写入具体的实现逻辑
// 对 person 的 age 属性更新行为进行拦截
// 如果输入的年龄在 0 - 150 之间，则认为是合法
// 否则，如果小于 0，则返回 0；如果大于 150，则返回 150

module.exports = person; // 检测需要，请勿删除

四、知识点

1. Object.defineProperty

参数
对象属性对象内容
属性

configurable（颜色会发生改变,可否删除）
当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
默认为 false。
enumerable（可否遍历）
当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。
默认为 false。
数据描述符还具有以下可选键值：
value（值）
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。
默认为 undefined。
writable（值可否被改变）
当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符 (en-US)改变。
默认为 false。
get
属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
默认为 undefined。
set
属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
默认为 undefined。

五、答案

// 请不要更改这个对象里面的内容
let person = {
  age: 0,
};
// TODO:在这里写入具体的实现逻辑
// 对 person 的 age 属性更新行为进行拦截
// 如果输入的年龄在 0 - 150 之间，则认为是合法
// 否则，如果小于 0，则返回 0；如果大于 150，则返回 150
let val = 0
Object.defineProperty(person, 'age', {
  get() {
    return val
  },
  set(newval) {
    val = newval
    if (val > 150) {
      return val = 150
    } else if (val < 0) {
      return val = 0
    } else {
      return val = newval
    }
  }
})
module.exports = person; // 检测需要，请勿删除