当前位置: 首页 > news >正文

【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)

在这里插入图片描述

文章目录

  • 变量、常量与对象
    • 变量的定义与使用
    • 常量的定义与使用
  • 对象
    • 对象的定义与使用
    • 属性值与属性值同名时的简化定义
  • 结构赋值
    • 数组解构赋值
      • 常规赋值
      • 解构赋值
    • 对象解构赋值
      • 常规赋值
      • 解构赋值
  • 模版字符串

变量、常量与对象

变量的定义与使用

JS中定义变量使用let关键字,若需要需要在console中输出,可借助console.log()打印对象内容,下方代码演示变量的定义与使用:

// 定义变量
let name = "jamming";
let age = 18;console.log("name: " + name);
console.log("age: " + age);// 变量重新赋值
name = "nice";
age = 10;console.log("name: " + name);
console.log("age: " + age);

在这里插入图片描述
数组中若需要定义数组,则等号右侧加上[],若需要定义对象,则使用{},并在花括号内写上key和value即可,示例代码如下:

let arr = [1, 2, 3];
let obj = {name: "jamming",age: 18
};console.log(arr);
console.log(obj);

在这里插入图片描述

常量的定义与使用

常量即无法修改的量,使用const关键字定义,下方演示常量定义及修改时发生错误:

const PI = 3.14;
console.log(PI);
PI = 999;
console.log(PI);

在这里插入图片描述

使用const修饰定义的数组或者对象时,表示的是指向不能修改,而指向的内容是可以修改的;下面代码尝试修改arr和obj指向的数组和对象:

const arr = [1, 2, 3];
const obj = {name: "jamming",age: 18
};console.log(arr);
console.log(obj);// 删除最后一个元素
arr.pop();
// 修改name的value
obj.name = "lihua";console.log(arr);
console.log(obj);

在这里插入图片描述
如果尝试修改数组和对象常量的指向,则会发生错误:

const arr = [1, 2, 3];
const obj = {name: "jamming",age: 18
};console.log(arr);
console.log(obj);const arr2 = [4, 5, 6];
const obj2 = {class: 126,cost: 1200
};arr = arr2;
obj = obj2;console.log(arr);
console.log(obj);

在这里插入图片描述

对象

对象的定义与使用

上方已经提前使用了对象,对象使用{}括起来,并在里面写入key和value;若需要访问或修改某个对象属性,则可以使用obj.key的方式,也可以使用obj[key]的方式,下方为示例代码:

let obj = {name: "jamming",age: 18
};// 取值
console.log(obj.name);
console.log(obj.age);// 修改
obj.name = "baymax";console.log(obj['name']);
console.log(obj['age']);

在这里插入图片描述
使用[]访问或修改对象属性时,若对象属性不存在,则会返回undefined。

let obj = {name: "jamming",age: 18
};console.log(obj.shool); // undefined
console.log(obj.address); // undefined

在这里插入图片描述

属性值与属性值同名时的简化定义

若定义对象时,若不需要重命名简写对象时,则可以简写成如下形式,key名称将自动填写为简写对象的名称:

// 简写对象
let min = 1;
let max = 100;// 以前的写法(不简写)
let obj1 = {min: min,max: max
};// 简写
let obj2 = {min,max
};
console.log(obj1);
console.log(obj2);

在这里插入图片描述

结构赋值

数组解构赋值

常规赋值

若有长度为3的数组,需要将每个元素依次赋值给a、b、c,则代码可以这么写:

const arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c);

在这里插入图片描述

解构赋值

我们也可以使用解构赋值实现:

const arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);

在这里插入图片描述

若只需要将下标为0和2的元素赋值给a和c,可以多写一个,占位实现:

const arr = [1, 2, 3];
let [a, ,c] = arr;
console.log(a, c);

在这里插入图片描述

若长度为6的数组,将前两个元素赋值给a和b,余下元素赋值给tmp,代码实现如下:

const arr = [1, 2, 3, 4, 5, 6];let [a, b, ...tmp] = arr;
console.log(a, b);
console.log(tmp);

在这里插入图片描述
ps:若需要对余下元素进行处理,在待解构列表中的最后一个变量前加上...即可。

