JavaScript【一】JavaScript变量与数据类型

文章目录

  • 🌟前言
  • 🌟变量
    • 🌟 变量是什么?
    • 🌟 变量提升
    • 🌟 声明变量
    • 🌟 JavaScript有三种声明方式
    • 🌟 命名规范
    • 🌟 注意
  • 🌟数据类型以及运算
    • 🌟 检测变量数据类型的关键字:typeof
    • 🌟 运算符:
      • 🌟 算术运算符:
      • 🌟 减法(-)
      • 🌟 加减法做数字与字符串的转换
      • 🌟 乘法运算
      • 🌟 除法运算
      • 🌟 取余(%)
      • 🌟 求幂运算符
      • 🌟 关系(比较)运算符:
      • 🌟 赋值运算符:
      • 🌟 逻辑运算符:
      • 🌟 逻辑运算符的应用:短路原则
      • 🌟 一元运算符:
      • 🌟 特殊运算符:
      • 🌟 三元运算符:
  • 🌟写在最后

在这里插入图片描述

🌟前言

哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘

🌟变量

🌟 变量是什么?

变量是储存数据的容器

🌟 变量提升

先访问后声明就叫做变量提升。

console.log(num);

var num=10

🌟 声明变量

  • var(ES5):声明变量
    • 在函数循环里,循环完成后会释放一个全局变量。
  • let(ES6):声明变量
    • 可以识别块级作用域
    • 不存在变量提升 ,造成暂时性死区 console.log(num); let num=10;
    • 不支持重复声明 let num=10; let num=20;
  • const(ES6):声明常量
    • 可以识别块级作用域
    • 不存在变量提升
    • 不支持重复声明
    • 声明的同时要赋值 const num=20

🌟 JavaScript有三种声明方式

关键词描述版本
var声明一个变量,可赋一个初始化值。ES5
let声明一个块作用域的局部变量,可赋一个初始化值。ES6
const声明一个块作用域的只读的命名常量。ES6
  1. 先声明,后赋值
var a;a=10;
  1. 声明的同时赋值
var a=10;
  1. 一次性先声明多个变量再赋值
var x,y,z;
x=10,y=20,z=30
  1. 一次性声明多个变量并且赋值
var x=10,y=20,z=30;

🌟 命名规范

  1. 区分大小写;
  2. 命名要有意义;
  3. 常见命名法:驼峰命名法;首字母大写法;
  4. 不能使用关键字和保留字命名;
  5. 数字,字母,_,$组成,不能以数字开头。

🌟 注意

  • 变量未声明,会报错;
  • 变量声明但未赋值,会有一个默认值:undehined
  • 变量值的更新:直接给变量赋一个新的值。
var a=10;
a=20;

🌟数据类型以及运算

按照数据在内存中的存储位置进行的分类。

初始数据类型:存放在栈区;引用数据类型:存放在堆区。

分类类型
初始类型undefinedundefined
null表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 null 与 Null、NULL或其他变量完全不同。
string双引号引起来的数据
number包括整型和浮点型。科学计数法。支持二进制、八进制、十进制、十六进制。
booleantrue/false
Symbol表示独一个一无二的值。(ES6新增)
引用类型Object包含相关属性和方法的一个集合。包含Function、Array、Object

🌟 检测变量数据类型的关键字:typeof

类型检测结果
undefinedundefined,变量声明未赋值undefined
nullnullobject
string单双引号引起来的内容string
number整数,浮点数,十进制,二进制,八进制,十六进制,科学计数法,最大值,最小值number
booleantrue,falseboolean
Symbol独一无二的值
Object数组(object),函数(function),对象(object)object,function,object
NaNnumber+undefinednumber

🌟 运算符:

🌟 算术运算符:

+ - * / % ** 幂运算 四则运算

  • null转换为0;
  • true转换为1;
  • false转换为0;
  • undefined 与任何数做运算都是NaN。

+

  • 加法:两个操作符都是number型做加法运算。
  • 拼接:只要一个操作符是字符串就做拼接。

++ 自增

  • ++var : ++在前,要先算++,在做其他运算。

var++ : ++在后,要先算其他,在做++运算。

-- 自减

  • --var: --在前,要先算--,在做其他运算。

  • var-- : --在后,要先算其他,在做--运算。

