ES6新特性之数组、Math和扩展操作符用法示例_网络技术

ES6新特性之数组、Math和扩展操作符用法示例

发布时间 - 2026-01-11 00:28:54 点击率：次

本文实例讲述了ES6新特性之数组、Math和扩展操作符用法。分享给大家供大家参考，具体如下：

一、Array

Array对象增加了一些新的静态方法，Array原型上也增加了一些新方法。

1.Array.from 从类数组和可遍历对象中创建Array的实例

类数组对象包括：函数中的arguments、由document.getElementsByTagName()返回的nodeList对象、新增加的Map和Set数据结构。

//in ES6中 类数组转换为数组的方法
let itemElements=document.querySelectorAll('.item');
let items=Array.from(itemElements);
items.forEach(function(item){
   console.log(item.nodeType);
});
//in ES5 类数组转换数组的方法
var items=Array.prototype.slice.call(itemElements);

上面的例子中，类数组对象itemElements对象是不具备数组方法forEach()的，但可以通过Array.from()方法转换为Array。

Array.from()另一个特性是它的第二个可选参数mapFunction,该参数允许你通过一次单独调用创建一个新的映射数组：

let navElements=document.querySelectorAll("nav li");
let navTitles=Array.from(navElements,el=>el.textContent);

2.Array.of方法

该方法表现的很像Array的构造函数，它适合只传一个参数的情况，因此Array.of是new Array()的更优选择，所以，构建数组的方式，现在有三种：

let x=new Array(3);// [undefined,undefined,undefined]
let y=Array.of(8);//[8]
let z=[1,2,3];

3.Array的find，findIndex,fill方法

1)find返回回调返回true的第一个元素
2)findIndex返回回调函数返回true的第一个元素的下标
3)fill用所给参数‘覆盖'数组的元素

[5,3,4,10,1].find(n=>n===10);//10
[5,3,4,10,1].findIndex(n=>n===10);//2
[5,3,4,10,1].fill(7);//[7,7,7,7,7]
[5,3,4,10,1].fill(7,1,3);//[5,7,7,7,1]

二、Math

Math对象新增了几个新方法：

//Math.sign返回数字的符号，结果为1、-1或0
   Math.sign(5);//1
   Math.sign(-9)//-1
//Math.trunc 返回无小数位的数字
   Math.trunc(5.9);//5
   Math.trunc(6.8908);//6
//Math.cbrt返回数字的立方根
   Math.cbrt(64);//4

三、扩展操作符

扩展操作符用于特定地方扩展元素，例如：在一个数组中扩展一个数组的元素。

let values=[1,2,4];
let some=[...values,8];//[1,2,4,8]
let more=[...values,8,...values];//[1,2,4,8,1,2,4]

再如函数调用中的参数中的应用：

let values=[1,2,4];
doSomething(...values);
function doSomething(x,y,z){
  //x=1.y=2,z=4
}
//在ES5中的调用方式
doSomething.apply(null,values);

正如所看到的，该语法使我们免去使用fn.apply()的麻烦，它很灵活，因为扩展操作符可以用在参数列表中的任意位置。

我们已经看到把扩展操作符应用在数组和参数中，事实上，我们可以把它用在所有可比案例的对象中：

let form = document.querySelectorAll('#my-form').
  inputs=form.querySelectorAll('input');
  selects=form.qurySelectorAll('select');
let allTheThings=[form,...inputs,...selects];

现在，allTheThings是一个包含<form>节点、<input>子节点和<select>子节点的二维数组。

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

# ES6 # 新特性 # 数组 # Math # 扩展操作符 # 浅谈ES6新增的数组方法和对象 # ES6 新增的创建数组的方法(小结) # ES6中数组array新增方法实例总结 # 详解es6新增数组方法简便了哪些操作 # ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析 # ES6新特征数字、数组、字符串 # ES6数组的扩展详解 # ES6新特性七：数组的扩充详解 # ES6知识点整理之数组解构和字符串解构的应用示例 # ES6新增的数组知识实例小结 # 用在 # 第一个 # 转换为 # 回调 # 增加了 # 是一个 # 几个 # 遍历 # 把它 # 我们可以 # 数据结构 # 可以通过 # 第二个 # 给大家 # 使我 # 可选 # 上也 # 在一 # 不具备 # 很像

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：基于成本考量：建站选择服务器时应考虑哪些费用因素？

下一篇：Linux如何设置访问控制列表_Linux访问控制列表的配置

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：基于成本考量：建站选择服务器时应考虑哪些费用因素？

下一篇：Linux如何设置访问控制列表_Linux访问控制列表的配置