对象解构赋值

常规赋值

若需要获取obj中的name,age,address的value,则可以借助.或者[]的方式来实现,下方为实现代码:

let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};let name = obj.name;
let age = obj.age;
let address = obj.address;console.log(name, age, address);

在这里插入图片描述

解构赋值

这里我们也可以使用解构赋值来使用,与数组的[]不同,对象解构需要使用{}来实现:

let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name, age, address} = obj;
console.log(name, age, address);

在这里插入图片描述

若只需要获取name和address,则在左侧{}中直接写上name和address即可:

let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name, address} = obj;
console.log(name, address);

在这里插入图片描述

若获取name,余下部分解构至rest中,实现代码如下:

let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name, ...rest} = obj;
console.log(name, rest);

在这里插入图片描述

若结构时,需要将name结构到uname中,则左侧列表应该写成{name: uname},即将name提取出来后赋值给uname:

let obj = {name: "jamming",age: 18,address: "fujian xiamen"
};
let {name: uname} = obj;
console.log(uname);

在这里插入图片描述

若对象中嵌套对象,如何进行解构呢?下方为示例代码:

let response = {status: 200,statusDesc: "OK",data: {username: "jamming",id: 10086,grade: "vip3"}
};let {data: {username, id, grade}} = response;
console.log(username, id, grade);

在这里插入图片描述

模版字符串

在普通字符串中,若需要拼接变量、常量等,则需要借助+来拼接完成;而我们借助反引号,来创建模版字符串,模版字符串自动将${variable}中的variable拼接到字符串中:

let name = "jamming";
let age = 9;let normal_str = 'I am ' + name + ', I am '+ age + ' years old, I am ' + (age >= 18 ? '已成年' : '未成年');
let model_str = `I am ${name}, I am ${age} years old, I am ${age >= 18 ? '已成年' : '未成年'}`;console.log(normal_str);
console.log(model_str);

在这里插入图片描述
另外,模版字符串可以在两个反引号之间任意换行,而普通字符串无法在双引号之间任意换行:

let normal_str = '<div class=hot-goods-box><h1>烤牛肉串</h1><p>香喷喷的牛肉串</p></div>';
let model_str = `<div class=hot-goods-box><h1>烤牛肉串</h1><p>香喷喷的牛肉串</p></div>`;
console.log(normal_str);
console.log(model_str);

在这里插入图片描述

🥤 每天努力一点点,技术变化看得见

http://www.dtcms.com/a/487181.html

相关文章:

  • 婚庆网站开发背景wordpress怎么改后台
  • 0.2、​​AI Agent 开发中 ReAct 和 MAS 的概念
  • 网站源码风险哈尔滨 门户网站
  • 那些企业网站做的漂亮怎么做免费公司网站
  • 【Go】--扩容机制
  • 网站上哪个做相片书好哈尔滨信息网租房信息
  • 电子商城官方网站做网站的需要什么资质证明
  • 外贸网站制作需求wordpress设置多语言
  • 怎么提Issue与PR
  • wordpress建站资源漂亮的网站设计
  • Flowise 任意文件读写漏洞 | CVE-2025-61913
  • 青岛网站建设平台纯静态网站
  • STM32基于can总线通信控制多个舵机/电机原理及代码
  • 图解AES密钥扩展与加密过程
  • ps如何做网站轮播图泰安企业建站公司哪里找
  • vue疑难解答
  • 【检索:Top K】12、非精准Top K检索权威指南:搜索引擎排序加速的核心技术与实战实现
  • 顺德品牌网站建设优惠做好公众号 网站建设
  • nullptr vs NULL:C/C++ 空指针的演变史
  • 深圳企业网站制作公司介绍网站防盗链设置
  • 搜索别人的网站是带logo的请问怎么做的精准广告投放
  • latex中自定义公式编号
  • 苏州正规做网站公司网站建设初期的需求分析
  • codetop高频(1)
  • LeetCode 994. 腐烂的橘子
  • 网站设计师需要什么知识与技能咸宁网站建设哪家专业
  • Python爬取百度地图-前端直接获取
  • thumos14数据集学习
  • 持续集成/持续部署(CI/CD)
  • HTTPS 的加密过程~