JavaScript 学习笔记——js基础(数据类型，类型转换，运算符，条件、分支、循环语句)

最新推荐文章于 2024-09-16 08:47:17 发布

进文欧尼.oO

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量219

点赞数

分类专栏：笔记初步学习javascipt 文章标签： javascript

本文链接：https://blog.csdn.net/m0_46381494/article/details/107494413

版权

笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

初步学习javascipt

4 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括数据类型（如string、number、boolean、undefined和null）、数据类型转换（强制与隐式转换）、运算符（算数、赋值、一元、关系、逻辑和条件运算符）以及条件语句。同时，还讨论了变量命名规范和对象的初步概念。

摘要由CSDN通过智能技术生成

初识JavaScript

JavaScript, ActionScript, TypeScript 用的都是ECMAScript

JavaScript 包括

ECMAScript （核心）

DOM 文档对象模型

BOM 浏览器对模型

JS 书写方式

一内部

二外部

三内嵌

// <a href="javascript:void(0)"></a>

// 超链接中 href 内可以直接写入javascript：JS语句

常用方法

console.log(" "); //在控制台console中进行打印点语法

console.error(" "); //在控制台console中报错

alert(" "); //弹出ok对话框只有ok键

confirm(" "); //弹出确认消息框有确定和取消键

prompt(" "); //弹出输入框引号内为提示信息的文本内容

prompt("问题文本 ","默认文本 ") //弹出输入框第二个引号内为输入框中的默认文字信息

var div = document.getElementById(" ") ; //根据ID获取元素

div.style.fontSize = " 12 px"; //给元素的样式指定样式内容样式都需要用引号引起

div.innerHTML = "<span></span>"; //给div元素增加HTML内容

变量命名和规范（JS是区分大小的）

1）一般变量 => 驼峰式命名 eg： var getSumValue=10;

2）临时变量或函数中的参数命名 => 下划线+驼峰 eg: var _sum=20;

3）循环条件中的局部变量 => 单字母 eg： var i=3；

a) 关键字，保留词（eg：private，class，static）不能用来命名

b）不能用中文中文编码复杂占内存

c）window 的属性不能用（JS的根对象就是window） eg: window.alert(" "); window.document.getElementById( );

常量（ES6推出）

初始设置后不能再改变

定义必须全部使用大写字母，单词用下划连接

eg： const ELEMENT_WIDTH=60；

数据类型

JS是弱类型，如果没有给变量定义类型，那么这个变量可以随便改变值的类型，所以要考虑变量类型，才能操作

1）字符型 string

只要用引号引起来的都是字符字符再console内显示为黑色字体

2）数值型 number

整型 / 正整型 / 浮点型

数值再console内显示为蓝色字体

0开头数字为八进制 eg：062

0x开头数字为十六进制 eg： 0x3a

var a1 = 4e + 2 // 科学计数法 =>400

var a1 = 0.4e - 2 // 科学计数法 =>0.004

3)布尔型 boolean

true / false 用于判断或开关

4）undefined

未定义值 var c1=undefined; 与 var c1; 含义相同

5）null 空值

一个变量以指针的形式指向堆中的地址，当不需要再指向时，就必须设置该变量的值为 null

typeof 检测数据类型（有返回结果）

var a = null ;

console.log( typeof a ); // object 对象

var div1 = document.getElementById("div1");

div1.onclick = function(){ };

数据类型转换

强制转换

主动将数据的类型强制转换成某种类型

计算机中任何数据进行计算都需要转换成二进制

强转字符串

1）String（数据） (所有类型都可以转换)

2）（数据）. toString （null 和 undefined 不能转换）

（数据）. toString(n) 将数字转换成 n 进制字符（进制必须大于等于 2 且小于等于36 ）

3）（数据）. toFixed(n) 数值转成字符串并保留小数点后 n 位，四舍五入（存在误差）

强转数值

1）Number（数据）

纯数字字符 =>数字；纯字母字符 => NaN; 带字母字符 => NaN; null => 0; undefined => NaN;

true => 1; false => 0

(NaN 含义是非数值，它的类型是 number )

强转整型

1）parseInt（）

纯数字字符 =>数字；纯字母字符 / 以字母开头的带数字字符 => NaN; null => NaN; undefined => NaN;

true => NaN; false => NaN；

数字开头带字母的字符 => 转换到第一个字母字符前为止，前面的数字字符转成数字

2）parseInt （ str , n ）将 n 进制字符串str 转换成 10进制数值

没有n，默认以10进制显示str字符串并转换程10进制数值

parseInt （ str , n ）是（数据）. toString（n）的逆转换

强转浮点型

parseFloat（）; 可以保留小数位同parseInt

强转布尔型

Boolean（数值）；

1）空字符串 var str1 = "";

2）数值 0 var str2 = 0;

3）false var str3 = false;

4）未定义 var str4;

5）null var str5 = null;

6）NaN var str6 = NaN;

除以上六点为false以外，均为 true

隐式转换

弱类型语句中，类型不同，弱类型语言会自动将数据转换为相同类型，然后运算

隐式转换遵从 String（） Number（） Boolean（）

运算符

算数运算符

+ - * / %

1）- * / % 都是隐式转换成数值，不论有没有字符

