javascript引用类型与流程控制

JS基本语法-3

1. 引用类型

基本类型：number ,string ,boolean ,null ,undefined
引用类型：object ,array ,function

数组

// const arr = [数组成员可以是任意类型]
//数组
const arr = [1 ,'admin' ,true]
//数组访问 下标从0开始[index]
console.log(arr[1])  //admin

对象

//对象 
const obj = {
    //数据成员: 属性
    name: '小明',
    sex: '男',
    age: 15,
    1: 0 //非法标识符 使用数组索引方式访问 obj[1]
}
// 对象访问
console.log(obj.name) //小明
//对象函数声明，属性就叫：方法
//this:与当前对象绑定，this->user,user变this改变
//箭头函数没有自己的this ,它的this，永远和它的上下文绑定(父级作用域)
const user = {
    id: 5,
    uname: '张老师',
    show: function(){
        return `id=${this.id},uname=${this.uname}`
    }
}
console.log(user.show())

数组 对象 总结

 1. 数组: [...] ,arr[index]
 2. 对象: {...} ,obj.key
 数组 ,对象的成员 ,可以是任意类型

数组，对象应用场景

1. 多维数组

let arr = [1 ,'手机' ,5000]
arr = [
    [1 ,'手机' ,5000]
    [2 ,'电脑' ,9000]
    [3 ,'键盘' ,100]
]
console.log(arr[1])

2. 对象数组

let obj = [
    {
        id: 1,
        item: '手机',
        price: 5000
    },
    {
        id: 2,
        item: '电脑',
        price: 9000
    },
    {
        id: 3,
        item: '键盘',
        price: 1000
    }
]
// 读取
console.log(obj[1].item) //电脑

3. 类数组

//‘类数组’: 类似, 像一个数组 ,本质上仍然是一个对象
// 内部是数组结构，但是有一个对象的外衣

const obj = {
    0: 5,
    1: 'admin',
    2: '123@qq.com',
    length: 3
}
console.log(obj[0] ,obj.length) //5 ,3
//转为真正的数组
const arr = Array.from(obj)
console.log(arr) //[5 ,'admin' ,'123@qq.com' ,3]

总结

多维数组（二维）
对象数组
'类'数组

作用域与作用域链

/?1. 块作用域
{
    //let支持块作用域在作用域外访问不到✔ 
    //var不支持块作用域可以在块作用域外面访问到
    // var a = 100
    // console.log(a)
}
//外部访问不到
// console.log(a)
/?2. 函数作用域
//从内部先查找,找不到往外找
let links = 'https://baidu.com'
const urls = function(){
    //内部声明的叫私有成员
    let links = 'https://php.cn'
    console.log(links)
}
urls() //https://php.cn
//?3. 全局作用域
//所有块，函数外部都是全局的
const userName = 'php'
{
    //在块里访问
    console.log(userName)
}
//函数里访问
;(function(){
    console.log(userName)
})

对象简化

//经典写法
let item = {
    name: '苹果15',
    price: 50000,
    show: function(){
        return `${this.name}: ${this.price}元`
    }
}
//属性简化写法
let names = '苹果15'
let price = 50000
item = {
    //属性名: 变量名
    //如果属性与变量同名可只写属性不写变量
    names,
    price,
    show: function(){
        return `${this.name}: ${this.price}元`
    }
}
//方法简化
item = {
    //可以删除:function
    names,
    price,
    show(){
        return `${this.name}: ${this.price}元`
    }
}

总结

作用域：用于查询变量
作用域链：查询变量的路径（由内向外不可逆）
类型：块，函数，全局

对象字面量的简化语法

属性简化: 属性名与变量同名的情况下只写属性即可
方法简写: 删除`:function`

流程控制

//1. 分支
//单分支
let flag = false;
if(flag){
    console.log('ok')
}
//2. 双分支
if(flag){
    console.log('ok')
}else{ // 条件不满足时候执行
    console.log('no ok')
}
//3. 多分支
let nol = 120;
if(nol === 100){
    console.log('Ok')
}
if(nol === 120){
    console.log('Hello')
}else{
    console.log('No Hello')
}
//4. 双分支语法糖
// 语法糖：简化抒写
// 双分支简化成三元运算符
let a = false;
if(a){
    console.log('早上')
}else{
    console.log('下午')
}
//三元运算符
//条件 ？ true : false
// 简化
console.log(a?'早上':'中午')
//5. 多分支语法糖
let arr1 = [1, 2, 3, 4, 5];
//等值判断
switch (arr1.length) {
    case 0:
      console.log("0");
      break;
    case 1:
      console.log("1");
      break;
    case 2:
      console.log("2");
      break;
    default:
      console.log("3");
  }
//范围判断
let b = 90;
switch(b){
    case b>=80 && b< 100:
        console.log('b>=80 ,b< 100')
        break
    case b>=100 && b < 200:
        console.log('b>=100 ,b<200')
        break
    default:
        console.log('end')
}

总结

单分支: `if(){...}`
双分支: `if(){...}else{...}`
多分支: `if(){...}else if(){...}else{...}`
双分支语法糖: `con ? true : false`
多分支语法糖: `switch`(离散，区间)