搜索
首页web前端前端问答javascript中有几种类型

javascript中有几种类型

Sep 30, 2022 pm 03:37 PM
javascript

有9种数据类型:1、字符串类型,是一段以引号包裹起来的文本;2、数值类型,用来定义数值;3、布尔类型,只有两个值;4、Null类型,表示一个“空”值,即不存在任何值;5、Undefined类型,表示未定义;6、Symbol类型,表示独一无二的值;7、对象类型,是一组由键、值组成的无序集合;8、数组类型,是一组按顺序排列的数据的集合;9、函数类型,是一段具有特定功能的代码块。

javascript中有几种类型

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

数据类型指的是可以在程序中存储和操作的值的类型,每种编程语言都有其支持的数据类型,不同的数据类型用来存储不同的数据,例如文本、数值、图像等。

JavaScript 是一种动态类型的语言,在定义变量时不需要提前指定变量的类型,变量的类型是在程序运行过程中由 JavaScript 引擎动态决定的,另外,您可以使用同一个变量来存储不同类型的数据,例如:

var a;  // 此时 a 为 Undefined
a = "http://c.biancheng.net/"; // 此时 a 为 String 类型
a = 123;  // 此时 a 为 Number 类型

JavaScript 中的数据类型可以分为两种类型:

  • 基本数据类型(值类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol;

  • 引用数据类型:对象(Object)、数组(Array)、函数(Function)。

提示:Symbol 是 ECMAScript6 中引入的一种新的数据类型,表示独一无二的值。

1、String 类型

字符串(String)类型是一段以单引号''或双引号""包裹起来的文本,例如 '123'、"abc"。需要注意的是,单引号和双引号是定义字符串的不同方式,并不是字符串的一部分。

2、Number 类型

数值(Number)类型用来定义数值,JavaScript 中不区分整数和小数(浮点数),统一使用 Number 类型表示

注意:Number 类型所能定义的数值并不是无限的,JavaScript 中的 Number 类型只能表示 -(2∧53 - 1) 到 (2∧53 -1) 之间的数值。

3、Boolean 类型

布尔(Boolean)类型只有两个值,true(真)或者 false(假),在做条件判断时使用的比较多,您除了可以直接使用 true 或 false 来定义布尔类型的变量外,还可以通过一些表达式来得到布尔类型的值

4、Null 类型

Null 是一个只有一个值的特殊数据类型,表示一个“空”值,即不存在任何值,什么都没有,用来定义空对象指针。

使用 typeof 操作符来查看 Null 的类型,会发现 Null 的类型为 Object,说明 Null 其实使用属于 Object(对象)的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。

5、Undefined 类型

Undefined 也是一个只有一个值的特殊数据类型,表示未定义。当我们声明一个变量但未给变量赋值时,这个变量的默认值就是 Undefined。

6、Symbol 类型

Symbol 是 ECMAScript6 中引入的一种新的数据类型,表示独一无二的值。

Symbol值通过Symbol函数生成。对象的属性名可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。属性名属于 Symbol 类型的,都是独一无二的,可以保证不会与其他属性名产生冲突。

let s1=Symbol()
let s2=Symbol()
console.log(s1)
//Symbol()
console.log(s2)
//Symbol()
console.log(s1===s2)
//false

//Symbol函数能接受字符串作为参数,表示对Symbol实例的描述
let s1=Symbol('xxx')
let s2=Symbol('hhh')
console.log(s1)
//Symbol(xxx)
console.log(s2)
//Symbol(hhh)
console.log(s1===s2)
//false复制代码

Symbol函数前不能使用new命令,会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。相当于是一种特殊的字符串。

应用场景

  • 作为属性名

由于 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用在对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,防止某一个键被不小心改写或覆盖。

const grade={
    张三:{address:'qqq',tel:'111'},
    李四:{address:'aaa',tel:'222'},
    李四:{address:'sss',tel:'333'},
}
console.log(grade)
//张三: {address: "qqq", tel: "111"} 李四: {address: "sss", tel: "333"}
//对象的key值不能重复 如果有重复 后面的value值就会覆盖前面的


//使用Symbol解决,相当于一个独一无二的字符串
const stu1=Symbol('李四')
const stu2=Symbol('李四')
console.log(stu1===stu2)
//false
const grade={
    [stu1]:{address:'aaa',tel:'222'},
    [stu2]:{address:'sss',tel:'333'},
}
console.log(grade)
//李四:{address:'sss',tel:'222'} 李四:{address:'sss',tel:'333'}
console.log(grade[stu1])
//李四:{address:'sss',tel:'222'}
console.log(grade[stu2])
//李四:{address:'sss',tel:'333'}
  • 属性遍历

const sym=Symbol('imooc')
class User{
    constructor(name){
        this.name=name
        this[sym]='imooc.com'
    }
    getName(){
        return this.name+this[sym]
    }
}
const user=new User('www')

//for in的方法不能遍历到Symbol属性 像被隐藏了
for(let key in user){
    console.log(key)//name 
}

//Object.keys(obj)方法也不能遍历到Symbol属性
for(let key of Object.keys(user)){
    console.log(key)//name 
}

//Object.getOwnPropertySymbols(obj)只能获取到Symbol属性
for(let key of Object.getOwnPropertySymbols(user)){
    console.log(key)//Symbol(imooc) 
}

//Reflect.ownKeys(obj)对象的属性都能获取到
for(let key of Reflect.ownKeys(user)){
    console.log(key)
    //name 
    //Symbol(imooc) 
}
  • 消除魔术字符串

魔术字符串指的是,在代码中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改成一些含义清晰的变量代替。

function getArea(shape) {
    let area = 0
    switch (shape) {
        case 'Triangle':
            area = 1
            break
        case 'Circle':
            area = 2
            break
    }
    return area
}
console.log(getArea('Triangle'))
//Triangle和Circle就是魔术字符串。多次出现,与代码形成了“强耦合”,不利于后面的修改和维护。

const shapeType = {
    triangle: Symbol(),
    circle: Symbol()
}

function getArea(shape) {
    let area = 0
    switch (shape) {
        case shapeType.triangle:
            area = 1
            break
        case shapeType.circle:
            area = 2
            break
    }
    return area
}
console.log(getArea(shapeType.triangle))

7、Object 类型

Object数据类型,称为对象,是一组由键、值组成的无序集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名(包含空字符串在内的任意字符串)的属性。

1)构造对象

