>  기사  >  웹 프론트엔드  >  es6의 6가지 변수 정의 방법은 무엇입니까?

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

青灯夜游
青灯夜游원래의
2023-01-29 19:10:592042검색

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으로 문의하세요.