ES6数组可以支持下面的几种写法:

  1. 1var [a,b,c] = [1,2,3];
  2. 2var [a,[[b],c]] = [1,[[2],3]];
  3. 3let [x,,y] = [1,2,3]; //x=1 y=3
  4. 4var [x,...y] = [1,2,3,4]; //x=1 y=[2,3,4]

  当然我认为代码必须要有易读性,所以请谨慎选择写法。

  下面就要说数组的方法
   转换成数组的方法Array.from()这个方法是把类似数组的对象或者是可遍历的对象转化为数组(包括了ES6里面的Set和Map方法)如果参数是一个数组则会返回一个一模一样的数组,这个方法如果传入的是一个字符串那么他会把传入的字符串拆开并返回。
  代码示例
  1. var shuzu = {
  2. '0' : "h",
  3. '1' : "e",
  4. '2' : "l",
  5. '3' : "l",
  6. '4' : "o",
  7. length : 3,//要输出的长度
  8. };
  9. console.log(Array.from(shuzu)); //[ 'h', 'e', 'l' ]
  10. console.log(Array.from(shuzu).length); //
  11. console.log(Array.from('apple')); //[ 'a', 'p', 'p', 'l', 'e' ]
  12. console.log(Array.from('apple').length); //

  如果是将一堆值转化为数组使用Array.of()

  1. console.log(Array.of(1,2,3));//[ 1, 2, 3 ]
  2. console.log(Array.of(1,2,3).length);//

  如果是复制当前数组某值到当前数组的某个位置使用copyWithin()会返回一个新的数组,接受三个参数依次为从该位置开始替换数据、从该位置开始读取数据和到该位置前停止读取数据。

  1. console.log([0,1,2,3,4,5,6].copyWithin(0)); //[ 0, 1, 2, 3, 4, 5, 6 ]
  2. console.log([0,1,2,3,4,5,6].copyWithin(0,2)); //[ 2, 3, 4, 5, 6, 5, 6 ]
  3. //舍弃第二位以前的后面的补位并把后位用最后的两位补齐
  4. console.log([0,1,2,3,4,5,6].copyWithin(0,2,3)); //[ 2, 1, 2, 3, 4, 5, 6 ]
  5. //把原第三位补至原第零位其他位不变
  6. console.log([0,1,2,3,4,5,6].copyWithin(0,2,4)); //[ 2, 3, 2, 3, 4, 5, 6 ]
  7. //把原第二位第三位补至原第零位和第一位
  8. console.log([0,1,2,3,4,5,6].copyWithin(0,2,5)); //[ 2, 3, 4, 3, 4, 5, 6 ]
  9. //把原第二三四位补至原第零一二位

  判断该数组是否含有某值使用find()方法,这个方法有三个参数value(寻找的值)、index(从哪开始)、arr(原数组),这个方法用于找出第一个符合条件的数组成员并返回该值

  1. console.log([1,2,3,4].find((n) => n<4)); //
  2. console.log([1,2,3,4].find(function (value,index,arr) {return value<4 ;})); //

  如果要把数组内部全部替换并返回一个新的数组使用fill()方法,这个方法接受三个参数value(要填充的值)、start(从哪里填充)、end(填充到哪)。

  1. console.log([1,2,3].fill('a')); //[ 'a', 'a', 'a' ]
  2. console.log([0,1,2].fill('a',1,3)); //[ 0, 'a', 'a' ]
  3. //如果结束位大于等于数组的长度那么会从开始为到结束位都填充上填充的值 console.log([0,1,2,3,4].fill('a',1,3)); //[ 0, 'a', 'a', 3, 4 ]
  4. /*也可以这么写*/
  5. console.log(new Array(3).fill('a')); //[ 'a', 'a', 'a' ]

  如果你要遍历数组那么有三个方法可供选择entries()、keys()、values(),都返回一个遍历器对象,可以用for...of循环遍历,他三个不同的是keys()对键名的遍历,values()是对值的遍历,entries()是对键值对的遍历。

  1. for(let index of [ 'test' , 'ceshi' , 'apple' ].keys()){ console.log(index); } // 0 1 2
  2. for(let [index,values] of [ 'test' , 'ceshi' , 'apple' ].entries()){ console.log(index,values); }//0 'test' 1 'ceshi' 2 'apple'
  3. for(let values of [ 'test' , 'ceshi' , 'apple' ].values()){ console.log(values); } //报错!!!也不知道为什么我的不支持这个函数,如果有发现这个问题怎么解决请在后面留言 Thanks?(?ω?)?

  如果查看数组里面是否含有某值使用includes()他会返回一个布尔值,有两个参数values(值)、start(从第几个开始)。

  1. console.log([1,2,3].includes(1));//true
  2. console.log([1,2,3].includes(1,2));//false

  数组推导允许直接通过现有的数组生成新的数组,有点像vue里面的 x of y

  1. var nums = [1,2,3,4,5,6];
  2. for (num of nums) if(num>2){ console.log(num); } ; //3 4 5 6