使用 new 运算符调用构造函数,可以构造一个实例对象。具体用法如下:

var objectName = new functionName(args);

参数说明如下:

  • objectName:返回的实例对象。

  • functionName:构造函数,与普通函数基本相同,但是不需要 return 返回值,返回实例对象,在函数内可以使用 this 预先访问。

  • args:实例对象初始化配置参数列表。

示例

下面示例使用不同类型的构造函数定义各种实例。

var o = new Object();  //定义一个空对象

var a = new Array();  //定义一个空数组

var f = new Function();  //定义一个空函数

2)对象直接量

使用直接量可以快速创建对象,也是最高效、最简便的方法。具体用法如下:

var objectName = {
    属性名1 : 属性值1,
    属性名2 : 属性值2,
    ...
    属性名n : 属性值n
};

在对象直接量中,属性名与属性值之间通过冒号进行分隔,属性值可以是任意类型的数据,属性名可以是 JavaScript 标识符,或者是字符串型表达式。属性于属性之间通过逗号进行分隔,最后一个属性末尾不需要逗号。

在 JavaScript 中,对象类型的键都是字符串类型的,值则可以是任意数据类型。要获取对象中的某个值,可以使用对象名.键的形式,如下例所示:

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};
console.log(person.name);       // 输出 Bob
console.log(person.age);        // 输出 20

8、Array 类型

数组(Array)是一组按顺序排列的数据的集合,数组中的每个值都称为元素(Element),每个元素的名称(键)被称为数组下标(Index)。数组的长度是弹性的、可读写的。

数组中可以包含任意类型的数据。

在 JavaScript 中定义(创建或者声明)数组的方法有两种:构造数组和数组直接量。

1)构造数组

使用 new 运算符调用 Array() 类型函数时,可以构造一个新数组。

示例:

  • 直接调用 Array() 函数,不传递参数,可以创建一个空数组。

var a = new Array();  //空数组
  • 传递多个值,可以创建一个实数组。

var a = new Array(1, true, "string", [1,2], {x:1,y:2});  //实数组