🌟 减法(-)

  1. 数字和字符串相减 :

    • 字符串全部由数字组成,将字符串转化为数字,再相减
    • 字符串不能转化为数字,结束是 NaN
    • null转化为0 undefined转化为NaN true为1 false为0
  2. 字符串和字符串相减 : 和数字和字符串相减规则相同

    '11a'-1    //NaN
    '11'-1     //10
    

🌟 加减法做数字与字符串的转换

  • 数字转化为字符串: num + ""
  • 字符串转化为数字: num - 0

🌟 乘法运算

  1. 数字与字符串运算:
    • 将字符串尝试着转化为数字,进行运算
    • 字符串不能转化为数字,结果是 NaN
  2. null转化为0 true为1 false为0 空字符串转为0
  3. Undefined乘所有数据类型的都为NaN
  4. 字符串和字符串运算 : 和数字和字符串运算规则相同
true*null      //0
'11'*'11'    // 121
'1a'*22    //NaN

🌟 除法运算

  1. 字符串类型 数字类型与 null 相除 结果为 Infinity
  2. 字符串类型、数字类型 null与 Undefined 相除 结果为 NaN
  3. 字符串类型 数字类型 null与 字符串类型、数字类型 null相除进行相应转换做除法运算
    • 字符串不能转为数字则结果为NaN
    • 空字符串转为0
11/null              //Infinity
'11'/'11'            // 1
'11a'/'11'            // NaN

🌟 取余(%)

取余,即取余数,如 10 % 3 则指 10除以3的余数

用于取一段范围的值
一般不用于小数,因为结果不确定(不精确)。

  1. Undefined 与所有数据类型的 取余 都为NaN

  2. 其余数据类型先进行转换,能转为数字则进行取余运算,否则为NaN

    ''%1        // 0
    11%0        // NaN
    11%null     // NaN
    

    判断数字num是否是偶数:

    if(num%2==0){
     alert(num + "是偶数")
    }
    

🌟 求幂运算符

x**y 取x的y次方,同Math.pow(x, y)

3 ** 2  //9
效果同
Math.pow(3, 2) //9

🌟 关系(比较)运算符:

关系运算符的运算结果为boolean。(true/false)

  • == 数值相等

    • 0!=null(true)
    • 0!=undefined(true)
    • undefined==null(true)
    • NaN==NaN(false)
  • === 数值相等,数据类型相同

  • > < >= <=

    • 两个操作数都是number型,按照数据大小进行比较。

    • 一个是number型,另一个是字符串,会先将字符串转换为数字型,能转换成功按照数字大小比较,转换不成功,返回false。

    • 任何数与NaN比较,返回的都是false。

    • 两个操作数都是字符串,按位按照ASCII码表进行比较。

🌟 赋值运算符:

=;+=;-=;*=;/=;%=;**=

var a=23;a+=5;  //a=28
运算符实例等价于
=a=25a=25
+=a+=25a=a+25
-=a-=25a=a-25
*=a*=25a=a*25
/=a/=25a=a/25
%=a%=25a=a%25
**=a**=3a=a^3

🌟 逻辑运算符:

在JavaScript逻辑运算中,0、“”、null、false、undefined、NaN都会判为false,其他都为true。

  1. 与:希望得到一个假值

    &&
    
    • 只要有一个是假,结果就是假
    • &&左侧是真,结果取右侧; 左侧假,结果取左侧值
    • 两侧都为真时,返回右侧
  2. 或:希望得到一个真值

    ||
    
    • 只要有一个是真,结果就是真
    • ||左侧是真,结果取左侧; 左侧假,结果取右侧值
    • 两侧都为假时,返回右侧
  3. !
    
    • 取反
    • 结果是boolean

总结: 与或运算,哪一侧能决定表达式真假性,则结果取哪一侧,结果不转换。

🌟 逻辑运算符的应用:短路原则

与或运算左侧结果已经确定整个表达式真假性,则右侧不再计算

  • &&与运算:左侧是假,右侧不进行计算
  • ||或运算:左侧是真,右侧不进行计算

🌟 一元运算符:

只能操作一个操作符的运算符叫做一元运算符。

  • typeof
  • new
  • delete
  • + -
  • instanceof

🌟 特殊运算符:

  • , :逗号 —— 分隔数据
