JS的ES6新增基础知识点-EW帮帮网

1. 字面量增强

var name = "hgf"
var age = 20

var obj = {
  // 1.property shorthand(属性的简写)
  name,
  age,

  // 2.method shorthand(方法的简写)
  foo: function() {
    console.log(this)
  },
  bar() {
    console.log(this)
  },
  baz: () => {
    console.log(this)
  },

  // 3.computed property name(计算属性名)
  [name + 123]: 'hehehehe'
}

2. 数组/对象的结构

// 数组结构
var names = ["abc", "cba", "nba"]
// var item1 = names[0]
// var item2 = names[1]
// var item3 = names[2]

// 对数组的解构: []
var [item1, item2, item3] = names
console.log(item1, item2, item3)

// 解构后面的元素
var [, , itemz] = names
console.log(itemz)

// 解构出一个元素,后面的元素放到一个新数组中
var [itemx, ...newNames] = names
console.log(itemx, newNames)

// 解构的默认值
var [itema, itemb, itemc, itemd = "aaa"] = names
console.log(itemd)

// 对象结构
var obj = {
  name: "hgf",
  age: 20,
  height: 1.80
}

// 对象的解构: {}
var { name, age, height } = obj
console.log(name, age, height)

var { age } = obj
console.log(age)

var { name: newName } = obj
console.log(newName)

var { address: newAddress = "广州市" } = obj
console.log(newAddress) // "广州市"

3. let/const的基本使用

①let/const的定义：

let关键字：直观角度，let和var没有太大区别，都是用于声明一个变量；

const关键字：声明常量，表示保存的数据一旦被赋值，就不能再修改，如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对应的内容；

注意：let、const不允许重复声明变量；

②let/const的作用域提升：

我们知道var声明的变量会进行作用域提升，但是如果使用let/const声明的变量，在声明之前访问会报错；

③let/const和window关系：

在v8引擎中，是通过VariableMap的一个hashmap实现存储的；

④块级作用域的理解：

ES5中只有两个作用域

全局作用域
函数作用域

ES6中的{}具有块级作用域

注意：ES6的代码块{}作用域对let/const/function/class 的声明的类型有效

对var声明无效

注意：function 特殊之处：函数还是没有块级作用域

// ES6的代码块级作用域
// 对let/const/function/class声明的类型是有效
{
  let foo = "why"
  function demo() {
    console.log("demo function")
  }
  class Person {}
}

// console.log(foo) // foo is not defined
// 不同的浏览器有不同实现的(大部分浏览器为了兼容以前的代码, 让function是没有块级作用域)
// demo()  // 输出  "demo function"
var p = new Person() // 报错Person is not defined

if-switch_for块级作用域等语句ES6之后也有块级作用域；

⑤暂时性死区：

我们知道，在使用let、const声明变量时，在声明之前，变量都是不可以访问的，如果访问了会报错，而var声明的变量，在声明之前可以访问，只是值为undefined，不会报错。这就是let、const声明的变量与var声明的变量的不同之处之一，其实let、const声明的变量在代码编译阶段也是和var声明的变量一样，都创建了变量，只是let、const声明的变量在赋值之前都不可以访问，这种现象称之为暂时性死区。

4. 模板字符串的基本使用：

// ES6之前拼接字符串和其他标识符
const name = "hgf"
const age = 20
const height = 1.80

// console.log("my name is " + name + ", age is " + age + ", height is " + height)

// ES6提供模板字符串 ``
const message = `my name is ${name}, age is ${age}, height is ${height}`
console.log(message) // my name is hgf, age is 20, height is 1.80

5. ES6中函数的默认参数：

ES5以及之前给参数的默认值

0会被认为是false

// ES5以及之前给参数默认值
/**
 * 缺点:
 *  1.写起来很麻烦, 并且代码的阅读性是比较差
 *  2.这种写法是有bug
 */
function foo(m, n) {
  m = m || "aaa"
  n = n || "bbb"

  console.log(m, n)
}

foo(0, "") // 输出的时aaa  bbb   传递参数0了被认为是false

ES6的参数默认值写法：

// 1.ES6可以给函数参数提供默认值
function foo(m = "aaa", n = "bbb") {
  console.log(m, n)
}

foo(0, "") // 0  "会输出空字符 "

对参数和默认值的解构：

// 2.对象参数和默认值以及解构
function printInfo({name, age} = {name: "hgf", age: 20}) {
  console.log(name, age)
}

printInfo({name: "kobe", age: 40})  // kobe  40

6. ES6中的函数的剩余参数：

function foo( m, n,  ...args) {
  console.log(m, n)
  console.log(args)

  console.log(arguments)
}

foo(20, 30, 40, 50, 60)  //20, 30, 40, 50, 60

剩余参数与arguments的区别：

①剩余参数只包含那些没有对应形参的实参，而arguments对象包含了传给函数的所有实参；

②arguments对象不是一个真正的数组，而rest参数是一个数组，可以进行数组的所有操作；

③arguments是早期的ECMAScript中为了方便去获取所有的参数提供了一个数据解构，而rest参数是ES6中提供并希望代替arguments；

7. 箭头函数的补充：

箭头函数没有显示原型prototype，也没有this，arguments从上层找；

8. 展开语法：

展开运算符进行的是一个浅拷贝过程

const names = ["abc", "cba", "nba"]
const name = "hgf"
const info = {name: "hgf", age: 18}

// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z)
}

// foo.apply(null, names)
foo(...names)  // abc cba nba
foo(...name) h g f

// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames) // [abc, cba, nba, h, g, f[

// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: "广州市", ...names }
console.log(obj)
输出： // {
  '0': 'abc',
  '1': 'cba',
  '2': 'nba',
  name: 'hgf',
  age: 18,
  address: '广州市'
}

9. ES6表示数值的方式：

const num1 = 100 // 十进制

// b -> binary
const num2 = 0b100 // 二进制
// o -> octonary
const num3 = 0o100 // 八进制
// x -> hexadecimal
const num4 = 0x100 // 十六进制

console.log(num1, num2, num3, num4)

// 大的数值的连接符(ES2021 ES12)
const num = 10_000_000_000_000_000
console.log(num)

10. ES6的新增数据类型Symbol的基本使用：

// 2.ES6中Symbol的基本使用
const s1 = Symbol()
const s2 = Symbol()

console.log(s1 === s2)

// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol("aaa")
console.log(s3.description)


// 3.Symbol值作为key
// 3.1.在定义对象字面量时使用
const obj = {
  [s1]: "abc",
  [s2]: "cba"
}

// 3.2.新增属性
obj[s3] = "nba"

// 3.3.Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: "mba"
})

console.log(obj[s1], obj[s2], obj[s3], obj[s4])

//false
//aaa
//abc cba nba mba

JS的ES6新增基础知识点