html前端学习十一：javascript数据类型运算符循环

最新推荐文章于 2022-09-16 14:26:41 发布

原创最新推荐文章于 2022-09-16 14:26:41 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨JavaScript的六大基础数据类型：Number、String、Boolean、function、undefined和object，涵盖数值处理、字符串操作、布尔值及数组特性。解析Number方法如parseInt、parseFloat、toFixed，字符串方法如substring、slice、split等，以及条件判断和类型转换规则。

js六大数据类型

Number —数字
String — 字符串
Boolean — 布尔
function — 函数函数名字加括号是执行函数
undefined — 未定义一个变量没有声明赋值就是undefined
object — 对象只有对象曾能去点方法点属性，数组也是对象

Number数字

在js里面的小数和整数
-2^53~~2^53,超出范围之后精度就不准确了

Number方法

Number() ------参数中必须能被转换成数字，否则返回NaN;

alert(typeof Number("50") );

结果：

number

parseInt(解析的参数) ----将转化为数字，整数部分遇到不是数字就停

var n = 5.564;
alert (parseInt(n));

结果：

parseFloat()-----将参数转为数字，直到小数部分遇到不是数字就停

var n = 5.564b2;
alert (parseFloat(n));

5.564

parseFloat()可将字符串转换为小数，
toFixed()保留几位小数

	var n = "998.568$";
	var result = parseFloat(n);

	alert(result.toFixed(2));

保留两位小数，结果为：

998.57

undefined

	var n = 1+ undefined;  //底层自动Number(undefined)
	alert(n);

result:

NaN

	var n = 1+ undefined;  
	alert(n==n);

result:

False

NaN（Not a Number）
所以 NaN不等于他自己

	var n;  
	alert(n==n);

undefined 等于undefined

Math数学函数

Math.pow(16,2)
16的平方

Math.round(0.52)
四舍五入到整数部分，答案为1

Math.ceil(9.1);
向上取整，如果有小数，9.1取整为10

Math.floor(8.9);
向下取整，如果有小数,8.9取整为8

Math.max(1,2,3,4,5,6,7,8,9);
去参数中最大的值

Math.min(1,2,3,4,5);
去参数中最小的值

var random = Math.random();
生成一个随机数，值域在0-1

var random = Math.random();
alert(random.toString().length); //求随机数的长度

返回一个0到50的随机数

random*50;

返回1到50的随机数

random*49+1;

Math.PI
π

string字符串

str[index];
str.charAt(index);
通过索引取字符串

	var string = "this is new String";
	alert(string[0]);

result ：

str[str.length-1]  //最后一个字符

支持IE9以下的取字符方式

str.charAt(0)

toString()
可以将字符串数字函数（拼接的方式）布尔函数转化为字符串
空对象无法转化
substring()
截取字符串会比较从参数,值小的在前面参数值为负数的时候，会变为0

    var str= "This is String";
	alert(str.substring(1, 5));

只显示1到4的字符

his

等同于

alert(str.substring(5, 1));

str.slice()
切片始终从左往右取字符,负数倒着数，不会交换参数位置

	var str= "This is String";
	alert(str.slice(-2, -1));

result:

str.split()

	var str= "This is String";
	alert(str.split(" "));

以数组的形式返回逗号分隔

    var str= "This is String";
	alert(str.split(" ")[2]);

str.indexOf()
查找字符串，成功就返回索引，没有成功返回-1
从位移9开始寻找Slice

	var str = "This is Slice My name's Slice";
	alert(str.indexOf("Slice",9));

返回24
二次查找模式

alert(str.indexOf("Slice",str.indexOf("Slice")+1));

str.toUpperCase()
全部转换大写
str.toLowerCase()
全部转换小写

Boolean布尔值

true
false
当要判断一个值是否等于另一个值就会使用到布尔，因为只有两个值

undefined
null
0或-0
NaN
“”
以上5个值在做"条件判断"的时候，条件都为假，其余都为真（true）,包括对象（数组）
Boolean转Number ==> true:1 false:0

alert(Number(true));

Null和undefined

null == undefined 返回true 因为放在条件里面都为假 false == false
null是一个关键字，类似于正确的空值填补，undefined是预先定义好的全局变量不是关键字，变量声明没有赋值也是undefined,值就是未定义，类似于错误的空值的填补
null转number为0，undefined转number为NaN;
1+ undefined =NaN;
1+null =1;
null的数据类型是对象(object)，但是非对象。undefined数据类型就是undefined

Number(null) 值为0

null==undefined 两者之间是相等的

=== 三个等于号表示恒等于，值也相等

数组

var arr = [1,2,3,4,"This is Python",true,function(){alert(1)},{},undefined,null];

Array.isArray(arr) 如何判断数组

alert(Array.isArray(arr));

arr.join(""); 数组拼接，整体转换为字符串

undefined

没有任何方法的

关于script在head标签内填写的注意事项

需要时有window.onload = function(){}包裹内部标签

//当页面所有的节点元素、图片、文字内容、全部加载完成之后执行function的代码
<script>
	window.onload = function(){
	var box = document.getElementById("box");
	alert(box);	
	}
</script>
</head>

<body>
    <div id="box"></div>
</body>

运算符

+ - * / %（求余数）

赋值操作
= += -= /= *= %= ++ –

能被计算才会执行计算，否则会出现各种各样的问题 NaN Error
值与值之间相加，只要其中有一个字符串则就是字符串拼接
布尔值计算的时候 true = 1; false = 0;
-*/% 强制转换数字进行计算。

var a=30;
var b = a++; 先赋值在自增
a为31
b为30

var c = ++a;先自增在赋值
a为31
c为31

条件判断符号

        undefined
        null
        ""
        0
        NaN
        < > == <= >=  !=不等于    ===恒等于（还会判断数据类型）     !== 不全等

逻辑运算符

逻辑运算符

            && || !
            与 或 非
            和 或 取反
        与：
            遇到假就停,返回false
        或：
            遇到真就停，返回true

循环


<body>

    
    <ul id="list">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
    </ul>

    <ul>
        <li>111</li>
    </ul>



<script>
    var list = document.getElementById("list");
    var lis = list.getElementsByTagName("li");

    // lis[0].onclick = function() {
    //     alert(this.innerHTML);
    // }
    // lis[1].onclick = function() {
    //     alert(this.innerHTML);
    // }
var i=0
    for(; i<lis.length; ) {
        lis[i].index = i;
        lis[i].onclick = function() {
            // 循环完了的i
            alert(this.index+1+ "======" + this.innerHTML);
        }
        i++
    }

    // for(var i=0; 99<100; i++) {
    //     console.log(i);
    // }

    // for(var x=100; 100<100; x++) {
    //     console.log(99);
    // }



</script>

</body>