学习前端第三十天(解构赋值,日期和时间)

一、解构赋值

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

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 100alert( 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:35console.log(date.toLocaleDateString()); // 2024/4/27console.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:03date = 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:00console.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:13const date3 = new Date(2020, 4, 10, 20);console.log(date3.toLocaleString()); // 2020/5/10 20:00:00const 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 (时间戳)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/7420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信息系统项目管理师0090:项目经理的影响力范围(6项目管理概论—6.3项目经理的角色—6.3.2项目经理的影响力范围)

点击查看专栏目录 文章目录 6.3.2项目经理的影响力范围1.概述2.项目3.组织4.行业5.专业学科6.跨领域6.3.2项目经理的影响力范围 1.概述 项目经理在其影响力范围内可担任多种角色,这些角色反映了项目经理的能力,体现了项目经理的价值和作用,项目经理会涉及项日、组织、行业、…

免费开源论坛社区社交圈子系统,圈子系统,系统开发,支持二开,包含公众号/app/H5,源码交付!

一款追求体验的社区论坛圈子系统 什么是圈子交友系统&#xff1f; 圈子交友系统(多客开源圈子系统)为会员提供精准交友服务 结合多种营销机制为创业者提供低成本、高效获取注册会员&#xff0c;是婚恋交友行业的创业利器&#xff01; 多类型内容形式 多场景应用 精准推广、直…

vue cli 自定义项目架子,vue自定义项目架子,超详细

脚手架Vue CLI基本介绍&#xff1a; Vue CLI 是Vue官方提供的一个全局命令工具 可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】 脚手架优点&#xff1a; 开箱即用&#xff0c;零配置内置babel等工具标准化的webpack配置 脚手架 VueCLI相关命令…

拼多多标准推广二阶段跑不动怎么办

拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营销工具&#xff0c;由商家自主设置佣金比例&#xff0c;激励推广者去帮助商家推广商品链接&#xff0c;按最终有效交易金额支付佣金&#xff0c;不成交不扣费。是商家破零、积累基础销量的重要…

mysql 按字段查询重复的数据

在 MySQL 中&#xff0c;可以使用多种方法来查询按字段重复的数据。以下是一些最常用的方法&#xff1a; 1. 使用 GROUP BY 和 HAVING 子句 SQL SELECT column_name, COUNT(*) AS count FROM table_name GROUP BY column_name HAVING count > 1; Use code with caution. …

MongoDB(四):条件操作符

条件操作 1、概述2、比较操作2.1、大于操作符-$gt2.2、大于等于操作符-$gte2.3、小于——$lt2.4、小于等于——$lte2.5、范围查询 3、总结 大家好&#xff0c;我是欧阳方超&#xff0c;可以扫描下方二维码关注我的公众号“欧阳方超”&#xff0c;后续内容将在公众号首发。 1、…

程序员的实用神器:高效开发与质量保证的秘诀

程序员的实用神器&#xff1a;高效开发与质量保证的秘诀 在软件开发的海洋中&#xff0c;程序员的实用神器如同航海中的指南针&#xff0c;帮助他们导航、加速开发、优化代码质量&#xff0c;并最终抵达成功的彼岸。这些工具覆盖了从代码编写、版本控制到测试和部署的各个环节…

数据分析的数据模型

数据分析的数据模型 前言一、优化模型1.1线性优化模型1.1.1线性优化模型定义1.1.2线性优化模型求解算法1. 1.2.1图解法1. 1.2.2. 单纯形法 1.1.3 线性优化模型的应用 1.2非线性优化模型1.2.1非线性优化模型定义1.2.2非线性优化划模型求解方法1. 2.2.1有约束非线性模型算法1.2.2…

ThinkPHP8导出Excel单元格为下拉选择框

说明 本文章是基于上一篇ThinkPHP8 导出Excel数据表格文章的完善版&#xff0c;上一篇仅导出为文本框&#xff0c;此处增加下拉框。 其他内容与上一章不变&#xff0c;此处展示不同内容。 更改 1.头部数组修改 增加type类型&#xff0c;text为文本框&#xff0c;select为下…

已解决java.util.IllegalFormatConversionException异常的正确解决方法,亲测有效!!!

已解决java.util.IllegalFormatConversionException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 示例报错代码&#xff1a; 解决思路 解决方法 检查和更正格式说明符 示例修正代码&#xff1a; 调整参数类型…

【Linux 基础 IO】文件系统

文章目录 1.初步理解文件2. fopen ( )的详解 1.初步理解文件 &#x1f427;① 打开文件&#xff1a; 本质是进程打开文件&#xff1b; &#x1f427;②文件没有被打开的时候在哪里呢&#xff1f; ----- 在磁盘中&#xff1b; &#x1f427;③进程可以打开很多个文件吗&#xff…

1329. 将矩阵按对角线排序

1329. 将矩阵按对角线排序 题目链接&#xff1a;1329. 将矩阵按对角线排序 代码如下&#xff1a; //参考&#xff1a;https://leetcode.cn/problems/sort-the-matrix-diagonally/solutions/2760094/dui-jiao-xian-pai-xu-fu-yuan-di-pai-xu-p-uts8 class Solution { public:v…

Android Ant编译环境配置(Win)

1、 载ant包: 2、设置环境变量&#xff1a; 3、检查是否设置成功及版本 4、执行命令&#xff1a; android update project -p . -n “projectname”&#xff08;例如&#xff1a;android update project --target 1 -p . -n “Couplet”&#xff09;(只输入红色部分也是可以的…

[Docker]容器的网络类型以及云计算

目录 知识梗概 1、常用命令2 2、容器的网络类型 3、云计算 4、云计算服务的几种主要模式 知识梗概 1、常用命令2 上一篇已经学了一些常用的命令&#xff0c;这里补充两个&#xff1a; 导出镜像文件&#xff1a;[rootdocker ~]# docker save -o nginx.tar nginx:laster 导…

HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码

1. 首先&#xff0c;创建一个HTML文件&#xff0c;例如index.html&#xff0c;并添加以下内容&#xff1a; html <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content&q…

美港通正规炒股暴涨近1.5倍,石墨概念港股飙升背后是这个原因

查查配5月6日讯(编辑童古)石墨概念港股早盘高开高走。截至发稿,烯石电车新材料(06128.HK)涨近148%;中国石墨(02237.HK)涨38%。 美港通证券以其专业的服务和较低的管理费用在市场中受到不少关注。该平台提供了实盘交易、止盈止损、仓位控制等功能,旨在为投资者提供更为全面的投…

Mysql8本地安装

官网&#xff1a; https://www.mysql.com/ yum安装下载&#xff1a;https://dev.mysql.com/downloads/repo/yum/ 二进制安装下载&#xff1a;https://downloads.mysql.com/archives/community/ 安装包下载 yum安装下载 打开网址&#xff08;https://dev.mysql.com/downloads/r…

2024年美国市场亚太游戏品牌数字广告洞察报告

来源&#xff1a;Sensor Tower 美国是全球最大的游戏市场之一&#xff0c;也是亚太游戏品牌出海的重要市场。2023年Q2至2024年Q1&#xff0c;美国市​场广告投放额排名前10的亚太游戏品牌&#xff0c;合计支出 超过7.5亿美元&#xff0c;环比上涨23%。 排名第一的米哈游(miHoY…

Java——this构造方法标准类

一&#xff1a;this用法 当成员变量与方法中的形参名相同时&#xff0c;采用就近原则&#xff1b; 如下&#xff0c;调用 method 时&#xff0c;两个 name 均为方法中形参的 name , 即采用就近原则&#xff1b; public class ThisDemo {public String name; /…

Linux 基础IO篇

1. C语言中的文件操作 1 #include<stdio.h>2 3 int main()4 {5 FILE* pf fopen("log.txt", "w");6 if(NULL pf)7 {8 perror("fopen");9 return 1; 10 }11 fprintf(pf, &quo…