JS基础(一)变量常量、数据类型、运算符、语句

爱喝水的小鼠

已于 2024-07-08 20:46:38 修改

阅读量430

点赞数 20

分类专栏： JS 文章标签： javascript 开发语言前端

于 2024-07-08 20:41:27 首次发布

本文链接：https://blog.csdn.net/qq_44285582/article/details/140277427

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript

是什么：是一种运行在客户端(浏览器)的编程语言，实现人机交互。
作用：
- 监听用户的一些行为让网页做出对应的反馈
- 表单验证，针对表单数据的合法性进行判断
- 数据交互，获取后台的数据，渲染到前端
- 服务端编程(node.js)
组成
- ECMAScript: 规定了js基础语法
- Web APIs
  - DOM 操作文档
  - BOM 操作浏览器
常见输入输出：
输出: document.write()–页面输出；alert():页面弹出警告框；console.log():控制台打印

// 1. doucument.write('要输出的内容') // 向body内输出内容
// 若写的是标签，也会被解析成网页元素
// e.g. 这样打印出来的是一个表格
    document.write(` 
    <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
  </table> `)
// 2. 
	alert('要输出的内容') // 页面弹出警告对话框
// 3.
	console.log('控制台打印,适合用于输出和查看数据')
	console.dir('可用于查看一个对象的所有属性和方法');

输入: prompt()-页面弹出输出框

prompt('请输入您的姓名') // prompt返回字符串类型的值

字面量
- 工资是1000；1000是数字字面量
- ‘黑马程序员’ 是字符串字面量
- [] 数组字面量， {} 对象字面量

一、变量与常量

变量不是数据本身，是存储数值的容器; 变量本质是程序在内存中申请的一块用来存放数据的小空间

1.1 变量的基本使用

//let 变量名 ,变量名也称为标识符
let age = 18
// 多个变量之间用逗号隔开
let name = 'Tom', age = 20 // 注：let不允许多次声明一个变量，age声明了两次，会报错
// 为了更好的可读性，一般一行只声明一个变量
let age = 18
let uname = 'pink'

以前声明用var,但是会有很多问题，现在实际开发改用let，const

1.2 标识符的命名规范

不能用关键字：let if for等
只能用下划线、数字、字母、$组成，且数字不能开头
严格区分大小写
采用驼峰命名法(第一个单词的首字母小写，后续单词首字母大写，e.g. getName)

1.3 常量

常量不允许重新赋值，声明的时候必须赋值初始化

const PI = 3.14
PI = 3.1415 // 报错，

二、基本数据类型

JS数据类型分为基本数据类型(number,string,boolean,undefined,null)与引用数据类型(object 对象)
JS是弱数据类型, 只有赋值之后才能确定a是什么类型。 let a = 10; let a = ‘apple’; Java是强数据类型, int a = 10; a只能存整型数据

2.1 Number 数字类型

JS中的正数、负数、小数统一称为数字类型。
算术运算符：+ - * / %（取余）; 取余运算一般用来判断某个数字是否能被整除。
NaN: 非数，代表一个计算错误；任何对NaN的操作结果都是NaN

console.log('apple'-2) // NaN
console.log(NaN + 2)   // NaN

2.2 String 字符串类型

由单引号’'，双引号""，反引号` 包裹的数据都是string类型
打印单引号等符号需要转义字符
字符串拼接：用+号或者 模板字符串

 console.log('打印单引号\'');  // 转义字符
 let name = 'Tom', age = 20
 console.log('我的名字是' + name + ', 年龄是' + age + '岁');
 console.log(`我的名字是${name}，年龄是${age}岁`);     // 模板字符串

2.3 boolean 布尔类型

只有true和false两种值

let isCool = true
console.log(isCool); // true
console.log(3 > 4);  // false

2.4 undefined 未定义类型

声明一个变量但是未赋值时为undefined类型，因为JS是弱数据类型，赋值之后才能确定数据类型
若检测该变量为undefined,则说明没有值传递过来
任何值与undefined进行运算，结果都是NaN

  let gender // 声明变量但未赋值
  console.log(gender) // undefined

