学习数组与对象及作用域

学习数组与对象及作用域

1. 演示数组与对象的声明与访问

//数组
let arr1 = ["张三", 28, "男"];
console.log(arr1[0], arr1[1], arr1[2]);
console.log("-------------------------------------------1");
//多维数组
let arr2 = ["张三", 28, "男", ["唱歌", "游泳"]];
console.log(arr2[0], arr2[1], arr2[2], arr2[3][0]);
console.log("-------------------------------------------2");
let arr3 = [
  ["张三", 28, "男"],
  ["李四", 18, "男"],
  ["王五", 38, "男"],
];
console.table(arr3); //表格显示整个多维数组
console.log(arr3[1]); //单独显示指定一维数组
console.log(arr3[1][1]); //显示指定数组的成员
console.log("-------------------------------------------3");
//对象1
let obj = {
  uname: "李四",
  age: 18,
  sex: "男",
  run: function () {
    return "我很能跑";
  },
};
console.log(obj.uname, obj.age, obj.sex, obj.run());
console.log("-------------------------------------------4");
//对象2
let obj1 = {
  uname: "李四",
  age: 18,
  sex: "男",
  show: function () {
    return `姓名：${obj1.uname}, 年龄：${obj1.age}, 性别：${obj1.sex}`;
  },
};
console.log(obj1.show());
console.log("-------------------------------------------5");
//对象用this
let obj2 = {
  uname: "李四",
  age: 18,
  sex: "男",
  show: function () {
    return `姓名：${this.uname}, 年龄：${this.age}, 性别：${this.sex}`;
  },
};
console.log(obj2.show());
console.log("-------------------------------------------6");
//对象方法是匿名函数用箭头函数简化
let obj3 = {
  uname: "李四",
  age: 18,
  sex: "男",
  show: () => `姓名：${obj3.uname}, 年龄：${obj3.age}, 性别：${obj3.sex}`,
};
console.log(obj3.show());
console.log("-------------------------------------------7");
//对象数组
let obj4 = [
  { id: 1, item: "手机", price: 5000 },
  { id: 2, item: "电脑", price: 9000 },
  { id: 3, item: "键盘", price: 1000 },
];
console.log(obj4[0].item);
console.log("-------------------------------------------8");
//类数组: 像数组，但本质还是对象
let obj5 = {
  0: 1,
  1: "手机",
  2: 5000,
  length: 3,
  show: function () {
    return `${this[2]}`;
  },
};
console.log(obj5[1]); //访问成员
console.log(obj5.show()); //访问方法
console.log(obj5.length);
console.log("-------------------------------------------9");
//类数组转化为数组
let arr4 = Array.from(obj5);
console.log(arr4);
console.log(arr4[1]);

2. 演示作用域与作用链

• 块作用域
• 函数作用域
• 全局作用域

//块作用域
//在块内部声明的变量，作用域在该代码块内部。
      {
        let num = 100;
        console.log(num); //100
      }
      console.log(num); //num is not defined
//在代码块外部的变量不能作用于该代码块

//函数作用域
      let hello = "PHP中文网";
      const say = function () {
        let hello = "php.cn";
        console.log(hello);//php.cn
        //当函数内部变量hello，使用函数内的，如没有则往上一级查找
      };
      say();

    <script>
//全局作用域
      const PI = 3.14;//声明在代码块，函数块的外部，拥有全局作用域
      {
        console.log(PI); //3.14
      }
      const sayHello = function () {
        console.log(PI); //3.14
      };
      sayHello();
    </script>

3. 代码描述对象的简化方案

    <script>
    //对这个对象进行语法简化
      let item = {
        car: "皮卡",
        price: 138000,
        show: function () {
          return `${this.car} 价格: ${this.price} 元`;
        },
      };
      console.log(item.show());
    </script>

属性的简化

• 如果属性名与变量名同名可只写属性名，不写变量名。

    <script>
      let car = "皮卡";
      let price = 138000;
      item = {
        car,//只写属性名
        price,//只写属性名
        show: function () {
          return `${this.car} 价格: ${this.price} 元`;
        },
      };
      console.log(item.show());
    </script>

方法的简化

• ：冒号，function 全部删除

    <script>
      // 方法的简化
      // ：冒号，function 全部删除
      car = "皮卡";
      price = 138000;
      item = {
        car,
        price,
        show () {
          return `${this.car} 价格: ${this.price} 元`;
        },
      };
      console.log(item.show());
    </script>

4. 演示分支结构与对应的语法糖

分支语句

      //有条件的执行代码块
      let num = 120;
      if ((num = 100)) {
        //代码块1:
        console.log("hello");
      }
      if ((num = 120)) {
      //代码块2:
        console.log("world");
      } else {
      //代码块3:
        console.log("hhhh");
      }

三元运算符

• 双分支语法糖

console.log(num ? "hello" : "world")

switch语句

• 多分支语法糖

      let alphabet = "c";
      switch (alphabet) {
        case "a":
          console.log(alphabet);
          break;
        case "b":
          console.log(alphabet);
          break;
        case "c":
          console.log(alphabet);
          break;
        case "d":
          console.log(alphabet);
          break;
          //...
        default:
            console.log("不是个字母")
      }

while循环

      let i = 0;
      while (i <= 5) {
        console.log("aaa");
        i++;
      }