首页 👨‍💻计算机,🚓JavaScript

ES6新特性

1,let (变量)

let与var的区别

// var定义的变量没有块级作用域的概念
if (true) {
  var a = 10; //全局变量
}
console.log(a); //a
// let定义变量有块级作用域
if (true) {
  let a = 10; //not defined
}
console.log(a); //not defined

2,const(常量)

const不能修改,固定值,不能修改新对象

但是可以修改对象的属性

const obj = {
  name: '小红',
  age: 2,
};

obj = { name: 'xiaohong ' };
console.log(obj);//TypeError: Assignment to constant variable.
obj.name = '小猪';
{ name: '小猪', age: 2 }

什么时候用let ,什么时候用const

const fun = function () {}; //函数表达式
const obj = {}; //对象
const pi = 3.14; //不变的值

let num1 = 10,//定义变量
  num2 = 30;
console.log(num1 + num2);

3, call apply bind

  1. call 第一个是this指向,后边跟多个实参

    let dog = {
      name: '旺财',
      sayName() {
        console.log('我是' + this.name);
      },
      eat(food, food2) {
        console.log('我喜欢吃' + food + food2);
      },
    };
    let cat = {
      name: '喵喵',
    };
    // 作用1,call可以调用函数,call可以改变函数中的this
    dog.eat.call(cat, '鱼', '肉'); 
    
  1. apply 第一个是this指向,后边跟数组和伪数组
dog.eat.call(cat, ['鱼', '肉']); 

3,bind会吧一个函数作为返回值返回回去,复制给别人,然后才能调用

let fun=dog.eat.call(cat, '鱼', '肉'); 
fun();

4,闭包

闭包,函数嵌套函数,内部函数就是闭包

闭包,内部函数没有执行完成,外部函数变量不会被销毁,,不会被垃圾回收机制收走

function outer() {
  let a = 10;//被销毁,
  console.log(a);//局部变量,执行完,内存释放了
}
//会被垃圾回收机制收走
console.log(a);//所以不能调用
ReferenceError: a is not defined
function outer() {
  let a = 10;
  function inner() {
    console.log(a);
  }
  return inner; //内部函数返回
}

let fun = outer();
fun();
10

闭包应用

闭包封装代码模块化

把他们封装到一个模块,全局变量,变成私有变量,内部方法以返回值的方式传出,通过对象名.方法名访问

let xt = (function () {
  let a = 10; //私有
  let b = 20; //私有

  function add() {
    return a + b;
  }
  function sub() {
    return a - b;
  }
  return {
    add,
    sub,
  };
})();
let result1 = xt.add();

let result2 = xt.sub();

console.log(result1);
console.log(result2);

5,解构赋值

// 结构赋值
//数组的结构赋值
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a);//20
console.log(b);//10

// 对象的解构赋值
function createStudent() {
    let name = '小明';
    let age = 2;
    let friend = '小红';
    return {
        name: name,
        age: age,
        friend: friend,
    };
}

let { name } = createStudent();
console.log(name);


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

<script>
  

数组的解构

数组的解构

  • 完全解构
  • 不完全解构赋值
// 什么是解构赋值: ES6 允许 按照一个模式, 从数组/对象中提取值, 赋予给变量
// 数组的解构
let arr = ["春天", "夏天", "秋天", "冬天"]
// let winOne = arr[0]
// let winTwo = arr[1]
// let winThree = arr[2]
// let winFour = arr[3]

// 写起来很麻烦, 解构赋值怎么写呢?
// 模式(数组/对象), 两边的模式要对应, 数组的模式: 会按照下标
let [winOne, winTwo, winThree, winFour] = arr // 完全解构
console.log(winThree)

let [winOne, , winFour] = arr // 不完全解构
console.log(winOne, winFour)

对象的解构

对象的解构

  • 基本解构
  • 解构重命名
// 例2: 对象解构举例
let obj = {
  name: 'zs',
  age: 18,
  desc: '不错'
}
// let name = obj.name
// let age = obj.age
// let desc = obj.desc
// 1. 基本解构
let { name, age, desc } = obj
console.log(name, age, desc)

// 2. 解构重命名
let { name: myname, age: myage, desc: mydesc } = obj
console.log(myname, myage, mydesc)

// 3. 解构默认值
let { name, age, desc, girl = '小花' } = obj
console.log(name, age, desc, girl)

// 4. 重命名+默认值
let { name, age, desc, girl: myGirl = '小花' } = obj
console.log(name, age, desc, myGirl)

