일반적인 ES6 코드 단순화 기술

해체하다

Destructuring: 데이터 구조를 더 작은 부분으로 분해하는 프로세스입니다. ES6에서는 배열과 객체에서 값을 추출하고 변수에 값을 할당합니다.

그렇다면 해체의 용도는 무엇입니까?

1. 可以大大的简化变量声明操作。
   

// ES5
var foo = 1
var bar = 2
var baz = 3

// ES6
let [foo, bar, baz] = [1, 2, 3]

1. 变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的 x。
   

let x = 1
let y = 2
;[x, y] = [y, x]
// x = 2, y = 1

1. 对象解构
   

var obj = { x: 1, y: 2, c: 1 }
let { x, y } = obj
// x = 1
// y = 2

1. 字符串解构
   

const [a, b, c, d, e] =  hello 
// a => h
// b => e
// c => l
// d => l
// e => o

1. 函数参数解构
   

const xueyue = {
  name:  雪月 ,
  age: 18,
}

function getAge({ name, age }) {
  return `${name}今年${age}岁`
}

getAge(xueyue) // 雪月今年18岁

화살표 기능

ES6 화살표를 사용하여  => 기능을 정의 할 수 있습니다.

var f = v => v

// 等同于 ES5 的
var f = function (v) {
  return v
}

화살표 함수가 매개변수를 사용하지 않거나 여러 매개변수가 필요한 경우 괄호를 사용하여 매개변수 부분을 나타냅니다.

var f = () => 5
// 等同于 ES5 的
var f = function () {
  return 5
}

var sum = (numl, num2) => numl + num2
// 等同于 ES5 的
var sum = function (numl, num2) {
  return numl + num2
}

화살표 함수는 구조 분해와 함께 사용할 수 있습니다.

const full = ({ first , last }) => first +     + last;
// 等同于 ES5 的
function full(person) {
  return person.first +     + person.last;
}

화살표 함수는 표현식을 더 간결하게 만듭니다.

const isEven = n => n % 2 === 0
const square = n => n * n

var result = values.sort((a, b) => a - b)
// 等同于 ES5 的
var result = values.sort(function (a, b) {
  return a - b
})

위의 코드는 두 줄만 사용하여 두 개의 간단한 유틸리티 함수를 정의합니다. 화살표 기능을 사용하지 않으면 여러 줄을 차지할 수 있으며 지금처럼 눈에 띄지 않습니다.

화살표 기능 사용 시 주의사항

1. 함수 본문의  개체는 this 사용되는 개체가 아니라 정의된 개체입니다.

2. 생성자로 사용할 수 없습니다. 즉,  new 명령을 사용할 수 없습니다. 그렇지 않으면 오류가 발생합니다.

3. 개체를 사용할 수 없습니다  arguments . 개체가 함수 본문 내에 존재하지 않습니다. 사용하려면  rest 매개변수를 대신 사용할 수 있습니다.

4. 명령을 사용할 수 없으므로  화살표 기능을  기능으로 yield 사용할 수 없습니다  .Generator

위의 네 가지 항목 중 첫 번째 항목이 특히 주목할 만합니다. this 객체의 포인팅은 변경 가능하지만 화살표 함수에서는 고정되어 있습니다.

// ES6
function foo() {
  setTimeout(() => {
    console.log( id: , this.id)
  }, 100)
}

// 转换成ES5
function foo() {
  var _this = this

  setTimeout(function () {
    console.log( id: , _this.id)
  }, 100)
}

위의 코드에서 변환된  ES5 버전은 화살표 함수가 자체가 전혀 없지만  this외부 레이어를 참조한다는 것을  명확하게 보여줍니다 this.

템플릿 문자열

템플릿 문자열( template string )은  (``) 백틱으로 표시된 문자열의 향상된 버전입니다. 일반 문자열로 사용하거나 여러 줄 문자열을 정의하거나 문자열에 변수를 포함하는 데 사용할 수 있습니다.

const { log } = console
const name =  雪月 
const age = 18

// 普通字符串拼接
const result = name +  今年  + age +  岁 
// 使用模板字符串
const result2 = `${name}今年${age}岁`
log(result) // 雪月今年18岁
log(result2) // 雪月今年18岁

