轻键快码

Javascript 新特性

轻键快码 Javascript

变量声明 let, const 与 var

  • 用 let 和 const 声明的变量拥有块状作用域, var 没有。
  • 用 var 声明的变量存在变量提升现象,let 和 const 没有(未声明前不可使用)。
  • let 和 const 在相同作用域内不允许重复声明。
  • const 用来声明一个常量,一旦声明值不可变。

箭头函数

可以用 => 符号来定义函数。

const myFunction = (s) => console.log('Hello', s)

myFunction('Tomorrow') // Hello Tomorrow

函数默认参数

function add1 (a, b) {
  a = a || 1
  b = b || 2
  return a + b
}

const add2 = (a = 1, b = 2) => a + b
const c = add2(3, 4) // 7
const d = add2()  // 3

数组, 对象解构

解构用来从数据结构中提取出一些值创建新的变量。

const myCat = {
    name: 'ketty',
    age: 2,
    weigth: 4,
    sex: 'm'
}
const myFriends = ['Kevin', 'June', 'Bob']

const { name, age, sex } = myCat // ketty, 2, m
const { k, j } = myFiends // Kevin, June

扩展运算符

扩展运算副用于迭代类似数组的元素以及数组。

const newFriends = ['Whitney', 'Brandi', 'Gisselle']
const myFriends = ['Jose', 'Anabel']

const friends = [...newFriends, ...myFriends]
// ["Whitney", "Brandi", "Gisselle", "Jose", "Anabel"]

模版字符串

模板字符串是更好用的字符串,用反引号(`)标识。即可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

const name = 'Marianna'

console.log(`My name is ${name}`) // My name is Marianna

标签模版

标签模板可以紧跟在一个函数名后面,调用该函数来处理这个模板字符串。

function mark (s) {
  return `<mark>${s}</mark>`
}

mark`Fiona` // "<mark>Fiona</mark>"

Class 关键字

使用 Class 关键字可以在 javascript 中定义类,实际上任然是基于原型继承的语法糖.

function Dog(name) {
  this.name = name
  this.voice = '汪.'
}
Dog.prototype.say = function () {
  console.log(this.voice)
}

class Cat {
  constructor (name) {
    this.name = name
    this.voice = '喵.'
  }
  say () {
    console.log(this.voice)
  }
}

const myDog = new Dog('Karley')
const myCat = new Cat('Roosevelt')

myDog.say() // 汪.
myCat.say() // 喵.

async 函数

使用 async 关键字可以用来创建更方便的对异步操作进行处理的函数。

async function getUser (api, name) {
  const user = await fetch(`${api}/${name}`)
  return user.json()
}

getUser('Lawrence').then(res => console.log(res))

更多参考