JavaScript-ES6语法

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量332 收藏 4
点赞数 5
分类专栏： JavaWeb学习路线 文章标签： javascript es6 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44201223/article/details/139089137
版权

ES6语法特性

1 es6的介绍

ECMAScript 6，简称ES6，是JavaScript语言的一次重大更新。它于2015年发布，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等，大大提升了JavaScript的开发体验。由于VUE3中大量使用了ES6的语法,所以ES6成为了学习VUE3的门槛之一
ES6对JavaScript的改进在以下几个方面：

  1. 更加简洁：ES6引入了一些新的语法，如箭头函数、类和模板字符串等，使代码更加简洁易懂。
  2. 更强大的功能：ES6引入了一些新的API、解构语法和迭代器等功能，从而使得JavaScript更加强大。
  3. 更好的适用性：ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序。

总的来说，ES6在提高JavaScript的核心语言特性和功能方面取得了很大的进展。由于ES6已经成为了JavaScript的标准，它的大多数新特性都已被现在浏览器所支持，因此现在可以放心地使用ES6来开发前端应用程序。

历史版本：

标准版本发布时间新特性
ES11997年第一版 ECMAScript
ES21998年引入setter和getter函数，增加了try/catch，switch语句允许字符串
ES31999年引入了正则表达式和更好的字符串处理
ES4取消取消，部分特性被ES3.1和ES5继承
ES52009年Object.defineProperty，JSON，严格模式，数组新增方法等
ES5.12011年对ES5做了一些勘误和例行修订
ES62015年箭头函数、模板字符串、解构、let和const关键字、类、模块系统等
ES20162016年数组.includes，指数操作符（**），Array.prototype.fill等
ES20172017年异步函数async/await，Object.values/Object.entries，字符串填充
ES20182018年正则表达式命名捕获组，几个有用的对象方法，异步迭代器等
ES20192019年Array.prototype.{flat,flatMap}，Object.fromEntries等
ES20202020年BigInt、动态导入、可选链操作符、空位合并操作符
ES20212021年String.prototype.replaceAll，逻辑赋值运算符，Promise.any等
… …

2 es6的变量和模板字符串

ES6 新增了let和const，用来声明变量,使用的细节上也存在诸多差异

2.1 let 和var的差别

  1. let 不能重复声明

  2. let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问。

  3. let不会预解析进行变量提升

  4. let 定义的全局变量不会作为window的属性

  5. let在es6中推荐优先使用

<script>
    //1. let只有在当前代码块有效代码块. 代码块、函数、全局
    {
      let a = 1
      var b = 2
    }   
    console.log(a);  // a is not defined   花括号外面无法访问
    console.log(b);  // 可以正常输出

    //2. 不能重复声明
    let name = '天真'
    let name = '无邪'

    //3. 不存在变量提升（先声明，在使用）
    console.log(test) //可以     但是值为undefined
    var test = 'test'
    console.log(test1) //不可以  let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
    let test1 = 'test1' 


    //4、不会成为window的属性   
    var a = 100
    console.log(window.a) //100
    let b = 200
    console.log(window.b) //undefined

    //5. 循环中推荐使用
    for (let i = 0; i < 10; i++) {
      // ...
    }
    console.log(i);
</script>

2.2 const和var的差异

  1. 新增const和let类似，只是const定义的变量不能修改

  2. 并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

<script>
    //声明场景语法,建议变量名大写区分
    const PI = 3.1415926;

    //1.常量声明必须有初始化值
    //const A ; //报错

    //2.常量值不可以改动
    //const A  = 'atguigu'
    //A  = 'xx' //不可改动

    //3.和let一样，块儿作用域
    {
        const A = 'atguigu'
        console.log(A);
    }
    //console.log(A);

    //4.对应数组和对象元素修改，不算常量修改，修改值，不修改地址
    const TEAM = ['刘德华','张学友','郭富城'];
    TEAM.push('黎明');
    TEAM=[] // 报错
    console.log(TEAM)
</script>

