目录
ES6 介绍
- ES6 的版本变动内容最多，具有里程碑意义
- ES6 加入很多新的语法特性，编程实现更简单、高效
- ES6 是前端发展趋势，就业必备技能
- ES6 几乎所有浏览器都支持
ES6 变量声明及声明特性
声明特性：
- 变量不能重复声明
- ES6 新增块级作用域，块级作用域内声明的变量，仅在块级作用域内可用，但不影响块级作用域链
- 不存在变量提升，即用 let 声明的变量，在变量声明之前不允许被使用
// 声明变量
let a
let b, c, d
let e = 100
let f = 521,
g = 'iloveyou',
h = []
// 1.变量不能重复声明
let star = '罗志祥'
let star = '小猪'
// ES5 有三种作用域：全局，函数，evel
// 2.ES6 新增块级作用域
// {} 并不是声明块级作用域唯一的方式，还可以通过 if else while for 声明
{
// 块级作用域中用 let 声明的变量，仅在块内可用
let girl = '周扬青'
}
console.log(girl) // 获取不到变量值
// 不存在变量提升
console.log(song) // 不允许在变量声明之前使用该变量
let song = '大雨将至'
// 不影响块级作用域链
{
let address = '山西省'
function fun() {
console.log(address)
}
fun()
}ES6 经典案例实践
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 获取 div 元素对象
let items = document.getElementsByClassName('item')
// 遍历并绑定事件
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
// 修改当前元素的背景颜色
// this.style.backgroundColor = 'red';
items[i].style.backgroundColor = 'blue'
}
}
</script>注意：
- 在 for 循环中，使用 var 声明 i 时，设置背景颜色语句只能使用 this，而不能使用 items[i]
- 因为 var 声明的变量属于全局变量，即 window.i；设置背景颜色语句中的 items[i] 中的 i = window.i = 3，而 items[3] 不存在，所以出现错误
- 使用 let 声明的变量属于块级作用域，既可以使用 this，也可以使用 items[i]
const 声明常量及特点
- 值不能修改的即为常量
- 常量名一般全部为大写（潜规则）
- 常量声明时一定要赋初始值
- 常量的值不可修改
- 常量属于块级作用域
- 对于数组和对象的元素的修改，不算做对常量的修改，不会报错
- 因为修改数组和对象的元素的本质是修改常量的内容
- 但并未修改数组和对象所指向的地址，只要地址不变，就不会报错
- 以后声明数组和对象可以使用 const ，可以有效避免一些误操作
// 声明常量
// 常量名一般全部为大写（潜规则）
const ADDRESS = '山西'
// 常量声明时一定要赋初始值
const AGE = 20
// 常量的值不可修改
ADDRESS = '北京' // 报错
// 常量属于块级作用域
{
const PLAYER = '小明'
}
console.log(PLAYER) // 报错
// 对于数组和对象的元素的修改，不算做对常量的修改，不会报错
// 因为修改数组和对象的元素的本质是修改常量的内容
// 但并未修改数组和对象所指向的地址，只要地址不变，就不会报错
const RNG = ['小虎', '小威', '小明', 'cryin', 'gala']
RNG.push('yuekai')
// 以后声明数组和对象可以使用 const ，可以有效避免一些误操作变量解构赋值
- ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值
- 这被称为解构赋值
- 数组的解构
- 对象的解构
// ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值
// 这被称为解构赋值
// 1.数组的解构
const F4 = ['小沈阳', '刘能', '赵四', '宋小宝']
let [xiao, liu, zhao, song] = F4
console.log(xiao)
console.log(liu)
console.log(zhao)
console.log(song)
// 对象的解构
const person = {
name: '张三',
age: 35,
crime: function () {
console.log('无法无天！')
},
}
let { name, age, crime } = person
console.log(name)
console.log(age)
console.log(crime)
crime()
let { crime } = person
crime()模板字符串
- 新的声明字符串的方式 【` `】
- 原有的声明方式 【' '】【" "】
- 反引号声明字符串时，内容中可以直接出现换行符
- 可以直接进行变量拼接：`${变量名}内容`
// 原有的声明方式 【' '】【" "】
// 新的声明字符串的方式 【` `】
let str = `新字符串声明方式`
console.log(str, typeof str)
// 反引号声明字符串时，内容中可以直接出现换行符
let comedian = `<ul>
<li>沈腾</li>
<li>马丽</li>
<li>艾伦</li>
<li>魏翔</li>
</ul>`
console.log(comedian)
// 可以直接进行变量拼接
let favorite = `沈腾`
let sentence = `${favorite}是我最喜欢的喜剧演员！`对象的简化写法
- ES6 允许在大括号中，直接写入变量和函数，作为对象的属性和方法
- 写法更加简洁
// ES6 允许在大括号中，直接写入变量和函数，作为对象的属性和方法
// 写法更加简洁
let name = '张三'
let crime = function () {
console.log('无法无天')
}
const crimer = {
// 相当于 name=name,crime=crime
name,
crime,
// 此处声明函数可以省略 :function
teach() {
console.log('罗翔')
},
}
console.log(crimer)箭头函数
- ES6 允许使用【箭头】【=>】定义函数
- 声明函数将 function () 改为 () =>
特性
- this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值
- 不能作为构造函数实例化对象
- 不能使用 arguments 变量
- 箭头函数简写
- 1. 省略小括号，当形参有且只有一个时
- 2. 省略花括号，当代码体只有一条语句时，此时 return 也必须去掉
- 此时语句的执行结果仍是函数的返回值
// ES6 允许使用箭头 => 定义函数
let fn = function () {}
// 将 function() 改为 () =>
let fun = (a, b) => {
return a + b
}
// 调用函数
let result = fun(1, 2)
console.log(result)
// this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值
function getName() {
console.log(this.name)
}
let getName2 = () => {
console.log(this.name)
}
// 设置 window 对象的 name 属性
window.name = '张三'
const pername = {
name: '罗翔',
}
// 直接调用
getName() // 张三
getName2() // 张三
// call 方法调用
getName.call(pername) // 罗翔
getName2.call(pername) // 张三
// 不能作为构造函数实例化对象
let Person = (name, age) => {
this.name = name
this.age = age
}
let me = new Person('张三', 35)
console.log(me) // 报错，Person 并不是一个构造器
// 不能使用 arguments 变量
let fn1 = () => {
console.log(arguments)
}
fn1(1, 2, 3) // arguments 没有被定义
// 箭头函数简写
// 省略小括号，当形参只有一个的时候
// 省略花括号，当代码体只有一条语句时，此时 return 也会被去掉
let add = (n) => {
return n + n
}
console.log(add(9))
// 省略了小括号和花括号之后的函数
let pow = (n) => n * n
console.log(pow(9))箭头函数实践和应用场景
- 箭头函数适合与 this 无关的回调，比如定时器，数组方法
- 不适合与 this 有关的回调，DOM 元素的实践回调，对象的方法
- 当对象方法为普通函数时，this 指向普通函数所在的块级作用域
- 变为箭头函数时，this 将指向 window
- 当然只是不适合，并不是绝对不能用，某些情况下也可以使用
<div id="ad"></div>
<script>
// 需求1：点击 div 2s 后颜色编程蓝色
// 获取元素
let ad = document.getElementById('ad')
ad.addEventListener('click', function () {
// 以前的做法
// 保存 this 值，将外层函数作用域下的 this 保存
// 如果没有保存，定时器内部的 this 将会找到 window 下的 this
let _this = this
// 定时器
setTimeout(function () {
_this.style.backgroundColor = 'blue'
}, 2000)
})
// 箭头函数中的 this 是静态的，指向声明函数所在作用于下 this 的值
// 指向定时函数内部，定时函数指向事件源 ad
ad.addEventListener('click', function () {
setTimeout(() => {
this.style.backgroundColor = 'red'
}, 5000)
})
// 需求2：从数组中返回偶数元素
const arr = [1, 3, 5, 6, 8, 10]
// 以前的做法
const result = arr.filter(function (items) {
if (items % 2 === 0) {
return true
} else {
return false
}
})
console.log(result)
const result1 = arr.filter((items) => {
if (items % 2 === 0) {
return false
} else {
return true
}
})
console.log(result1)
const result2 = arr.filter((items) => items % 3 === 0)
console.log(result2)
// 箭头函数适合与 this 无关的回调，比如定时器，数组方法
// 不适合与 this 有关的回调，DOM 元素的实践回调，对象的方法
const person = {
name: '张三',
getName: function () {
// 普通函数 this 指向作用域内部
// 若是改成箭头函数 getName: () => {}，此时 this 指向 window
this.name
},
}
</script>ES6 函数参数的默认值
- ES6 允许给函数参数赋初始值
- 形参初始值，如果给形参赋初始值，如果给该形参传递了实参，使用实参，如果没有传递实参，使用默认值
- 具有默认值的参数，一般位置靠后
- 默认值可以与解构赋值结合使用
- 可以给属性赋初始值
- 如果给属性传递了实参，使用实参；如果没有传递实参，使用默认值
// ES6 允许给函数赋初始值
// 形参初始值,具有默认值的形参，一般位置靠后
function add(a, b, c = 10) {
return a + b + c
}
// 如果给形参传递了实参，则使用实参；如果没有传递实参，使用初始值
let result = add(1, 2)
console.log(result)
// 与解构赋值结合
function connect({ host = '127.0.0.1', username, password, port = '3301' }) {
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host: 'www.baidu.com',
username: 'root',
password: 'root',
port: 3306,
})rest 参数
- ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
- arguments 获取函数的实参并返回一个对象
- rest 获取函数的实参并返回一个数组
- 此时我们可以使用 filter some every map 等数组方法
- 提高了对参数的处理能力
- 如果多个参数，rest 参数必须放在最后
// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
// arguments 获取函数的实参并返回一个对象
function date() {
console.log(arguments)
}
date('春生', '夏长', '秋收', '冬藏')
// rest 获取函数的实参并返回一个数组
function date1(...args) {
console.log(args)
}
date1('春风', '夏雨', '秋露', '冬雪')
// 此时我们可以使用 filter some every map 等数组方法
// 提高了对参数的处理能力
// 如果多个参数，rest 参数必须放在最后
function fn(a, b, ...args) {
console.log(a)
console.log(b)
console.log(...args)
}
fn(1, 2, 3, 4, 5, 6, 7)扩展运算符
- 【...】扩展运算符能将数组转换为逗号分隔的参数序列
// 【...】扩展运算符能将数组转换为逗号分隔的参数序列
const escort = ['王朝', '马汉', '张龙', '赵虎']
// => '王朝', '马汉', '张龙', '赵虎'
function protect() {
console.log(arguments)
}
protect(escort) // ["王朝", "马汉", "张龙", "赵虎"]
// 将数组转换为逗号分隔的参数序列
protect(...escort) //0: "王朝";1: "马汉";2: "张龙";3: "赵虎"扩展运算符应用
// 1.数组的合并
const kuaizi = ['王太利', '肖央']
const fenghuang = ['曾毅', '玲花']
// 字符串拼接
const singer = kuaizi.concat(fenghuang)
console.log(singer) // ["王太利", "肖央", "曾毅", "玲花"]
// 扩展运算符合并数组
const singer1 = [...kuaizi, ...fenghuang]
console.log(singer1) // ["王太利", "肖央", "曾毅", "玲花"]
// 2.数组的克隆
const general = ['关羽', '张飞', '赵云']
// 如果数组中的数据有引用类型的数据，则此处的克隆属于浅拷贝
// 如果没有，则属于深拷贝
const general1 = [...general]
console.log(general1)
// 3.将伪数组转换为真正的数组
const divs = document.querySelectorAll('div')
const divArr = [...divs] // 也可以使用 arguemnts
console.log(divArr)
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
