지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 본문

자바스크립트에는 여러 가지 유형이 있습니다.

青灯夜游
풀어 주다： 2022-09-30 15:37:09
원래의
8086명이 탐색했습니다.

9가지 데이터 유형이 있습니다. 1. 따옴표로 묶인 텍스트 조각인 문자열 유형 2. 값을 정의하는 데 사용되는 숫자 유형 3. 두 개의 값만 포함하는 부울 유형 하나의 "빈" 값은 값이 없음을 의미합니다. 5. 정의되지 않은 유형은 정의되지 않음을 의미합니다. 6. 기호 유형은 고유한 값을 의미합니다. 7. 키와 값으로 구성된 순서가 지정되지 않은 집합입니다. 9. 함수 유형은 특정 기능을 가진 코드 블록입니다.

자바스크립트에는 여러 가지 유형이 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

데이터 유형은 프로그램에서 저장하고 조작할 수 있는 값 유형을 나타냅니다. 각 프로그래밍 언어에는 지원되는 데이터 유형이 있으며 텍스트, 숫자 값, 이미지 등과 같은 다양한 데이터 유형을 사용합니다. .

JavaScript는 변수를 정의할 때 미리 변수 유형을 지정할 필요가 없습니다. 또한 프로그램 실행 중에 변수 유형이 JavaScript 엔진에 의해 동적으로 결정됩니다. 동일한 변수를 사용하여 다양한 유형의 변수를 저장할 수 있습니다. 예: 

var a;  // 此时 a 为 Undefined
a = "http://c.biancheng.net/"; // 此时 a 为 String 类型
a = 123;  // 此时 a 为 Number 类型
로그인 후 복사

JavaScript의 데이터 유형은 두 가지 유형으로 나눌 수 있습니다.

  • 기본 데이터 유형(값 유형): 문자열, 숫자, 부울, 비어 있음(Null), 정의되지 않음(정의되지 않음), 기호

  • 참조 데이터 유형: 개체(Object), 배열(Array), 함수(Function).

팁: 기호는 ECMAScript6에 도입된 새로운 데이터 유형으로 고유한 값을 나타냅니다.

1. 문자열 유형

문자열(String) 유형은 '123', "abc"와 같이 작은따옴표 '' 또는 큰따옴표 ""로 묶인 텍스트 조각입니다. 작은따옴표와 큰따옴표는 문자열을 정의하는 다른 방법이며 문자열의 일부가 아니라는 점에 유의해야 합니다.

2. 숫자 유형은 숫자 값을 정의하는 데 사용됩니다. JavaScript는 정수와 소수(부동 소수점 숫자)를 구분하지 않습니다. 참고: 숫자 유형은 동일하게 사용됩니다. 숫자 값을 정의할 수 있습니다. JavaScript의 Number 유형은 -(2∧53 - 1)과 (2∧53 -1) 사이의 값만 나타낼 수 있습니다.

3. 부울 유형

참(true) 또는 거짓(false)의 두 가지 값만 가지고 있으며, 조건부 판단을 할 때 자주 사용됩니다. 부울 유형 변수를 정의하는 것 외에도 일부 표현식을 사용하여 부울 유형 값을 얻을 수도 있습니다

4. Null 유형

Null은 "null" 값을 나타내는 하나의 값만 갖는 특수 데이터 유형입니다. 즉, null 개체 포인터를 정의하는 데 사용되는 값이 없습니다. typeof 연산자를 사용하여 Null의 유형을 확인하면 Null의 유형이 Object라는 것을 알 수 있습니다. 이는 Null이 실제로 Object에 속하는 특별한 값을 사용한다는 의미입니다. 따라서 변수를 Null에 할당하여 빈 개체를 만듭니다.




5. 정의되지 않은 유형

Undefound도 값이 하나만 있는 특수 데이터 유형으로 정의되지 않음을 의미합니다. 변수를 선언했지만 변수에 값을 할당하지 않으면 변수의 기본값은 정의되지 않음입니다.

6. 기호 유형

Symbol은 ECMAScript6에 도입된 새로운 데이터 유형으로 고유한 값을 나타냅니다. 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高级教程】

위 내용은 자바스크립트에는 여러 가지 유형이 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript
원천：php.cn
이전 기사：자바스크립트는 어떤 지원에 의존합니까? 다음 기사：자바스크립트에서 배열의 평균을 구하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