var num1 = 1, num = 2, num3 = 3;```
  • () :小括号运算符 —— 提升算术优先级
var i = 1 + 3 * 5;
console.log(i);   // 16
var l = (1 + 3) * 5;
console.log(l);   // 20```

🌟 三元运算符:

基于某些条件对变量进行赋值的条件运算符。

var 变量=表达式?1:2
当表达式的结果为真时,将值1的值赋值给变量;当表达式的结果为假时,将值2赋值给变量.

🌟写在最后

更多JavaScript知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据智能服务商奇点云完成近亿元C2轮融资

奇点云集团宣布已于2022年底完成近亿元C2轮融资&#xff0c;余杭国投领投&#xff0c;中银渤海基金跟投。 截至目前&#xff0c;奇点云共获近3亿元C轮融资。C轮领投方包括泰康人寿&#xff08;旗下泰康资产执行&#xff09;、余杭国投&#xff0c;跟投方包括字节跳动、德同资本…

app抓包实战

文章目录一、抓包原理二、常用应用场景三、过滤四、重发五、修改请求六、断点&#xff08;BreakPoint&#xff09;一、抓包原理 二、常用应用场景 解决移动端接口测试 解决接口测试过程中检查传参错误问题 mock测试&#xff08;虚拟的对象代替正常的数据、后端接口没有开发完成…

QML控件--DialogButtonBox

文章目录一、控件基本信息二、控件使用三、属性成员四、附加属性成员五、成员函数六、信号一、控件基本信息 Import Statement&#xff1a;import QtQuick.Controls 2.14 Since&#xff1a;Qt 5.8 Inherits&#xff1a;Container 二、控件使用 DialogButtonBox&#xff1a;是…

攻防世界-web-easyupload

题目描述&#xff1a;一名合格的黑客眼中&#xff0c;所有的上传点都是开发者留下的后门 很简单的一个上传图片的界面。 我们先正常上传一个图片&#xff0c;从提示信息中可以看出我们是上传到了uploads目录下 然后通过bupsuite抓包修改请求&#xff0c;将文件名修改为1.php&a…

Java垃圾回收机制GC完全指南,让你彻底理解JVM运行原理

1、GC过程 1&#xff09;先判断对象是否存活(是否是垃圾) 可以通过引用计数算法和可达性分析算法来判断&#xff0c;由于引用计数算法无法解决循环引用的问题&#xff0c;所以目前使用的都是可达性分析算法 2&#xff09;再遍历并回收对象(回收垃圾) 可以通过垃圾收集器&…

三、Locust任务(task)详解

当一个负载测试开始时&#xff0c;将为每个模拟用户创建一个用户类的实例&#xff0c;他们将在自己的绿色线程中开始运行。当这些用户运行时&#xff0c;他们会选择执行的任务&#xff0c;睡眠一段时间&#xff0c;然后选择一个新的任务&#xff0c;如此循环。 这些任务是正常…

什么是自动化测试?自动化测试现状怎么样?

什么是自动化测试&#xff1a;其实自动化测试&#xff0c;就是让我们写一段程序去测试另一段程序是否正常的过程&#xff0c;自动化测试可以更加省力的替代一部分的手动操作。 现在自动化测试的现状&#xff0c;也是所有学习者关心的&#xff0c;但现在国内公司主要是以功能测…

Flash Linux to eMMC

实验目的&#xff1a;从eMMC启动Linux系统 Step1:确定eMMC被挂在哪个设备 哪个设备含有boot0分区和boot1分区&#xff0c;就是eMMC。实验中是位于mmcblk1上。 rootam64xx-evm:~# ls -l /dev/mmcblk* brw-rw---- 1 root disk 179, 0 Feb 27 13:25 /dev/mmcblk0 brw-rw---- …

10 kafka生产者发送消息的原理

1.发送原理&#xff1a; 在消息发送的过程中&#xff0c;涉及到了两个线程——main 线程和 Sender 线程。在 main 线程 中创建了一个双端队列 RecordAccumulator。main 线程将消息发送给 RecordAccumulator&#xff0c; Sender 线程不断从 RecordAccumulator 中拉取消息发送到…

【机器学习】P10 从头到尾实现一个线性回归案例