2.3 模板字符串（template string）是增强版的字符串，用反引号（`）标识

1、字符串中可以出现换行符

2、可以使用 ${xxx} 形式输出变量和拼接变量

<script>
    // 1 多行普通字符串
    let ulStr =
        '<ul>'+
        '<li>JAVA</li>'+
        '<li>html</li>'+
        '<li>VUE</li>'+
        '</ul>'
    console.log(ulStr)    
    // 2 多行模板字符串
    let ulStr2 = `
        <ul>
        	<li>JAVA</li>
        	<li>html</li>
        	<li>VUE</li>
        </ul>`
    console.log(ulStr2)        
    // 3  普通字符串拼接
    let name ='张小明'
    let infoStr =name+'被评为本年级优秀学员'  
    console.log(infoStr)
    // 4  模板字符串拼接
    let infoStr2 =`${name}被评为本年级优秀学员`
    console.log(infoStr2)
</script>

3 es6的解构表达式

ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号 {} 表示对象，方括号 [] 表示数组。通过解构赋值，函数更方便进行参数接受等！

3.1数组解构赋值

  • 可以通过数组解构将数组中的值赋值给变量，语法为：
let [a, b, c] = [1, 2, 3]; //新增变量名任意合法即可，本质是按照顺序进行初始化变量的值
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
  • 该语句将数组 [1, 2, 3] 中的第一个值赋值给 a 变量，第二个值赋值给 b 变量，第三个值赋值给 c 变量。
    可以使用默认值为变量提供备选值，在数组中缺失对应位置的值时使用该默认值。例如：
let [a, b, c, d = 4] = [1, 2, 3];
console.log(d); // 4

3.2 对象解构赋值

  • 可以通过对象解构将对象中的值赋值给变量，语法为：
let {a, b} = {a: 1, b: 2};
//新增变量名必须和属性名相同，本质是初始化变量的值为对象中同名属性的值
//等价于 let a = 对象.a  let b = 对象.b
  
console.log(a); // 1
console.log(b); // 2
  • 该语句将对象 {a: 1, b: 2} 中的 a 属性值赋值给 a 变量，b 属性值赋值给 b 变量。
    可以为标识符分配不同的变量名称，使用 : 操作符指定新的变量名。例如：
let {a: x, b: y} = {a: 1, b: 2};
console.log(x); // 1
console.log(y); // 2

3.3 函数参数解构赋值

  • 解构赋值也可以用于函数参数。例如：
function add([x, y]) {
  return x + y;
}
add([1, 2]); // 3

  • 该函数接受一个数组作为参数，将其中的第一个值赋给 x，第二个值赋给 y，然后返回它们的和。

  • ES6 解构赋值让变量的初始化更加简单和便捷。通过解构赋值，我们可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性。

4 es6的箭头函数

ES6 允许使用“箭头” 义函数。语法类似Java中的Lambda表达式

4.1 声明和特点

<script>

    //ES6 允许使用“箭头”（=>）定义函数。
    //1. 函数声明
    let fn1 = function(){}
    let fn2 = ()=>{} //箭头函数,此处不需要书写function关键字
    let fn3 = x =>{} //单参数可以省略(),多参数无参数不可以!
    let fn4 = x => console.log(x) //只有一行方法体可以省略{};
    let fun5 = x => x + 1 //当函数体只有一句返回值时，可以省略花括号和 return 语句
    //2. 使用特点 箭头函数this关键字
    // 在 JavaScript 中，this 关键字通常用来引用函数所在的对象，
    // 或者在函数本身作为构造函数时，来引用新对象的实例。
    // 但是在箭头函数中，this 的含义与常规函数定义中的含义不同，
    // 并且是由箭头函数定义时的上下文来决定的，而不是由函数调用时的上下文来决定的。
    // 箭头函数没有自己的this，this指向的是外层上下文环境的this
    
    let person ={
        name:"张三",
        showName:function (){
            console.log(this) //  这里的this是person
            console.log(this.name)
        },
        viewName: () =>{
            console.log(this) //  这里的this是window
            console.log(this.name)
        }
    }
    person.showName()
    person.viewName()
 
    //this应用
    function Counter() {
        this.count = 0;
        setInterval(() => {
            // 这里的 this 是上一层作用域中的 this，即 Counter实例化对象
            this.count++;
            console.log(this.count);
        }, 1000);
    }
    let counter = new Counter();

</script>

4.2 实践和应用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #xdd{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="xdd"></div>
    <script>
       let xdd = document.getElementById("xdd");
       // 方案1 
       xdd.onclick = function(){
            console.log(this)
            let _this= this;  //this 是xdd
            //开启定时器
            setTimeout(function(){
                console.log(this)
                //变粉色
                _this.style.backgroundColor = 'pink';
            },2000);
        }
        // 方案2
        xdd.onclick = function(){
            console.log(this)
            //开启定时器
            setTimeout(()=>{
                console.log(this)// 使用setTimeout() 方法所在环境时的this对象
                //变粉色
                this.style.backgroundColor = 'pink';
            },2000);
        }
    </script>
</body>
</html>

4.3 rest和spread

rest参数,在形参上使用 和JAVA中的可变参数几乎一样

<script>
    // 1 参数列表中多个普通参数  普通函数和箭头函数中都支持
    let fun1 = function (a,b,c,d=10){console.log(a,b,c,d)}
    let fun2 = (a,b,c,d=10) =>{console.log(a,b,c,d)}
    fun1(1,2,3)
    fun2(1,2,3,4)
    // 2 ...作为参数列表,称之为rest参数 普通函数和箭头函数中都支持 ,因为箭头函数中无法使用arguments,rest是一种解决方案
    let fun3 = function (...args){console.log(args)}
    let fun4 = (...args) =>{console.log(args)}
    fun3(1,2,3)
    fun4(1,2,3,4)
    // rest参数在一个参数列表中的最后一个只,这也就无形之中要求一个参数列表中只能有一个rest参数
    //let fun5 =  (...args,...args2) =>{} // 这里报错
</script>

spread参数,在实参上使用rest

<script>
    let arr =[1,2,3]
    //let arrSpread = ...arr;// 这样不可以,...arr必须在调用方法时作为实参使用
    let fun1 =(a,b,c) =>{
        console.log(a,b,c)
    }
    // 调用方法时,对arr进行转换 转换为1,2,3 
    fun1(...arr)
    //应用场景1 合并数组
    let arr2=[4,5,6]
    let arr3=[...arr,...arr2]
    console.log(arr3)
    //应用场景2 合并对象属性
    let p1={name:"张三"}
    let p2={age:10}
    let p3={gender:"boy"}
    let person ={...p1,...p2,...p3}
    console.log(person)

</script>

5 es6的对象创建和拷贝

5.1 对象创建的语法糖

ES6中新增了对象创建的语法糖,支持了class extends constructor等关键字,让ES6的语法和面向对象的语法更加接近

class Person{
      // 属性
      #n;//私有
      age;
      get name(){
          return this.n;
      }
      set name(n){
          this.n =n;
      }
      // 实例方法
      eat(food){
          console.log(this.age+"岁的"+this.n+"用筷子吃"+food)
      }
      // 静态方法
      static sum(a,b){
          return a+b;
      }
      // 构造器
      constructor(name,age){
          this.n=name;
          this.age = age;

      }
  }
  let person =new Person("张三",10);
  // 访问对象属性
  // 调用对象方法
  console.log(person.name)
  console.log(person.n)
  person.name="小明"
  console.log(person.age)
  person.eat("火锅")
  console.log(Person.sum(1,2))

  class Student extends  Person{
      grade ;
      score ;
      study(){

      }
      constructor(name,age ) {
          super(name,age);
      }
  }

  let stu =new Student("学生小李",18);
  stu.eat("面条")

5.2 对象的深拷贝和浅拷贝

对象的拷贝,快速获得一个和已有对象相同的对象的方式

  • 浅拷贝
<script>
    let arr  =['java','c','python']
    let person ={
        name:'张三',
        language:arr
    }
    // 浅拷贝,person2和person指向相同的内存
    let person2 = person;
    person2.name="小黑"
    console.log(person.name)
</script>
  • 深拷贝
<script>
    let arr  =['java','c','python']
    let person ={
        name:'张三',
        language:arr
    }
    // 深拷贝,通过JSON和字符串的转换形成一个新的对象
    let person2 = JSON.parse(JSON.stringify(person))
    person2.name="小黑"
    console.log(person.name)
    console.log(person2.name) 
</script>

6 es6的模块化处理

6.1模块化介绍

模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下：

  1. 提高代码可维护性：通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护。
  2. 提高代码可复用性：通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本。
  3. 提高代码可扩展性：通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能。

目前，前端模块化有多种规范和实现，包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准，使用 import 和 export 关键字来实现模块的导入和导出。现在，大部分浏览器都已经原生支持 ES6 模块化，因此它成为了最为广泛使用的前端模块化标准. `

  • ES6模块化的几种暴露和导入方式
    1. 分别导出
    2. 统一导出
    3. 默认导出
  • ES6中无论以何种方式导出,导出的都是一个对象,导出的内容都可以理解为是向这个对象中添加属性或者方法

