「JS基础系列」之数据类型（栈、堆）动态图解

前端了了liaoliao
372 阅读4分钟

温馨提示：大家在阅读是尽量不要滑动太快，尤其是练习题部分，可以思考后再对比查看哦

基础数据类型

string 字符串

使用 '' ""和反引号``包起来的都是字符串 其他类型转换为字符串类型

  • [val].toString()
  • 字符串拼接
    • + 加法运算，可能存在字符串拼接
let a = 10 + null + true + [] + undefined + '珠峰' + null + [] + 10 + false


//10+null=10
//10+true=11
//11+[]=>11+''=>'11'
//'11'+undefined=>11undefined
//'11undefined'以后为字符串拼接=>"11undefined珠峰null10false"

number 数字

其他类型转换为数字类型

  • Number([val])：先执行toString()，在进行数字转换
Number('1') //1
Number('') //0
Number({})  //NaN
Number({a:1}) //NaN
Number([])  // 0 [].toString()=>''->0
Number(['1']) // 1->['1'].toString()->'1'->1
Number([1,3]) //NaN
  • parseInt/parseFloat([val],[进制])：如果val是字符串，则从左至右依次查找有效数字字符，直到遇到非有效数字，停止查找（即使后面还有数字，也不返回），找到的字符当做数字返回
parseInt('14px') //14
parseInt('14px3') //14
  • == 进行比较时，可能出现把其他类型转换为数字的情况

Boolean 布尔型

只有两个值：true false 其他类型转换为布尔类型

  • 0 null NaN undefined ''五个值转换为false，其余转换为true
  • Boolean([val])
  • !! 相当于转换为布尔
  • 除了在if里== !== === >=都要先把值转换为布尔类型
function getNum(){
    if('3px'+3){ //字符串拼接
        return 3
    }
}
getNum() //3

function getNumber(){
    if('3px'-3){  //NaN-3->NAN
       return 3
    }else{
    return 2
    }
}
getNumber() //2

null 空对象指针

意料之中,设置默认值，后期赋值

一般使用null作为初始值，0在栈内存中有自己的存储空间，占位

undefined 未定义

意料之外

let a；//undefined

引用数据类型

对象数据类型object

  • {} 普通对象：任何一个对象都是由零到多组键值对（属性名：属性值）组成的（并且属性名不可以重复）
let person = {
    name:'丽丽',
    2:123
}

//无属性名
person.sex //undefined

//数字对象
person[2] //123
  • [] 数组对象：特殊对象数据类型，在中括号中设置属性值，属性名是默认从0开始递增的生成的数字，默认自动带length属性，存储数组长度
  • /^(\d|([1-9])?$/ 正则对象
  • Math 数据函数对象
  • 日期对象

函数数据类型function

函数就是一个方法或者一个功能体，实现某个功能的代码放到一起，进行封装，重复使用某个功能，直接调用函数即可=>封装=>减少页面冗余代码，提高代码重复使用率（低耦合，高内聚）

  • 创建函数
    • 形参
    • 返回值
  • 执行函数
    • 实参
  • arguments：函数内置的实参集合
    • 类数组集合，集合中存储着所有函数执行时，传递的实参信息
    • 不论是否设置形参，arguments都存在
    • 不论是否传递实参，arguments也都存在
  • 函数底层运行机制 （待补充）

任意数求和

假设存在函数sum，求多个值的和

  • 传递实参个数不确定
  • 传递的值数据类型不定（是否为有效数字）
  • 目的：把有效数字进行相加
function sum(){
    ...
}
sum(1,2)
sum(1,2,3)
sum(1,2,'a')
  • 使用arguments，查看参数。
function sum(n,m){
    console.log(arguments,n,m)
}
sum(1,2)
sum(1,2,3)
sum(1,2,'a')

arguments集合中存储着所有函数执行时，传递的实参信息，length为参数个数

实现sum函数

由上可知，非数字类型求和成了拼接字符串，需要控制参数类型

数据类型关系

基本类型：按值操作（也叫值类型）

引用类型：操作堆类型地址（引用地址操作）

引用练习题

觉得简单？来个测试题试下水

let x = [10,20]
let y = x
let z = y
y = [30,40]
z[0] = 50
x[2] = 60
y[1] = 70
console.log(x,y,z)

let x = [10,20]、 y=[30,40]是新增，新增值新增引用地址创建堆，y[1] 、 z[0]是修改，修改变量属性查询引用地址，修改堆属性值

js 样式使用

猜测一下，每个div内文字的颜色是什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战</title>
</head>
<body>
    <div id="box">颜色测试red</div>
    <div id="box-yellow">颜色测试yellow</div>
    <div id="box-blue">颜色测试blue</div>
    <script>
        let box=document.getElementById('box')
        let boxYellow=document.getElementById('box-yellow')
        let boxStyle=boxYellow.style
        boxStyle.color='red'
        let boxBlue=document.getElementById('box-blue')
        let boxStyleColor=boxBlue.style.color
        boxStyleColor='blue'
    </script>
</body>
</html>

代码执行效果 结果分析

avatar
文章
阅读
粉丝