2）+

如果是字符和非字符相加，则会自动将非字符隐式转换成字符 String（）此时+为拼接符

如果没有字符，则会隐式转换成数值进行计算

数值 + NaN = NaN true + false = 1

赋值运算符

+= -= *= /= %=

再元数据的基础上进行累加累减等操作

得到计算后的新值，原数据也会发生改变

a += 2；等价于 a = a+2；其中2为步长

eg： var e=20;

console.log(e-10); //结果是10 e的值没有发生改变e:20

console.log(e-=10); //结果是10 e的值发生改变

一元运算符

a++ <=> a=a+1 a为数值的情况下

一元运算符使用时会全部隐式转换为数值进行计算

//var b="10";

//b+=1; =>101

//b++; =>11

++a 与 a++ 的区别

运算后a的值没有区别

++a => 先自增，再赋值

a++ => 先赋值，再自增

关系运算符

> >= < <= == != ===

判断，比较时使用

隐式转换内容为数值，如果都是字符，则通过ASCII转换成编码值，再比较

没办法比较时，结果为 false

null和undefined特殊都没有值不和其他值进行比较

console.log(0==null)； // false null是用来切断引用关系的

console.log(null==undefined); // true

以下几点均为true

console.log(""==0); // 空字符串会隐式转换成数值 0

console.log(""==false);

console.log(0==false);

console.log(NaN==NaN); // false 非数值永不等

isNaN（）用来判断是不是非数值

返回值 true => 非数值

false => 数值

=== 会判断数据的值和类型，必须完全相同才为true

！==（绝对不等）和 === 都不会隐式转换

逻辑运算符

&& 与 || 或！非

1）&& 与

一假即假

遇到第一个条件为假，则停止后续的判断，返回其假值，否则则一直运行到最后，若最后一个条件为真，则返回该值

2）|| 或

一真即真

遇到第一个条件为真，则停止后续的判断，返回其真值，否则则一直运行到最后，若最后一个条件为假，则返回该值

3）！非

取反

（ ~ 转二进制按位取反加1取负）

var x = y = 5； // 先赋值给前面的x，再赋值给后面的y

条件运算符（三目运算符）

条件？值1 ：值2；

当条件为真时，返回值1，否则返回值2

条件必然是一个布尔值，当条件不是布尔值时，会隐式转换成布尔值

运算符优先级

条件语句

三目运算符不能判断一次，解决多个问题，但是 if 语句可以

if（条件）{
    满足条件后执行的内容；
}else{
    不满足条件时执行的内容
}

条件会自动隐式转换成布尔值

当一个条件不能包含所有需求时，可以用 || 增加条件范围

当一个条件包含内容超出需求时，可以用 && 缩减条件范围

if 分支语句嵌套

if（条件1）{
    if（条件2）{
    }else if（条件3）{
        
    }else（条件4）{
    
    }else（条件5）{

    }
}

算数运算（除+外）隐式转换成数值类型返回数值类型

关系运算（== >= <=）隐式转换成数值类型返回布尔类型

isNaN 隐式转换成数值类型返回布尔类型（true=>非数值 false=>数值）

逻辑运算（&& || ！）隐式转换为布尔值返回代表该布尔值的原值

var num = Math.radom( ) * n // 生成随机数0~n（不包含n的随机小数）

分支语句

switch（表达式）{	//表达式可以是公式或变量
    case 值1：	//表达式等于 值1 执行语句1	switch中的判断 是判断=== 全等
        执行语句1；	
        break；	// 跳出花括号  如果没有break，会不判断下一个case是否相等，直接进入执行语句，case穿透
    case 值2：	//利用case穿透 可以实现 等于某值a或某值b 
        执行语句2；	//因为 || 会返回一个值，然后case 再判断是否与 || 的返回值全等 
        break；					
    default：	//  default 后可以省略break， default内语句执行完，会自动跳出
        执行语句；
        break；
}

input 文本框输入内容，select 下拉菜单选中内容都是 value的属性值 => 字符串

this 在点击函数中代表被点击的元素

str += “</li></li>” li 标签拼接

循环语句

判断条件，只要满足条件，就会不断的从头到尾重复执行，直到不满足条件时，跳出循环

while （表达式）{

当表达式为true 时，执行语句，为false 不执行

}

循环次数由初始值，条件和变化量来决定

var i=0,sum=0;
while(1){
    if (i===5)   break;	// break 中断性跳出，满足if 条件 跳出整个循环，不再循环 相当于循环条件内置
    sum+=i;			// 所以 外层循环可以是死循环
    i++;
}

var i=0,sum=0;
while(i++<10){		// continue 主要用于再循环中的连续内容，由需要错过一部分的情况
    if (i===5)   // continue 遇到continue后，不在执行他后面的代码，跳出本次循环，
        continue;	//直接开始下一次循环
    sum+=i;				// 注：要注意循环变量，不然容易出现死循环
}

同样的循环次数，while 执行起来比 for 更快

document.write(" ") // 再body内写入内容如果字符串内容是标签，则再body内会直接变成对应标签

documen.write 和 innerHTML 都会重新打开DOM树写入内容，为避免降低效率，不要把他们写在循环结构中