前端-JS基础-变量/数据类型/运算符

已于 2022-09-07 15:37:54 修改
阅读量785 收藏
点赞数
文章标签： javascript 前端 vscode
于 2022-08-21 20:18:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IU_dlwlrma/article/details/126454783
版权
本文详细介绍了JavaScript的基础知识，包括JS的书写形式、注释方式、输入输出、变量的声明与使用、数据类型（如Number、String、Boolean、undefined、Null）及其转换，以及各种运算符（算术、递增递减、比较、逻辑和赋值运算符）。重点讲解了变量的命名规范和数据类型的动态特性，帮助开发者建立坚实的JS基础。
摘要由CSDN通过智能技术生成

文章目录

a. JS 是一门高级编程语言（也可称为脚本语言），通过 js 引擎转变成机器语言进行执行。

b. JS 的组成

  1. JS语法

  2. DOM-页面文档对象模型

  3. BOM-浏览器对象模型

1. JS 书写形式

JS 中使用单引号书写

  1. 行内式
   <input type="button" value="按钮显示的文字" οnclick="alert('弹框显示的内容')"
   // onclick：点击 alert：弹框
  1. 内嵌式
   // 写在<head>中
   <script>alert('弹框显示的内容')</script>
  1. 引入式
   // 写在<head>中
   a. 创建一个js文件
   b. 引入 <script scr="js文件地址"></script>

2. 注释

a. 单行注释 //xxx 快捷键：“ctrl+/”

b. 多行注释 /_ xxx _/ 快捷键：“shift+alt+a” 【VScode中可以自定义快捷键】

3. 输入输出语言

代码形式说明
alert（msg）浏览器弹出警示框
console.log（msg）浏览器控制台打印输出信息(浏览器检查中可看)
prompt（info）浏览器弹出输入框，用户可输入
prompt('弹出输入框显示的标题内容');
alert('弹出警示框显示的内容');
console.log('检查元素中显示的内容');

4. 变量

用于存放数据的容器，通过变量名获取数据

1. 变量的使用

a. 声明变量

   var age; // 声明一个名称为age的变量，变量名可自行设置

b. 赋值（把值存入变量中）

   age = 18; // 给age变量赋值为18

c. 变量初始化（将声明变量与赋值同时书写）

  var age = 18;  //声明变量同时赋值18

// 可通过 console.log(age);检查是否赋值成功

// 除数字外，其他内容用’'包裹，如：var name = ’知恩‘；

    <script>
      var myname = prompy('输入用户名') // 用户输入后存储到myname变量中
      alert(myname) // 弹出用户输入的信息内容
    </script>
2. 变量更新
       var name = '知恩'；
       name = 'IU'   // 后面的IU会覆盖前面的知恩
3. 声明多个变量
       var age = 18, // 多个变量中间用逗号隔开
         address = '地址名',
         name = '用户名'; // 最后用分号结尾
4. 声明变量的特殊情况
       a. 只声明，不赋值
       	var name；  // 输出后结果为 undefined（未定义）
       b. 不声明，不赋值
       	// 输出后会报错
       c. 不声明，只赋值
       	// 可以输出相应结果，但会变成全局变量，不如此使用
5. 变量命名规范

a. 由字母、数字、下划线、美元符号（$）组成，如：num_01。//不能以数字开头，会报错

b. 严格区分大小写,var app/var App 是两个变量

c. 不能是关键字、保留字，如：var for while

d. 变量名必须有意义，如：nl（年龄） // 不如此设置变量名

e. 遵守驼峰命名法；首字母小写，后面的首字母需要大写，如 myFirstName

f. 翻译网站：有道 爱词霸

g. name 有特殊含义，不使用 name 作为变量名

交换两个变量值
设置一个场景：apple1为青苹果，apple2为红苹果，将红苹果给apple1，青苹果给apple2

a. 设置一个临时变量
	var temp；  // 声明一个临时变量赋值为空
	var apple1 = '青苹果'；
	var apple2 = '红苹果'；
b. 将青苹果放入临时变量
	temp = apple1；
c. 将红苹果给apple1
	apple1 = apple2；
d. 把临时变量中的青苹果给apple2
	apple2 = temp；

5. 数据类型

