ES6数组的拓展

Posted rickyctbur

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6数组的拓展相关的知识,希望对你有一定的参考价值。

  数组的部分方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>慕课网</p>
<p>妙味课堂</p>
<p>爱创课堂</p>
<script>
    //Array.of() 将传入的参数合并成一个数组
    let arr = Array.of(1,2,3,4,5,6);
    console.log(arr)//[1,2,3,4,5,6]
    let arr1 = Array.of();
    console.log(arr1)//[ ]
    //Array.from 将一个集合转化成一个数组 也可以对一个数组进行映射
    let p = document.querySelectorAll(p);
    let pArr = Array.from(p);
    pArr.forEach(function(item)
        console.log(item.innerHTML)
    )
    console.log( Array.from([1,3,5],function(item)
        return item*2;
    ))//[2,6,10]  第一个参数为数组  第二个参数是一个函数 对数组进行映射

</script>
</body>
</html>
    //fill()将一个数组中的元素进行替换 第一个参数 替换的值 第二个参数替换的起始下标 第三个参数替换的结束下标
   console.log([‘a‘,‘b‘,5,‘你好‘,9].fill(‘替换‘,1,3))// ["a", "替换", "替换", "你好", 9]
    //获取数组中第一个满足条件的值
    console.log([1,2,3,4,5,6].find(function(item)return item>3));
    //获取数组中第一个满足条件的值的下标
    console.log([1,2,3,4,5,6].findIndex(function(item)return item>3));
    //判断数组中是否存在传入的参数
    console.log([1,2,NaN].includes(1));
    console.log([1,2,NaN].includes(NaN));

  数组的遍历细节:

    for(let index of [‘1‘,‘c‘,‘ks‘].keys())
        console.log(‘keys‘,index);
    
    //values需要用babel-polyfill
    for(let value of [‘1‘,‘c‘,‘ks‘].values())
        console.log(‘values‘,value);
    
    for(let [index,value] of [‘1‘,‘c‘,‘ks‘].entries())
        console.log(‘values‘,index,value);
    

   匹配规则:

const arr = [‘a‘,‘b‘,[‘c‘,‘d‘,[‘e‘,‘f‘,‘g‘]]];
let [ , ,[ , ,[ , ,q]]] = arr;
alert(q);
// 弹出 g

   交换变量:

let a = 20;
let b = 10;
[a,b] = [b,a];
//结果 a = 10 ,b = 20 两个变量互换

  扩展运算符:

const arr1 = [1,2,3];
const arr2 = [‘a‘,‘b‘];
const arr3 = [‘aaa‘,456];
const arr4 = [...arr1,...arr2,...arr3];
//arr4 => 将arr1,arr2,arr3合并成一个数组 arr4 = [1,2,3,‘a‘,‘b‘,‘aaa‘,456]
const arr = [1,2,3,4];
const [a,b,...c] = arr;
//将剩余未匹配到的值合并成一个数组赋值给c c = [3,4]

   接收多个 函数返回值 :

function getNum()
    return [
        "你好",
        
            name : "小明",
            age : 16,
            sex : "男"
        ,
    ];

const [first,second,third] = getNum();
/*
 结果 :girst => "你好" , second => name : "小明",age : 16,sex : "男" , third => 123
*/ 

以上是关于ES6数组的拓展的主要内容,如果未能解决你的问题,请参考以下文章

ES6数组的拓展

ES6拓展运算符(...)用例

es6 有哪些拓展

数组原生api以及es6+函数式编程(curry)实现lodash函数

Js es6中扩展运算符(...)

ES6 随记(3.4.1)-- 函数的拓展(参数默认值,扩展运算符)