목차
es6 6가지 변수 선언 방법
웹 프론트엔드 프런트엔드 Q&A es6의 6가지 변수 정의 방법은 무엇입니까?

es6의 6가지 변수 정의 방법은 무엇입니까?

Jan 29, 2023 pm 07:10 PM
es6 변하기 쉬운 변수 선언

es6에서 변수를 정의하는 6가지 방법: 1. var 키워드를 사용하여 "var 변수 이름 = 값;" 구문을 사용합니다. 2. function 키워드를 사용하여 변수를 정의합니다. 변수를 정의합니다. 구문은 "const Variable name = value;"입니다. 4. let 키워드를 사용하여 변수를 정의합니다. 구문은 "let Variable name = value;"입니다. 5. import 키워드를 사용하여 변수를 정의합니다. 6. 키워드 class를 사용하여 변수를 정의합니다.

es6의 6가지 변수 정의 방법은 무엇입니까?

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

es6 6가지 변수 선언 방법


es5에서는 var와 function이라는 두 가지 변수 선언 방법만 제공합니다.

ES6 let 및 const 명령을 추가하는 것 외에도 import 명령과 class 명령이라는 두 가지 변수 선언 방법이 있습니다.

그래서 ES6에는 총 6가지 변수 선언 방법이 있습니다. 즉, var / function / let / const / import / class

(1) var command

var a ;  //undefined
var b = 1;
로그인 후 복사
  • var의 역할 선언된 도메인 변수는 global 또는 function-level입니다.
  • var로 정의된 변수는 수정될 수 있습니다. 초기화하지 않으면 undefine이 출력되고 오류가 보고되지 않습니다.
  • var로 선언한 변수는 창에 있습니다. let 또는 const를 사용하여 변수를 선언하면 이 변수는 창에 배치되지 않습니다.
  • 많은 언어에는 블록 수준 범위가 있지만 JS는 var를 사용하여 변수와 함수(또는 중괄호 '{ }')를 사용하여 범위를 구분하지만 중괄호 "{ }"는 제한할 수 없습니다. var의 범위에 도달하므로 var로 선언된 변수는 변수 승격 효과를 갖습니다.

(2) 함수 명령

function add(a) {
  var sum = a + 1;
  return sum;
}
로그인 후 복사
  • 은 add라는 새 변수를 선언하고 여기에 함수 정의를 할당합니다.
  • { } 사이의 콘텐츠가 추가되도록 지정되었습니다.
  • 함수 안의 코드는 선언 직후에 실행되지 않으며 나중에 사용할 수 있도록 변수에 저장됩니다.

(3) cosnt 명령

const a;     //报错,必须初始化
const b = 1; 
b = 2;      //报错,TypeError: Assignment to constant variable.
로그인 후 복사
  • const는 상수를 정의하며 초기화되어야 합니다.
  • const 키워드로 선언된 상수의 포인터는 변경할 수 없습니다. 여기서 말하는 것은 상수 포인터는 바뀔 수 없지만 포인터가 가리키는 메모리 공간의 값은 바뀔 수 있다는 것이다.
    예:
const obj = {};
obj.n = 123;
obj; // { n: 123 }
obj = { x: 1 }; // TypeError: Assignment to constant variable.
로그인 후 복사

const는 obj라는 개체를 선언합니다. obj 포인터는 개체에 속성을 추가하면 obj 주소에 저장된 개체를 변경하지 않고 개체의 데이터에 데이터를 추가합니다. 성공적이지만 obj를 재할당하는 작업으로 인해 obj의 포인터가 변경되므로 작업이 실패하고 오류가 발생합니다.
기본 유형의 경우에도 마찬가지입니다. 기본 유형의 데이터는 스택에 직접 저장되고 상수 이름은 이 주소의 데이터를 직접 가리키기 때문입니다. 값이 변경되면 포인터 주소가 변경되므로 생성됩니다. 가치를 바꿀 수 없다는 착각.

  • 이 변수는 블록 수준 범위의 전역 변수 또는 모듈 내의 전역 변수입니다.

  • 변수에 값이 선언될 때 한 번만 할당되고 다른 코드 줄에서는 다시 할당되지 않는 경우 const를 사용해야 하지만 나중에 변수의 초기 값이 조정될 수 있습니다(상수 변수 ).

  • Const 정의 변수는 일반적으로 모듈을 요구하거나 일부 전역 상수를 정의할 때 사용됩니다.

  • 상수는 해당 범위에 있는 다른 변수 또는 함수와 동일한 이름을 가질 수 없습니다.