a. JS 的变量数据类型是只有程序在运行过程中，根据等号后面的值来确定

b. JS 是动态语言，变量的数据类型是可变化的

c. var x = 10；x 为数字型 ； var x = ‘IU’ x 为字符串型

1. 简单数据类型
| 数据类型  |                      说明                       |   默认值   |
| :-------: | :---------------------------------------------: | :--------: |
|  Number   |     数字型，包含整型值与浮点型值，如 5，0.5     |     0      |
|  Boolean  |         布尔值类型，如 true=1，false=0          | false（0） |
|  string   |      字符串类型，如"知恩"，字符串都带引号       |     ""     |
| Undefined | var a;声明了变量 a 但没有赋值，此时 a=undefined | Undefined  |
|   Null    |        var a = null; 声明了变量 a 为空值        |    null    |
1. 数字型（Number）

a. 八进制（范围 0 ～ 7）

var num = 010 // 输出为 8

b. 十六进制（范围 0 ～ 9；A ～ F）

var num =0xA // 输出为 10

c. JS 中八进制前面加 0，十六进制前面加 0x；

a. 数字范围

Number.MAX_VALUE; // 最大值
Number.MIN_VALUE; // 最小值

b. 三个特殊值

Infinity；  // 无穷大（Number.MAX_VALUE * 2）
-Infinity；   //无穷小（-Number.MAX_VALUE * 2）
NaN；  // 非数字

c. isNAN

用来判断一个变量是否为非数字类型；输出false则为数字；输出true则为非数字；
var IU = 12;
var isok = isNAN(IU);
console.log (IU);   // 输出为false

var IU ='IU';
console.log (isNAN(IU));   // 输出为true
2. 字符串型（string）

a. 字符串型可以是引号中的任意文本，只要是单引导/双引号中的文本内容都为字符串

b. 引号嵌套：单引号嵌套双引号 or 双引号嵌套单引号（外双内单/外单内双）

a. 字符串转义符(转义符都需加\)

转义符解释说明
\n换行符
\\斜杠\
\'单引号’
\"双引号"
\ttab 缩进
\b空格

b. 字符串长度

通过length属性获取整个字符串长度;

var str = 'my name is IU';
console.log(str.length); // 显示为15个字符，每个空格也算1个字符，如有标点符号也算一个字符

c. 字符串拼接

多个字符串可用+进行拼接；如：字符串+任何类型=拼接后的新字符串

console.log('沙漠'+'骆驼');  // 输出为 沙漠骆驼
console.log('IU'+ 18);   // 输出为 IU18
console.log(12 + 12);   // 输出为24 前面为数字型则为加法算数
console.log('12' + 12);  // 输出为1212 前面加单引号则为字符串，相加则为新的字符串

var age =18;
console.log('IU' + age + '岁');  // 输出为IU18岁；变量不能直接写在字符串内（变量不能加引号），否则会报错
3. 布尔型（Boolean）
a. ture表示真的，在加法运算中当1计算；
console.log(true + 1);  // 输出为2

b. false表示假的，在加法运算中当0计算；
console.log(false + 1);  // 输出为1
4. 未定义数据类型（undefined）
// 声明变量后没有赋值的情况会有一个默认值：undefined

a.console.log(undefined + 'IU'); // 输出为undefinedIU

b.console.log(undefined + 1); // 输出为NaN（非数字型）
5. 空值（Null）
// 声明变量给null值，里面存储的值为空值

a.console.log(Null + 'IU'); // 输出为NullIU

b.console.log(Null + 1); // 输出为1
2. 获取变量数据类型

a. 利用 typeof 进行获取数据类型

b. 可通过浏览器检测面板进行判读

  1. 浅蓝色为数字型

  2. 黑色为字符串型

  3. 深蓝色为布尔型

  4. 灰色为空值/为定义数据类型

c. 通过表单/prompt 获取的数据默认是字符串型

    var num =10;
    console.log(typeof num);  // 输出为number数字型

    var str ='IU';
    console.log(typeof str);  // 输出为string字符串型

    var str = prompt('请输入你的信息')； // 不论用户输入的内容是什么都为字符串型
