master

分支 (1)

管理

管理

master

test-warehouse
/
06_作业讲解.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta name="google" content="notranslate" />
  <meta name="format-detection" content="telephone=no,email=no" />
  <title>Document</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
</head>

<body>

  <ul>
    <li>1</li>
    <li>2</li>
  </ul>

  <span>222</span>

  <div>222</div>

  <h1>333</h1>


  <script>
    /**
     * 1、定义一个数组arr，实现调用 arr[n]() 时，打印n值 （n<=10）。比如：arr[3]( ) , 结果打印3
      2、统计网页上出现了多少种标签
      3、定义一个类Animal，通过传参初始化它的类型，如：“猫科类”。它有一个实例方法：run，run函数体内容可自行定义。
      4、基于上一题的Animal类，定义一个子类Cat并继承Animal类，初始化Cat类的昵称name和年龄age。并拥有实例方法eat，eat函数体内容可自行定义。
      5、有一本书的属性为：{"name": "《ES6基础系列》", "price"：56 }，要求使用Proxy对象对其进行拦截处理，name属性对外为"《ES6入门到懵逼》", price属性为只读
     */

    // 1 arr[n] 是一个函数
    // fun();
    // arr[n]();
    // let arr = [];
    // for (let i = 1; i <= 10; i++) {
    //   arr[i] = function () {
    //     console.log(i);
    //   }
    // }
    // console.log(arr);
    // arr[5]()
    // func()
    // add()

    // 2
    // 先获取页面中的所有DOM节点
    // * 匹配所有的标签
    // let _all = document.querySelectorAll('*');
    // console.log(_all);
    // 把所有的DOM节点对象转换成字符串
    // let _allTags = [..._all];
    // let _allTagsStr = _allTags.map(function (item) {
    //   return item.tagName
    // })
    // let _allTagsStr = _allTags.map(item => item.tagName)
    // console.log(_allTagsStr);
    // 去重 字符串数组
    // let _tags = new Set(_allTagsStr);
    // console.log(_tags.size);
    // console.log(`当前页面中总共有${_tags.size}中标签`);

    // 3、定义一个类Animal，通过传参初始化它的类型，如：“猫科类”。它有一个实例方法：run，run函数体内容可自行定义。
    // class Animal {
    //   constructor(type) {
    //     this.type = type;
    //   }

    //   run() {
    //     console.log(`我是${this.type}动物`);
    //   }
    // }

    // 4、基于上一题的Animal类，定义一个子类Cat并继承Animal类，初始化Cat类的昵称name和年龄age。并拥有实例方法eat，eat函数体内容可自行定义。
    // class Cat extends Animal {
    //   constructor(type, name, age) {
    //     super(type);
    //     this.name = name;
    //     this.age = age;
    //   }

    //   eat() {
    //     console.log(`我叫${this.name},今年${this.age}岁了！`);
    //   }
    // }

    // let _cat = new Cat('猫科', 'Tom', 6);
    // _cat.run();
    // _cat.eat();

    // 有一本书的属性为：{"name": "《ES6基础系列》", "price"：56 }，要求使用Proxy对象对其进行拦截处理，name属性对外为"《ES6入门到懵逼》", price属性为只读
    // 拦截器
    let book = {
      name: '《ES6基础系列》',
      price: 56
    }

    // 创建一个预处理/拦截器
    let _book = new Proxy(book, {
      get: function (target, key) {
        if (key == 'name') {
          return '《ES6入门到懵逼》'
        }
        return target[key];
      },
      set: function (target, key, val) {
        if (key == 'price') {
          console.log('该属性不允许修改');
          target[key] = 56;
        }
        target[key] = val;
      }
    })

    // console.log(_book.name);
    // console.log(_book.price);

    // _book.price = 1000;
    // console.log(_book.price);

    // _book.name = 'ES6';
    // console.log(book.name);
    // console.log(_book.name);


  </script>
</body>

</html>