es6常用语法

2021-03-11  本文已影响0人  zyghhhh

const 和 let

在es6语法规范中,尽量使用let替代var,如果在const 和let中选,优先使用const ,下面是特性介绍和对比

字符串新增方法

注释:字符串底层是用类似数组形式存储的.

  1. 模版字符串
模版字符串使用``两个反引号,变量的部分放在${}中就会当做js代码去解析,里面可以放变量,表达式甚至是函数
let name = '张三'
let age = 18
//es5
let query = 'name='+name+'&age='+18
console.log(query)  // name=张三age=18

//es6
query = `name=${name}&age=${age}`
console.log(query)  // name=张三age=18
  1. for of遍历字符串
var str = 'hello word'
for(let i of str){
    console.log(i)
}

数值操作

对象的扩展操作

  1. 对象的解构赋值
//通过这样的形式可以直接拿到对象中的属性
  var obj = {
    a:1,
    b:2,
    c:3,
    d:4
}
//es5  这样很累 代码多
const a = obj.a
const c = obj.c

//es6可以这样直接拿到
const {a,c} = obj
  1. 对象的简写形式
    • 当属性名称和属性值相同时可以简写,这在很多场景可以使用,比如react更新数据状态setState,比如发请求可以把参数写为跟参数一样的变量
let [x,y] = [1,2]  //这是es6声明多个变量的方法 只要等号两个位置对应就可以对应声明变量

let obj2 = {
    x,y 
}
console.log(obj2); //x是1  y是2 与上面的同名变量一样 就可以简写了

这样返回结果更方便
function fn2 () {
    const x = 3;
    const y = 4;
    return {x,y}
}

console.log(fn2()); {x:3,y:4}
  1. 对象中方法的简写形式
在vue中 在很多地方都可以这么写方法
let obj1 = {
    //es5
    a: function(){
        console.log('这是obj1的a')
    },
    //es6简写
    b(){
        console.log('这是obj1的b')
    }
}
obj1.a()
obj1.b()

4.对象扩展运算符 ... (遍历对象中所有可枚举属性赋值到当前对象中)

let z = { a: 3, b: 4 };
let n = {c:5,...z };
n // { c:5,a: 3, b: 4 }

数组的扩展扩展操作

上一篇下一篇

猜你喜欢

热点阅读