【Web】0基础学Web—js类和对象、json、js对象解构、js对象遍历、js深浅拷贝

类和对象

js访问对象：mary[‘name’], mary.name

ES6:js创建类

<script>
class Person {
    //构造器
    constructor(name, age) {
        this.name = name   //this指代当前对向
        this.age = age
    }
    //方法
    show() {
        console.log(`${this.name}在吃饭`)
    }
}
</script>

创建对象

<script>
let zs = new Person('张三', 20)
let ls = new Person('李四', 20)
console.log(zs)
zs.show()
</script>

构造函数创建对象

<script>
function Student(name, age) {
    //this=new Object()  隐式生成
    this.name = name
    this.age = age
    this.show = function () {
        console.log(`${this.name}在吃饭`)
    }
    // return this  隐式返回
}
gj = new Student('郭靖', 30)
hr = new Student('黄蓉', 30)
gj.show()
hr.show()
</script>

直接创建对象

key必须加双引号

<script>
let mary = {
    'name': 'mary',
    'age': 20,
    'sex': '女'
}
let tom = {
    'name': 'tom',
    'age': 30,
    'sex': '男'
}
console.log(mary['name'], mary.name)
</script>

json

js序列化:
  JSON.stringify(js数据结构)
js反序列化:
  JSON.parse(json字符串)

<script>
let ary = [{
    'name': 'mary',
    'age': 20,
    'sex': '女'
}, {
    'name': 'tom',
    'age': 30,
    'sex': '男'
}]
//序列化
let arys = JSON.stringify(ary)
console.log(arys)
//反序列化
console.log(JSON.parse(arys))
//  ary.forEach(obj=>{})
for (const obj of ary) {
    console.log(obj.name, obj.age)
}
</script>

对象解构

<script>
    let obj = { 'name': '张三', 'age': 20, 'active': { 'a': 10 } }
    let { name, age, active: { a } } = obj   //名字必须一致
    console.log(name, age)
    console.log(a)
    let obj2 = { 'name': '张三', 'age': 20 }
    //合并另一个对象
    let obj3 = { 'address': '开封', ...obj2 }
    console.log(obj3)
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    //   arr1.concat(arr2)
    console.log([...arr1, ...arr2])
    let o1 = { 'name': 'zhangsan' }
    let o2 = { 'age': 20 }
    console.log({ ...o1, ...o2 })
</script>

对象遍历

对象增强

如果key和val变量名相同,可以省略

<script>
let name = '张三'
let age = 20
let zs = { name, age }
console.log(zs)
</script>

变量作为key

<script>
let address = 'add'
let val = '开封'
let ww = { [address]: val, 'stu-no': 1002 ,[val]:address}
console.log(ww)
</script>

对象遍历—遍历key

<script>
let obj = { name: '张三', age: 20, sex: '男', phone: '343674736' }

for (const key in obj) {
    console.log(key, obj[key])
}


console.log(Object.keys(obj))  //['name', 'age', 'sex', 'phone']
for (const key of Object.keys(obj)) {
    console.log(key, obj[key])
}
</script>

对象遍历—遍历value

<script>
for (const val of Object.values(obj)) {
    console.log(val)
}
</script>

对象遍历—遍历key与value

<script>
console.log(Object.entries(obj))
for (const [key, val] of Object.entries(obj)) {
    console.log(key, val)
}
</script>

深浅拷贝

<script>
let oo = {
    "a": 1,
    "b": 2,
    "c": ['hello', 'world'],
    "stu": {
        'name': 'zs',
        "age": 18,
        "score": [10, 50, 60]
    },
    "d": 'aaa'
}
</script>

浅拷贝

<script>
let oo2 = { ...oo }
oo2.a = 10
console.log(oo.a) //1  第一层不受影响
oo2.c[0] = 'where'
console.log(oo.c[0])  //where  第二层受影响
oo2.d = 'bbb'
console.log(oo.d)  // aaa
oo2.c = 'a'
console.log(oo.c)  // ['where', 'world']
</script>

深拷贝

<script>
let oo3 = JSON.parse(JSON.stringify(oo))
console.log(oo3)
oo3.c[0] = 'why'
console.log(oo.c[0])  //where  第二层不受影响
oo3.d = 'ccc'
console.log(oo.d)  // aaa
</script>