三、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>子节点的二维数组。

ES6新特性-------数组、Math和扩展操作符(续)的更多相关文章

  1. ES6新特性:Function函数扩展, 扩展到看不懂

    本文所有Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 函数的默认值: 如果有参数 ,那就用参数, 如果没有参数, 那就用默认的参数: aj ...

  2. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

  3. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  4. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  5. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

  6. 34.js----JS 开发者必须知道的十个 ES6 新特性

    JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...

  7. ES6新特性概览1

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  8. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  9. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

随机推荐

  1. java.lang.NoSuchMethodError: main Exception in thread "main"

    java.lang.NoSuchMethodError: main Exception in thread "main" 一般是主函数出问题 检查核对一下 public stati ...

  2. Effective Java2读书笔记-类和接口(二)

    第15条:使可变性最小化 通过一个复数类来看不可变类. public final class Complex { private final double re; private final doub ...

  3. linux安装xunsearch

    首先要确保ubuntu安装了gcc g++ make sudo apt-get install make gcc g++ 然后安装zlib,用来解压的: apt-get install zlib1g- ...

  4. 使用CURL发彩信,短信和进行多线程

    短彩信发送 01 $xml_data = '<?xml version="1.0" encoding="UTF-8" standalone="y ...

  5. Postgres的用户认证

    我们先来讲讲postgresql的用户认证吧. 我想我们有必要明白以下几个问题: 第一.postgresql的用户和操作系统的用户没有任何直接的的关系.虽然在postgaresql的初始安装中,它会有 ...

  6. document.body.scrollTop vs document.documentElement.scrollTop && document.body.scrollHeight vs document.documentElement.scrollHeight

    FireFox下 document.body.scrollHeight || document.documentElement.scrollHeight;//等价 document.body.scro ...

  7. JAVA实现实用的ZIP压缩与解压

    http://blog.csdn.net/z69183787/article/details/38555913

  8. 在Struts2中集成Spring详细讲解

    Spring的官方定义是:一个轻量级的IoC和Aop容器框架,它使用了一种叫做依赖注入的技术. 所谓依赖注入,就是指将创建对象以及协议依赖对象之间合作的责任从对象自身中转移到"工厂" ...

  9. CF 584B Kolya and Tanya

    题目大意:3n个人围着一张桌子,给每个人发钱,可以使1块.2块.3块,第i个人的金额为Ai.若存在第个人使得Ai + Ai+n + Ai+2n != 6,则该分配方案满足条件,求所有的满足条件的方案数 ...

  10. Encode and Decode Strings 解答

    Question Design an algorithm to encode a list of strings to a string. The encoded string is then sen ...