每个参数指定一个元素的值,值得类型没有限制。参数的顺序也是数组元素的顺序,数组的 length 属性值等于所传递参数的个数。

  • 传递一个数值参数,可以定义数组的长度,即包含元素的个数。

var a = new Array(5);  //指定长度的数组

参数值等于数组 length 的属性值,每个元素的值默认值为 undefined。

  • 如果传递一个参数,值为 1,则 JavaScript 将定义一个长度为 1 的数组,而不是包含一个元素,其值为 1 的数组。

var a = new Array(1);
console.log(a[0]);

2)数组直接量

数组直接量的语法格式:在中括号中包含多个值列表,值之间用逗号分隔。

下面代码使用数组直接量定义数组。

var a = [];  //空数组
var a = [1, true, "0", [1,0], {x:1,y:0}];  //包含具体元素的数组

推荐使用数组直接量定义数组,因为数组直接量是定义数组最简便、最高效的方法。

9、Function 类型

函数(Function)是一段具有特定功能的代码块,函数并不会自动运行,需要通过函数名调用才能运行,如下例所示:

function sayHello(name){
    return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res);  // 输出 Hello, Peter

此外,函数还可以存储在变量、对象、数组中,而且函数还可以作为参数传递给其它函数,或则从其它函数返回,如下例所示:

var fun = function(){
    console.log("http://c.biancheng.net/js/");
}
function createGreeting(name){
    return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
    return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");
console.log(result);  // 输出 Hello, Peter

【推荐学习:javascript高级教程

以上是javascript中有几种类型的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
了解usestate():综合反应国家管理指南了解usestate():综合反应国家管理指南Apr 25, 2025 am 12:21 AM

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

使用React的优点是什么?使用React的优点是什么?Apr 25, 2025 am 12:16 AM

ReactispupularduetoItsComponent基于结构结构,虚拟,Richecosystem和declarativentation.1)基于组件的harchitectureallowslowsforreusableuipieces。

在React中调试:识别和解决共同问题在React中调试:识别和解决共同问题Apr 25, 2025 am 12:09 AM

todebugreactapplicationsefectefectionfection,usethestertate:1)proppropdrillingwithcontextapiorredux.2)使用babortControllerToptopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRaceeDitions.3)intleleassynChronOusOperations.3)

反应中的usestate()是什么?反应中的usestate()是什么?Apr 25, 2025 am 12:08 AM

usestate()inrectallowsStateMangementInfunctionalComponents.1)ITSimplifiestTateMempement,MakecodeMoreConcise.2)usetheprevcountfunctionToupdateStateBasedonitspReviousViousViousviousviousVious.3)

usestate()与用户ducer():为您的状态需求选择正确的挂钩usestate()与用户ducer():为您的状态需求选择正确的挂钩Apr 24, 2025 pm 05:13 PM

selectUsestate()forsimple,独立的StateVariables; useusereducer()forcomplexstateLogicorWhenStatedIppedsonPreviousState.1)usestate()isidealForsImpleUpdatesLikeTogGlikeTogGlikGlingaBglingAboolAboolAupDatingAcount.2)

使用usestate()管理状态:实用教程使用usestate()管理状态:实用教程Apr 24, 2025 pm 05:05 PM

useState优于类组件和其它状态管理方案,因为它简化了状态管理,使代码更清晰、更易读,并与React的声明性本质一致。1)useState允许在函数组件中直接声明状态变量,2)它通过钩子机制在重新渲染间记住状态,3)使用useState可以利用React的优化如备忘录化,提升性能,4)但需注意只能在组件顶层或自定义钩子中调用,避免在循环、条件或嵌套函数中使用。

何时使用usestate()以及何时考虑替代状态管理解决方案何时使用usestate()以及何时考虑替代状态管理解决方案Apr 24, 2025 pm 04:49 PM

useUsestate()forlocalComponentStateMangementighatighation; 1)usestate()isidealforsimple,localforsimple.2)useglobalstate.2)useglobalstateSolutionsLikErcontExtforsharedState.3)

React的可重复使用的组件:增强代码可维护性和效率React的可重复使用的组件:增强代码可维护性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionComponcontRossDifferentPartsofanApplicationorprojects.1)heSredunceReDunceNundSimplifyUpdates.2)yessistensistencyInusErexperience.3)

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具