3. 数据类型转换
1. 转换为字符串类型
       a. toString()
          var num = 1；
          console.log(num.toString());  // 输出为1字符串型；toString括号内可为空

       b. String()  // 强制转换
          var num = 1；
          console.log(String(num));  // 输出为1字符串型

       c. 加号拼接字符串（隐式转换）【常用】
          var num = 1；
          console.log(num + '');  // 输出为1字符串型
2. 转换为数字型
      a. parseIut(string)  // 可以把字符串转换为数字型（只能为整数）
         console.log(parseInt('19'));  // 输出为19
         console.log(parseInt('3.94'));  // 输出为3，小数会自动舍去小数点后的内容取前面的整数
         console.log(parseInt('120px'));  // 输出为120，120px会自动去掉px单位
         console.log(parseInt('rem120px'));  // 输出为NaN，因为前面为rem，120px会自动去掉

      b. parseFloat(string)  // 可以吧字符串转变成数字型（可以为小数）
         console.log(parseFloat('3.14'));  // 输出为3.14
         console.log(parseInt('120px'));  // 输出为120，120px会自动去掉px单位
         console.log(parseInt('rem120px'));  // 输出为NaN，因为前面为rem，120px会自动去掉

      c. Number()
         console.log(Number('3.14'));  // 输出为3.14

      d. js隐式转换（- * /）【算数运算】
         console.log(parseFloat('3.14' - 0));  // 输出为3.14
         console.log(parseFloat('123' - '120'));  // 输出为3
3. 转换为布尔型
		Boolean(); // 空/否定的值会转换成false，如：0、NaN、null、undefined，其他值都会转换成true；
   		Boolean(''); // 输出为false
   		Boolean('0'); // 输出为false
    	Boolean(12); // 输出为ture
    	Boolean(IU); // 输出为ture
  1. 编译型语言与解释型语言

a. 编译型语言是整体代码编译完成后在进行翻译再执行

b. 解释型语言是边输入代码边翻译边执行

  1. 标识符/关键字/保留字

a. 标识符是指开发人员为变量、属性、函数、参数取的名字，标识符不能是关键字或保留字

b. 关键字是指 JS 本身已经使用过的字，不能再用她们充当变量名、方法名，如：break、case、else、do、delete 等

c. 保留字实际上为预留的”关键字“，同样不能使用它们当变量名、方法名，如：class、byte、const、float、fimal、int 等

6. 运算符

a. 也被称为操作符，用于实现赋值、比较、执行算数运算等功能的符号

b. 可用双等号进行验算

var num = 1 + 1;

console.log(num == 2); // 输出为 true 为正确，输出 false 为错误

1. 算数运算符
   a. 加号（+）
      console.log(1 + 1); // 输出为2

   b. 减号（-）
      console.log(1 - 1); // 输出为0

   c. 乘号（*）
      console.log(1 * 1); // 输出为1

   d. 除号（/）
      console.log(1 / 1); // 输出为1

   e. 取余（%）
      console.log(5 % 3); // 输出为2
      console.log(3 % 5); // 输出为3

   // 浮点数在算数运算中会出现问题，尽量避免浮点数计算
   console.log(0.1 + 0.2); // 输出为0.30000000000000004

   // 表达式：由数字、运算符、变量组成的式子
   // 返回值：由表达式返回的值
   console.log(1 + 1);  表达式
   ==>2  返回值
   // 在程序中 2 = 1 + 1； 将程序中右边表达式计算完毕后把返回值给左边
2. 递增与递减运算符

递增（++）与递减（–）必须配合变量使用，可放在变量前（前置递增/递减）；也可放在变量后（后置递增/递减）

a. 前置递增/递减（先自加/自减，后运算）
      var num = 1;
      //递增
      ++num； // 等价于num = num + 1；输出为2
      console.log(num); // 输出为2
      console.log(++num + 10); // 输出为12，先加1后返回值，先计算++num

      //递减
      --num； // 等价于num = num - 1；输出为0
      console.log(num); // 输出为0
      console.log(--num + 10); // 输出为10，先减1后返回值
b. 后置递增（先返回原值，后自加）
      var num = 1;
      //递增
      num++； // 输出为2
      console.log(num); // 输出为2
      console.log(num++ + 10); // 输出为11，先返回原值后自加1
      console.log(num); // 输出为2

      //递减
      num--； // 输出为0
      console.log(num); // 输出为0
      console.log(num-- + 10); // 输出为11，先返回原值后自减1
      console.log(num); // 输出为0