这里写自定义目录标题&#xff08;1&#xff09;导入数据&#xff08;2&#xff09;画出城市人口与利润图&#xff08;3&#xff09;计算损失值&#xff08;4&#xff09;计算梯度下降&#xff08;5&#xff09;开始训练&#xff08;6&#xff09;画出训练好的模型&#xff08;…

离散数学_第二章:基本结构:集合、函数、序列、求和和矩阵(1)

集合与函数2.1 集合 2.1.1 集合的基本概念 2.1.2 集合的表示方法 2.1.3 文氏图 2.1.4 证明集合相等 2.1.5 集合的大小 ——基 2.1.6 幂集 2.1.7 集族、指标集 2.1.8 笛卡尔积 2.1.9 容斥原理2.1 集合 2.1.1 集合的基本概念 定义1&#xff1a;集合 是不同对象的一个无序的聚…

【SpringCloud系列】开发环境下重写Loadbalancer实现自定义负载均衡

前言 spring-cloud-starter-netflix-ribbon已经不再更新了&#xff0c;最新版本是2.2.10.RELEASE&#xff0c;最后更新时间是2021年11月18日&#xff0c;详细信息可以看maven官方仓库&#xff1a;https://search.maven.org/artifact/org.springframework.cloud/spring-cloud-st…

Windows环境下实现设计模式——职责链模式(JAVA版)

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天总结一下Windows环境下如何编程实现职责链模式&#xff08;设计模式&#xff09;。 不知道大家有没有这样的感觉&#xff0c;看了一大堆编程和设计模式的书&#xff0c;却还是很难理解设计模式&#xff…

Maven的进阶操作

系列文章目录 Maven进阶操作的学习 文章目录系列文章目录前言一、分模块开发与设计二、依赖管理1.依赖传递2.可选依赖3.排除依赖三、继承与聚合1.聚合2.继承四、属性1.属性2.版本管理五、多环境配置与应用1.多环境开发2.跳过测试六、私服1.私服简介2.私服仓库分类3.资源上传与…

比GPT-4 Office还炸裂,阿里版GPT全家桶来袭

目录 【新智元导读】 文案、策划、邮件&#xff0c;一键搞定 不用写代码&#xff0c;草稿秒变小程序 聊天记录不用翻&#xff0c;摘要自动生成 会上开小差&#xff1f;不怕&#xff0c;AI替你记了 AI版十万个为什么&#xff0c;有问必答 剁手买买买&#xff0c;连手都不…

Excel技能之数据验证,总有一款适合你

用户填写的内容&#xff0c;是未知的&#xff0c;不可靠的。但是&#xff0c;我们要对数据的规范、格式、条件做出限制&#xff0c;既能保证数据的质量&#xff0c;也能统一每个人的行为。最大限度去避免垃圾数据的录入&#xff0c;眼不见心不烦&#xff0c;让心情美美的。 数…

Python之数据库操作(连接数据库,增删改查操作,易错点理解)

文章目录 前言一、Python之数据库操作二、pymysql 安装三、pymysql 包引入 连接数据库创建游标执行sql数据 - 增删改查要获取查询结果数据关闭游标&#xff0c;关闭数据库连接总结前言 记录&#xff1a;Python操作数据库的步骤&#xff0c;不容易理解的地方。 一、Python之数据…

C++模板基础(九)

完美转发与 lambda 表达式模板 void f(int& input) {std::cout << "void f(int& input)\t" << input << \n; }void f(int&& input) {std::cout << "void f(int&& input)\t" << input << \n;…

uniapp - 全平台兼容的 “多图上传“ 功能,搭配 uview 组件库中的 upload 上传组件(附带详细的示例源码及注释,可直接复制使用或简单修改)

效果图 使用 uniapp 开发,多平台全端兼容的多图上传功能,支持限制个数及移除等。 组件库使用的是 uview 框架,上传组件基于 Upload组件,功能完美无bug。 准备阶段 Upload组件支持手动上传与

Docker安装Elasticsearch详细步骤

1 安装elasticsearch 1.1 拉取镜像 docker pull elasticsearch:7.12.11.2 创建挂载目录 mkdir -p /app/elasticsearch/confecho "http.host: 0.0.0.0" >> /app/elasticsearch/conf/elasticsearch.ymlmkdir -p /app/elasticsearch/datamkdir -p /app/elastic…