JavaScript ES6语法详解(上)

发布于:2024-08-02 ⋅ 阅读:(45) ⋅ 点赞:(0)

前言:哈喽,大家好,我是码喽的自我修养!今天给大家分享JavaScript ES6语法详解(上)!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到带大家,欢迎收藏+关注哦 💕

🌈🌈文章目录

一、let声明变量

1、关于越域

2、var 可以声明多次;let只能声明一次

3、var会变量提升;let不存在变量提升

二、const声明变量

1、声明之后不允许改变

2、一旦声明必须初始化,否则会报错

三、解构表达式

1、数组解构

2、对象解构

四、字符串扩展

五、字符串模板

六、字符串插入变量和表达式

一、let声明变量

1、关于越域

var声明的变量往往会越域;let声明的变量有严格局部作用域

    {
      var a = 1;
      let b = 2;
    }
    console.log(a)  // 1
    console.log(b)  // Uncaught ReferenceError: b is not defined
2、var 可以声明多次;let只能声明一次
 	var m = 1;
    var m = 2;
    let n = 1;
    let n = 2;
    console.log(m) //2
    console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared
3、var会变量提升;let不存在变量提升
  	console.log(x);
    var x = 10; // undefined
    console.log(y);
    let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization

注意:以后要习惯使用let声明变量

二、const声明变量

const声明变量 相当于声明了一个常量

1、声明之后不允许改变
	const a = 1;
    console.log(a) //1
    a = 2;
    console.log(a) // Uncaught TypeError: Assignment to constant variable.
2、一旦声明必须初始化,否则会报错
  const a;
  a = 1; 
  console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration

三、解构表达式

1、数组解构
 let arr = [1, 2, 3];
 let [a, b, c] = arr;
 console.log(a, b, c) //1,2,3
2、对象解构
    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    const { name, age, language } = person 
    console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]
    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    //从person里解析出name的值在赋值给abc
    const { name:abc, age, language } = person
    console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]

四、字符串扩展

 	let str = "hello.vue";
    console.log(str.startsWith("hello")) //true
    console.log(str.endsWith("vue")) //true
    console.log(str.includes("e")) //true
    console.log(str.includes("hello")) //true

五、字符串模板

let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>

六、字符串插入变量和表达式

es6语法详解: 字符串插入变量和表达式。变量写在${}中,${}中可以放入js表达式

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23
   function fun() {
      return "这是一个函数";
    }
    let info = `我是${abc},今年${age + 10},我想说:${fun()}`
    console.log(info) //我是qiyue,今年33,我想说:这是一个函数

🚀 个人简介:某大型国企高级前端开发工程师,7年研发经验,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养❣️
📝 专    栏:JavaScript深入研究
🌈 若有帮助,还请 关注➕点赞➕收藏 ,不行的话我再努努力💪💪💪 

 更多专栏订阅推荐:

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化