❤️ 案例

   ⚠️ ++a/a++单独书写时结果相同，与其他代码连用时结果不同

   var a =10;
   ++a; // ++a = 11 ; a = 11
   var b = ++a + 2; // ++a = 12 ; a = 12 ; b = 14
   console.log(b);  // 14

   var c =10;
   c++; // C++ = 11 ; c = 11;
   var d = c++ + 2;  // c++ = 11, c = 12 , d = 13
   console.log(d); // 13

   var e =10;
   var f = e++ + ++e;
      // 1. e++ = 10 ; e = 11 ; 先计算e++，后置先返回原值为10，后自加1得到e为11
      // 2. e = 12 ; ++e = 12 ; 前置先自加1得到e为12，后返回值为12
      // f = 22
   console.log(f); // 22

   var g = 10;
   --g; // --g = 9 ; g = 9
   var h = --g + 2; // --g = 8 ; g = 8 ; h = 10;
   console.log(h); // 10

   var c =10;
   c--; // c-- = 9 ; c = 9;
   var d = c-- + 2;  // c-- = 9, c = 8 , d = 11
   console.log(d); // 11

   var e =10;
   var f = e-- + --e;
   	// 1. e-- = 10 ; e = 9;
   	// 2. e = 8 ; --e = 8;
   	// 18
   console.log(f); //18
3. 比较运算符

a. “=”作用为赋值，把后边给左边

b. “==”判断，判断两边值是否相等（注意这里会默认转换数据类型）

c. “===”全等，判断两边的值和数据类型是否完全相同

运算符说明案例结果
<小于号1<2true
>大于号1>2false
>=大于等于号2>=2true
<=小于等于号3<=2false
==判等号（默认转换数据类型）37==‘37’true
!=不等号37 != 37false
===全等要求值和数据类型都一致37 === ‘37’false
!==不全等37 !== 37fasle
4. 逻辑运算符
运算符说明案例
&&“与”/andtrue&&false
||“或”/ortrue||false
!“非”/not!true
1. 逻辑与（并且）
      console.log(3 > 5 && 3 > 2); // 输出false
      console.log(3 > 2 && 3 < 5); // 输出true
      // 条件同时满足则为true，只要有一个不满足则为false
2. 逻辑或
      console.log(3 > 5 || 3 > 2); // 输出true
      console.log(3 > 5 || 3 < 2); // 输出false
      // 只要有一个条件满足则为true，都不满足则为false
3. 逻辑非（取反符）
      console.log(!true); // 输出false
      console.log(!false); // 输出true
4. 短路运算
      // 当有多个表达式（值）的情况，左边的表达式（值）可以确定结果时，不在运算右边的表达式（值）

      a. 逻辑与（表达式1&&表达式2）
         i. 如果表达式1为真，则返回表达式2
      	console.log(123 && 456); // 输出结果为456
      	console.log(123 && 456 && 789); // 输出结果为789

         ii. 如果表达式1为假，则返回表达式1
      	console.log(0 && 456);  // 输出结果为0
      	// 0、''、null、undefined、NaN都为假

      b. 逻辑或
         i. 如果表达式1为真，则返回表达式1
      	console.log(123 || 456); // 输出结果为123

         ii. 如果表达式1为假，则返回表达式2
      	console.log(0 || 456); // 输出结果为456
      	console.log(0 || 456 || 789); // 输出结果为456

      案例
      var a = 0;
      console.log(123 || a++);  // 输出为123
      console.log(a);  // 输出为0

      var a = 1;
      console.log(0 || a++);  // 输出为1，若是++a则输出为2
      console.log(a);  // 输出为2
5. 赋值运算符
运算符说明案例
=直接赋值var age = 10;
+=/-=加/减一个数后在赋值var age = 10; age += 5; //15
*=、/=、%=乘、除、取余后在赋值var age = 10; age *= 5; //50
6. 运算符优先级
优先级运算符先后顺序
1小括号（）
2一元运算符++ – ！
3算数运算符先乘除后加减
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先 && 后 ||
7赋值运算符=
8逗号运算符,
知恩️
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值