1、Array.from(objec,回调函数)将一个ArrayLike对象或者Iterable对象(类数组对象)转换成一个数组

1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组
2)该类数组对象的属性名必须为数值型或字符串型的数字
            //新的方法

            //Array.from可以把一个类数组的对象转成数组
//该类数组对象的属性名必须为数值型或字符串型的数字
const obj = {
0:1,
1:22,
2:false,
length:2 //false不在数组中是因为length为2
};
//from()方法的作用是将一个ArrayLike对象或者Iterable对象转换成一个Array
//还可以接收第二个参数,是一个回调函数
console.log(Array.from(obj, item => item * 2)); //[2,44] //其他将类数组转换成数组的方法(相对from方法少了第二个参数):
Array.prototype.slice.call();
[].slice.call();
[...]

2、Array.of()将传入的参数合并为一个数组

            //Array.of把传进去的参数合成一个数组
console.log(Array.of(1,2,'123',false)); //[1,2,'123',false]

3、Array().fill(num,start,end)填充数组并且指定范围

            //Array().fill(num,start,end)填充数组并且指定范围,不包括end脚标
//可以很方便的去指定一个数组的默认值
let arr = new Array(5); //[empty * 5]
let arr1 = new Array(5).fill(0); //[0,0,0,0,0]
//如果数组原先有值,fill会覆盖掉
console.log([1,2,3].fill(0)); //[0,0,0]
//指定范围
let arr3 = new Array(5).fill(0,0,3); //[0,0,0,empty*2]
//new Array()这个构造函数会根据参数进行重载,只有一个参数的时候就是表示数组的长度,有多个参数就会作为数组的成员

4、Array.includes()返回布尔值,用来判断数组中是否存在某一项

            //Array.includes()返回布尔值,用来判断数组中是否存在某一项
var arr = [1,2,3,4];
console.log(arr.includes(1)); //true
console.log(arr.includes(55)); //false

5、keys  values   entries

            //keys可以拿到数组中的每一个下标
const arr = [1,2,3,444];
console.log(arr.keys()); //Array Iterator{} 迭代器接口
for(let i of arr.keys()){
console.log(i); //四行的值分别是:0 1 2 3
} //values可以拿到数组中的每一项
for(let v of arr.values()){
console.log(v); //四行的值分别是:1 2 3 444
} //entries可以同时拿到下标和对应的值,返回的是数组
for(let u of arr.entries()){
console.log(u); //四个数组:[0,1] [1,2] [2,3] [3,444]
}
//可以解构赋值,同时拿到下标跟值
for(let [i,v] of arr.entries()){
console.log(i,v); //四行的值分别是:0 1 1 2 2 3 3 444
}

6、find方法根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的值。这个方法用的比较多

            //find 根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的值
const res = [1,7,6,3].find(function(value,index,arr){
console.log('value:',value);
console.log('index:',index);
console.log('arr',arr);
return value % 2 === 0;
});
console.log(res); //6 //也可以写成箭头函数
const res1 = [1,7,6,3].find((value,index,arr) => value % 2 === 0 );
console.log(res1); //6

7、findIndex根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的下标。这个方法用的比较多

            //findIndex 根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的下标
const res2 = [1,7,6,3].findIndex((value,index,arr) => value % 2 ===0 );
console.log(res2); //返回数值6的脚标:2
//findIndex跟indexOf相似,只是indexOf无法判断有没有NaN,但是findIndex可以判断
const res3 = [1,7,6,3,NaN].findIndex((value,inde,arr) =>
Number.isNaN(value));
console.log(res3); //4