(4) let command

에는 "javascript strict 모드"가 필요합니다. 'use strict';

----변수 승격이 없습니다

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";
로그인 후 복사

변수 b가 var로 선언되었습니다. 변수 승격이 있으므로 스크립트가 실행되기 시작하면 b가 이미 존재하지만 값이 할당되지 않았으므로 정의되지 않음이 출력됩니다.
변수 a는 let으로 선언되었으며 변수 승격이 없습니다. 변수 a를 선언하기 전에는 a가 존재하지 않으므로 오류가 보고됩니다.

중복 선언은 허용되지 않습니다

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4
로그인 후 복사

let은 한 번만 선언할 수 있고 var는 여러 번 선언할 수 있습니다.

블록 수준 범위(즉, 하나의 { }에서만 유효함)

{
  let a = 0;
  a   // 0
}
a   // 报错 ReferenceError: a is not defined
로그인 후 복사

let is 함수 내부에 정의되어 있어 함수 외부에 영향을 주지 않습니다

변수 선언 시 변수에 값을 할당할 수 있으며, 기본값은 정의되지 않은 상태로 나중에 스크립트에서 변수에 값을 할당할 수도 있습니다. 선언 전에는 사용할 수 없습니다(임시 데드존)

let a;
console.log(a);    //  undefined
console.log(b);   // ReferenceError: b is not defined
let b = 1;
a = 2;
console.log(a);     // 2
로그인 후 복사

참고: ES6에서는 코드 블록에 let 또는 const가 있는 경우 코드 블록이 블록의 시작부터 선언된 변수까지 닫힌 범위를 형성한다고 명확하게 규정합니다. 이 명령으로. 코드 블록 내에서 변수 PI를 선언하기 전에 사용하면 오류가 발생합니다.

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}
로그인 후 복사

(5) import 명령

import은 파일을 로드하는 데 사용됩니다. 중괄호 안에 수신되는 것은 하나 이상의 변수 이름입니다. 수입하다.

举个栗子:你想要导入action.js文件中的某一个变量,这个变量里保存了一段代码块,所以你要写成:import { Button } from 'action',这个时候,你就从action.js中获取到了一个叫 Button 的变量,既然获取到了,你就可以对Button里的代码猥琐欲为了

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名,比如:

import { NewButton as Button } from 'action.js';
로그인 후 복사

上面的代码表示从action.js文件中,获取一个变量名称叫做Button的代码段,然后你又声明了一个变量 NewButton ,将 Button 保存在 NewButton

(6) class命令

在es5中我们是使用构造函数实例化出来一个对象,那么构造函数与普通的函数有什么区别呢?其实没有区别,无非就是函数名称用首字母大写来加以区分,这个不用对说对es5有了解的朋友都应该知道。
但是es5的这种方式给人的感觉还是不够严谨,于是在es6中就换成了class,就是把es5中的function换成了class,有这个单词就代表是个构造函数,然后呢对象还是new出来的,这一点并没有变化。

类的使用

从里面的代码我们可以看到除了function变成了class以外,其它的跟es5一样

class Coder{
    name(val){
        console.log(val);
    }}
 let shuang= new Coder;shuang.name('shuang');
로그인 후 복사

类的传参

在es6中的对象的属性都是写在constructor里面,方法都是在原型身上。在这里面的代码用constructor约定了两个参数,然后用add()方法把参数相加,这个地方跟以前不太一样,所以需要多注意一下。

class Coder{
    name(val){
        console.log(val);
        return val;
    }

    constructor(a,b){
        this.a=a;
        this.b=b;
    }
 
    add(){
        return this.a+this.b;
    }}
 let shuang=new Coder(1,2);console.log(shuang.add());
로그인 후 복사

class的继承

class的继承就是用extends

class shuang extends Coder{
 }
 let shuang=new shuang;shuang.name('Angel爽');
로그인 후 복사

声明一个shuang的新类,用extends继承了Coder,调用里面的name方法,发现也是可以输出的。

学习总结:


一、用关键字var声明变量

1、var声明的全局对象是顶级对象(window)的属性;

2、用var在函数外声明的对象为全局变量,在函数内声明的对象为局部变量;