2.5 null 空类型

null：赋值了，内容为空;
undefined:未赋值
若一个变量里确定存放的是对象，若对象还未准备好，可以放个null

let num1
let num2 = null
console.log(num1 + 1); // NaN
console.log(num2 + 1); // 1

2.6 检测数据类型

typeof x 或 typeof(x)

let num = 1
let name1 = 'Jerry'
let balabala
let flag = false
let apple = null
console.log(typeof num);       // number
console.log(typeof name1);     // string
console.log(typeof (balabala)); // undefined
console.log(typeof (flag));     // boolean
console.log(typeof (apple));    // object
console.log(typeof null); // object

三、数据类型转换

隐式转换

任何数据和字符串相加结果都是字符串
+作为正号解析可转换为数字型
除了+以外的算数运算符，- * / 都会把数据转为数字类型

console.log(11 + '岁'); // 11岁
console.log(11 + '11'); // 1111
console.log(11 - '11'); // 0  数字类型
console.log(1 * 1);     // 1
console.log(1 * '1');   // 1    
console.log(typeof '123'); //string
console.log(typeof +'123'); // number
console.log(+'11' + 11);    // 22

显示类型

转为数字型： Number(x), parseInt, parseFloat,字符串前添加一个+号
转为字符串：Srting (数据)，变量.toString()

console.log(Number('123'));
console.log(+'100000');
console.log(Number('apple'));  // NaN

// parseInt() 没有四舍五入,就是转为整型
console.log(parseInt('12.95px')); // 12
console.log(parseInt('12.25px')); // 12
console.log(parseInt('abc12.25px')); // NaN

console.log(parseFloat('12.94px')); // 12.94
console.log(parseFloat('abc12.94px')); // NaN

let name = 123
console.log(name.toString());
console.log(String(345));

四、运算符

4.1 赋值运算符

赋值运算符	说明	举例
=	直接赋值	var age = 2
+=、-=	加、减一个数后再赋值	var age = 2; age += 5 // 7
*=、/=、%=	乘、除、取余后再赋值	var age = 2; age *= 5 // 10

4.2 自增自减运算符

也叫一元运算符，即只需要一个操作数
num++ 与 ++num 执行的都是num+1的操作，当两个语句单独使用时，效果是一致的。

let num = 10;
num++;
console.log(num); // 11
++num;
console.log(num); // 12

前置自增与后置自增的区别在于，表达式的值不一样；
前置自增（++num）: ++在前，先加后标；后置自增（num++）:先标后加

let number = 10;
// 先标后加，标的时候number是10，所以表达式的值是10，标完之后number+1,此时number的值为11; 控制台打印的是表达式的值
console.log(number++); // 10; 
// 先加后标，number+1之后，值为12；加完之后标表达式的值，即12；所以控制台打印的是12
console.log(++number); // 12
console.log(number--); // 12
console.log(--number); // 10

// 面试题
let i = 1
console.log(i++ + ++i + i); // 7

自减同理

4.3 比较运算符

比较表达式的结果为boolean类型，只会得到true或false

运算符名称	说明	举例	结果
>	大于	1 > 2	false
<	小于	3 < 2	false
>=	大于或等于	3 >= 3	true
<=	小于或等于	3 <= 3	true
==	判断两边值是否相等 (隐式转换)	2 == ‘2’	true
=== (常用)	判断两边值与类型是否都相等	2 === ’2‘	false
!== （常用）	判断两边值与类型是否不全等	2 !== ‘2’	true
!=	判断两边值是否相等	2 != ‘2’	false

字符串比较，比的是对应的ASCII码
NaN不等于任何值
小数有精度问题，不适合比较
不同类型之间比较会产生隐式转换，转换成number类型再比较

console.log('abc' > 'ab'); // true  比较ASCII码
console.log(NaN === NaN);  // false NaN 不等于任何量
console.log(NaN == NaN);   // false 
console.log( 2 > '2' );   // false  发生隐式转换，转成number再进行比较