ES6数组及数组方法的更多相关文章

  1. ES6中数组的新方法

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

  2. 漫谈数组去重复方法(亮点是ES6的新API)

    方法1: 利用遍历的思想来进行. <!DOCTYPE html><html lang="en"><head> <meta charset= ...

  3. JavaScript(ES6之前)数组方法总结

    一.数组的创建 1.使用 Array 构造函数 var arr1 = new Array(); // 创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 ...

  4. ES6数组对象新增方法

    1. Array.from() Array.from方法用于将两类对象转为真正的数组:类数组的对象( array-like object )和可遍历( iterable )的对象(包括 ES6 新增的 ...

  5. 前端面试之ES6新增了数组中的的哪些方法?!

    前端面试之ES6新增了数组中的的哪些方法?! 我们先来看看数组中以前有哪些常用的方法吧! 1 新增的方法! 1 forEach() 迭代遍历数组 回调函数中的三个参数 value: 数组中的每一个元素 ...

  6. ES6中的数组方法扩展

    上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...

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

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

  8. ES6新增的数组方法

    ES6新增:(IE9级以上支持) 1.forEach():遍历数组,无返回值,不改变原数组. 2.map():遍历数组,返回一个新数组,不改变原数组. 3.filter():过滤掉数组中不满足条件的值 ...

  9. ES6扩展——数组的新方法(Array.from、Array.of、Array.fill、Array.includes、keys values entries 、find)

    1.Array.from(objec,回调函数)将一个ArrayLike对象或者Iterable对象(类数组对象)转换成一个数组 1)该类数组对象必须具有length属性,用于指定数组的长度.如果没有 ...

随机推荐

  1. 电商SEO

    大家都知道网站有SEO,电商也有SEO,今天陈晨就带大家来讲讲电商SEO的思路以及电商最重要的选品规划! 1. 选品是核心 2. 挖掘卖点是你走向成功必经之路 3. 产品定价策略---人群画像 4. ...

  2. phpcms v9 sql注入脚本

    phpcms v9 SQL注入脚本 用法:python phpcms.py http://www.baidu.com import requests,sys,urllib url = sys.argv ...

  3. [模拟]P1202 [USACO1.1]黑色星期五Friday the Thirteenth

    原题 解析: 坑 其实.样例的部分是从周六~周五输出的,习惯不同吧..这里考虑到从这个月的13号到下一个月的13号所花天数为这个月的天数,然后愉快的判断一下闰年即可.这里的周一~周日编号为0~6,一月 ...

  4. laravel 表单验证 Exists 规则的基本使用方法

    public function rules(){ return [ 'm_pushing_frequency_level_id' => 'integer|required|exists:m_pu ...

  5. td-agent 收集日志到kafka的配置

    <source> @type tail path /data1/td-agent/wechat-tag*.log tag wechat-tag read_from_head true fo ...

  6. 找到链表的倒数第K位

    #include<iostream> using namespace std; class node{ public: node():value(),next(NULL){} ~node( ...

  7. 从a标签传值中文乱码解决

    <% out.print(new String(request.getParameter("a标签的参数").getBytes("iso8859-1"), ...

  8. .NET作品集:linux下的博客程序

    博客程序架构 本博客程序是博主11年的时候参考loachs小泥鳅博客内核开发的.net跨平台博客cms,距今已有6年多了,个人博客网站一直在用,虽然没有wordpress那么强大,但是当时在深究.ne ...

  9. Java 三大特性

    一.Java第一大特性:封装   封装:将属性私有化,提供共有方法访问私有属性,实现细节隐藏,并且程序也更加容易维护. class Dish { private final String name; ...

  10. 基于Spring Aop实现类似shiro的简单权限校验功能

    在我们的web开发过程中,经常需要用到功能权限校验,验证用户是否有某个角色或者权限,目前有很多框架,如Shiro Shiro有基于自定义登录界面的版本,也有基于CAS登录的版本,目前我们的系统是基于C ...