学习前端第三十天（解构赋值，日期和时间）

一、解构赋值

解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中。

1、数组解构

        // 数组解构
        let arr = ['c', 'xx', "dwdw"];
        let [a, b] = arr;
        console.log(a, b);

     （1）它“拆开”了数组或对象，将其中的各元素复制给一些变量。原来的数组或对象自身没有被修改。

     （2）可以通过添加额外的逗号来丢弃数组中不想要的元素

        //   用“，”隔开前面或中间不想要的元素
        let [c, , d] = arr;
        console.log(c, d)

     （3）等号右侧可以是任意可迭代对象

        let [a, b, c] = "123"; // [1,2,3]
        let arr = [x, y, z] = new Set(["css", "html", "js"])
        console.log(arr); // {'css', 'html', 'js'}

     （4）给对象中不存在的变量赋值

        let user = {};
        [user.name, user.age, user.gender] = new Set(["jack", 20, "boy"])
        console.log(user);

     （5）与.entries一起使用

        let uuss = { name: 'jack', age: 20, gender: 'boy' };
        for (let [key, value] of  Object.entries(uuss)) {
            console.log(key, value);
        }

     （6）与map一起

        const users = new Map();
        users.set("name", "lili").set("age", 20)
        for (let [key, value] of users) {
            console.log(key, value);
        }

     （7）数组结构交换变量

        let a = 100;
        let b = 222;
        // 把a的值给b，把b的值给a
        [b, a] = [a, b];
        console.log("a", a, "b", b);// a 222 b 100

 其余的“...”，放在最后一个变量前，收集其余的数组项，这个可以用来复制数组

        // 剩余的"..."
        const arr = ["css", "html", "js", "php"]

        // 被“...”修饰的变量会收集剩余值，以数组方式返回，只能加到最后一个变量上
        const [a, b, ...c] = arr;
        const [x, ...y] = arr;
        console.log(c); // ['js', 'php']
        console.log(y); // ['html', 'js', 'php']

        // 复制数组
        const [...d] = arr;
        const [...e] = arr;
        console.log(d); // ['css', 'html', 'js', 'php']

 默认值，变量没有结构到时显现，结构变量都可设置默认值，需从后往前设置

        const arr = ["css", "html"];
        const [a, b, c = '111', d = prompt("sd")] = arr;
        console.log(a, b, c, d); // css html 111 null

 2、对象解构

赋值属性的名字需要和对象中的属性名一样，顺序不重要

当出现重复定义时，给变量一个别名，color: x，属性：变量，前面的属性负责匹配对象中的属性给变量赋值

对象中没有的属性会显示默认值，没有设置默认值会显示undefined

        const info = {
            weight: 200,
            height: 300,
            color: "black",
        };
        const color = "green";

        const { height = 100, weight, color: x, border = "solid", outline } = info;

        console.log(height, weight, x, border, outline); //300 200 'black' 'solid' undefined

 剩余模式“...”

只取其中一部分，将剩余的赋值给其他的变量

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let {title, ...rest} = options;

// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

3、嵌套解构

一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据，需要使用相同的结构。

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 为了清晰起见，解构赋值语句被写成多行的形式
let {
  size: { // 把 size 赋值到这里
    width,
    height
  },
  items: [item1, item2], // 把 items 赋值到这里
  title = "Menu" // 在对象中不存在（使用默认值）
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

 可以用一个对象来传递所有参数，而函数负责把这个对象解构成各个参数

// 我们传递一个对象给函数
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ……然后函数马上把对象解构成变量
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 提取于 options，
  // width, height – 使用默认值
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

二、日期和时间

 1、获得时间

        let date = new Date(); // 创建一个表示当前日期和时间的 Date 对象
        console.log(date); // Sat Apr 27 2024 11:13:23 GMT+0800 (中国标准时间)
        console.log(date.toString()); // Sat Apr 27 2024 11:13:23 GMT+0800 (中国标准时间)

        console.log(date.toLocaleString()); // 2024/4/27 11:13:35
        console.log(date.toLocaleDateString()); // 2024/4/27
        console.log(date.toLocaleTimeString()); // 11:14:04

2、传入时间戳，自1970-01-01 00:00:00以来经过的毫秒数

        let date = new Date(3000);
        console.log(date.toLocaleString()); // 1970/1/1 08:00:03

        date = new Date(365 * 24 * 60 * 60 * 1000); // 经过一年
        console.log(date.toLocaleString()); // 1971/1/1 08:00:00 东八区

        console.log(date.toUTCString()); // Fri, 01 Jan 1971 00:00:00 国际标准时

3、传入字符串，需要用“/”或“-”隔开

        date = new Date("2024/04/27 2:00:00");
        console.log(date.toLocaleString()); // 2024/4/27 02:00:00
        console.log(date.toUTCString()); // Fri, 26 Apr 2024 16:00:00 GMT

4、分别传入单个数值

      月默认值为1，月份从0开始算，“1”算二月，时分秒默认为0

        const date = new Date(2020, 4, 5, 15, 6, 13);
        console.log(date.toLocaleString()); // 2020/5/5 15:06:13
        const date3 = new Date(2020, 4, 10, 20);
        console.log(date3.toLocaleString()); // 2020/5/10 20:00:00
        const date2 = new Date(2020, 4,);
        console.log(date2.toLocaleString()); // 2020/5/1 00:00:00

5、从 Date 对象中访问年、月等信息

        console.log("年", date.getFullYear());
        console.log("月", date.getMonth() + 1);
        console.log("日", date.getDate());
        console.log("时", date.getHours());
        console.log("分", date.getMinutes());
        console.log("秒", date.getSeconds());
        console.log("毫秒", date.getMilliseconds());
        console.log("星期", date.getDay());

6、返回时间戳，从 1970-1-1 00:00:00 UTC+0 开始到现在所经过的毫秒数

        console.log(date.getTime());
        console.log(+date);

7、// 设置日期组件，高位可以设置低位

        const date = new Date();

        console.log(date.toLocaleString());

        date.setFullYear(year, [month], [date])

        date.setFullYear(2025,)

        // date.setMonth(month, [date])

        // date.setDate(date)

        // date.setHours(hour, [min], [sec], [ms])

        // date.setMinutes(min, [sec], [ms])

        // date.setSeconds(sec, [ms])

        // date.setMilliseconds(ms)

        // date.setTime(milliseconds)

8、自动校准

        const date = new Date("2020-12-21 13:30:30");

         date.setMonth(0); // 一月

         console.log(date.toLocaleString()); // 2020/1/21 13:30:30

         date.setDate(0);// 上个月的最后一天

         console.log(date.toLocaleString()); // 2020/11/30 13:30:30

         date.setDate(-10); // 这个月初往前推十天

         console.log(date.toLocaleString()); // 2020/11/20 13:30:30

         date.setSeconds(date.getSeconds() + 70); // 七十秒之后的时间

9、日期可以相减，相减的结果是以毫秒为单位时间差

        const d1 = new Date();
        for (let i = 0; i < 10000000000; i++) {

        };
        const d2 = new Date();

        console.log(d2 - d1); // 程序循环代码的时间

10、Date.parse，从一个字符串中读取日期

let ms = Date.parse('2012-01-26T13:51:50.417-07:00');

alert(ms); // 1327611110417 (时间戳)