집 > 기사 > 웹 프론트엔드 > JavaScript의 연산자 및 표현식 소개

JavaScript의 연산자 및 표현식 소개

不言원래의: 2018-09-11 17:01:331424검색

이 글은 JavaScript의 연산자와 표현식을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 단항 연산자

1.delete 연산자

delete 연산자는 객체의 속성을 삭제하는 데 사용됩니다. 이 속성에 대한 참조가 없으면 결국 해제됩니다.

구문: 삭제 표현식

연산자는 객체에서 지정된 속성을 제거합니다. 성공적으로 삭제되면 true를 반환하고 그렇지 않으면 false를 반환합니다.

typeof 연산자는 계산되지 않은 피연산자의 유형을 나타내는 문자열을 반환합니다.

구문: typeof 피연산자; typeof(피연산자)

   let Employee = {
        age: 28,
        name: 'abc',
        designation: 'developer'
    };
    console.log(delete Employee.name);   // returns true
    console.log(delete Employee.age);    // returns true
    console.log(Employee); //{designation: "developer"}

3.void 연산자

void 연산자는 주어진 표현식을 평가하고 정의되지 않은 것을 반환합니다.

구문: void 표현식

    typeof NaN === 'number';
    typeof Number(1) === 'number';
    typeof "" === 'string';
    typeof true === 'boolean';
    typeof Symbol('foo') === 'symbol';
    typeof undefined === 'undefined';
    typeof null === 'object'
    typeof [1, 2, 4] === 'object';
    typeof new Boolean(true) === 'object';
    typeof new Number(1) === 'object';
    typeof new String("abc") === 'object';
    typeof function(){} === 'function';

2. 관계형 연산자

1.in 연산자

if 지정된 속성이 지정된 개체 또는 해당 프로토타입 체인에 있는 경우 in 연산자는 반환합니다. true

구문: prop in object

<a href="javascript:void(0);">
  这个链接点击之后不会做任何事情，如果去掉 void()，
  点击之后整个页面会被替换成一个字符 0。
</a>
<p> chrome中即使<a href="javascript:0;">也没变化，firefox中会变成一个字符串0 </p>
<a href="javascript:void(document.body.style.backgroundColor=&#39;green&#39;);">
  点击这个链接会让页面背景变成绿色。
</a>

2.instanceof 연산자

instanceof 연산자는 객체가 프로토타입 체인에 있는지 테스트하는 데 사용됩니다. 생성자의 프로토타입 속성이 있습니다

구문: object instanceof constructor

    let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
    console.log(0 in trees); // 返回true
    console.log(3 in trees); // 返回true
    console.log(6 in trees); // 返回false
    console.log("bay" in trees); // 返回false (必须使用索引号,而不是数组元素的值)
    console.log("length" in trees); // 返回true (length是一个数组属性)

3. Expression

1.this

함수 내부에서 this의 값은 함수가 호출되는 방식에 따라 달라집니다. 엄격 모드에서 this는 실행 컨텍스트에 들어갈 때 해당 값을 유지하므로 다음의 this는 기본적으로 정의되지 않은

    let simpleStr = "This is a simple string";
    let myString  = new String();
    let newStr    = new String("String created with constructor");
    let myDate    = new Date();
    let myObj     = {};
    simpleStr instanceof String; // 返回 false, 检查原型链会找到 undefined
    myString  instanceof String; // 返回 true
    newStr    instanceof String; // 返回 true
    myString  instanceof Object; // 返回 true
    myDate instanceof Date;     // 返回 true
    myObj instanceof Object;    // 返回 true, 尽管原型没有定义

로 설정됩니다. 함수가 본문에 this 키워드를 사용하면 함수를 사용하여 Function.prototype에서 상속될 수 있습니다. 호출 또는 적용 메소드는 this 값을 호출의 특정 객체에 바인딩합니다.

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}
f2() === undefined; // true

f.bind(someObject)를 호출하면 f와 동일한 함수 본문과 범위를 가진 함수가 생성되지만 이 새 함수에서는 this가 영구적으로 바인딩됩니다. 함수 호출 방식에 관계없이 바인드의 첫 번째 인수에

