【JS】js 数据类型 [超级干货]总结

JS 数据类型

1.原始(5):数值、字符串、布尔、undefined、null
2.引用(3):数组、对象、函数

数组与对象的区别

• 数组与对象并无本质的区别，仅仅是语法上的不同
• 仅仅是成员声明方式和访问方式不同
• 显然对象的语义化更好
• 所以，可以将数组，看成对象的一个子集或特例

函数的本质

• 函数是JS中，最重要的数据类型
• 函数可视为一个普通的值
• 函数可以充当返回值，参数等，凡是用到值的地方
• 如果没有return,则返回 undefined

---

1.原始类型

• 常用：number,string,boolean
• 特殊：undefined,null
• 查询：typeof
• 特点：单值

(1). 数值类型:number

// number
console.log(123,typeof 123)

(2). 字符串类型:string

//string
console.log('php.cn',typeof 'php.cn')
// string定界符：单引号/双引号，反引号 ``
console.log(`Hello`)
// 反引号字符串功能非常强大，不仅仅是字符串，更是一个“模板”
let uname = '老马'
console.log(`Hello,${uname}`)
// `Hello,${uname}`:模板字面量，类似于PHP中的双引号
// ${uname}: 插值，占位符

(3). 布尔类型 boolean

console.log(true,typeof true)
console.log(false,typeof false)

(4). undefined类型

// undefined
console.log(typeof a)

(5). 空类型

// null
console.log(typeof null)

---

2. 引用类型

• 常用：array,object,function
• 特点：多值

(1). 数组类型

• 声明：[…]
• 索引：[0,1,2,3,…] 从0开始递增的“有序”正整数
• 值：可以是任何类型
• 索引值：数组成员 或 数据元素

const arr = ['手机', 5000, true]
// 逐个：索引
console.log(arr[0],arr[1],arr[2])
console.log(typeof arr,Array.isArray(arr),Array.isArray(uname))

(2). 对象类型

• 声明: 字面量 {…}
• 索引：语义化字符串,功能与数据索引类似，但“无序”
• 值：可以是任何类型
• 属性+值：对象成员 或 对象元素

const obj = {
    name:'手机',
    price: 5000,
    is_stock: true
}
console.log(obj['name'],obj['price'],obj['is_stock'])
// 点语法,要求：属性名是合法的标识符
console.log(obj.name,obj.price,obj.is_stock)
console.log(typeof obj)

* (3). 函数类型

//命名函数
function fn1(){}
//匿名函数
const fn2 = function () {}
//箭头函数:匿名函数的语法糖
const fn3 = () => {} 
console.log(typeof fn1,typeof fn2, typeof fn3)

(4). 扩展类型

// forEach: 用于迭代遍历数据组或对象
// forEach(callback):参数是一个函数，当函数当参数时，叫“回调”
// arr.forEach(function(item,key,arr){}),只有第一个参数item是必选
console.log('-----扩展--------------')

1. 多维数组

console.log('--------多维数组----------')
const arr1 = [
    [1, '西瓜', 10],
    [2, '苹果', 20],
    [3, '黄桃', 30]
]
// arr1.forEach(function (item){
//     console.log(item)
// })

2. 箭头函数

arr1.forEach( item => console.log(item))
// ? 2. 对象数组
console.log('--------对象数组-----------')
const fruits = [
    { id: 1, name: '西瓜', price: 10},
    { id: 2, name: '苹果', price: 20},
    { id: 3, name: '黄桃', price: 30}
]
fruits.forEach(item => console.log(item))

3. 类数组

• 类数组特征
• 1.由0开始递增的正整数的索引/属性
• 2.必须要有 length,表示成员数量/数组长度

// 不是class,类：类似，像，类数据->类似一个数组，但不是数组
// 仍然是一个对象，用对象来模拟一个数组
// DOM编程，浏览器中的对象
console.log('--------类数组------------------')
const likeArr = {
    0: 'admin',
    1: 'admin@qq.com',
    2: '87867535',
    length:3,
}
console.log(typeof likeArr)
// ikeArr.forEach(item => console.log(item))
//将类数组转化为真正的数组
console.log(Array.from(likeArr))

4. 函数数组

//数组成员是函数

// const events =[
//     function () {
//         return '准备发射'
//     },
//     function () {
//         return '击中目标'
//     },
//     function () {
//         return '敌人投降'
//     }
// ]
//箭头函数简化
const events = [() => '准备发射', () => '击中目标', () => '敌人投降']
events.forEach( ev => console.log(ev()))
// ? 对象方法
//对象的方法，就是属性，只是它的值是一个匿名函数
console.log('--------对象方法------------------')
const user = {
    uname: '老马',
    email: 'nx99@qq.com',
    getUser: function () {
        return `${this.uname}: ${this.email}`
    }
}
//console.log(user.getUser())
//改成数组
const userArr = [
    '老马',
    'nx99@qq.com',
    function () {
        return `${this[0]}: ${this[1]}`
    }
]
console.log(userArr[2]())