常见的ES6语法

ES6

使用箭头函数简化代码

var obj = {
    typ: Object,
    default: () => ({})
}

上面的代码是下面代码的简写形式

var obj = {
    type: Object,
    default: function () {
        return {};
    }
}

简化方法的写法

var obj = {
    create() {
        console.log("调用创建obj对象的方法");
    }
};

obj.create();

上面的代码是下面代码的简写形式

var obj = {
    create: function () {
        console.log("调用创建obj对象的方法");
    }
};

obj.create();

对象合并

下面的代码实现了将obj1对象和obj2对象合并到了一起,并且将合并后的值赋值给obj3

var obj1 = {
    name: "meishadevs"
};

var obj2 = {
    job: "Front-end development"
};

var obj3 = Object.assign(obj1, obj2);

obj3的值如下

模板语法

let str1 = 'hello'
let str2 = 'world'
let str3 = `${str1} ${str2}`

str3的值如下

hello world

数据筛选

let array = [5, 6, 7, 8, 9, 10]

// 筛选出数组中数值大于 7 的数据
let arr = array.filter((value) => {
    return value > 7
})

arr的值如下

[8, 9, 10]

使用 forEach 遍历数组

let array = [2, 4, 6, 8, 10]

array.forEach(item => {
  console.log('item:', item)
})

使用对象展开运算符合并对象

两个对象存在同名的字段时,后面对象的字段值会覆盖前面对象的字段值

let obj1 = {
  name: 'meishadevs',
  age: 25,
  sex: '男'
}

let obj2 = {
  name: '小红',
  age: 21,
  sex: '女',
  hobby: '唱歌'
}

let obj3 = { ...obj1, ...obj2 }

执行结果

对象解构

使用对象解构获得对象下的属性值

let person = {
  name: 'meishadevs',
  age: 25,
  hobby: 'Codding'
}

var { name, age, hobby } = person

console.log('name:', name)
console.log('age:', age)
console.log('hobby:', hobby)

执行结果

meishadevs欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果。
转载请注明: 【文章转载自meishadevs:常见的ES6语法

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器