es6语法总结

ops/2024/11/13 10:40:37/

【1】语法

(1)声明变量(let-var-const)

  • 变量提升
    • 是JavaScript引擎在代码执行前将变量的声明部分提升到作用域顶部的行为
    • 尽管变量的声明被提升了,变量的赋值(即初始化)仍然保留在原来的位置。因此,如果在初始化之前使用变量,其值将为undefined
  • 暂时性死区(Temporal Dead Zone, TDZ)
    • letconst 声明的变量被初始化之前,如果尝试访问它们,会抛出一个 ReferenceError
    • 这个区域被称为暂时性死区。
    • var存在变量提上不会报错,但是应该少用
  • var
    • ES5中引入的变量声明方式,它声明的变量具有函数作用域全局作用域,并且存在变量提升现象。
    • 这意味着var声明的变量,无论实际声明在何处,都会被提升到其所在作用域的最顶部。此外,var声明的变量可以被重新赋值。
javascript">var x = 10;
function testVar() {console.log(x); // undefined,因为变量提升,但此时x还没有被赋值var x = 20;console.log(x); // 20
}
testVar();
console.log(x) //10
  • let
    • ES6中引入的变量声明方式,它声明的变量具有块级作用域(即大括号{}内),并且不会存在变量提升。
    • let声明的变量在声明之前使用会抛出错误。同样,let声明的变量可以被重新赋值。
    • let是 ES6 中引入的一个关键字,用于声明变量。
    • var 相比,let 声明的变量具有块级作用域,变量只在它被声明的代码块{}内有效。
javascript">let y = 10;
if (true) {// console.log(y) // 不存在跨域提升,直接报错let y = 20; // 不会与外部的y冲突,因为具有块级作用域console.log(y); // 20
}
console.log(y); // 10
  • const
    • ES6中引入的,它用于声明一个只读的常量。一旦一个变量被const声明,它的值就不能被重新赋值
    • 但如果该值是一个对象或数组,那么其内部属性或元素仍然可以被修改。const也具有块级作用域。
javascript">const z = 10;
// z = 20; // 报错,不能被重新赋值
const obj = {key: 'value'};
obj.key = 'new value'; // 内部元素可以修改
// obj = {anotherKey: 'value'}; // 报错,整体不能被直接修改
  • 小结:
    • letconst 提供了块级作用域。
    • let 声明的变量可以被重新赋值。
    • const 声明的常量(或称为不可重新赋值的变量)一旦被赋值后,就不能再被重新赋值(但可以修改对象或数组的内部状态)。
    • 在声明之前访问 letconst 声明的变量会导致 ReferenceError,这是由暂时性死区导致的。

