管理员
2023-12-21
371
原创

JavaScript数据类型详解


数据类型

  • JS数据类型分为 基本数据类型和引用数据类型

基本数据类型(简单数据类型)

五类型：数字型number，字符串型string， 布尔型boolean， 未定义型undefined， 空类型null

数字类型：整数、正数、负数、小数等 只要是数字统称为数字类型

注意: JS是弱数据类型，变量到底属于什么类型，只有赋值后才知道

// js 弱数据类型
// let num = '张三'
let num = 10.12
console.log(num)
// java 强数据类型 int num = 10（int必须整型）

数字类型number

  • 除了0 所有数字都为真

  • 算术运算符——JS中优先级越高越先被执行，相同时从左到右执行

    • 求和 +

    • 求差 —

    • 求积 *

    • 求商 /

    • 取模（取余数）%（开发中经常作为 判断某个数字是否被整除）

      //余数为0
console.log(4%2)
//余数为3,前面数比后面的小，结果就是前面
console.log(3%5)

  • 知识补充：NaN（not a number)代表一个计算错误,即一个错误的或者未定义的数学操作所得结果）

    console.log('张三' - 2) //结果为NaN

  • NaN是粘性的。任何NaN操作都会返回NaN,即不等于任何值包括它本身

    console.log(NaN - 2) //结果为NaN
console.log(NaN === NaN) //NaN不等于NaN

