JavaScript解构赋值与对象操作深入解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53430000/article/details/126733787

<!DOCTYPE html>

<head>

<title>Document</title>

window.onload = function () {

// let info = { name: '后盾人', url: 'houdunren.com' };

// // let {name:a,url:b} = info;

// let { name, url } = info;

// console.log(name);

// console.log(url);// 这样就是在传参数的时候就不用点语法来访问对象的属性

// function hd() {

// return {

// name: '后盾人',

// url: 'houdunren.com'

// };

// }

// //当函数的返回值是对象的时候可以使用解构赋值的方法

// console.log(hd().name, hd().url);

// //使用解构赋值的方法

// let { name: n, url: b } = hd();

// console.log(n);

// console.log(b);

"use strict";

// function hd({ name, age }) {

// console.log(name, age); //向军大叔 18

// }

// hd({ name: "向军", age: 18 });

// let info = ['后盾人', 'houdunren.com'];

// let [, url] = info; //如果不想输出某一个值的话就可以使用，来进行占位

// console.log(url)

// //将变量转换为对象并且对他进行解构赋值

// let name = "John";

// let age = 18;

// let hdd = { name: name, age: age };

// console.log(name);

// console.log(age);

//嵌套的解构赋值

//解构赋值的作用就是

// let [name, site = 'hdcms'] = ['后盾人'];

// console.log(name)

//解构赋值添加默认参数

//在解构赋值的过程中给兑现添加默认参数

// let obj = { name: "zhangsan", age: 18 };

// let { name, age, user = "法外狂徒康散" } = obj; //需要注意的是在解构赋值的过程中需要注意的是创建的变量名不可以被重复创建

// //重复创建的时候就会报错

// //创建函数的时候，也可以对参数进行解构赋值

// //上传

// function upload(params) {

// //使用扩展运算符实现参数合并

// let config = {

// type: "*.jpg",

// size: 900

// };

// params = { ...config, ...params };

// console.log(params)

// };

// upload();

// //对函数进行默认参数的传递

// //使用解构赋值设置函数的默认参数

// function create(options) {

// let { width = '200px', height = '100px', backgroundColor = 'red' } = options;

// const h2 = document.createElement('h2');

// h2.style.width = width;

// h2.style.height = height;

// h2.style.backgroundColor = backgroundColor;

// document.body.appendChild(h2);

// };

// create({});

// //向对象添加属性

// let test_data = {};

// test_data.name = "张三";

// console.log(test_data);

// //检查对象是不是包含指定属性

// console.log(test_data.hasOwnProperty("name"));

// //这样的话就说明指定的对象当中是包含该属性的

// console.log(test_data.hasOwnProperty("age"));//如果包含指定的元素的话，返回true 不包含指定的元素的话返回FALSE

// //hasOwnProperty 只检测自身的属性不检查原型链上的属性

// //使用原型链的话可以检查原型链上的属性

// console.log("concat" in test_data)// 对象没有concat 属性

// //创建数组

// let arr = [];

// console.log("concat" in arr);

// // 获取当前对象的指定的属性

// let test_data_one = Object.getOwnPropertyNames(test_data);

// console.log(test_data_one);

// //一个对象或者多个对象的复制

// //使用方法 assign

// let one_obj = {

// name: "张三"

// }

// let test_one_obj = Object.assign(one_obj, { age: 18 }, { gender: "男" });

// console.log(test_one_obj);

// const lessons = [

// {

// title: "媒体查询响应式布局",

// category: "css"

// },

// {

// title: "FLEX 弹性盒模型",

// category: "css"

// },

// {

// title: "MYSQL多表查询随意操作",

// category: "mysql"

// }

// ];

// let lessonObj = lessons.reduce((obj, cur, index) => {

// obj[`${cur["category"]}-${index}`] = cur;

// return obj;

// }, {});

// console.log(lessonObj); //{css-0: {…}, css-1: {…}, mysql-2: {…}}

// console.log(lessonObj["css-0"]); //{title: "媒体查询响应式布局", category: "css"}

// //对象式引用类型但是是传址操作

// let hdd = {

// name:"xiaomi"

// };

// let hdUser = {

// hi:hdd

// };

// hdUser.hi.name="iphone";

// console.log(hdd.name);

//遍历对象

// const hd = {

// name: "后盾人",

// age: 10

// };

// console.log(Object.keys(hd));

// console.log(Object.values(hd));

// console.log(Object.entries(hd));

// let obj = { 0: "a", 1: "b", 3: "c" };

// //使用for in 遍历对象

// for(let i in obj){

// console.log(i+"------"+obj[i]);

// };

// console.log(Object.getOwnPropertyNames(obj));

// //检查是不是包含指定的属性

// console.log(obj.hasOwnProperty("0"))

// //所以是包含指定属性的

//使用 for of 遍历对象

// let hd = {

// name:"张三",

// age:18

// };

// for(const index of Object.keys(hd)){

// console.log(index)

// };

// //使用 for of 同时遍历对象的属性名和属性值

// for(const [keys,values] of Object.entries(hd)){

// console.log(keys,values)

// }

let lessons = {

name: "js", click: 23,

}

// let ul = document.createElement("ul");

// lessons.reduce((pre, cur) => {

// let li = document.createElement("li");

// li.innerHTML = `姓名---${cur.name}---点击数---${cur.click}`

// ul.appendChild(li);

// },[])

// document.body.appendChild(ul);

//使用for of 遍历数组型对象

// let ul = document.createElement("ul");

// lessons.forEach((item,index,arr)=>{

// let li = document.createElement("li");

// li.innerHTML = `name:${item.name}---点击数:${item.click}`

// ul.appendChild(li);

// });

// document.body.appendChild(ul);

//对象的浅拷贝和对象的深拷贝

// 使用点语法完成对对象的浅复制

let obj = {

name: "后盾人"

};

let hd = { ...obj };

hd.name = "hdcms";

console.log(hd);

console.log(obj);

//对象的浅拷贝与深拷贝

let list = ['河南','加油'];

let copylist = [].concat(list);

copylist.push("中国加油");

console.log(copylist);

console.log(list);

//完成对象的深拷贝

//数组的深拷贝

let test_list = [{name:"张三"}];

let a = test_list;

test_list[0]="this is show time";

console.log(a);

console.log(test_list);

//这样的话完成的是对象的浅拷贝

//接下来完成的就是对象的深拷贝

let test_list_test = [{name:"王老五"}];

let test = JSON.parse(JSON.stringify(test_list_test));

test.name = "我就是我";

console.log(test);

console.log(test_list_test);

//这样的话二者互相修改就会回收到影响

}

</script>

</head>

<body>

</body>

</html>

对象的学习