(2)箭头函数

  • 语法

    • 箭头函数是ES6中引入的一种新的函数表达式。它的语法比传统的函数表达式更简洁,且有一些特殊的行为。

    • (parameters) => { functionBody }
      
      • parameters:箭头函数的参数列表。

      • =>:箭头,表示这是一个箭头函数。

      • functionBody:箭头函数的主体。

  • 示例讲解

    • 箭头函数传统的函数表达式

      • 相比于传统的函数表达式,箭头函数没有function关键字,这使得代码更简洁

      • 当函数只有一个参数传递时,方法的括号也可省略

      • 当函数只用一个return值时,return关键字和大括号也可以省略

      • // 传统函数表达式
        const testFunc = function(x){return x * x}
        //箭头函数表达式
        const tetsFunc = (x) => {return x * x}
        const testFunc = x   => x * x
        
    • 箭头函数没有自己的this,即不绑定this

      • 箭头函数不会创建自己的this值,而是捕获其所在上下文的this值。

      • 这使得在回调函数、事件处理器和定时器中使用箭头函数更加安全和方便。

      • const obj = {  value: 10,  getValue: function() {  // 等待一秒输出log内容setTimeout(() => {  console.log(this.value); // 输出 10,因为箭头函数捕获了外层函数的this值  }, 1000);  }  
        };  
        obj.getValue();
        
    • 箭头函数没有arguments对象

      • 箭头函数没有arguments对象,但可以使用剩余参数(rest parameters)来达到类似的效果。

      • const sum = (...args) => args.reduce((a, b) => a + b, 100);
        let num =   sum(1, 2, 3, 4); 
        console.log(num)
        
    • 箭头函数不能作为构造函数

      • 箭头函数没有prototype属性,因此不能用作构造函数。

      • const Arrow = () => {};
        const arrowInstance = new Arrow(); // 抛出错误
        // Uncaught TypeError: Arrow is not a constructor
        

(3)箭头函数和this

  • 箭头函数内部的 this
    • 箭头函数不会创建自己的 this 上下文,因此它捕获其所在(即定义它的位置)的外部函数的 this 值,作为自己的 this 值。
function Outer() {  this.value = 'bruce';  this.innerFunc = () => {  console.log(this.value); // bruce };  
}  
const outer = new Outer();  
outer.innerFunc();
  • this 指向问题分析

    1. 在全局上下文中使用(this是window对象)

      • console.log(this); // window 对象
        
      • image-20240429214417804

    2. 普通函数内调用(this是window对象)

      • function normalFunction() {console.log(this); // window 对象
        }
        normalFunction();
        
    3. 作为对象方法调用(this是当前的对象)

      •     const obj = {value: 'hello',method: function () {console.log(this);}};obj.method();
        
      • image-20240429214540887

    4. 在node中直接调用(this是全局对象global)

      • console.log(this)
        
      • image-20240429214356486

(4)模板字符串

  • 在ES6中,模板字符串是一种新的字符串语法,用反引号(``)包围字符串内容。

  • 模板字符串可以包含变量,这些变量会被解析并替换为实际的值。

    • javascript">let name = 'bruce'
      let info = `My name is:${name}`
      
    • 举例来说,假设你有一个变量name,其值为"bruce",那么当你使用模板字符串let info = My name is:${name};时,变量info 的值将会是"My name is:bruce"

  • 特点:

    1. 可以在字符串中直接插入变量,使代码更加简洁易读。
    2. 可以跨行书写字符串,不再需要使用字符串连接符(+)。
    3. 支持在字符串中使用表达式,比如${2 + 2}会被计算为4

(5)解构赋值

  • 解构赋值对象

    • 解构赋值允许您从对象中提取属性,并将它们赋值给不同的变量。

    • 这避免了多次使用点操作符(.)或方括号([])来获取对象属性的值。

    • let user = {name: 'bruce', age: 1};  // let name = user.name;  
      // let age = user.age;  let {name, age, hobby, a = 10} = user;  
      // 没有bobby所以是undefined
      // 没有a但是又默认是所以a是10
      console.log(name, age, hobby, a); // bruce 1 undefined 10
      
  • 解构赋值数组

    • 对于数组,解构赋值允许直接从数组中提取元素

    • 按照索引位置直接赋值

    • 如果解构的变量数量超过数组的长度,多余的变量会被赋值为undefined

    • let listInfo = [11, 22];
      let [a, b, c] = listInfo;console.log(a, b, c); // 11 22 undefined
      
  • 交换变量

    • 当使用解构赋值时,还可以很方便地交换两个变量的值

    • let a = 10;
      let b = 20;[a, b] = [b, a];
      console.log(a, b); // 20 10
      
  • 解构函数返回值

    • 当函数返回一个对象时,可以使用解构赋值来直接访问该对象的属性。

    • function handleInfo() {return {name: 'bruce', age: 19};
      }let {name = '1', age} = handleInfo();// 如果返回的对象中没有name属性,则name的值为默认值'1'
      console.log(name, age); // bruce 19
      

(6)展开运算

  • 展开运算符 ...

    • 将可迭代对象的元素或属性展开为多个参数或元素。
    • 可以简单理解为python的*args
  • 对象展开

    • 在对象中使用展开运算符,可以将源对象的所有可枚举属性复制到目标对象中。

    • let userDetail = {age: 19, hobby: ['swimming', 'running']};
      let userInfo = {name: 'bruce', ...userDetail};
      console.log(userInfo); // {name: 'bruce', age: 19, hobby: Array(2)}
      
  • 数组展开

    • 在数组中使用展开运算符,可以将一个数组的元素插入到另一个数组的指定位置。

    • 类似于python中的两个列表相加

    • let list1 = [1, 2, 3];
      let list2 = [...list1, 4, 5, 6];
      console.log(list2); // [1, 2, 3, 4, 5, 6]
      
  • 函数参数展开

    • 在函数调用时,可以使用展开运算符将一个数组的元素作为单独的参数传递给函数。

    • function addFunc(a, ...b) {let c = b.reduce((acc, item) => acc + item, a);console.log(c);
      }addFunc(1, 2, 3, 4);
      
  • 小结:

    • 展开运算符为我们在处理对象和数组时提供了极大的灵活性。
    • 无论是复制对象属性、合并数组,还是将数组元素作为参数传递给函数,展开运算符都能简化代码并提高效率。

(7)模块化

  • 默认导出和导入

    • 默认导出每个模块中只能有一个默认导出

      • 默认导出的成员可以是任何类型的值(变量、函数、对象、类等)。

      • 在导入时,可以使用自定义的名称来接收这个导出的成员,script标签需要指定类型type为module。

      • 未导出的任何类型变量都不能被导入

      • // 导出
        // utils.js
        let name = 'bruce'
        let age = 18
        function add(a, b) {return a + b
        }
        export default {name, add
        }
        
      • // 导入
        <script type="module">import utils from "./test/utils.js";console.log(utils.name) // bruceconsole.log(utils.age) // undefinedconsole.log(utils.add(1, 1)) // 2
        </script>
        
  • 命名导出和导入

    • 命名导出:每个模块中可以有多个命名导出。

    • 每个导出的成员都需要一个名字,这个名字在导入时也需要被使用,基本都需要{}

    • // 导出
      // utils.js
      export let name = 'bruce'export function add(a, b) {return a + b
      }export const age = 10
      
    • // 导出方式一:
      <script type="module">import {add, age} from './test/utils.js'console.log(add(1, 1)) // 2console.log(age)    // 10
      </script>
      
    • // 导出方式二:全部导入起别名
      <script type="module">import * as info from './test/utils.js'console.log(info.add(1, 1)) //2console.log(info.age) //10
      </script>
      
    • // 导出方式二:起别名
      <script type="module">import {add as myAdd} from './test/utils.js'console.log(myAdd(1, 1)) // 2
      </script>
      
  • index.js文件

    • 如果文件夹下的js文件叫做index.js,那么导入就可以省略/index.js,只需要导入到文件夹这层就可以

    • 无论是命名导入还是默认导入

    • image-20240430192435630

    • # 导入
      <script type="module">import * as info from './test'console.log(info.add(1, 1)) //2console.log(info.age) //10
      </script>
      

【2】JS中循环遍历

(1)遍历数组

  • for循环:基于索引遍历数组。
javascript">const array = ['a', 'b', 'c'];
for (let i = 0; i < array.length; i++) {console.log(array[i]);
}
  • for…of循环:ES6中引入的,基于迭代取值
javascript">const array = ['a', 'b', 'c'];
for (let value of array) {console.log(value);
}
  • forEach方法:数组内置方法,遍历每个元素
javascript">const array = ['a', 'b', 'c'];
array.forEach(function(value) {console.log(value);
});
  • map方法:数组内置方法,根据指定方法,创建一个新数组
javascript">const array = [1, 3, 5];
const newArray = array.map(value => value * value);
console.log(newArray); // [1, 9, 25]

(2)遍历对象

  • for…in循环:遍历对象的可枚举属性(包括原型链上的属性)。
javascript">const obj = {name: 'bruce', age: 18};
for (let key in obj) {console.log(key, obj[key]);
}
// name bruce
// age 18
  • Object.keys方法:对象方法,返回对象的所有键值,和for…in一样
javascript">const obj = {name: 'bruce', age: 18};
Object.keys(obj).forEach(key => {console.log(key, obj[key]);
});
  • Object.values方法:对象方法,只返回对象的所有值,没有键
javascript">const obj = {name: 'bruce', age: 18};
Object.values(obj).forEach(function (value) {console.log(value)
})
// bruce
// 18


http://www.ppmy.cn/ops/40756.html

相关文章

1-3 如何学习,才能让这门课真正发挥价值

如何学习&#xff0c;才能让这门课真正发挥价值 在正式踏上产品经理学习之路前。我希望以一名课程产品经理的身份&#xff0c;来向你解释下这门课的设计理念和学习方法&#xff0c;以便让它真正对你有所帮助。 为什么这么说呢&#xff1f;是因为我发现&#xff0c;大都具备非常…

13.跳跃游戏

文章目录 题目简介题目解答解法一&#xff1a;贪心算法&#xff0b;动态规划代码&#xff1a;复杂度分析&#xff1a; 题目链接 大家好&#xff0c;我是晓星航。今天为大家带来的是 跳跃游戏面试题 相关的讲解&#xff01;&#x1f600; 题目简介 题目解答 思路&#xff1a;这…

BUG:PyAutoGUI pyautogui.ImageNotFoundException

BUG:PyAutoGUI pyautogui.ImageNotFoundException 环境 python 3.10 PyAutoGUI0.9.54 PyScreeze0.1.30BUG详情 在确定屏幕存在指定图片的情况下&#xff0c;使用PyAutoGUI中的locateCenterOnScreen()函数识别图片失败弹出这个bug。 注意&#xff1a; 1 如果屏幕不存在指定图…

电影网站|基于SSM+vue的电影网站系统(源码+数据库+文档)

电影网站 目录 基于SSMvue的电影网站系统 一、前言 二、系统设计 三、系统功能设计 1 系统功能模块 2 管理员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道…

IT行业现状与未来趋势

你眼中的IT行业现状与未来趋势 IT行业当前处于高速发展阶段&#xff0c;涵盖了各种技术领域&#xff0c;如人工智能、大数据、云计算、物联网、区块链等。以下是我眼中的一些现状和未来趋势&#xff1a; 1. 人工智能&#xff08;AI&#xff09;的普及和应用广泛化&#xff1a…

一次pytorch分布式训练精度调试过程

现象: loss不下降 过程如下: 1.减少层数&#xff0c;准备最小复现环境 2.dropout设置为0&#xff0c;重复运行二次&#xff0c;对比loss是否一致 3.第二次迭代开始loss不一致 4.对比backward之后的梯度,发现某一个梯度不一致 5.dump得到所有算子的规模&#xff0c;单算子测试…

Cocos Creator 3.8.x报错:5302

在小游戏加载某个bundle后&#xff0c;如果报以下错误&#xff1a; 5302&#xff1a;Can not find class %s 说明bundle中某个预制件*.prefab引用了未加载的bundle的资源。 解决方法有两个&#xff1a; 1、将引用的资源移到预制件*.prefab相同的bundle下&#xff1b; 2、将…

三极管 导通条件

一、三极管理解 三极管是电子行业常用的元器件之一&#xff0c;他是一种电流型控制的器件&#xff0c;他有三种工作状态&#xff1a;截止区&#xff0c;放大区、饱和区。当三极管当做开关使用时&#xff0c;他工作在饱和区。下面简短讲解三极管作为开关使用的方法&#xff0c;只…