首页 > 编程语言 >JavaScript复习——02

JavaScript复习——02

时间：2023-10-29 10:44:38浏览次数：39  
标签：02 set const 复习 对象 JavaScript console let obj

代码块

写法：

{}

使用代码块，可以对代码进行分组，同一个代码块中的代码就是同一组代码，一个代码块中的代码，要么都执行，要么都不执行


let 和 var的区别

  1. 在JS中，let声明的变量具有块级作用域
  2. var声明的变量，不具有块级作用域
  3. var声明的变量会将变量的声明提至最前

对象

原始值只能表示一些简单的数据，但是它不方便表示复杂的数据，比如现在要表示一个人的消息
对象就是JS中的一个复合数据类型，它相当于一个容器，在对象中可以存储各种不同的数据类型


对象的操作

注意：

  1. 当你取删除对象中一个没有的属性时，或者取取对象中一个没有的属性，获得的值时undefined

创建对象

let obj = new Object();

let obj = object();

let obj = {};

往对象添加属性

let obj = new Object();
obj.name = '小红';
obj.age = 18;

获取对象中的属性

let obj = new Object();
obj.name = '小红';
obj.age = 18;
// 对象名.属性名
console.log(obj.name);
// 对象名['属性名']
console.log(obj['name']);

修改属性

let obj = new Object();
obj.age = 18;
obj.age = 20;
console.log(obj.age);

删除属性

let obj = new Object();
obj.name = '小红';
obj.age = 18;

delete obj.name;

检查对象中是否有对应的属性

属性名 in 对象

枚举对象中的属性

枚举对象中的属性：指的是对象中所有的属性全部获取

注意:

  • 并不是所有的属性都可以枚举，比如使用符号（Symbol）添加的属性
let obj = {
    name:'孙悟空',
    age:18,
    gender:'男',
    address:'花果山',
    [Symbol()]:'测试的属性' // 符号添加的属性是不可枚举的
}

for(let propName in obj) {
    // 获取到对象中所有的属性名和属性值
    console.log(propName,obj[propName])
}

可变类型


不可变类型

我们创建的原始值是不可变类型，我们只能通过修改变量中的地址指向，来指向不同的原始值来改变变量的内容，但是原来地址的内容，我们是变不了的

let a = 10
let b = 10

image


可变类型

我们的对象就是一种可变类型

  1. 对象创建完毕之后，我们可以任意的添加和删除对象中的属性
  2. 如果有两个对象指向同一个对象，通过一个变量修改对象时，另外一个变量也会产生影响
  3. 两个对象进行比较的时候，比较的其实是对象的内存地址

image


注意：

  1. 修改对象时，如果有其它变量指向该对象，那么所有指向该对象的变量都会受到影响
  2. 在使用变量存储的时候，很容易因为改变变量指向的对象，提高代码的复杂度，所以在通常情况下，声明存储对象的变量时，我们一般使用const

方法

方法是对象中函数，函数也可以作为对象属性，当对象的一个属性指向一个函数的时候，我们称该函数为对象的方法

let obj = {}
obj.name = 'jack'
obj.age = 18;

obj.sayHello = function() {
    alert('hello')
}

obj.sayHello()

内建对象

在JS中不仅仅有我们自己创建的对象，还有JS为我们创建的一些对象，这些对象我们称之为内建对象


解构赋值


数组的解构赋值

我们正常的赋值是：

const arr = ['小米','华为','苹果']
let a,b,c
a = arr[0]
b = arr[1]
c = arr[2]
console.log(a,b,c)

数组解构赋值:

const arr = ['小米','华为','苹果']
let a,b,c
[a,b,c] = arr // 数组的解构赋值
console.log(a,b,c)

解构赋值的用法

  1. 我们解构数组的时，我们可以使用...（展开运算符）来获取我们多余的元素，类似我们的可变参数，它会收集多余的数据存放到一个数组中
// 这里 p 并不是没有赋值，而是赋值了undefined
let [e,f,g,p] = ['小明','小红','小白']

