ES6新增特性详解:字符串模板、数组转换、类封装与箭头函数

作者:青柠时间:2026-10-23 14:47:09浏览:575

本文深入解析ES6新增核心语法,涵盖模板字符串的多行格式化、Array.from与Array.of的数组转换机制、class类封装语法、对象简写与Object.assign合并技巧。重点讲解延展操作符、Rest参数、箭头函数的多种写法及Promise异步处理流程,结合代码实例说明实际应用场景。

本文通过具体实例,系统梳理ES6中字符串、数组、对象及函数的关键新增特性,旨在为开发者提供清晰的参考与学习路径。

1、模板字符串

使用反引号(``)包裹文本可创建模板字符串,支持多行格式化显示。在反引号内部,通过 ${} 语法嵌入表达式,实现动态内容拼接。


  let str=`
    <!DOCTYPE html>
      <html lang="en">
        <body>
          <div>
            <p class="pClass">格式化字符串</p>
          </div>
        </body>
      </html>
  `;
  console.log(str);

2、转化为数组

利用 Array.from() 方法,可将类数组对象(如 NodeList)或可迭代对象(如 Set)转换为真正的数组实例。


let allLi=document.querySelectorAll('li');
console.log(Array.isArray(allLi));//输出false,allLi不是个数组
let arr=Array.from(allLi);
console.log(Array.isArray(arr));//输出true,arr被转化为数组

使用 Array.of() 方法,可根据传入的参数直接构建新数组,确保参数数量与类型被正确识别,避免与 Array 构造函数在单数字参数时的行为差异。


let arrayOf=Array.of('str',2,{});  //创建由字符串、数字、对象构成的数组
let arr=Array.of(7);         //数组包含一个元素7
let arr=Array(7);          //数组包含7个空元素

3、类的封装

ES6 引入了 class 关键字,用于定义类结构。通过 constructor 方法初始化属性,并可在类中定义实例方法,实现面向对象编程的封装特性。


  class Person{    
    constructor(name,age){  //Person类的构造函数
      this.name=name;
      this.age=age;
    }
    
     print(){        //类函数输出
      console.log("My name is "+this.name+",I'm "+this.age+" years.");
    }
  }
  let p=new Person('tony',15);
  p.print();

4、对象的使用

在对象字面量中,若属性名与变量名相同,可省略属性名,直接写入变量名。此时,变量名自动作为键,变量值作为对应的值。


let name='tony';
let age=15;
let person={
  name,
  age
}  
console.log(person);

输出结果为:

Object { name: "tony", age: 15 }

Object.assign()方法实现对象合并,参数为:合并目标,合并源1,合并源2...,数值2


let obj1={'name':'tony'};
let obj2={'age':15};
let obj3={'sex':'男'};
let obj={};
Object.assign(obj,obj1,obj2,obj3);  //将后面的对象并到第一个对象
console.log(obj);

输出为:

Object { name: "tony", age: 15, sex: "男" }

5、延展操作符...

延展操作符(...)可将字符串、数组或对象展开为独立的元素序列,常用于参数传递或数组拼接。


let str="这是一个字符串";
let arr=[...str];
console.log(arr);

输出为:

1、模板字符串

6、函数Rest参数

当函数接收的参数数量不确定时,可使用 Rest 参数语法(...参数名)。该参数会将所有剩余参数收集为一个数组,便于通过循环等方式统一处理。


  function sum(name,...num) {
    console.log(name);
    let res=0;
    for (let value of num){  //将后面未知个数的参数当作数组num遍历
      res+=value;      
    }
    return res;
  }
  console.log(sum('tony',10,2,3));

7、箭头函数

箭头函数提供了一种更简洁的函数定义方式,语法为 (参数...) => {表达式...}。它省略了 function 关键字,且在特定情况下可省略括号、大括号及 return 语句。

1、当只有一个参数时,可省略参数周围的括号,直接写为 参数 => 表达式。例如,使用 map 方法遍历数组并将每个元素乘以 2:


var arr = [1, 4, 9, 16];
const map1 = arr.map(x => x * 2);  //利用map()遍历数组,传入一个参数当作x,并返回x*2

map 回调函数以 x 为参数遍历 arr 中的每个元素,执行 *2 操作后自动返回结果,生成新的 map1 数组。

2、当存在多个参数时,必须为参数列表添加括号:() => 表达式。例如,遍历数组并同时输出索引与值:


let arr=['data0','data1','data2'];
arr.forEach((value,index)=>   //通过forEach遍历数组,传入两个参数value与index
  console.log(index+':'+value)
);

输出如下:

1、模板字符串

3、当函数体包含多条语句时,必须使用大括号 {} 将代码块包裹。此时函数不再自动返回值,需显式使用 return 语句返回期望结果。

4、JavaScript 中 {} 也可表示对象字面量。若箭头函数旨在返回对象,需将对象用括号 () 包裹,即 () => ({}),否则解释器会将其误认为代码块。例如在 React 中使用 setState 返回新状态对象:


this.setState((prevState) =>({
  flag: !prevState.flag
}))

8、Promise函数

在异步接口调用中,常需根据请求成功或失败执行不同逻辑。ES6 提供的 Promise 对象用于管理异步操作的状态。成功时触发 .then 方法,失败时触发 .catch 方法,从而分别处理不同分支的数据流。

例如,定义一个检查登录状态的 Promise 函数。当传入参数 flag 为 true 时,调用 resolve 回调;为 false 时,调用 reject 回调:


    //定义promise函数
    let checkLog=function (flag) {    
     return new Promise(function(resolve,reject){
      if(flag){        //如果判定条件为真,执行resolve函数
       resolve({       //其括号内的参数作为结果返回
        status:1,
        info:"登陆成功"
       })
      }else{          //判定为假执行reject函数
       reject({
        status:0,
        info:"登陆失败"
        }
       )
      }
     })
    };
    //使用promise函数
    checkLog(false).then(res=>{  //根据promise返回的不同值分别执行then或catch
     console.log(`成功信息:${res.info}`);
    }).catch(err=>{
     console.log(`错误信息:${err.info}`);
    })

当传入true:1、模板字符串当传入false:1、模板字符串

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章