6.2 分别导出

在这里插入图片描述

  • module.js 向外分别暴露成员
//1.分别暴露
// 模块想对外导出,添加export关键字即可!
// 导出一个变量
export const PI = 3.14
// 导出一个函数
export function sum(a, b) {
  return a + b;
}
// 导出一个类
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}
  • app.js 导入module.js中的成员
/* 
    *代表module.js中的所有成员
    m1代表所有成员所属的对象
*/
import * as m1 from './module.js'
// 使用暴露的属性
console.log(m1.PI)
// 调用暴露的方法
let result =m1.sum(10,20)
console.log(result)
// 使用暴露的Person类
let person =new m1.Person('张三',10)
person.sayHello()
  • index.html作为程序启动的入口 导入 app.js
<!-- 导入JS文件 添加type='module' 属性,否则不支持ES6的模块化 -->
<script src="./app.js" type="module" />

6.3 统一导出

在这里插入图片描述

  • module.js向外统一导出成员
//2.统一暴露
// 模块想对外导出,export统一暴露想暴露的内容!
// 定义一个常量
const PI = 3.14
// 定义一个函数
function sum(a, b) {
  return a + b;
}
// 定义一个类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}
// 统一对外导出(暴露)
export {
	PI,
    sum,
    Person
}
  • app.js导入module.js中的成员
