一、数组与对象的声明和访问

1、数组

// ! 1、数组
const arr = [1, 'admin', true]
//  查看
console.log(arr)
console.table(arr)
console.log(arr[0],arr[1],arr[2])
// arr[数组坐标，从0开始]
console.log(typeof arr)
console.log(Array.isArray(arr))
console.log(arr.length)

const arr = [数组成员，可以是任意类型]

2、对象

// 将索引 语义化
// 0->id, 1->name, 2->status
// index(数值)->key(字符串)
let user = {
    // 每个成员：属性
    id: 1,
    name: 'Jet',
    isMarried: true,
    'my email': 'admin@php.cn',
}
console.log(
    user.id, 
    user.name, 
    user.isMarried, 
    user['my email'],
    user['id'],
)

// 属性名是非法标识符时，用数组索引方式访问
// user['索引']
// user['索引'] = user.索引

user = {
    id: 5,
    uname: '朱老师',
    show: function() {
        return `id=${this.id},uname=${this.uname}`
        //this: 永远和当前对象绑定，this->user, user变它也变
    },
    say: () => `id=${this.id},uname=${this.uname}`,
    // 它的this，永远和它的上下文绑定（即执行环境或者父级作用域）
}
console.log(user.show())
console.log('this:' + user.say())

3、数组、对象的应用场景

3.1、多维数组

//每个成员依然是一个数组
// arr = [[...],[...],[...]]
let arr = [
  [1, '手机', 5000],
  [2, '电脑', 9000],
  [3, '鼠标', 1000],
]
console.log(arr)
// arr[1] 读取索引为1的数组
console.log(arr[1])
// arr[1][1] 读取索引1数组下索引1的数据
console.log(arr[1][1])

3.2、对象数组

// obj = [{...}, {...}, {...}]
let obj = [
  { name: '张三', age: 20 },
  { name: '李四', age: 25 },
  { name: '王五', age: 22 },
]
console.log(obj[2].name)
console.log(obj[2]['age'])

3.3、类数组

const user ={
  0: 5,
  1: 'admin',
  2: 'admin@php.cn',
  length: 3,
}
// length 属性
console.log(user[1], user.length,)
// length 获取对象长度
console.log(Object.keys(user).length)
// 不是数组，是对象
console.log(Array.isArray(user), typeof user)
//类数组转换为真正数组
arr1 = Array.from(user)
console.log(arr1)
console.log(Array.isArray(arr1) )

类数组本质上还是对象
key是从0开始递增
内部是数组结构，但是缺是批了一个对象的外衣

二、作用域与作用链

2.1、块作用域

{
    var a = 100;
    let b = 200;
    console.log(`a=${a}`);
    console.log(`b=${b}`);
}
// var 不支持块作用域，会导致变量泄露
console.log(a);
// let 支撑块作用域
//console.log(b);

2.2、函数作用域

let site = 'php中文网'
const hello = function () {
    let site = 'php.cn'
    console.log(site)
}
hello()

// 函数内部也有一个变量 site
// 内部声明的叫私有成员
// 先从内部找，有这个变量就返回，没有就往外找

2.3、全局作用域

// 所有块，函数外部的，都是全局的
const uname = 'php中文网'
{
    // 如果内部有同名函数，也能构成作用域链
    //let uname = 'php.cn'
    console.log(uname)
}
;(function () {
    // 函数作用域同样构成作用域链
    const uname = 'php.cn'
    console.log(uname)
})()

作用域：查询变量
作用域链：查询变量的路径（由内向外不可逆）

三、对象的简化方案

3.1、原始写法：

let item = {
    name: '小米13',
    price: 5000,
    show: function () {
      return `${this.name}: ${this.price} 元`
    },
  }
  console.log(item.show())

全局变量

let name = '小米14'
let price = 6000
item = {
    name: name,
    price: price,
    show: function () {
        return `${this.name}: ${this.price} 元`
    },   
}
console.log(item.show())

3.2、属性简化

item = {
    name,
    price,
    show: function () {
        return `${this.name}: ${this.price} 元`
    },   
}
console.log(`属性简化：`+ item.show())

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

3.3、方法简化

item = {
    name,
    price,
    // 删除 `:function`
    show(){
        return `${this.name}: ${this.price} 元`
    }
}
console.log(`方法简化：`+ item.show())

方法简化：【删除 :function】

四、分支结构与对应的语法糖

4.1、单分支

let uname = false
if (uname) {
    console.log('ok')
}

如果为真（满足执行条件）就执行

4.2、双分支

if(uname) {
    console.log('ok')
}else {
    console.log('Error')
}

当条件不满足执行这里时（或者条件为假），就执行else

4.3、多分支

uname = 100
if (uname === 120) {
    console.log('ok')
}
if (uname === 100) {
    console.log('Good')
} else {
    console.log('Sorry, 404')
}

按顺序执行，如若中途执行完成后就返回
如若执行过程中没有满足条件，直到最后执行else

4.4、双分支语法糖

// 双分支语法糖 => 三元运算符
let a = false;
// 三元运算符公式： 条件 ？ true : false
console.log(`三元运算符:` + (a? 'ok' : 'Error'))
console.log('------------------------')

4.5、多分支语法糖

// 等值判断
let b = 130
switch (b) {
    case 100:
        console.log('b=100')
        break
    case 120:
        console.log('b=120')
        break
    default:
        console.log('数据越界')
}

语法糖：没有改变语法本质，只是简化了书写

数组与对象的声明与访问、作用域与作用链、对象的简化方案、分支结构与对应的语法糖