ES6 ------ 基础（一）
变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
- 数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝'] let [xiao, liu, zhao, song] = F4 console.log(xiao) //小沈阳 console.log(liu) //刘能 console.log(zhao) //赵四 console.log(song) //宋小宝
- 对象的解构
const zhao = { name:'赵本山', age:'不详', xiaopin: function() { console.log('我可以演小品'); } } let {name, age, xiaopin} = zhao console.log(name) //赵本山 console.log(age) //不详 console.log(xiaopin) // f(){console.log('我可以演小品')} xiaopin() //我可以演小品
模板字符串
ES6 引入新的声明字符串的方式 ``
- 声明
let str1 = `我也是一个字符串嗷!` console.log(str1, typeof str1); // 我也是一个字符串嗷! string
- 内容中可以直接出现换行符（' ' 和 " " 不可以）
let str2 = `<ul> <li>沈腾</li> <li>玛丽</li> <li>魏翔</li> <li>艾伦</li> </ul>` // 合法
- 可以进行变量拼接 格式：${}
let lovest = '<活着>' let out = `${lovest}是最好看的书` console.log(out) //<活着>是最好看的书
简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
代码运行结果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简化对象的写法</title> </head> <body> <script> // 这样书写更加简洁 let name = '尚硅谷' let change = function() { console.log('我们可以改变你!'); } const school = { name, change, improve(){ console.log('我们可以提高你的技能'); } } console.log(school) </script> </body> </html>
箭头函数 （=>）
ES6 允许使用 箭头 （=>） 定义函数
声明一个函数
//ES6之前 let fn = function(){ } //ES6 箭头函数 let fn = (a,b) => { return a + b } //调用函数 let result = fn(1, 2) console.log('结果:' + result); // 结果：3
- this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值。
function getName() { console.log(this.name) } let getName2 = () =>{ console.log(this.name); } // 设置 window 对象的 name 属性 window.name = 'ES6' const school = { name: 'ECAMScript6' } //1. 直接调用 getName() // ES6 getName2() // ES6 //2.call()方法调用（调用一个对象的一个方法，以另一个对象替换当前对象） getName.call(school) // ECAMScript6 getName2.call(school) // ES6
call() 方法：call方法可以用来代替一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始化改为新的对象，也就是括号里面的原本的对象改为call()前面的对象、即用thisobj代替call前面的东西，最终用thisobj这个对象去执行call前面的方法。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
不能作为构造实例化对象
let Person = (name,age) => { this.name = name this.age = age } let me = new Person('xiao',30) console.log(me) //报错：Uncaught TypeError: Person is not a constructor
- 不能使用 arguments 变量
let fn = () => { console.log(arguments); } fn(1,2,3) //报错：Uncaught ReferenceError: arguments is not defined
- 箭头函数的简写
（1）省略小括号（当形参有且只有一个时）
let add = n => { return n + n } console.log(add(9)) //输出 18 /*let add = (n) => {...}*/
（2）省略花括号（当代码只有一条语句的时候）
注意：此时 return 必须省略，而且语句的执行结果就是函数的返回值
let pow = n => n * n console.log(pow(9)); //输出 81
箭头函数实践
需求一：点击 div ，1s 后颜色变成粉色
- 第一种方法：不使用箭头函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>箭头函数实践</title> <style> div{ width: 200px; height: 200px; background-color: #58a; } </style> </head> <body> <div id="ad"></div> <script> // 获取元素 let ad = document.getElementById('ad') // 绑定事件 ad.addEventListener('click',function() { // 保存 this 的值 let _this = this // 定时器 setTimeout(function(){ // 修改背景颜色 用this _this.style.background = 'pink' },1000) }) </script> </body> </html>
注意：如果 不保存 this 的值 ，直接设置 this.style.background = 'pink' 会报错 （Uncaught TypeError: Cannot set properties of undefined (setting 'background')）。因为 this 指向的是 window，没有 style 属性。
第二种方法：使用箭头函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>箭头函数实践</title> <style> div{ width: 200px; height: 200px; background-color: #58a; } </style> </head> <body> <div id="ad"></div> <script> // 获取元素 let ad = document.getElementById('ad') // 绑定事件 ad.addEventListener('click',function(){ setTimeout(() => { this.style.background = 'pink' },1000) }) </script> </body> </html>
注意：箭头函数 this 是静态的，始终指向函数声明时所在作用域下的 this 的值。此时的 this 指向的是事件源 ad。
需求二：从数组中返回偶数的元素
- 第一种方法：不使用箭头函数
const arr = [1,6,9,10,100,25] const result = arr.filter(function(item){ if(item % 2 === 0){ return true }else{ return flase } }) console.log(result) //输出：(3) [6, 10, 100]
- 第二种方法：使用箭头函数
const arr = [1,6,9,10,100,25] const result = arr.filter(item => item % 2 === 0) console.log(result) //输出：(3) [6, 10, 100]
总结：
- 箭头函数适用于与 this 无关的回调，定时器，数组的方法的回调。
- 箭头函数不适用与 this 有关的回调，事件回调，对象的方法。
函数参数默认值
ES6 允许给函数参数赋值初始值
- 形参初始值（具有默认值的参数，一般位置要靠后）
function add(a,b,c){ return a + b + c } let result = add(1,2,3) console.log(result) //输出 6
function add(a,b,c){ return a + b + c } let result = add(1,2) console.log(result) //输出 NaN (因为3+c为NaN)
function add(a,b,c=10){ return a + b + c } let result = add(1,2) console.log(result) //输出 13
- 与解构赋值结合
function connect({host='127.0.0.1', username, password, port}){ console.log(host); // baidu.com console.log(username); //root console.log(password); //root console.log(port); //3306 } connect({ host:'baidu.com', username:'root', password:'root', port:'3306' })
注意：当 connect 里面没有 host 时，会使用 127.0.0.1
rest 参数
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
- ES5 获取实参的方式
function date(){ console.log(arguments); } date('张三','李四','王五')
输出结果：
- rest 参数（…args）
function date(...args){ console.log(agrs) } date('张三','李四','王五')
注意：输出的结果是一个数组，可以更好的处理参数（可以使用 filter、some、every、map 等）
- rest 参数必须放到参数的最后
function fn(a,b,...args){ console.log(a) //1 console.log(b) //2 console.log(args) //(4) [3, 4, 5, 6] } fn(1,2,3,4,5,6)
spread 扩展运算符
... 扩展运算符能将 数组 转换为逗号分隔的 参数序列。
//声明一个数组 ... const f3 = ['张三','李四','王五'] // 声明一个函数 function fn() { console.log(arguments) } fn(...f3) //相当于 fn('张三','李四','王五')
注意：
- rest 参数 ... 放在了函数声明的形参位置。
- 扩展运算符，... 放在了函数调用的实参里面等其他使用方式。
扩展运算符应用
- 数组的合并
（不使用扩展运算符）
const kuaizi = ['王太利','肖央'] const fenghuang = ['曾毅','玲花'] const union = kuaizi.concat(fenghuang) console.log(union);
（使用扩展运算符）
const kuaizi = ['王太利','肖央'] const fenghuang = ['曾毅','玲花'] const union = [...kuaizi, ...fenghuang] console.log(union);
- 数组的克隆（浅拷贝）
const sanzhihua = ['E','G','M'] const sanyecao = [...sanzhihua] console.log(sanyecao);
- 将伪数组转为真正的数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div></div> <div></div> <div></div> <script> const divs = document.querySelectorAll('div') const divArr = [...divs] console.log(divArr); </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
