首页 > 其他分享 >Vue学习笔记(九)

Vue学习笔记(九)

时间:2024-10-29 17:18:29浏览次数:6  
标签:Vue const 函数 age 笔记 学习 let console name

1 let与const、块级作用域

在ES6之前JS是没有块级作用域的,const与let填补了这方面的空白,分别使用let、const声明变量和常量,const与let都是块级作用域。
使用var定义的变量为函数级作用域:
使用let与const定义的变量为块级作用域

{
var i = 0;
var i = 1;
let j = 0;
const k = 1;
}
console.log("i:" + i); // 正常输出 i = 1;
//console.log("j:" + j); // 报错,Uncaught ReferenceError: j is not defined
//console.log("k:" + k); // 报错,Uncaught ReferenceError: K is not defined

2 函数参数默认值

ES6支持在定义函数的时候为其设置默认值:传值覆盖,空值默认
格式:function 函数名称(参数名称1=值1,参数名称2=值2, …){}

// ES5
function method(name,age){
name = name || 'XXX';
age = age || 1;
console.log(name + ":" + age);
}
method();// XXX:1
method('小明',16); // 小明:16
method('小明',0); // 小明:1,参数0表示为false
// ES6
function method1(name = 'YYY',age = 1){
console.log(name + ":" + age);
}
method1();// YYY:1
method1('小张',16); // 小明:16
method1('小张',0); // 小明:0

3 箭头函数

箭头函数=>不只是关键字function的简写,类似于部分强类型语言中的lambda表达式
箭头函数用 => 符号来定义。
箭头函数相当于匿名函数,所以采用函数表达式的写法。
基本结构
匿名函数:function(参数){}
箭头函数:(参数)=>{}
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可
以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返
回值,否则返回的是undefined)。

//常规函数表达式书写方式
let sum0 = function(x,y){
return x + y;
}
// 箭头函数 ()=>{} 完整写法
let sum1 = (x,y) => {
return x + y;
}

箭头函数例子:某些情况进一步简写
(1)当要执行的代码块只有一条语句时,可省略大括号和return关键字:
(2)当传入的参数只有一个时,可以省略小括号:
(3)当不需要参数时,使用空的圆括号:

//某些情况简写
// (1)当要执行的代码块只有一条return语句时,可省略大括号和return关键字:
let sum2 = (x,y) => x + y;
// (2)当传入的参数只有一个时,可以省略小括号:
let sum3 = function(x){
return x + x;
}
let sum4 = x => x + x;
// (3)当不需要参数时,使用空的圆括号:
let sum5 = function(){
return 100 + 100;
}
let sum6 = ()=> 100 + 100;

4 对象属性缩写

在ES6中允许我们在设置一个对象的属性(函数)的时候不指定属性名(函数名)。
当对象属性(函数)名称和外部变量(函数)名称,同名的情况下,可以省略属性名的重复书写以
及冒号。

// 数据值
const name = "小明";
const age = 16;
const city = "上海";
// 构建一个对象
const student = {
// ES5语法
// 属性名:属性值,
name: name,
age: age,
city: city,
show: function() {
console.log("show~~");
}
}
// 输出对象信息
console.log(student); // {name: "小明", age: 16, city: "上海"}
student.show();
// 使用ES6,当属性名和外部变量名同名情况,可以直接写入变量名,更加简写
// 构建一个对象
const student1 = {
// ES6语法,此时属性名就是变量名,属性的值就是变量的值。
name,
age,
city,
show() {
console.log("show~~");
}
}
// 输出对象信息
console.log(student1); // {name: "小明", age: 16, city: "上海"}
student1.show();

标签:Vue,const,函数,age,笔记,学习,let,console,name
From: https://blog.csdn.net/qq_73340809/article/details/143336188

相关文章

  • 机器学习之k近邻法
    学习笔记—机器学习-k近邻法20241025,以后复习看。(西瓜书+统计学习方法)PS:图片看不清,可以下载下来看。往期思维导图:机器学习之支持向量机SVM(线性可分、线性、非线性+SMO算法)思维导图-CSDN博客机器学习之支持向量机SVM-非线性支持向量机思维导图+SMO算法-CSDN博客机器学......
  • 队列与树 数据结构复习笔记
    2.3队列队列(Queue),它是一种运算受限的线性表,先进先出(FIFOFirstInFirstOut)队列是一种受限的线性结构受限之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作Python标准库中的queue模块提供了多种队列实现,包括普通队列、双端队列、优先队......
  • TetSphere Splatting——非常粗糙的阅读笔记分享,欢迎讨论~
       源代码主页:gmh14/tssplat:TetSphereSplatting:RepresentingHigh-QualityGeometrywithLagrangianVolumetricMeshes原文地址:[2405.20283]TetSphereSplatting:RepresentingHigh-QualityGeometrywithLagrangianVolumetricMeshes  与NeRF类似,DMTet......
  • rust学习三、基本类型
    本文内容摘自<<Therustprogramminglanguage>>,作者:美国的steveklabnik,Carolnichols。中国工信出版社2020年出版,但在国外据说是2018年出版的。关于本人的入门大部分来自此书。不过此书由于出版的时间较早(假定是2018),那么那个时候的rustc的版本是1.30左右,所以在1.81的环境上......
  • 解码小红书CES算法,让你的笔记阅读量提升100%
    随着社交媒体成为日常生活的一部分,内容创作者们都在积极寻找提高作品可见性的方法。作为社交分享领域的佼佼者,小红书凭借其独特的CES算法机制,在众多平台中脱颖而出。本文将深入探讨小红书的CES算法工作原理,并提供实用技巧,帮助你显著提升笔记的阅读量。一、小红书CES算法解......
  • 小红书引流之笔记发布频率应该多高比较好?
    不需要太过「频繁」的发布笔记,「优质」、「利他」、「创新」、「稳定」才是发小红书笔记的核心要素。尤其是做账号初期,太频繁的发布笔记,很有可能被大数据判定为「营销号」。而且过于频繁发布笔记,不容易保证内容的「质量」,从而影响账号权重,浪费了新人流量。做小红书初期,我......
  • (开题报告)django+vue企业设备管理系统论文+源码
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、选题背景关于企业设备管理系统的研究,现有研究主要以传统管理模式或单一功能模块开发为主。在国内外,虽然企业设备管理系统有一定的研究成果,但专......
  • 在线试题题库、在线视频学习、在线同步考试开源系统
    今天给大家推荐“学、练、考”于一体的在线教育系统,支持在线视频学习。项目简介一个基于.Net开发的在线学习、考试系统。兼容PC、移动、微信等多端设备,方便学员随时随地学习,并支持分销、分润等营销功能。对接了微信、支付宝支付,可以支持私有化部署。技术架构1、采用C#开发......
  • Vue基础–Options API
    复杂data的处理方式◼我们知道,在模板中可以直接通过插值语法显示一些data中的数据。◼但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示;比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示;......
  • 如何使用ai高效学习?
    如何使用ai高效学习?chatgpt:chatgpt.com,把上课讲义截图,复制给gpt(一次限制不超过2张,建议1张,避免ai偷懒)。指令为:“请为我解释这张图中的知识点,请就这个问题进行全面、深入、详细的解答,以中文回答我。我很乐意为你的优质回答支付100美元的小费。“如果感到自己缺乏理解,请在gpt对话......