- ES6 简介
它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。
获取DOM元素
<script>
// 单个元素的获取
console.log(document.querySelector('.box'));
console.log(document.querySelector('#app'));
// 多个元素的获取
console.log(document.querySelectorAll('div'));
</script>
- let
◼ let 关键字用来声明变量,使用 let 声明的变量有几个特点:
◼ 1) 不允许重复声明
◼ 2) 块儿级作用域
◼ 3) 不存在变量提升
◼ 4) 不影响作用域链
- let关键字就是用来声明变量的
<script>
let a = 10;
console.log(a);
</script>
let声明的变量只在所处于的块级有效
<script>
if (true) {
let a = 10;
}
console.log(a);//a is not defined
</script>
if (true) {
let b = 20;
console.log(b);
if (true) {
let c =30;
}
console.log(c);
}
<script>
// var是没有块级作用域 for if
for (var i = 0; i < 10; i++) {
}
console.log(i);
if(true){
var f = 'abc'
}
console.log(f);
// let 的块级作用域
for(let index =0;index<10;index++){
}
// console.log(index); // index is not defined
if(true){
let n = false
}
console.log(n); // n is not defined
</script>
<script>
// var 具有作用域链
function fn() {
var a = 10
function fn1() {
var b = 10
console.log(a + b); // 20
}
function fn2() {
var c = 20
console.log(a + b + c); // 报错
}
fn1()
fn2()
}
// fn()
// let 不影响作用域链
function foo() {
let a = 10
function fn1() {
let b = 10
console.log(a + b); // 20
}
function fn2() {
let c = 20
console.log(a + b + c); // 报错
}
fn1()
fn2()
}
foo()
</script>
- const
<script>
if (true){
const a = 10;
if (true){
const a =20
console.log(a);
}
console.log(a);
}
console.log(a);
</script>
- 声明常量必须赋初始值
<script>
//使用const关键字声明的常量必须赋初始值
const p1;
</script>
<script>
//使用const关键字声明的常量必须赋初始值
//常量赋值后,值不能修改
const p1 = 3.14;
const ary = [100,200];
ary[0] = 123;
ary = [1,2]
console.log(ary);
</script>
const 块级作用域
<script>
for (let index = 0; index<10; index++){
const a = 20
var b = 10 //var 定义的变量在for循环中是没有块级作用域的
}
console.log(b);
if(true){
const foo = false
}
//console.log(foo); 错误 const 在for和if都是具有块级作用域
</script>
-对象属性改变和数组元素改变不会触发const错误
<script>
// const定义的对象,属性更改不会触发const错误
const obj = {
name:'张三',
age:10,
sayHi:function(){
console.log(this.name+': hi ');
}
}
obj.name = '王五'
obj.sayHi()
obj.weight = '50'
console.log(obj);
// const定义的数组,数组元素的更改不会触发const错误
const arr = []
arr.push(10,20,30,40)
console.log(arr);
</script>
- 应用场景
<script>
// 声明对象和数组类型使用 const
// 在只读情况下使用const
// 在允许被修改的时候使用let
</script>
结构赋值
- 数组的结构赋值
<script>
const arr = ['张学友', '刘德华', '黎明', '郭富城']
// 数组的解构赋值=>根据数组的下标有顺序的进行赋值
const [zhang,liu,li] = arr
console.log(zhang,liu,li);
</script>
- 对象的结构赋值
<script>
const lin = {
name: '林志颖',
tags: ['车手', '歌手', '小旋风', '演员'],
sayHi:function(){
console.log('唱歌');
}
};
// 对象的解构赋值是将对象中的各个属性取出来,变量名称必须与属性名称一致
const {name,sayHi,tags} = lin
console.log(name,tags);
sayHi()
</script>
- 复杂结构
<script>
let wangfei = {
name: '王菲',
age: 18,
songs: ['红豆', '流年', '暧昧', '传奇'],
history: [
{ name: '窦唯' },
{ name: '李亚鹏' },
{ name: '谢霆锋' }
]
};
const {
songs: [one, two, three, four], // 数组的解构 =>string,string,string,string
history: [first, second, third] // 数组的解构 =>obj,obj,obj
} = wangfei
</script>
模板字符串
<script>
// 模板字符串 `` 获取变量 ${}
const books = ['Javascript', 'Vue', 'React', 'Es6']
let str = ''
for (let index = 0; index < books.length; index++) {
str += `
<li>${books[index]}</li>
`
}
// 获取DOM对象
document.querySelector('ul').innerHTML = str
</script>
- 简化对象的写法
<script>
let name = '张三'
let age = 20
const sayHi = function(){
console.log('hi');
}
//原始写法
let obj = {
name: name,
age: age,
sayHi: sayHi
}
console.log(obj);
let newObj = { name, age, sayHi }
console.log(newObj);
const person = {
sayHi:function(){
console.log(11);
}
}
// 对象中的方法后:function是可以省略的
const newPerson = {
sayHi(){
console.log(11);
}
}
</script>
- 箭头函数的基本使用
<script>
// => 带替function()
const oldFn = function () {
console.log('oldFn');
}
oldFn()
const fn = () => {
console.log('fn');
}
fn()
</script>
- 带参数的箭头函数
<script>
const foo = (a,b)=>{
console.log(a+b);
}
foo(10,20)
</script>
- 带返回值的箭头函数
<script>
const foo = (a, b) => {
return a + b
}
console.log(foo(10, 20));
</script>
- 箭头函数的变化
<script>
// 箭头函数没有参数的情况,括号不可以省略
const a = () => {
console.log('没有参数的箭头函数');
}
// 箭头函数只有一个参数时,参数的括号可以省略
const b = a => {
console.log(a);
console.log('只有一个参数的箭头函数');
}
b(30)
// 箭头函数只有多个参数时,参数的括号不可以省略
const n = (a, b) => {
console.log(a, b);
}
</script>
- 变化2
<script>
// 代码行数只有一行,方法体的大括号可以省略
const foo = () => console.log('代码行数只有一行,方法体的大括号可以省略')
foo()
// 代码行数只有一行,有返回值的情况,方法体的大括号和return可以省略的
const sum = (a, b) => a + b
console.log(sum(10, 20));
const a = a => a
console.log(a('abc'));
</script>
- 箭头函数的this
<script>
const obj = {
name:'张三',
age:20,
sayHi(){
// this
const _this = this
setTimeout(function(){
console.log(this);
console.log(`你好,${_this.name}`); // 计时器中的this永远指向与window
},2000)
}
}
obj.sayHi()
const obj2 = {
name:'李四',
age:20,
sayHi(){
setTimeout(()=>{
console.log(this); // obj2
console.log(`你好,${this.name}`); // 箭头函数没有this指向,指向于最近的this
},2000)
}
}
obj2.sayHi()
</script>
- 箭头函数没有arguments
<script>
const foo = ()=>{
// console.log(arguments);
}
foo(1,2,3)
</script>