【ES6学习笔记】—— 基础语法 { }

学习笔记

作者：oMing

ES6

let 与 var 的区别

// let 不可重复声明同一名称的变量 let l1 = 1; let l1 = 2; // 报错 // var 可重复声明同一名称的变量 var v1 = 1; var v1 = 2; console.log(v1); // 块作用域 { var girl = 'C#' let boy = 'unity' } console.log(girl) console.log(boy) // 报错

解构赋值

// 数组 const F4 = ['unity', 'vue', 'jQuery', 'npm'] let [u, v, j, n] = F4 console.log(u + ' ' + v + ' ' + j + ' ' + n) // 对象 const unity = { name: 'unity', makeGames: function () { console.log('Made with Unity~') } } let { name, makeGames } = unity console.log(name + ' ' + makeGames) makeGames()

模板字符串 （方便拼接，可换行）

let action = `周星驰、 邓超` console.log(`${action}是我最喜欢的演员~`)

箭头函数

let commonFun = function () { console.log(this.name) } let arrowFun = () => { console.log(this.name) } window.name = 'oMing' commonFun() // 输出oMing arrowFun() // 输出oMing let people = { name: 'Vue' } commonFun.call(people) // 输出Vue arrowFun.call(people) // 输出oMing,'this是静态的',不会改变 /* 示例 */ // 点击div1，延迟改变颜色 let div1 = document.getElementById('div1') div1.addEventListener('click', function () { // 普通函数做法 let self = this setTimeout(function(){ self.style.background = 'pink' },1000) // 箭头函数做法 setTimeout(() => { this.style.background = 'pink' }, 1000) }) // 返回偶数 const arr = [1, 6, 8, 9, 12] console.log(arr.filter(item => item % 2 == 0))

【…】扩展运算符（将【数组】转换为逗号分隔的【参数序列】）

/* 扩展运算符 */ const arr3 = ['JavaScript', 'google', 'vue'] function web() { console.log(arguments[1]) } web(...arr3) // 相当于 web('JavaScript','google','vue') //数组的合并 const oVuex = ['v', 'u', 'e', 'x'] const oVue_cli = ['c', 'l', 'i'] console.log([...oVuex, ...oVue_cli]) //数组的克隆 const oVue = ['v', 'u', 'e'] const oVueClone = [...oVue] //将伪数组变为真正的数组 let divs = document.querySelectorAll('div') console.log([...divs]) // rest参数 function data(a, b, ...args) { console.log(a) console.log(b) console.log(args) } data(1, 2, 3, 4, 5, 6)