在这里插入图片描述

4.4 逻辑运算符

符号	名称	特点
&&	逻辑与（and）	两边都为真，结果才为真
\|\|	逻辑或 (or)	两边有一个真，结果为真
!	逻辑非（取反，not）	true变false,false变true

console.log(11 && 22);    // 22  返回第二个为真的表达式的值
console.log(false && 'hello');  // false
console.log(33 || 44);   // 33  返回第一个为真的表达式的值
console.log(0 || 55);    // 55  返回第一个为真的表达式的值

4.5 运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算数运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === ! ==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	，

五、语句

5.1 表达式与语句

表达式可被求值，因此可写在赋值语句的右侧
语句不一定有值，比如 alert()语句不能被用于赋值

// 表达式
x = 7 ; // 这个表达式的值是7
3 + 4; // 这个表达式的值是7
num = 3 + 2; // 右侧表达式的值是5, 5赋给num,这个表达式(num=5)的值是5

5.2 分支语句

1、if语句

if(条件1){
    代码1
}else if(条件2){
    代码2
}else{
    代码3
}

2、三元运算符
条件 ? 满足条件执行的代码：不满足条件执行的代码

// 需求：用户输入数值，若小于10，则前面补0
// 方式一：num3转为 number类型
let num3 = +prompt('num3')  
console.log(num3 < 10 ? ('0' + num3) : num3);
// 方式二： num4为字符
let num4 = prompt('num4')
console.log(num4 < 10 ? 0 + num4 : num4);  // num4与10 比较时，进行了隐式转换

4、switch
找到与小括号里 数据全等 的case值，并执行里面对应的代码；若没有全等case,则执行defult;
switch case一般配合break关键字使用，没有break会造成case穿透

let number1 = +prompt('number1')
let number2 = +prompt('number2')
let operator = prompt('operator')

switch (operator) {
    case '+':
        console.log(number1 + number2); break
    case '-':
        console.log(number1 - number2); break
    case '*':
        console.log(number1 * number2); break
    case '/':
        console.log(number1 / number2); break
}

switch一般适用于等值判断，不适合区间判断

5.3 循环语句

1、while循环

while(循环条件){
    要重复执行的代码(循环体)
}

while循环三要素：变量起始值；终止条件；变量变化量

let i = 1
while ( i <= 3){
    doucument.write('while循环')
    i++
}

2、for循环

单循环：

for(变量起始值;终止条件;变量变化量){
    //循环体
}
for(;;)则为死循环，需使用break退出循环

案例1：找错误

// 求1-99之间的累加和
let sum 
for (let i = 1; i < 100; i++;) { 
    sum += i
}
console.log(sum)

错误1：i++后不应该有分号
错误2： sum应该初始化为0，否则sum值为undefined；任何值与undefined进行运算，结果都是NaN

案例2：

//100以内所有奇数的和
var odd = 0;
for (var i = 1; i <= 100; i = i + 2) {
    odd = odd + i;
}
console.log(odd);

也可以这样写:

var odd = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 != 0) {
       odd = odd + i;
    }
}
console.log(odd);

嵌套循环

for(外部声明记录循环次数的变量;循环条件;变化值){
    for(内部声明记录循环次数的变量;循环条件;变化值){
        循环体
    }
}

案例：

// 打印99乘法表
for (let line = 1; line <= 9; line++) {
    for (let colum = 1; colum <= line; colum++) {
        document.write(`<span>${line}x${colum} = ${line * colum}</span>`)
    }
    // 换行
    document.write('<br>')
}

continue与break关键字

continue: 退出本次循环，

 //continue:跳出本次循环，继续下一次循环
//求1-100之间除了7的倍数之外的其他整数和
var sum = 0
for (var i = 1; i <= 100; i++) {
    if (i % 7 == 0) {
        continue;
    }
    sum += i;
}
console.log(sum);

break: 跳出整个循环，

for (var i = 1; i <= 20; i++) {
    if (i == 9) {
        break;
    }
    console.log('我挣了第' + i + '个百万');
}