3、用var可以对同一对象重复声明和赋值;

4、用var声明的对象具有变量提升的作用(声明提前,赋值不提前);

二、用关键字function声明变量

1、用function声明的函数对象具有变量提升的作用(声明提前,赋值不提前);

2、function声明的函数对象是顶级对象(window)的属性;

三、用关键字let声明变量

1、用let声明的变量在块级作用域内有效;

2、let声明的变量不存在变量提升

3、let声明的变量存在暂时性死区(即同一个块级作用域中,在let声明该变量的语句之前,该变量已经存在,但是不能使用);

4、在同一个作用域内,对于let声明的变量不能重复声明。

四、用关键字const声明变量

1、const命令声明的值一旦声明,就不能再次改变;

2、const声明变量时,必须立即初始化,否则会报错(因为值一旦声明不可改变);

3、const声明的变量不存在变量提升

4、const声明的变量存在暂时性死区;

5、const声明的变量只在块级作用域内有效;

6、const变量在同一个作用域内不能重复声明。

五、关于变量提升

1、只有声明本身会被提升,而赋值操作不会被提升。

2、变量会提升到其所在函数的最上面,而不是整个程序的最上面。

3、函数声明会被提升,但函数表达式不会被提升。

4、函数声明的优先级高于普通变量申明的优先级,并且函数声明和函数定义的部分一起被提升。

5、同一个变量只会声明一次,其他的会被忽略掉。

【相关推荐:javascript视频教程web前端

위 내용은 es6의 6가지 변수 정의 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

프로파일링에 Windows 11 및 10 환경 변수를 사용하는 방법에 대한 가이드 프로파일링에 Windows 11 및 10 환경 변수를 사용하는 방법에 대한 가이드 Nov 01, 2023 pm 08:13 PM

환경 변수는 애플리케이션과 프로그램이 실행되는 위치(또는 환경)에 대한 경로입니다. 사용자가 생성, 편집, 관리 또는 삭제할 수 있으며 특정 프로세스의 동작을 관리할 때 유용합니다. Windows에서 개별적으로 편집할 필요 없이 여러 변수를 동시에 관리하기 위한 구성 파일을 만드는 방법은 다음과 같습니다. 환경 변수 Windows 11 및 10에서 프로필을 사용하는 방법 Windows에는 사용자 변수(현재 사용자에게 적용)와 시스템 변수(전역적으로 적용)라는 두 가지 환경 변수 세트가 있습니다. 그러나 PowerToys와 같은 도구를 사용하면 별도의 구성 파일을 만들어 새 변수와 기존 변수를 추가하고 한 번에 관리할 수 있습니다. 방법은 다음과 같습니다. 1단계: PowerToysPowerTo 설치

PHP7의 변수에 대한 엄격한 모드: 잠재적인 버그를 줄이는 방법은 무엇입니까? PHP7의 변수에 대한 엄격한 모드: 잠재적인 버그를 줄이는 방법은 무엇입니까? Oct 19, 2023 am 10:01 AM

엄격 모드는 개발자가 잠재적인 오류를 줄이는 데 도움이 될 수 있는 PHP7에 도입되었습니다. 이 기사에서는 엄격 모드가 무엇인지, PHP7에서 엄격 모드를 사용하여 오류를 줄이는 방법을 설명합니다. 동시에, 코드 예제를 통해 엄격 모드의 적용을 시연합니다. 1. 엄격 모드란 무엇입니까? 엄격 모드는 개발자가 보다 표준화된 코드를 작성하고 몇 가지 일반적인 오류를 줄이는 데 도움이 되는 PHP7의 기능입니다. 엄격 모드에서는 변수 선언, 유형 확인, 함수 호출 등에 대한 엄격한 제한 및 감지가 있습니다. 통과하다

Java의 인스턴스 변수 란 무엇입니까? Java의 인스턴스 변수 란 무엇입니까? Feb 19, 2024 pm 07:55 PM

Java의 인스턴스 변수는 메소드나 생성자가 아닌 클래스에 정의된 변수를 참조합니다. 인스턴스 변수는 멤버 변수라고도 합니다. 클래스의 각 인스턴스에는 인스턴스 변수의 자체 복사본이 있습니다. 인스턴스 변수는 객체 생성 중에 초기화되며 해당 상태는 객체 수명 동안 저장 및 유지됩니다. 인스턴스 변수 정의는 일반적으로 클래스의 맨 위에 배치되며 public, private, protected 또는 기본 액세스 한정자를 비롯한 모든 액세스 한정자를 사용하여 선언할 수 있습니다. 그것은 우리가 원하는 것이 무엇인지에 달려 있습니다.

