本地  data.json 文件

{
"name": "大熊",
"age": 18,
"fnc": [
1,
2,
3
]
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> </head> <body> </body> </html>
//引入axios 的cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  

//通常的写法:

axios.get('./js/data.json').then(function(res){
console.log(res)
})
</script>

打印:

解构赋值 写法:  花括号,里面的data字段解构赋值,记住花括号

axios.get('./js/data.json').then(({ data }) => {
console.log(data)
})

打印:

直接取 data里面的 name  age

axios.get('./js/data.json').then(({ data: { name, age } }) => {
console.log(name, age)
})

打印: 大熊  18

解构赋值正确用法:

简单的axios请求返回数据解构赋值的更多相关文章

  1. 变量的解构赋值////////////z

    变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值, ...

  2. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

  3. ECMAScript 6之变量的解构赋值

    1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

  4. ES5-ES6-ES7_解构赋值

    解构赋值的概念 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 传统对变量赋值的方式,以前,为变量赋值,只能直接指定值. var a = 1; ...

  5. ES6的新特性(3)——变量的解构赋值

    变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...

  6. 《ES6标准入门》(阮一峰)--3.变量的解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; l ...

  7. 03 | 变量的解构赋值 | es6

    变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a ...

  8. Es6 新增解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...

  9. ES6学习笔记(let,const,变量的解构赋值)

    1.let: ; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 不存在变量提升,它所声明的变量一定要在声 ...

随机推荐

  1. springboot----四、yaml配置注入

    四.yaml配置注入 4.1.配置文件 SpringBoot使用一个全局的配置文件 , 配置文件名称是固定的 application.properties 语法结构 :key=value applic ...

  2. [动态规划] LeetCode 2055. 蜡烛之间的盘子

    LeetCode 2055 蜡烛之间的盘子 前言: 这个题做的时间略长了,开始的时候打算先定位两个端点的蜡烛,之后在遍历其中的盘子,结果不言而喻,必time limit了,之后就预处理了前x的蜡烛间盘 ...

  3. Vue3+ElementPlus的一套开源前台+后台管理模板

    Vue-Element-Faster 基于最新版vue.js 3.x与element-plus2.x实现的一套前台展示系统.后台管理系统模板,自带权限管理模块. API接口基于SpringBoot2. ...

  4. Java的jmap命令使用详解

    jmap命令简介 jmap(Java Virtual Machine Memory Map)是JDK提供的一个可以生成Java虚拟机的堆转储快照dump文件的命令行工具.除此以外,jmap命令还可以查 ...

  5. Excel文件导入SQL Server数据库

    Excel表格的使用可谓是非常广泛,博主也简单百度了一下Excel的发展. 发展历程: 1982年 Microsoft推出了它的第一款电子制表软件-Multiplan,并在CP/M系统上大 Excel ...

  6. 【Jenkins】基于Windows系统安装Jenkins

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.Jenkins简介 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种 ...

  7. 域渗透 | kerberos认证及过程中产生的攻击

    ​文章首发于公众号<Z2O安全攻防>​ 直接公众号文章复制过来的,排版可能有点乱, 可以去公众号看. https://mp.weixin.qq.com/s/WMGkQoMnQdyG8UmS ...

  8. Nature | 易基因DNA甲基化测序助力人多能干细胞向胚胎全能8细胞的人工诱导

    北京时间2022年3月22日凌晨,<Nature>期刊在线刊登了由中国科学院广州生物医学与健康研究所等单位牵头,深圳市易基因科技有限公司.中国科学技术大学等单位参与,应用人多能干细胞向胚胎 ...

  9. 你是怎么看Spring框架的?

    Spring是一个轻量级的容器,非侵入性的框架.最重要的核心概念是IOC,并提供AOP概念的实现方式,提供对持久层,事务的支持,对当前流行的一些框架(Struts,Hibernate,MVC),Spi ...

  10. Java并发机制(5)--同步容器与并发容器

    Java并发编程:同步容器整理自:博客园-海子-http://www.cnblogs.com/dolphin0520/p/3933404.html1.同步容器出现原因 常用的ArrayList,Lin ...