// ${} 大括号可以放入任意的 JavaScript 表达式，可以进行运算
const result3 = `${name}今年${age * 2}岁`
log(result3) // 雪月今年36岁

나머지 인수/확장 구문

...变量名ES6 는 객체를 사용할 필요가 없도록 함수의 중복 매개변수를 가져오는 데 사용되는  나머지 매개변수( 의 형식으로)를 도입합니다 arguments . rest 인수 배열 변수는 추가 인수가 배치되는 배열입니다.

function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort()
}
// 使用 rest
const sortNumbers = (...numbers) => numbers.sort()

rest 위의 두 가지 작성 방법을 비교하면 매개변수 작성 방법이 더 자연스럽고 간결하다는 것을 알 수 있습니다  .

스프레드 연산자(  )  는 매개변수의 역 연산이 배열을 쉼표로 구분된 일련의 매개변수로 바꾸기 spread 때문에 세 개의 점(...)입니다. rest

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

다음은 확산 연산자 대체  방법 apply 의 실제 예  입니다. Applied Math.max 방법은 배열에서 가장 큰 요소를 찾는 것을 단순화합니다.

// ESS 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77)

스프레드 연산자는 배열을 결합하는 새로운 방법을 제공합니다.

//  ESS
;[1, 2].concat(more)
// ES6
;[1, 2, ...more]

개체의 스프레드 연산자(...)는 매개 변수 개체의 순회 가능한 모든 속성을 꺼내 현재 개체에 복사하는 데 사용됩니다.

let z = { a: 3, b:  bb  }
let n = { ...z }
n // { a: 3, b:  bb  }
n === z // false

특별 주의 사항: ... 개체 확장은 개체 속성이  基本数据类型 yes  深拷贝일  때만 수행할 수 있으며 引用数据类型이면 입니다 浅拷贝.

let z = { a: 3, b:  bb , c: { name:  ccc  } }
let n = { ...z }

n // { a: 3, b:  bb , c: { name:  ccc  } }
n === z // false
n.c === z.c // true
// n.c 跟 z.c 是同一个引用地址

객체 리터럴 속기 구문

const name =  雪月 

// ES5写法
const obj = {
  name: name,
  f: function () {
    console.log(this.name)
  },
}

// ES6简写
const obj2 = {
  name,
  f() {
    console.log(this.name)
  },
}

obj.f() // 雪月
obj2.f() // 雪月

그것을 사용하는  학생들이 vue 친숙하게 느끼는가 ?

new Vue({
  el:  #app ,
  data() {
    return {
      list: [],
    }
  },
})

배열 인스턴스의 경우 includes()

Array.prototype.includes 메서드는 문자열의 includes 메서드와 유사하게 배열에 주어진 값이 포함되어 있는지 여부를 나타내는 부울을 반환합니다. ES2016에서는 이 방법을 도입했습니다.

;[1, 2, 3].includes(2) // true
;[1, 2, 3].includes(4) // false
;[1, 2, NaN].includes(NaN) // true

이 메소드 전에는 일반적으로 배열의 indexOf 메소드를 사용하여 특정 값이 포함되어 있는지 확인합니다.

// ES5
if (arr.indexOf(el) !== -1) {
  // ...
}

// ES6
if (arr.includes(el)) {
  // ...
}

// 那么 indexOf 能不能做到类似于 includes 的写法呢？ 我们可以利用 ~ 位运算符
if (~arr.indexOf(el)) {
  // ...
}

indexOf 이 방법은 두 가지 단점이 있는데, 하나는 의미론적이지 않다는 것인데, 그 의미가 매개변수 값의 첫 번째 발생 위치를 찾는 것이므로 -1과 같지 않은지 비교할 만큼 직관적이지 않습니다. 두 번째는 완전 항등 연산자(===)를 사용하여 내부적으로 판단하여 오판을 유도한다는 것입니다  NaN .

;[NaN].indexOf(NaN)
// -1

includes 다른 판단 알고리즘을 사용하여 이러한 문제가 없습니다.

;[NaN].includes(NaN)
// true