function add(c, d) {
  return this.a + this.b + c + d;
}
let o = {a: 1, b: 3};
// 第一个参数是作为‘this’使用的对象
// 后续参数作为参数传递给函数调用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

화살표 함수에서 이는 둘러싸는 어휘 컨텍스트의 this와 일치합니다. 전역 코드에서는 전역 객체

function f(){
  return this.a;
}
let g = f.bind({a:"azerty"});
console.log(g()); // azerty
let h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

2.super

로 설정됩니다. 구문:

super([arguments]) // 상위 객체/상위 클래스의 생성자를 호출합니다.

super.functionOnParent([arguments ]) ; // 상위 객체/상위 클래스에서 메서드를 호출합니다.

생성자에서 사용하면 super 키워드가 단독으로 나타나므로 this 키워드를 사용하기 전에 사용해야 합니다. super 키워드는 상위 개체의 함수를 호출하는 데에도 사용할 수 있습니다

let globalObject = this;
let foo = (() => this);
console.log(foo() === globalObject); // true

3.new

new 연산자는 사용자 정의 개체 유형의 인스턴스 또는 생성자를 사용하여 내장 개체의 인스턴스를 생성합니다

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'

4. 구문 확장

함수 호출/배열 구성 중에 구문 수준에서 배열 표현식이나 문자열을 확장할 수 있습니다. 리터럴 객체를 구성할 때 키-값 용어로 객체 표현식을 확장할 수도 있습니다.

함수 호출 중에 확장 사용 구문

function Car() {}
car1 = new Car()
console.log(car1.color)           // undefined
Car.prototype.color = null
console.log(car1.color)           // null
car1.color = "black"
console.log(car1.color)           // black

리터럴 배열을 생성할 때 확장 구문을 사용하세요

function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction.apply(null, args);

//展开语法
function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction(...args);

배열 복사

let parts = ['shoulders'，'knees']; 
let lyrics = ['head'，... parts，'and'，'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

여러 배열 연결

let arr = [1, 2, 3];
let arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

5. 클래스 표현식

클래스 표현식은 클래스 A 구문을 정의하는 데 사용됩니다

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
let arr3 = arr1.concat(arr2);

//使用展开语法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
let arr3 = [...arr1, ...arr2];

6. 함수 표현식

함수 키워드를 사용하여 표현식에서 함수를 정의할 수 있습니다. 함수 생성자와 함수 선언을 사용하여 함수를 정의할 수도 있습니다.

함수 선언 호이스팅 및 함수 표현식 호이스팅
: JavaScript의 함수 표현식은 그렇지 않습니다. 호이스트된 함수 선언과 달리 정의하기 전에는 함수 표현식을 사용할 수 없습니다

let Foo = class {
  constructor() {}
  bar() {
    return "Hello World!";
  }
};
let instance = new Foo();
instance.bar(); 
// "Hello World!"

7. function* 표현식

function

키워드는 표현식 내부에 있을 수 있습니다. 생성기 함수 function

이 선언 방법(별표가 뒤에 오는 함수 키워드)은 생성기 객체를 반환하는 생성기 함수(생성기 함수) 정의구문: function* name([param[, param [, ... param]]]) { 명령문 }

/* 函数声明 */

foo(); // "bar"
function foo() {
  console.log("bar");
}


/* 函数表达式 */

baz(); // TypeError: baz is not a function
let baz = function() {
  console.log("bar2");
};

Receive 매개변수

function* idMaker(){
  let index = 0;
  while(index<3)
    yield index++;
}

let gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined

Pass 매개변수

function* idMaker(){
    let index = arguments[0] || 0;
    while(true)
        yield index++;
}

let gen = idMaker(5);
console.log(gen.next().value); // 5
console.log(gen.next().value); // 6

Expression

function *createIterator() {
    let first = yield 1;
    let second = yield first + 2; // 4 + 2 
                                  // first =4 是next(4)将参数赋给上一条的
    yield second + 3;             // 5 + 3
}

let iterator = createIterator();

console.log(iterator.next());    // "{ value: 1, done: false }"
console.log(iterator.next(4));   // "{ value: 6, done: false }"
console.log(iterator.next(5));   // "{ value: 8, done: false }"
console.log(iterator.next());    // "{ value: undefined, done: true }"