Jul 24, 2023 pm 09:33 PM

PHP 함수 소개—strpos(): 변수가 문자열인지 확인합니다. PHP에서 is_string()은 변수가 문자열인지 확인하는 데 사용되는 매우 유용한 함수입니다. 변수가 문자열인지 확인해야 할 때 is_string() 함수를 사용하면 이 목표를 쉽게 달성할 수 있습니다. 아래에서는 is_string() 함수를 사용하는 방법에 대해 알아보고 관련 코드 예제를 제공합니다. is_string() 함수의 구문은 매우 간단합니다. 그것은 단지 필요하다

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.

내부 오류: 임시 디렉터리를 생성할 수 없습니다. [해결됨] 내부 오류: 임시 디렉터리를 생성할 수 없습니다. [해결됨] Apr 17, 2023 pm 03:04 PM

Windows 시스템에서는 사용자가 실행 파일/설정 파일을 사용하여 시스템에 다양한 유형의 응용 프로그램을 설치할 수 있습니다. 최근 많은 Windows 사용자가 실행 파일을 사용하여 응용 프로그램을 설치하려고 할 때 시스템에 INTERNALERROR:cannotCreateTemporaryDirectory라는 오류가 발생한다고 불평하기 시작했습니다. 문제는 이에 국한되지 않고 사용자가 Windows 시스템에도 설치된 기존 응용 프로그램을 시작하지 못하게 합니다. 몇 가지 가능한 이유는 다음과 같습니다. 관리자 권한을 부여하지 않고 설치하려면 실행 파일을 실행하세요. TMP 변수에 유효하지 않거나 다른 경로가 제공되었습니다. 손상된 시스템

Python 구문 마인드맵: 코드 구조에 대한 심층적인 이해 Python 구문 마인드맵: 코드 구조에 대한 심층적인 이해 Feb 21, 2024 am 09:00 AM

Python은 간단하고 읽기 쉬운 구문으로 다양한 분야에서 널리 사용됩니다. 프로그래밍 효율성을 높이고 코드 작동 방식을 깊이 이해하려면 Python 구문의 기본 구조를 숙지하는 것이 중요합니다. 이를 위해 이 기사에서는 Python 구문의 다양한 측면을 자세히 설명하는 포괄적인 마인드 맵을 제공합니다. 변수 및 데이터 유형 변수는 Python에서 데이터를 저장하는 데 사용되는 컨테이너입니다. 마인드맵은 정수, 부동 소수점 숫자, 문자열, 부울 값 및 목록을 포함한 일반적인 Python 데이터 유형을 보여줍니다. 각 데이터 유형에는 고유한 특성과 작업 방법이 있습니다. 연산자 연산자는 데이터 유형에 대한 다양한 작업을 수행하는 데 사용됩니다. 마인드맵은 산술 연산자, 비율 등 Python의 다양한 연산자 유형을 다룹니다.

C 언어의 변수 수명주기를 설명하십시오. C 언어의 변수 수명주기를 설명하십시오. Sep 02, 2023 pm 07:37 PM

스토리지 클래스는 변수의 범위, 수명 및 바인딩을 지정합니다. 변수를 완전히 정의하려면 변수의 "유형"뿐만 아니라 저장 클래스도 언급해야 합니다. 변수 이름은 변수 값을 저장하기 위해 비트 집합이 할당되는 컴퓨터 메모리의 물리적 위치를 식별합니다. 스토리지 클래스는 다음 요소를 알려줍니다. 변수는 어디에 저장됩니까(메모리 또는 CPU 레지스터에)? 초기화되지 않은 경우 변수의 초기값은 얼마입니까? 변수의 범위(변수에 액세스할 수 있는 범위)는 무엇입니까? 변수의 수명주기는 무엇입니까? 수명 변수의 수명은 컴퓨터가 메모리를 할당하는 기간(메모리 할당과 할당 해제 사이의 기간)을 정의합니다. C 언어에서 변수는 자동, 정적 또는 동적 수명 주기를 가질 수 있습니다. 자동 - 자동으로 라이프 사이클을 생성합니다.

See all articles