JS知识点+试题（三）

ES6对象解构

<script>
    let person={
        name:'TS',
        age:19,
    }
    let{name:name1,age:age,hobby}=person
    console.log(name1,age,hobby);

    // let name1=person.name
    // console.log(nam1,age,hobby)
</script>

变量名在后面
对象解构赋值的默认值

　　想生效——对象与只对应的属性值一定是undefined

    let person={
        name:'TS',
        age:19,
        //hobby:null //null
    }
    let{name:name1,age:age,hobby='reading'}=person
    console.log(name1,age,hobby);

    var {x:y = 5}={x:undefined}
    console.log(y) //5

    var {x:y = 3}={x:5}
    console.log(y) //5

    var{message: msg='aloha'}={}
    console.log(msg) //aloha

    var{x=3}={x:null}
    console.log(x) //null

JS执行

    let a;
    ({a}={a:1})//无（）语法错误
    console.log(a)//1

盲区：允许等号左边的模式中不存放任何变量名

    ({} = [true,false]);
    ({}=123); 
    ({}=[])

    let student={
        stuInfo:{
            basicInfo:{
                name:'st',
                age:12

            }
        }

    }
    let {stuInfo:{basicInfo}}=student
    console.log(basicInfo.name) //st

试题：实现一个方法能够在控制台打印当前的时间时间间隔是一秒时间格式是 YYYY-MM-DDhh:mm:ss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
//实现一个方法能够在控制台打印当前的时间时间间隔是一秒时间格式是 YYYY-MM-DDhh:mm:ss

setInterval(()=>{
    console.log('当前时间是'+timer());
},1000)
function timer(){
//能够在控制台打印当前的时间
var date = new Date()
var year = date. getFullYear()
var month = (date. getMonth() +1).toString().padStart(2,"0")
var day = date.getDate().toString().padStart(2,"0") 
var hour = date.getHours().toString().padStart(2,"0")
var min = date.getMinutes().toString().padStart(2,"0")
var second = date.getSeconds().toString().padStart(2,"0")

return `${year}-${month}-${day} ${hour}:${min}:${second}`
}


</script>
</html>

箭头函数

一基本的使用
注意点
- 函数体内的this

- 不可以当做构造函数

- arguments 是不可以的

- 箭头函数不可以当做generator函数

this——谁调用我指向谁

试题

找到不同函数、方法指向的对象就迎刃而解

深浅拷贝

1.数据存储
-—般数据类型
number string boolean null undefined Symbol（存在栈内）

-引用数据类型
object 数组 Set Map

     var person= { name:'sheena' }
     //person存在栈内 
     //name:'sheena' 存在堆内 被person进行引用

浅拷贝与赋值

     var peron={ name:'sheena'}
     //person存在栈内 
     //name:'sheena' 存在堆内 被person进行引用

     //赋值与浅拷贝区别
     var person1 = person
     person1.name='a'

     console.log(person.name);//a
     console.log(person1.name);//a
     //以上操作：赋值

浅拷贝：创建新对象

拷贝值（如果属性是一般数据类型拷贝的是基本类型的值如果属性是引用数据类型拷贝的就是内存的地址)

浅拷贝如果碰到的是引用数据类型那么拷贝前和拷贝后是互相影响的

     var person= { name:'sheena' ,hobby:['reading','musical','sking']}
     function shallowClone(source){
         var newObj={}
         for (var i in source){
             if(source.hasOwnProperty(i)){
                 newObj[i]=source[i]
             }
         }
         return newObj
     }

     var person1= shallowClone(person)
     person1.name='aa'
     console.log(person.name);//sheena
     console.log(person1.name);//aa
     person1.hobby[1]='coding'

     console.log(person.hobby[1]);//coding
     console.log(person1.hobby[1]);//coding

深拷贝实现

JSON

     //json实现深拷贝

     function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};

console.log(person,person1)

拷贝的对象的值中如果有函数、undefined、symbol 这三种类型，经过 JSON.stringify 序列化之后的字符串中这个键值对会消失

undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 跳过（忽略）对它们进行序列化

转换值如果有 toJSON() 函数，该函数返回什么值，序列化结果就是什么值，并且忽略其他属性的值
拷贝 Date 引用类型会变成字符串
无法拷贝不可枚举的属性
无法拷贝对象的原型链
拷贝 RegExp 引用类型会变成空对象
对象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的结果会变成 null
无法拷贝包含循环引用的对象（对象之间相互引用，形成无限循环），会抛出错误

function deepClone(obj){
　　let objClone =  Array.isArray(obj) ? [] : {};
　　if (obj && typeof obj === 'object') {
　　　　for(let key in obj){
　　　　　　if (obj[key] && typeof obj[key] === 'object'){
　　　　　　　　objClone[key] = deepClone(obj[key]);
　　　　　　}else{
　　　　　　　　objClone[key] = obj[key]
　　　　　　}
　　　　}
　　}
　　return objClone;
}

结合项目经验：Vue项目的增删改查

又想到设计模式中的原型模式涉及到了深浅拷贝的学习!

使用java语言开发实现深浅拷贝，学习笔记

package designpatterns.prototype.deepclone;

public class Client {
    public static void main(String args[]) {
        WeeklyLog log_previous, log_new = null;
        log_previous = new WeeklyLog();           //创建原型对象
        Attachment attachment = new Attachment();   //创建附件对象
        log_previous.setAttachment(attachment);     //将附件添加到周报中
        try {
            log_new = log_previous.deepClone(); //调用深克隆方法创建克隆对象        
        }
        catch(Exception e) {
            System.err.println("克隆失败！");
        }
        //比较周报
        System.out.println("周报是否相同？ " + (log_previous == log_new));
        //比较附件
        System.out.println("附件是否相同？ " + (log_previous.getAttachment() == log_new.getAttachment()));
    }

package designpatterns.prototype.deepclone;
import java.io.*;

public class Attachment implements Serializable {
    private String name; //附件名

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return this.name;
    }

    public void download() {
        System.out.println("下载附件，文件名为" + name);    
    }
}

    //使用序列化技术实现深克隆
    public WeeklyLog deepClone() throws IOException, ClassNotFoundException, OptionalDataException {
        //将对象写入流中
        ByteArrayOutputStream bao=new ByteArrayOutputStream();
        ObjectOutputStream oos=new ObjectOutputStream(bao);
        oos.writeObject(this);
        
        //将对象从流中取出
        ByteArrayInputStream bis=new ByteArrayInputStream(bao.toByteArray());
        ObjectInputStream ois=new ObjectInputStream(bis);
        return (WeeklyLog)ois.readObject();

    //使用clone()方法实现浅克隆
    public WeeklyLog clone() {
        Object obj = null;
        try {
            obj = super.clone();
            return (WeeklyLog)obj;
        }
        catch(CloneNotSupportedException e) {
            System.out.println("不支持复制！");
            return null;
        }
    }

posted @ 2022-03-29 17:18 Clematis 阅读(32) 评论(0) 收藏举报

刷新页面返回顶部

Clematis✨✨✨

JS知识点+试题（三）

箭头函数

深浅拷贝

公告