字符串类型string（重点）

  • 除了空字符串 所有字符串都为真

  • 空字符串当0看，转为布尔值为假false

  • 通过单引号''，双引号""或反引号`包裹的数据都叫字符串。JS推荐用单引（学json必须双引号）

    let str = 'sally'
let str1 = "sally"
let str2 = '中文'
let str3 = '1234' // 看起来是数字，加了引号就是字符串
let str4 = '' // 空字符串
console.log(str) //sally
console.log('str') //字符串
console.log('你真“可爱”') //外单内双
console.log('你真\'可爱\'') //编译时不会编译\后的符号

注：

  • 变量不能加引号，加了就是字符串
  • 无论单引号还是双引号必须成对使用
  • 单引号/双引号可互相嵌套（外双内单，外单内双）
  • 必要时使用转义符\，输出单引号或双引号(编译时不会编译\后的符号)

字符串拼接（拼接变量比较麻烦）

  • 运算符+ 实现字符串拼接（数字相加，字符相连）

    //console.log(1 + 1)
//console.log('张' + '三岁')//张三岁
//let uname = '周杰伦'
//let song = '青花瓷'
//document.write(uname + song) //周杰伦青花瓷

let age = 18
//document.write('我今年' + 18) //18写死了
//document.write('我今年' + age) //age值可灵活更改
//document.write('我今年' + age + '岁了' )
document.write('我今年' + age +'岁了') //拼接变量麻烦

模板字符串（拼接变量简单）(重点)

  • 语法：

    • 反引号``

    • 内容拼接变量时，用${}包住变量

      let age = 18
document.write(`我今年${age}岁了`)

      拼接字符串和变量——外面`` 里面${变量}，反引号包住${}

布尔型Boolean

  • 表肯定或否定时，在计算机中对应的时布尔型数据

  • 两个固定值true（真）和false（假）

    //true false是布尔型的字面量
console.log(3>4) // false
let isCool = true
console.log(isCool)

未定义类型undefined 弱数据类型

  • 特殊类型，只有undefined一个值

  • 声明变量未赋值就是undefined，一般很少直接为某个变量赋值为undefined

  • undefined加减任何一个值都等于NaN，做任何操作都是NaN

  • undefined当0看，转为布尔值为假false

    let num
console.log(num) //结果为undefined,未赋值

    注：开发过程中经常声明一个变量，等待传送过来的数据，如果不知道数据是否传送过来，可通过检测这个变量是否为undefined，就判断用户是否有数据传递过来（类似函数的形参）

空类型null

  • JS中null 仅代表“无” “空” “值未知”的特殊值,一个值null

    let obj = null
console.log(obj)//赋值了，但内容为空

  • 拓展：

    • null为 尚未创建的 对象
    • 将来有个变量里确定存放的是一个对象，但是还没想好对象，就可先给个null
    • 通常用来表示不存在的对象即空对象，使用typeof检测类型为object
    • null 类似 let obj = {}

undefined和null的区别

  • undefined未赋值

  • null赋值，但内容为空

    • 计算区别

      // 计算有区别
    console.log(undefined + 1) //未知的东西 +1，啥也不知 结果为NaN
    console.log(null + 1) //空的 +1 结果为1

      • undefined == null 值相等，都为0

      • undefined 不全等 null，数据类型不同

引用数据类型object(复杂数据类型)

  • 对象object
  • 是一种无序的数据集合，可以详细描述某个事物。注意数组是有序的数据集合

  1. 保存网站用户信息，比如姓名，年龄，电话号码...用以前学的数据类型方便吗？

    • 不方便，很难区分

      let arr = [100, 100, 100] //这3个100分别代表啥？

  2. 而对象object，可以详细描述某个事物，例如描述一个人

    • 人有姓名，年龄，性别等信息,还有吃饭睡觉打代码等功能

    • 如果用多个变量保存则比较散，用对象比较统一

      let obj = {
uanme: '张老师',
age:18,
gender:'女'
}

    • 比如描述 班主任 信息：

      • 静态特征（姓名，年龄，身高，性别，爱好）=>可以用数字，字符串，数组，布尔类型等表示
      • 动态行为(点名，唱，跳，rap) =>使用函数表示

对象使用

  1. 声明语法：

    let 对象名 = {} // 常用

let 对象名 = new Object()

  2. 实际开发中，常用花括号。{}是对象字面量

    // 声明了一个person对象
let person = {}

  • 对象由属性和方法组成

    • 属性：信息(特征)——名词。如手机尺寸，颜色，重量...

    • 方法：功能(行为)——动词。如手机打电话，发短信，听音乐...

    • 语法：

      let 对象名 = {
    属性名:属性值,
    方法名:函数
}

对象属性

  • 数据描述性的信息称为属性，如人的姓名，年龄，身高等，一般名词性的

    let obj = {
uanme: '张老师',
age:18,
gender:'女'
}

  • 属性都是 成对 出现，包括属性名和值，它们之间使用英文冒号:分隔

  • 多个属性之间使用英文逗号,分隔

  • 属性就是依附在对象上的变量（对象外面是变量，对象内是属性）

  • 属性名可以使用双引号或单引号， 一般情况下省略，除非名称遇到特殊符号如空格、中横线等

对象方法

  • 数据行为性的信息称为方法，如跑步，唱跳等，一般是动词性的，本质是函数

  • 方法声明：对象名：方法名()

  • 方法调用： 对象名.方法名()

    • 声明对象，并添加若干方法后，可以使用，调用对象中函数，称为方法调用
    • 也可以添加形参和实参,调用时千万别忘了给方法名后加小括号
    let person = {
    name: 'sally',
    sayHi: function() {  //形参
        document.write('hi~~')
    },
    song:function() {  
        document.write('粤语歌')
    }
}
// 方法调用 对象名.方法名  等同于 document.write()写法
person.saHi() //实参

  • 方法是由 方法名和函数两部分构成，它们之间英文冒号:隔开

  • 多个属性之间使用英文逗号,分隔

  • 方法是依附在对象中的函数

  • 方法名可以使用双引号或单引号,一般情况下省略，除非名称遇到特殊符号如空格、中横线等

扩展补充

  • 也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象方法</title>
</head>
<body>

  <script>
    // 声明一个空的对象（没有任何属性，也没有任何方法）
	let user = {}
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18

    // 动态添加方法
    user.move = function () {
      console.log('移动一点距离...')
    }

  </script>
</body>
</html>

    注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

对象操作数据

  • 对象本质是 无序数据集合，操作数据即增删改查语法

查询（常用）

查的写法一：

  • 查询对象 语法： 对象名.属性名

  • 声明对象，并添加了若干属性后，可使用**.获得对象中属性对应的值，也就是获得对象里面的属性值**。称为属性访问

  • . 点 = 的

    let goods = {
  name: '小米10 青春版',
  num: '100012816024',
  weight: '0.55kg',
  address: '上海'
}
console.log(goods.name) // 小米10 青春版
查的写法二：

  • 对于多词属性或 - 等属性，点.操作就不能用了

  • 采取 对象名['属性名'] 方式，单引号和双引号都可以

    • 对象的属性名尽量不用name

      let goods = {
  name: '小米10 青春版',
  num: '100012816024',
  weight: '0.55kg',
  address: '上海'
}
console.log(window.name) 
// 打印输出为空  名字尽量不用name，避免冲突

    • 对象的属性名有 - ，不能用点.操作

      let goods = {
  'goods-name': '小米10 青春版',
  num: '100012816024',
  weight: '0.55kg',
  address: '上海'
}
console.log(goods.goods - name) 
// NaN 自动解析为找寻goods的goods减去name，但里面没有这个属性，一个变量没给值，默认存的是undefined，undefined做任何操作都是NaN

  • 对象属性名遇到带字符串的正确写法：

  • 对象名['属性名']

    let goods = {
  'goods-name': '小米10 青春版',
  num: '100012816024',
  weight: '0.55kg',
  address: '上海'
}
console.log(goods['goods - name'])

注： 查的两种写法

  1. 点形式， 对象名.属性名 obj.age
    • console.log(obj.age)
  2. []形式， 对象名['属性名'] obj['num']
    • console.log(obj['num'] )
  • 正常属性下第一种方法更为简单，第二种方法遇到 属性名为 短横线-字符串的，已经后面遍历对象会大量使用
  • 总之两个都重要，不同场景不同方法

修改（常用）

  • 重新赋值 语法： 对象名.属性名 = 新值

    let teacher = {
  uname: '张老师',
  age: 20,
  gender: '女'
}
teacher.gender = '男'
console.log(teacher) // gender:'男'

增加

  • 对象添加新的数据 对象名.新属性名 = 新值

    let teacher = {
  uname: '张老师',
  age: 20,
  gender: '女'
}
teacher.height = 170
console.log(teacher)

注： 增加和修改 语法一样，根据属性值有无来判断，有则修改，无则增加

删除（了解）

  • 语法严格意义上不允许删除，开发中很少做删除操作

  • 删除对象中属性 delete 对象名.属性名

    let teacher = {
  uname: '张老师',
  age: 20,
  gender: '女'
}
delete teacher.height
console.log(teacher)

遍历对象（重点）

  • for遍历对象的问题（不同于之前的for）

  • 对象里是无序的键值对，无规律，不像数组里的规律下标

  • 对象不像数字一样有length属性，无法确定长度

  • 语法： for in

    注：

    • for in 不推荐遍历数组，因为索引号是字符串型；为了专业，前端大部分人变量写 k或key，键值对的意思
    • for in语法中k是一个变量，再循环过程中依次代表对象属性名
    • k是变量，所以必须用[]语法解析
    • k 是获取对象的属性名， 对象名[k]是获得属性值
    let arr = ['pink', 'red', 'blue']
for (let k in arr) {
  console.log(k) // k为数组的下标 索引号  但是字符串 '0'，打印输出颜色黑色就是字符串
 // console.log(arr[k]) // arr[k]
}

  • 遍历对象for in

  • 打印输出 对象名[k]，k等同于字符串属性，不用加引号

    // 1. 遍历对象 for in
let obj = {
  uname: '张老师',
  age: 18,
  gender: '男'
}
// 2. 遍历对象
for (let k in obj) {
  // 属性名带引号的字符串型  'uname'   'age' 'gender' 
  console.log(k) 
 // console.log(obj.uname)
 // 以前的写法uname就是k，k里存的就是这些属性，所以obj.k
 // console.log(obj.k) 
 //但这样遍历得到三个undefined，没有k这个属性，所以找不到，主要是因为k里面存的是字符串属性，这样写相当于打印了obj.'uname'
  // console.log(obj.'uname')

  // 查的另一种写法
  // console.log(obj['uname'])  
  // 'uname'  === k
  console.log(obj[k]) // 输出属性值  obj[k]
}

内置对象-Math

  • JS内部提供的对象，包含各种属性和方法给开发者调用

  • 之前用过的内置对象

    • document.write()
    • console.log()
      • 该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()。

  • Math对象是JS提供的一个"数学"对象

  • 作用：提供了一系列做数学运算的方法

  • Math对象包含的方法有：

    • Math对象在线文档

    • random：生成0-1之间的随机数(包含0不包括1)即[0,1)

    • ceil:向上取整(往大的取)

    • floor：向下取整（往小的取）

    • max：找最大数

    • min：找最小数

    • pow：幂运算

    • abs：绝对值

    • round:四舍五入

      • 小数部分以0.5为界限向右靠，负数恰好等于0.5则向右靠近，如-7.5=-7

        // 四舍五入
console.log(Math.round(1.5)) // 2
console.log(Math.round(-1.5)) // -1
console.log(Math.round(-1.51)) // -2
console.log(Math.round(1.45)) // 1

        // 属性
console.log(Math.PI)
// 方法
console.log(Math.ceil(1.1)) // 2 向上取整
console.log(Math.floor(1.8)) // 1向下取整

//取整函数 parseInt(1,2) // 1
//取整函数 parseInt('12px') // 12

        注: parseInt取整可以是字符串，Math.floor只能取整

内置对象-随机数函数

  • Math.random() 随机数函数，返回一个0-1之间的随机小数(包含0不包括1)即[0,1)

  • 左闭右开 能取到0不能取到1 中间的一个随即小数

    • 如何生成0-10之间的随即小数？

      Math.floor(Math.random() * (10 + 1))

      注：

      • random是0-1之间的随即小数，不包含1
      • 取0-10不包含10；所以10+1=11包含10
      • 所以想要0到几的随即小数，后面的数+1就可以了
      • 有时候会遇到小数，但只需要整数，所以用Math.floor向下取整

    • 如何生成5-10的随机数？

      // Math.floor(Math.random() * (5 + 1)) + 5
  console.log(Math.floor(Math.random() * 6)) + 5
  let arr = ['橘子', '苹果', '香蕉', '葡萄']
  let random = Math.floor(Math.random() * arr.length)
  console.log(arr[random])

    • 如何生成N-M之间的随机数

      //Math.floor(Math.random() * (M - N + 1)) + N
 function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
  }

      注：

      • 取N-M的随机数，即(M - N + 1)+N，如4-8的随机数就是(8-4+1)+4

      • 8-4=4为它们之间的差值，

      • +1是因为Math.random() 0-5的随机数不包含5，＋1=5才能取到0到4之间的数

      • 取到0-4的随机数，括号外再+4(左边的起始值4)等于8，就是4-8之间的随机数

温馨提示: 小括号()代表优先级; 中括号[]代表数组; 花括号{}代表对象

JavaScript
  • 作者：管理员（联系作者）
  • 发表时间：2023-12-21 10:09
  • 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
  • 公众号转载：请在文末添加作者公众号二维码
    •

    评论