/* 
    {}中导入要使用的来自于module.js中的成员
    {}中导入的名称要和module.js中导出的一致,也可以在此处起别名
    {}中如果定义了别名,那么在当前模块中就只能使用别名
    {}中导入成员的顺序可以不是暴露的顺序
    一个模块中可以同时有多个import
    多个import可以导入多个不同的模块,也可以是同一个模块
*/
//import {PI ,Person ,sum }  from './module.js'
//import {PI as pi,Person as People,sum as add}  from './module.js'
import {PI ,Person ,sum,PI as pi,Person as People,sum as add}  from './module.js'
// 使用暴露的属性
console.log(PI)
console.log(pi)
// 调用暴露的方法
let result1 =sum(10,20)
console.log(result1)
let result2 =add(10,20)
console.log(result2)
// 使用暴露的Person类
let person1 =new Person('张三',10)
person1.sayHello()
let person2 =new People('李四',11)
person2.sayHello()

6.4 默认导出

在这里插入图片描述

  • modules混合向外导出
// 3默认和混合暴露
/* 
    默认暴露语法  export default sum
    默认暴露相当于是在暴露的对象中增加了一个名字为default的属性
    三种暴露方式可以在一个module中混合使用

*/
export const PI = 3.14
// 导出一个函数
function sum(a, b) {
  return a + b;
}
// 导出一个类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

// 导出默认
export default sum
// 统一导出
export {
   Person
}
  • app.js 的default和其他导入写法混用
/* 
    *代表module.js中的所有成员
    m1代表所有成员所属的对象
*/
import * as m1 from './module.js'
import {default as add} from './module.js' // 用的少
import add2 from './module.js' // 等效于 import {default as add2} from './module.js'

// 调用暴露的方法
let result =m1.default(10,20)
console.log(result)
let result2 =add(10,20)
console.log(result2)
let result3 =add2(10,20)
console.log(result3)

