JS实用篇复习笔记（10）1、解构赋值 1、最常用的两种数据结构是Object和Array。对象允许我们创建一个单独的

1、解构赋值

1、最常用的两种数据结构是Object和Array。

对象允许我们创建一个单独的实体，通过键存储数据项。
数组允许我们将数据项收集到有序列表中

2、先说数组

最简单例子

// we have an array with the name and surname
let arr = ["ppx", "ppx1"]

// destructuring assignment
let [firstName, sedname] = arr;

alert(firstName); // ppx
alert(sedname);  // ppx1

2、常用交换两个变量

let guest = "ppx";
let admin = "ppx1";

// Let's swap the values: make guest=ppx1, admin=ppx
[guest, admin] = [admin, guest];

3、rest 剩下的部分使用三个点获取“其余部分” "..."：

前两个对应后面的前两个其余部分都给 rest

let [ppx, ppx1,  ...rest] = ["skt", "clg",  "dk"  , "of the Roman Republic" ,'gen'];

再说对象
非常重要在 react 中常用比如 {username,userage} = this.props

基本语法是：

let {var1, var2} = {var1:…, var2:…}

like this one 我们有一个具有许多属性的复杂对象，我们可以只提取我们需要的内容：

let options = {
  title: "skt",
  sum: 100,
  weight: 200
};

// only extract title as a variable
let { title } = options;

alert(title); // skt

对于上面剩余变量怎么处理？

let {title, ...rest} = options;

// sum 和 weight 都放在 rest 内

当函数需要传入多个参数时怎么处理？

function showMe( {title = "what", width = 200, height = 200, others = [] } ) {xxxxx}

4、非常典型的例子

1、将数组内的值取出来

let user = { name: "skt", years: 18 };
let {name, years: age, isAdmin = false} = user;
alert( name ); // skt 
alert( age ); // 18 
alert( isAdmin ); // false

2、对这样的对象内容排序，怎么解决？

  function test(team) {
        let max = 0;
        let maxName = null;
        for (const [name, sore] of Object.entries(team)) {
          if (max < sore) {
            maxName = name;
            max = sore;
          }
        }
        return maxName;
      }

      let team = {
        skt: 500,
        dk: 300,
        gen: 250,
      };

      console.log(test(team));

非常nice ！

2、Date and time

1、新的内置对象：Date。它存储日期、时间并提供日期/时间管理方法

我们通常用来 1、打印当前时间

2、存储时间

3、修改时间

2、常用方法

new Date()

不带参数——Date为当前日期和时间创建一个对象：

let now = new Date();
alert( now ); // shows current date/time

传递参数new Date(milliseconds)
创建一个Date对象，其时间等于 1970 年 1 月 1 日 UTC+0 之后经过的毫秒数（1/1000 秒）

常规使用 moment 或者另外一个格式化时间，展示需要的格式
常用特殊的方法Date.now()可以返回当前时间戳
可以使用 Date.parse(xxx) 将时间转为 ms 如：

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

alert(ms); // 1327611110417  (timestamp)

3、实际案例

1、 Date为日期创建一个对象：2021 年 8 月 20 日，凌晨 5:13。时区是本地的。

使用alert.

注意月份从0 开始的

//new Date(year, month, date, hour, minute, second, millisecond)
let d1 = new Date(2021, 7, 20, 5, 13);
alert( d1 );

我们还可以从字符串创建日期，如下所示：

//new Date(datastring)
let d2 = new Date("February 20, 2012 03:12:00");
alert( d2 );

2、输入一个时间返回是周几？

date.getDay()返回工作日的编号，从星期日开始

    function getWeek(date) {
      let days = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
      return days[date.getDay()];
    }
    let date = new Date(2013, 2, 13);
    alert(getWeek(date));
    alert(d3); // WE

3、多少天以前是一个月的哪一天？

使用这个方法

如果今天是 20 号，那么getDateAgo(new Date(), 1)应该是 19 号，getDateAgo(new Date(), 2)应该是 18 号

 function getDateBefore(date, days) {
      date.setDate(date.getDate() - days);
      return date.getDate();
    }

    let date = new Date(2017, 3, 19);
    console.log(getDateBefore(date, 1)); // 18

4、每个月最后一天是多少？

function getLastDayOfMonth(year, month) {
      let date = new Date(year, month + 1, 0);
      return date.getDate();
    }
    console.log(getLastDayOfMonth(2021, 9)); // 31

5、当前时间换算成秒怎么处理？

function getSecondsToday() {
      let d = new Date();
      return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
    }
    alert(getSecondsToday());

6、到明天还有多少秒？

    function getSecondsToTomorrow() {
      let now = new Date();
      let tomorrow = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate() + 1
      );
      let diff = tomorrow - now;
      return Math.round(diff / 1000);
    }
    alert(getSecondsToTomorrow());

3、JSON

1、为啥需要这个？

如果使用 toString() 将对象转为字符串显得很麻烦

let user = {
  name: "ppx",
  age: 18,

toString() {
    return `{name: "${this.name}", age: ${this.age}}`;
  }
};

alert(user); // {name: "ppx", age: 18}

2、使用JSON.stringfy -->转为字符串对象

   let user = {
      age: 18,
      name: "ppx",
    };

    console.log(JSON.stringify(user)); // {"age":18,"name":"ppx"}

支持格式 JSON 支持以下数据类型：

对象 { ... }
数组 [ ... ]
原始值：
- 字符串，
- 数字，
- 布尔值true/false，
- null.

重要的限制：不能有循环引用

    //room={xxx} meetup={xx}
    meetup.place = room;       // meetup references room
    room.occupiedBy = meetup; // room references meetup

JSON.stringify(meetup); // Error: Converting circular structure to JSON

后面可以放参数 replacer 替代前面对象里面的内容

    let user = {
      age: 18,
      name: "ppx",
    };

    console.log(JSON.stringify(user, ["age"])); // {"age":18}

再放一个参数为格式化空格 space

3、JSON.parse

1、语法：

目的将json格式转为正常格式

let value = JSON.parse(str, [reviver]);

2、举例子说明

1、转数组（常用）

    // stringified array
    let numbers = "[0, 1, 2, 3]";
    numbers = JSON.parse(numbers);
    console.log(numbers); // (4) [0, 1, 2, 3]

2、转对象（常用）

    let userData =
      '{ "name": "skt", "age": 10, "isAdmin": false, "friends": [0,1,2,3] }';
    let user = JSON.parse(userData);
    console.log(user); // {name: "skt", age: 10, isAdmin: false, friends: Array(4)}

3、注意 JSON 不支持注释。向 JSON 添加注释使其无效

4、常用且重要的事情 转字符串对象，并对值进行处理

错误的案例 错误原因 meetup.date拿到的是字符串字符串没有.getDate()方法

    let str = '{"title":"skt","date":"2021-08-20T12:00:00.000Z"}';

    let meetup = JSON.parse(str);

    alert(meetup.date.getDate()); // Error!  meetup.date.getDate is not a function

怎么解决这个事情？

也就是说 JSON.parse(xxx,(回调函数处理值))

    let str = '{"title":"skt","date":"2021-08-20T12:00:00.000Z"}';
    let meetup = JSON.parse(str, function (key, value) {
      if (key == "date") return new Date(value);
      return value;
    });
    alert(meetup.date.getDate()); // 20