// h 的默认值是 10，如果你没有赋值就是undefined 如果你赋值了就是赋的值
let [m,n,h=10] = [1,2] 

// 5,6,8,9这四个数据会放到u中
let [o,i,...u] =[1,2,5,6,8,9]

console.log(e,f,g,p)
  1. 交换两个元素的位置
const arr = [1,2,5,3,6,4]
// 这里需要在[]之前加一个 ; 因为浏览器不知道代码的尾部
;[arr[0],arr[1]] = [arr[1],arr[0]]
  1. 二维数组解构
const arr = [[1,2,3],[4,5,6]]
console.log(arr[0][1])

const arr1 = [['孙悟空',18，'男'],['猪八戒',15,'男']]

// 获取到 孙悟空 18 男
let [[name,age,gender]] = arr1
console.log(name,age,gender)

对象的解构赋值

  1. 声明变量并解构对象
const obj = {name:'孙悟空',age:18,gender:'男'}
let {name,age,gender} = obj
console.log(name,age,gender)
  1. 先声明变量在解构对象
const obj = {name:'孙悟空',age:18,gender:'男'}
let name,age,gender
// 不加括号会报错
({name,age,gender} = obj)
  1. 自己定义变量名来解构
const obj = {name:'孙悟空',age:18,gender:'男'}
// 给name起别名为 a，给age起别名b 并且给默认值18
let {name:a = 'address',age:b=18} = obj

注意:

  • 如果你没有自己定义变量名来解构，同时你的变量名在对象属性中也没有，你解构就会得到一个undefined的变量

对象的序列化

JS中的对象使用时都是存储在我们计算机的内存中
序列化：将我们的对象转换为一个可以存储的格式，在JS中，我们的序列化一般是将对象转换为字符串
序列化的作用：可以在不同使得JS对象在不同的语言中进行传递


序列化操作与反序列化操作

JS对象 ——> JSON字符串

const obj = {
    name:'孙悟空',
    age:18
}

// 将对象变为JSON字符串
const str = JSON.stringify(obj)

console.log(obj)
console.log(str)

JSON字符串 ——> JS对象

const obj = {
    name:'孙悟空',
    age:18
}

// 将对象变为JSON字符串
const str = JSON.stringify(obj)
// 将JSON字符串转化为obj2
let obj2 = JSON.parse(str)

console.log(obj2)
console.log(obj)
// false
console.log(obj === obj2)

我们发现通过序列化之后，我们获得到的对象，属性和属性值都相同，但是进行比较发现是false，也就是它们对象的地址不同，我们可以通过这种操作Copy出一个对象，而且是深拷贝


Map

map用来存储键值对结构的数据（key-value）

Object中存储的数据我们也可以认为是一对键值对，属性名-属性值


Map与Object的区别

  1. Object中属性名只能是字符串或符号，如果传递一个非字符串的数据，解析器会将其自动转换为字符串
  2. Map中任何类型的值都可以作为数据的key
const obj2 = {}
const obj = {
    "name":"孙悟空",
    "age":18,
    [Symbol()]:'哈哈',
    [obj2]:'hello'
}

Map对象的操作

  1. 创建一个Map对象
const map = new Map()
  1. 向Map中添加一个键值对
const obj2 = {}
map.set('name','孙悟空')
map.set(obj,'呵呵')
map.set(NaN,123)

console.log(map)
  1. 获取Map中的数据
let num = map.get(NaN)
let str = map.get(obj2)
  1. 删除指定的数据
map.delete(key)
  1. 检查Map是否存在对应的键
map.has(key)
  1. 清空Map中所有的键值对
map.clear()

7.Map与数组的转化

const map = new Map()
map.set('name','孙悟空')
map.set('age',18)

// 将map转换为数组
// [["name",”孙悟空],["age",18]]
const arr = Array.from(map)
const arr2 = [...map]

8.数组转换为Map

// 将二维数组转换为Map
const map2 = bew Map([["name","猪八戒"],["age",18],[{},()=>{}]])
  1. 遍历Map
