ES6新属性

ES6新增属性

因为node用的大部分是ES6的语法,所以要先学习一下ES6新语法

let-变量声明

在ES5中的变量声明为var,而ES6新增变量声明let

区别 var let
变量提升 ×
块级作用域 ×(函数作用域)
重复声明 ×
重新赋值

const-常量声明

  • 没有变量提升
  • 新增块级作用域
  • 不可重复声明
  • 不可以重新赋值
  • 必须初始化

对象的解构赋值

就是把一个对象的属性对应的值赋值给了一个或多个变量

  • 写法:
    • 期中左边的为对象的键对应的值,右边的是要被赋值的变量
let {
    
     name: name1, age: age1 } =  {
    
    name: '名字',age: 18}
console.log(name1, age1)
  • 简写:
    • 如果对象的键和变量一个名就可以简写为:
let {
    
     name: name, age: age } =  {
    
    name: '名字',age: 18}
//上面的简写
let {
    
     name, age } = obj
  • 默认值:
    • 如果对象的属性值为undefined时触发默认值
    • 否者就算有默认值还会赋值为对象的属性值
let {
    
     name, age, favor = '打游戏' } =  {
    
    name: '名字',age: 18}

数组的解构赋值

把数组的值依次赋值给变量

  • 写法:
    • 在一个中括号中写入要赋值的变量
let [num1, num2, num3] = [1, 2, 3]
  • 默认值
    • 如果数组的值为undefined时触发默认值
    • 否者就算有默认值还会赋值为数组的值
let [nu1, nu2, nu3, nu4 = 100] = [1, 2, 3]
  • 特殊写法:
    • …变量(把后面的元素都装进一个数组中并赋值给变量)
    • 不想赋值就写一个","就会略过对应元素
let [head, ...tail] = [1, 2, 3, 4];
console.log(x, tail)//1 [ 2, 3, 4 ]

let [x, , y] = [1, 2, 3];
console.log(x, y)//1 3

解构赋值配合函数声明

可以利用解构赋值来简化传参和可以设置默认值

function fun({
    
     name, age, favor = '默认值' } = {
    
    }) {
    
    
    console.log(name, age, favor)
}
//相当于:{ name, age, favor = '默认值' }={name: 'zjl',age: 20}
fun({
    
    
    name: 'zjl',
    age: 20
})
//相当于指向默认值{}
fun()

箭头函数

箭头函数就是匿名函数的一个简写

  • 箭头函数的简写规律

在这里插入图片描述

//test 1
var f = name => console.log(name)
f('zjl')

//test 2
var fu = () => true
console.log(fu())

//test 3
var fun = (name, age) => {
    
    
    console.log(name, age)
    return false
}
console.log(fun('zjl', 18))

对象成员的简写

如果有变量和对象中的键的名称一样时,对象就可以进行简写

  • 除了属性可以简写,方法也可以简写
let name = 'zjl';
let age = 18;
let obj = {
    
    
    name,//name:name
    age,//age:age
    item: age,
    sayMe() {
    
    //sayMe:function(){console.log('hello world!')}
        console.log('hello world!')
    }
}

展开运算符

展开运算符分为,对象展开和数组展开

  • 对象展开

就是把一个对象的所有元素赋值到另一个对象中

let boy = {
    
    
    name: '王刚',
    age: 20
}
let favor = {
    
    
    kill: '征服',
    sayHi() {
    
    
        console.log('滚!!')
    }
}
let obj = {
    
    
    ...boy,//就相当于boy对象的所有元素
    ...favor,//就相当于favor对象的所有元素
    name: 'zjl'//boy也有name属性,但是这个是后写的,所以要覆盖boy中的name属性
}
  • 数组展开

把数组的每个值拎出来

/**
 * 数组展开主要应用于:
    * 数组拼接
    * Math.min()和Math.max()
*/

//数组拼接
let list1 = [1, 2, 3]
let list2 = [...list1, 4, 5, 6]
console.log(...list1)//1,2,3

//数组最大值,最小值
//以前做法
console.log(Math.max.apply(Math, list2))//6
//数组展开做法
console.log(Math.max(...list2))//6

Set数据类型

  • 用途:数组去重
  • 返回值:Set类型的对象
var arr = [10, 20, 30, 40, 10, 20, 50]

//方式1
var arrSet = new Set(arr)
//因为是个Set类型的对象。要转回成数组
var newArr = [...arrSet]

//方式2(简写)
let newarr = [...new Set(arr)]

模板字符串

用``表示,会保留原样字符串格式,以及可以占位

  • ${}表示引入变量,和调用函数并返回值的符号

NH3VZq.png

var fn = () => '我很好'
console.log(`你好吗,${
      
      fn()}`)//你好吗,我很好

ES6转成浏览器兼容的ES5

网址—>https://www.babeljs.cn/

NHOI78.png

猜你喜欢

转载自blog.csdn.net/CSDNzhaojiale/article/details/107080067