ES6初级

最新推荐文章于 2025-12-19 15:51:19 发布

原创最新推荐文章于 2025-12-19 15:51:19 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文详细介绍了ES6中的新特性，包括let和const的块级作用域，它们与var的区别，以及它们在变量声明和常量定义中的应用。此外，还讲解了对象解构赋值、模板字符串、简化对象写法和箭头函数的使用，包括参数、返回值和this的处理。最后，通过实例展示了箭头函数如何改变this的指向，以及它不包含arguments对象的特点。

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