前端ES6(3)——对象优化

最新推荐文章于 2024-08-28 22:17:56 发布

Java小生不才

最新推荐文章于 2024-08-28 22:17:56 发布

阅读量109

点赞数

分类专栏： html 文章标签： es6

本文链接：https://blog.csdn.net/qq_41596346/article/details/120997436

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.object中拓展的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象优化</title>
</head>
<body>
    <script>
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
        console.log("-------------------------------------");
    </script>
</body>

</html>

在这里插入图片描述
assign(dest, …src) ：将多个 src 对象的值拷贝到 dest 中。（第一层为深拷贝，第二层为浅拷贝）

   //assign 合并
   const target = { a: 1 };
    const source1 = { b: "小生不才" };
    const source2 = { c: 3 };
    //{a:1,b:2,c:3}
    Object.assign(target, source1, source2);
    console.log(target);
    console.log("-------------------------------------");

在这里插入图片描述

2.声明对象简写

属性名和属性值变量名一样，可以省略

//2）、声明对象简写
const age = 23
const name = "张三"
//常规写法
const person1 = { age: age, name: name }
//console.log(person1);

//es6写法     属性名和属性值变量名一样，可以省略
const person2 = { age, name }
console.log(person2);
console.log("-------------------------------------");

在这里插入图片描述

3.对象的函数属性简写

 //3）、对象的函数属性简写
 let person3 = {
      name: "jack",
      // 普通写法
      eat: function (food) {
          console.log(this.name + "在吃" + food);
      },
      //箭头函数this不能使用,可使用对象.属性
      eat2: food => console.log(person3.name + "在吃" + food),
      eat3(food) {
          console.log(this.name + "在吃" + food);
      }
  }
  person3.eat("香蕉");
  person3.eat2("苹果")
  person3.eat3("橘子");
  console.log("-------------------------------------");

在这里插入图片描述

4.对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象

  //4）、对象拓展运算符
  // 1、拷贝对象（深拷贝）
   let p1 = { name: "Amy", age: 15 }
   let someone = { ...p1 }
   console.log(someone)  //{name: "Amy", age: 15}
   let s = p1;
   console.log(s);

   // 2、合并对象
   let age1 = { age: 15 }
   let name1 = { name: "Amy" }
   let p2 = {name:"zhangsan"}
   //覆盖以前的值
   p2 = { ...age1, ...name1 } 
   console.log(p2)

在这里插入图片描述

5.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象优化</title>
</head>

<body>
    <script>
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
        console.log("-------------------------------------");

        //assign 合并
        const target = { a: 1 };
        const source1 = { b: "小生不才" };
        const source2 = { c: 3 };
        //{a:1,b:2,c:3}
        Object.assign(target, source1, source2);
        console.log(target);
        console.log("-------------------------------------");


        //2）、声明对象简写
        const age = 23
        const name = "张三"
        //常规写法
        const person1 = { age: age, name: name }
        //console.log(person1);

        //es6写法
        const person2 = { age, name }
        console.log(person2);
        console.log("-------------------------------------");


        //3）、对象的函数属性简写
        let person3 = {
            name: "jack",
            // 普通写法
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用,可使用对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("香蕉");

        person3.eat2("苹果")

        person3.eat3("橘子");
        console.log("-------------------------------------");



        //4）、对象拓展运算符
        // 1、拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}
        let s = p1;
        console.log(s);

        // 2、合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        //覆盖以前的值
        p2 = { ...age1, ...name1 } 
        console.log(p2)
    </script>
</body>

</html>

Java小生不才

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端ES6(3)——对象优化

1.object中拓展的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对象优化</title></head><body> &l
复制链接

扫一扫

专栏目录