ES6扩展——数组的新方法(Array.from、Array.of、Array.fill、Array.includes、keys values entries 、find)的更多相关文章

  1. ES6中数组的新方法

    数组的扩展 1.1扩展运算符 1.1.1:... 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. <body> < ...

  2. 数组的新方法 forEach some filter findIndex

    forEach  some  filter  findIndex这些都属于数组的新方法,都会对数组中的每一项,进行遍历,执行相关的操作: 只不过在循环的时候有些不一样 参考资料:https://wan ...

  3. vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法

    //html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa=& ...

  4. ES6中数组新增的方法-超级好用

    Array.find((item,indexArr,arr)=>{}) 掌握 找出第一个符合条件的数组成员. 它的参数是一个回调函数,对所有数组成员依次执行该回调函数. 直到找出第一个返回值为t ...

  5. Vue中遍历数组的新方法

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...

  6. es5数组的新方法

    1.every方法 //逻辑判断返回值为一个Boolean值 every方法就是每一个返回函数的返回值都是true的时候,才为true,否则为false var arr=[1,2,5,88,5,555 ...

  7. 转 JavaScript里的数组转化新方法Array.From

    过去,我们使用各种各样的方法来将类似Array对象的东西(比如 arguments 和 NodeList) 转换成真的数值.比如下面这个: 将NodeList转换成数组 基本上,这些东西我们都可以使用 ...

  8. ES6扩展——字符串部分新的方法

    1.padStart padEnd(count, 字符串) 补全字符串 //padStart(num,str) padEnd补全一个字符串的长度 //num表示补全到几位,str是用来填充的字符串 { ...

  9. ES6扩展——数组扩展

    1.结合扩展运算符使用.通过扩展运算符,在调用函数的时候,把一个数组展开,然后作为这个函数的参数 //结合扩展运算符使用 function foo(a,b,c){ console.log(a); // ...

随机推荐

  1. SpringBoot中时间格式化的5种方法!

    在我们日常工作中,时间格式化是一件经常遇到的事儿,所以本文我们就来盘点一下 Spring Boot 中时间格式化的几种方法. ​ 时间问题演示 为了方便演示,我写了一个简单 Spring Boot 项 ...

  2. tomcat内置jdk(tomcat集成jdk)(windows环境)

    tomcat内置jdk,步骤: 1.在一个已经安装了jdk或者jre的机器上,拷贝一个jre到tomcat根目录下. 2.编辑tomcat/bin文件夹下的catalina.bat文件,在文件开头加上 ...

  3. 类似express的路由封装方式

    1.原理 主要过程涉及三个元素的定义,如下: //用于承载一系列方法的对象 var funObj = {}; //用于根据条件执行funObj中的方法 var app = function(){}; ...

  4. 第十一篇 -- QMainWindow与QAction(斜体-粗体-下划线)

    效果图: ui_mainWindow.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file ' ...

  5. ifix历史数据(H04/H08/H24)转换为CSV文件导出

    在最近的一次环保数据维护中,由于自己疏忽导致数据库中TP值并未有效记录,还好历史趋势有相关记录,问题是我该如何将.H24文件记录导出?在逛论坛后,无意发现一款工具解决了我的燃眉之急-HTD2CSV.e ...

  6. 如何在 NetCore 中定义我们自己的JSON配置文件的管理器。

    一.介绍 微软已经对外提供了新的平台,我们叫它们是 Net Core 平台,这个平台和 Net Framework 平台有本质的区别,这个最本质的区别就是微软的C#代码可以跨平台了.当前我们主流的3大 ...

  7. Python RPC 不会?不妨看看这篇文章

    1. 前言 大家好,我是安果! RPC,全程为 Remote Procedure Call,是一种进程间的通信方式,它采用「 服务端 / 客户机 」模式,是一种请求响应模型 其中,服务端负责提供服务程 ...

  8. 获取元素在页面中位置 getBoundingClientRect()

    DOM 原生方法getBoundingClientRect()获取元素相对视口位置 DOMRect 对象包含了一组用于描述边框的只读属性--left.top.right和bottom,单位为像素.除了 ...

  9. vim编辑文件时[O]pen Read-Only, (E)dit anyway, (R)ecover, (D)elete it, (Q)uit, (A)bort:

    ​​ ​ ​ 出现这个问题是因为你上次编辑的时候在没有保存的情况下退出了(如:电脑关机等)也有可能是有其他人在和你同时进行编辑行为(不同会话中).这是因为在用vim编辑的时候,vim会在打开文件目录下 ...

  10. SwiftUI图片处理(缩放、拼图)

    采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压 ...