6,箭头函数

// 剪头函数

// function fun() {
//   return 100;//普通函数
// }

// 剪头函数
const fun = () => {
  return 100;
};
console.log(fun());

const fun =()=>100
剪头函数
(x,y,z)中定义参数,如果只有一个参数,可以不写括号
{}中写函数体,如果函数体中只有返回值,可以不写return

区别

1,this指向不同,

2,普通函数,谁调用这个函数,this指向谁

3,剪头函数,在哪里定义函数,this指向谁,剪头函数没有this指向

      let obj = {
        name: '小明',
        age: 2,
        sayName() {
          // console.log(`我是${this.name}`);//普通函数,
            
          setTimeout(function () {
            console.log(this);//this指向window  
          }, 500);
        },
      };
      obj.sayName();

image-20210926094405887

 <script>
      let obj = {
        name: '小明',
        age: 2,
        sayName() {
          // console.log(`我是${this.name}`);
          setTimeout(() => {
            console.log(this);
          }, 500);
        },
      };
      obj.sayName();
    </script>

image-20210926094329950

作用: 简化匿名函数, 简化回调函数和普通函数的写法

语法: () => {}, 小括号内书写形参, 大括号内写函数体

使用:

  1. 无参, 无返回

    let fn = () => {
      console.log('我是函数体')
    }
    fn()
  2. 无参, 有返回

    let fn = () => {
      console.log('我是函数体')
      return '嘎嘎'
    }
    let result = fn()
    console.log(result) // 嘎嘎
  3. 有参, 无返回值

    let fn = (a, b) => {
      console.log(a + b)
    }
    fn(10, 20)
  4. 有参, 有返回

    let fn = (a, b) => {
      return a + b
    }
    let result = fn(10, 20)
    console.log(result)

7,箭头函数 - 简化语法

简化:

  1. 如果形参只写1个, 可以省略小括号
  2. 方法体只有一行代码, 可以省略大括号, 省略大括号后, 默认返回此结果
// 如果参数只有一个, 可以省略小括号
let fn = num => {
  console.log(num)
}
fn(100)

// 如果方法体, 只有一行代码, 可以省略大括号 (省略大括号后, 默认返回此结果)
let fn2 = num => num * 10
let result = fn2(5)
console.log(result) // 50

小练习: 使用箭头函数, 改写练习题~

8, 箭头函数 - this指向

  • 箭头函数: this指向的是外层作用域this的值
let myObj = {
  a: function () {
    console.log(this)
  },
  b: () => {
    console.log(this)
  }
}
myObj.a() // myObj
myObj.b() // window

9,需求: 给按钮添加点击事件, 要求点击按钮, 一秒后, 修改按钮的背景颜色

let btn = document.querySelector('#btn')

btn.onclick = function() {
  setTimeout(() => {
    this.style.backgroundColor = 'skyblue'
  }, 1000)
}

10,剩余参数运算符rest

...剩余参数运算符 -> 函数形参上, 为了 接收所有的参数

  • 一般配合箭头函数, 因为箭头函数内不能用arguments
  • 必须出现在形参的最后面
// ... 剩余参数运算符 => 用于函数形参上, 可以接收到剩余的参数
function youSum (a, ...args) {
  console.log(a, args)
}
youSum(5, 10)
youSum(5, 100, 200, 300)
youSum(5, 100, 200, 300, 400)

let mySum = (...args) => {
  console.log(args)
}
mySum(10, 20, 30, 40)

11, 展开运算符 ...

...展开运算符 => 用于数组 或 对象中, 可以将数组的项, 或者对象的键值对展开

// 展开运算符 ...
// 1. 展开数组
let arr = [1, 3, 5, 7]
console.log(arr[0], arr[1], arr[2], arr[3]) //老方法
console.log(...arr) // 打印数组的每一项 新方法


// 应用: 
// (1) 拼接两个数组
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let newArr = [...arr1, ...arr2]
console.log(newArr)

// (2) 求数组最大值
let arr3 = [3, 100, 20]
let max = Math.max(...arr3)
console.log(max)


// 2. 展开对象
let obj1 = {
  name: 'zs',
  age: 18,
  house: '独栋大别墅'
}
let obj2 = {
  money: 100,
  car: '劳斯莱斯'
}
// 相当于快速浅拷贝
let obj3 = {
  ...obj1,
  ...obj2,
  name: 'ls'
}



文章评论

目录