// 引入其他方式暴露的内容
import {PI,Person} from './module.js'
// 使用暴露的Person类
let person =new Person('张三',10)
person.sayHello()
// 使用暴露的属性
console.log(PI)
努力奔跑的鱼
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript高级-ES6新语法
liangaoyun的博客
12-28 562
目录 ES6新语法 var、let与const let和const区别： 解构赋值语法 对象解构赋值 数组解构赋值 函数参数解构 箭头函数 this指向 展开运算符 数据类型Set ES6新语法 var、let与const （ES5）var特点： (1)var的预解析会使变量声明提升 可以先调用在声明 （先上车后补票） (2)没有块级作用域,if和for大括号里面声明的变量是全局的 （ES6）let 与const： (1)没有预解析：变量必须要先声明，才能使用...
JavaScript-ES6模块化内容
LEElcg的博客
02-06 422
这篇文章讲述了ES6模块化，从模块化的简述，到特点，再有基本的暴露导出，还有默认暴露导出。本文讲解较详细。值得一看
JavaScript-ES6新特性详解
m0_63742687的博客
06-22 8373
详解ES6中的新增特性及语法
JavaScript-ES6
weixin_55088962的博客
06-22 784
JavaScript-ES6基本概念以及语法
vue进阶-es6语法
weixin_40017062的博客
06-04 1643
vue进阶-es6语法
06-ES6语法：展开运算符
热门推荐
光脚丫思考的专栏
05-28 5万+
本文我们介绍ES6的展开运算符。展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。使用了大量了代码片段介绍了具体的使用方式，并且配上了屏幕录音进行详细解说。-_-
05-ES6语法：解构赋值
光脚丫思考的专栏
05-06 3万+
本文介绍了ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式，通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。使用了大量了代码片段介绍了具体的使用方式，并且配上了屏幕录音进行详细解说。-_-
JavaScript之ES6语法
weixin_44827643的博客
07-12 2211
目录1.变量的使用（1）let的使用（2）const的使用2.解构赋值(1) 数组解构（2）对象解构3.箭头函数（1）箭头函数的写法（2）箭头函数的this指向问题本文主要介绍ES6中的一些语法。a.提供块级作用域b.不存在变量提升，需要先声明再使用，否则会出现“暂时性死区”c.不能重复声明a.定义常量，不可更改，声明时需要初始化b.提供块级作用域c.定义数组或对象时，可修改其中的元素或属性 2.解构赋值 (1) 数组解构 a.基本解构，一一对应b.不需要赋值的变量，可不写，要用逗号空出位置c.一组
JavaScript-ES6新特性使用教程
weixin_45203607的博客
03-21 1181
变量声明 var let const **var:**在相同作用域内,有同名的变量那么会覆盖 let: 不允许在相同作用域内，重复声明同一个变量 const: 常量不能被修改,也与let一样不可重复声明, 注意const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变， 所以将一个对象声明为常量必须非常小心。 数组,对象,函数的解构 数组的解构 对象的解构 函数的解构 函数参树默认值和可变参数 参数默认值 function animal(type = 'cat'){ cons
VUE-ES6语法校验
sunny_Destiny的博客
02-13 726
今天我们来学习一下处理VUE项目中ESLint语法报错问题。 在项目中右键新建.prettierrc文件 在文件中加入如下内容 { // 去掉分号 "semi":false, // 双引号变单引号 "singleQuote":true // 换行长度 "printWidth":200 } 之后，项目还有个语法警告space-before-functi...
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
02-24
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
javascript-ES6-ECMAScrip6t标准入门.xmind
11-23
全套ES6语法思维导图，代码实例，模式总结，适用于入门学习和平时开发参考
amd-to-es6：将amd转换为es
02-05
ES模块标准是在很久以后创建的，并且随着各种捆绑器和编译器的兴起，使用更简洁的语法编写现代代码成为可能。 创建该工具是为了填补迁移空白，因为其他工具无法处理某些极端情况。 它应该开箱即用地处理大多数现有...
prism-es6:启用使用ES6语法导入Prismjs库
05-08
棱镜-es6 该模块只是流行的prismjs库的包装，可以使用ES6语法导入。用法npm install --save prism-es6import Prism from 'prism-es6';现在，您可以运行Prism API，而无需在导入时执行荧光笔。 有关API选项，请参见：
Curso-JavaScript-ES6-Rocketseat-：迷你javascript JavaScript ES6 pela Rocketseat（pequeno projeto usando API do github）
02-09
Curso-JavaScript-ES6-Rocketseat- Conceitos 简介Instalando节点和纱线Configurando Babel 班级const＆let 数组操作箭头功能瓦洛雷斯·帕德拉昂Desestruturação 经营者休息/传播模板文字对象短语法简介Instalando...
Day43
最新发布
m0_67496588的博客
06-20 702
JSON，Ajax
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 372
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 389
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 169
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
vue2 es6语法报错
01-25
在Vue2中，如果你在使用ES6语法时遇到报错，可以尝试以下解决方法： 1. 确保你的开发环境支持ES6语法。Vue2默认支持ES5语法，如果你想使用ES6语法，需要进行一些配置。你可以使用Babel来将ES6语法转换为ES5语法。在项目根目录下创建一个`.babelrc`文件，并添加以下内容： ```json { "presets": ["@babel/preset-env"] } ``` 然后使用npm安装`@babel/preset-env`： ```shell npm install --save-dev @babel/preset-env ``` 2. 确保你的编辑器正确配置了ES6语法支持。如果你使用的是WebStorm，可以按照以下步骤进行配置： - 打开WebStorm的设置(Settings)。 - 在左侧面板中选择"Languages & Frameworks"，然后选择"JavaScript"。 - 在右侧面板中的"JavaScript language version"下拉菜单中选择"ECMAScript 6"。 - 点击"Apply"保存更改。 3. 如果你在.vue文件中使用ES6语法时仍然报错，可以尝试以下方法： - 打开WebStorm的设置(Settings)。 - 在左侧面板中选择"Editor"，然后选择"File Types"。 - 在右侧面板中找到"HTML"，并添加`*.vue`。 - 这样.vue文件就相当于HTML文件，可以编辑CSS和JS，并且具有智能提示。 希望以上方法能够帮助你解决Vue2中ES6语法报错的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值