const map = new Map()
map.set('name','孙悟空')
map.set('age',18)
// 这里会将map解开变为一个二维数组，然后再遍历
for(const entry of map) {
    const [key,value] = entry
    console.log(key,value)
}

map.forEach((key,value)=>{
    console.log(key,value)
})
  1. 获取Map中所有的key和value
const map = new Map()
map.set('name','孙悟空')
map.set('age',18)

const keys = map.keys()
const values = map.values()

Set

set用来创建一个集合
特点：

  1. set不能存储重复的数据
  2. set的本质就是一个key-value相同的Map

Set的操作

  1. 向Set中添加数据
const set = new Set
set.add(10)
set.add('孙悟空')
console.log(set)
  1. 判断Set中是否有对应的数据
const set = new Set
set.add(10)
set.add('孙悟空')
console.log(set.has('孙悟空'))
  1. Set转化为数组
const set = new Set
set.add(10)
set.add('孙悟空')
const arr = [...set]
console.log(arr)
  1. 数组转换为Set
const arr = [1,2,3,5,3,6,3,5,6,8,1,2,3]
const set = new Set(arr)
arr = [...set]
console.log(arr)
  1. 获取Set中元素的个数
const set = new Set
set.add(10)
set.add('孙悟空')
console.log(set.size)
  1. 删除Set中的元素
const set = new Set
set.add(10)
set.add('孙悟空')
console.log(set.delete(10))
  1. 查看Set中的键值对
const set = new Set
set.add(10)
set.add('孙悟空')
console.log(set.entrys())

Date

在JS中所有和时间相关的数据都用Date对象来表示
注意：

  1. 当我们直接通过 new Date()创建时间的时候，创建的是当前的时间
let d = new Date()
console.log(d)
  1. 可以直接向Date()构造中传递一个表示时间的字符串
    格式：
yyyy-mm-ddThh:MM:ss

mm/dd/yyyy hh:MM:ss

let d = new Date('2023-05-16T23:12:05');

方法

  1. getFullYear()：获取一个4位的年份
  2. getMonth()：获取月份的索引（0 - 11）
  3. getDate()：获取日期（几号）
  4. getDay()：获取当前日期是周几（0是周日）
  5. getTime()：获取当前日期对象的时间戳
    1. 时间戳指的是：自1970年1月1日0时0分到当前的时间所经历的毫秒数
  6. Date.now()：直接获取当前最新的时时间戳

  1. 创建指定日期的对象
// new Date(年,月,日,时,分,秒)
// 2016年,1月1日 13点 45分 33秒
let d = new Date(2016,0,1,13,45,33)
  1. 根据时间戳创建时间对象
let d = new Date(161561561)

日期格式化

  1. toLocaleDateString：将我们的日志转换为本地的字符串（也就是将日期转换为代码运行环境的字符串）
const d = new Date()
let result = d.toLocaleDateString(d)
// 2023/6/1
console.log(d)
  1. toLocaleTimeString：将日期的时间转换为本地字符串
const d = new Date()
let result = d.toLocaleTimeString(d)
// 8:49:02
console.log(d)
  1. toLocaleString：将日期转换为本地时间格式的字符串（包括日期和时间）
    参数：
    1. 描述语言和国家信息的字符串
      1. zh-CN:中文中国
      2. en-US:英文美国
    2. 需要一个对象作为参数，对象中可以通过对象的属性来对日期的格式进行配置，对象有写数学
      1. dateStyle: 指定的日期的风格
      2. TimeStyle：指定的是时间的风格
        1. full
        2. long
        3. medium
        4. short
      3. weekDay：星期的表示方式
        1. long
        2. short
        3. narrow
      4. year：年份的显示方式
        1. numeric
        2. 2-digit
/*
    hour12:是否采用12小时制
    weekday:日期的显示方式
*/
{dateStyle:'full',TimeStyle:'full',hour12:true}

const d = new Date()
let result = d.toLocaleTimeString(d)
// 2023/6/1 8:49:02
console.log(d)

标签：02,set,const,复习,对象,JavaScript,console,let,obj
From： https://www.cnblogs.com/trueasureyuki/p/17795455.html

