【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)