js原生API妙用(一)

综合技术 2017-10-31 阅读原文

复制数组

我们都知道数组是引用类型数据。这里使用slice复制一个数组,原数组不受影响。

 1 let list1 = [1, 2, 3, 4];
 2 let newList = list1.slice();
 3 list1.push(5); // [1,2,3,4,5]
 4 //newList [1,2,3,4] 不受影响
 5 console.log(newList); //[1,2,3,4]
 6 console.log(list1); //[1, 2, 3, 4, 5]
 7 let list2 = [5,6,7,8];
 8 let newList2 = list2.concat();
 9 newList2.push(9); // 
10 console.log(newList2); //[5, 6, 7, 8, 9]
11 console.log(list2); //[1, 2, 3, 4, 5]

函数参数转数组

将函数参数转数组,利用arguments伪数组形式,再用slice拷贝为新数组。

1 function argsParam() {
2     //arguments伪数组形式,再用slice拷贝为新数组
3     return Array.prototype.slice.call(arguments);
4 }
5 
6 console.log(argsParam(1,2,3,4)); //[1, 2, 3, 4]

重复n个字符

利用Array构造函数传参,再使用join函数分隔指定的字符串

 1 /**
 2     @params
 3     num: 重复次数
 4     str: 重复字符串
 5 **/
 6 function repeatStr(num, str) {
 7     return new Array(num+1).join(str);
 8 }
 9 
10 console.log(repeatStr(5, 's'));//sssss

创建 N x N 二维矩阵,并初始化数据

使用Array对象传入数组length参数,调用fill再用map循环fill替换对应的值返回一个新数组

 1 /**
 2     @params
 3     num: 矩阵次数
 4     str: 矩阵数组中的值,由于fill函数替换所以值都是一致的
 5 **/
 6 function arrayMatrix(num, matrixStr) {
 7     return Array(num).fill(null).map(() => Array(num).fill(matrixStr));
 8 }
 9 //  ["a", "a", "a", "a"]  ["a", "a", "a", "a"] ["a", "a", "a", "a"] ["a", "a", "a", "a"]
10 console.log(arrayMatrix(4, 'a'));

类数组(NodeList)转数组(Array)

其实,前面几个例子也有。如slice,这里加多数组的from方法,ES6语法糖

1 //返回的不是真正的Array(你无法使用filter、map、reduce等方法)
2 const nodeList = document.querySelectorAll('div');  
3 // 方法1: 使用Array.from
4 const arrayList1 = Array.from(nodeList);
5 // 方法2: 使用slice
6 const arrayList2 = Array.prototype.slice.call(nodeList);
7 // 方法3: 使用ES6语法糖
8 const arrayList3 = [...nodeList];

数组内记录重复次数

使用reduce函数,reduce函数接收4个参数:1.累计变量:默认数组的第一个值;2.当前变量:默认数组的第二个值;3.当前位置:重0开始;4.原数组

1 const arrs = [1, 1, 1, 2, 2, 3];
2 //得到{1: 3, 2: 2, 3: 1}
3 arrs.reduce((obj, item) => {
4     if(!obj[item]) {
5         obj[item] = 0;
6     }
7     obj[item]++;
8     return obj;
9 }, {}); 

数组去重

数组去重有很多种方式如传统的for循环等,这里例子使用最新的ES6 set不重复方式,并使用set的has、add等 API操作;注意set返回的也是一个不重复的类数组形式要使用Array.from方法转成数组形式

 1 /**
 2     @params
 3     arr: 需要去重的数组
 4 **/
 5 function uniqueArray(arr) {
 6     const setArr = new Set();
 7     return arr.filter(val => !setArr.has(val) && setArr.add(val));
 8 }
 9 
10 console.log(uniqueArray([1,1,2,1,1,2,3,4,5,3,2,4]));    //[1, 2, 3, 4, 5]

参考:http://hectorguo.com/zh/magic-js/

博客园精华区

责编内容by:博客园精华区阅读原文】。感谢您的支持!

您可能感兴趣的

Playing with Discrete Fourier Transform Algorithm ... TL;DR You may find Discrete Fourier Transform algorithm in JavaScript Algorithms repository . Discrete Fourier Transform Even though Discrete...
It’s Time to Make Code More Tinker-Friendly Back in ye olde days of the information superhighway, curious newbies had an easy way to see how websites worked: View Source. If they clicke...
Google’s Search Crawlers to Natively Render JavaSc... Starting in Q2 2018, Google’s search engine crawlers will begin to render JavaScript-based webpages without the assistance of the AJAX crawling scheme...
JS 数组 数组 1.空数组 var attr = new Array[]; var attr =[]; 2.有值的 var attr = new Array; var attr = ; 3..数组点的数值添加方式 (1)通过索引赋值来添加 数组的索引从0开始va...
API Management: The Need for Greater Simplicity This article is part of the Key Research Findings from the DZone Guide to API Management: Comparative Views of Real-World Design . ...