相关文章

  • JavaScript代码，鼠标放上去显示一张图片
     <!DOCTYPEhtml> <html>  <head>    <metacharset="utf-8">    <title>FirstC</title>     </head>  <body>    <h1 >helloworld</h1>    <inputtype=&q......
  • Visual Studio 2022 正则表达式
    VisualStudio2022支持使用正则表达式进行搜索和替换操作。在搜索框中，可以点击“正则表达式”按钮来启用正则表达式模式。下面是一些常用的正则表达式示例：匹配数字：\d匹配字母：[a-zA-Z]匹配空格：\s匹配任意字符：.匹配一个或多个字符：+匹配零个或多个字符：*匹配起始位置：^匹配......
  • 读图数据库实战笔记02_图数据建模
    1. 概念1.1. 实体1.1.1. 通常用名词来表示1.1.2. 描述一个领域中的事物或者事物类型1.1.2.1. 汽车1.1.2.2. 用户1.1.2.3. 地理位置1.1.3. 在逻辑模型和技术实现过程中，实体通常会变成“顶点”1.2. 关系1.2.1. 用动词（或动词短语）来表示1.2.2. 描述实体之间的互......
  • 2023-2024-1 20231306 《计算机基础与程序设计》第五周学习总结
    这个作业属于哪个课程2023-2024-1-计算机基础与程序设计这个作业要求在哪里2023-2024-1计算机基础与程序设计第五周作业)这个作业的目标Pep/9虚拟机、机器语言与汇编语言、算法与伪代码测试：黑盒，白盒作业正文https://www.cnblogs.com/zwywuhu/p/17785563.html......
  • 2023年SWPU NSS 秋季招新赛 (校外赛道) MISC复盘WP
    GIFCode题目描述：扫一扫即可获取Flag给了一个含二维码的动图，分离一下得到九张二维码碎片，根据文件名数字按顺序组装，在线扫码即可NSSCTF{3f0ac91b-3e0e-a7e2-7b2a-c67cfdc093fe}相信他终将回来题目描述：我们的湾湾hint1:base怎么就不能转成16进制呢010查看，base64转图片但......
  • 2023年10月26日每日随笔
    今天，对软考进行学习，也进行了一些笔记的填写：国际标准：国家标准：GB中国ANSI美国BS英国JIS日本行业标准：GJB中国军用标准MIT-S美国军用标准IEEE美国电气电子工程师协会 地方标准：国家的地方一级行政机构制定的标准企业标准（企业规范） 我国国家标准代号：强制性标......
  • 2023年10月28日每日随笔
    笔记：学习了软件工程的相关知识开发模型：瀑布模型：结构化方法的模型基本结构：有计划，分阶段进行，每个阶段有评审软件计划->需求分析->软件设计->程序编码->程序测试->软件维护困难之处：需求阶段在一开始难以确定，适合需求明确，或者二次开发的项目原型模型：针对于需求不明确......
  • 代码随想录第四天 | 24. 两两交换链表中的节点 19.删除链表的倒数第N个节点 面试题
    question1:SwapNodesinPairshttps://leetcode.cn/problems/swap-nodes-in-pairs/IwasalittleconfusedatfirstbecauseI'mthinkingwhethershouldIcreatanewhead,butsoonIcameupwiththeideaofcreatpre=Noneandwithan'if-els......
  • Python第二章读书笔记-2023.10.28
    03运行超市抹零结账行为money_all=67.99+11.75+21.1+8.49+25.89+17.5+22.4money_all_str=str(money_all)print("商品总金额为："，money_all_str)money_real=int(money_all)money_real_str=str(money_real)print("实收金额为："，money_real_str)print("学号后四位3126"......
  • BLOG1028
    不是为什么Sonnety每天都要写博客啊。跟了。我其实没啥好写的，不过我可以每天看一下今天干了什么。今天写了疯狂的颜色序列，一个类似HH项链离线做法的东西，第一次在某个版本之内区间查询。然后这个删除上次出现位置的时候也得创建新节点。还有TotheMoon，和那个游戏没关系呢。那个......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99