js原生API妙用(一)
复制数组
我们都知道数组是引用类型数据。这里使用slice复制一个数组,原数组不受影响。
let list1 = [1, 2, 3, 4];
let newList = list1.slice();
list1.push(5); // [1,2,3,4,5]
//newList [1,2,3,4] 不受影响
console.log(newList); //[1,2,3,4]
console.log(list1); //[1, 2, 3, 4, 5]
let list2 = [5,6,7,8];
let newList2 = list2.concat();
newList2.push(9); //
console.log(newList2); //[5, 6, 7, 8, 9]
console.log(list2); //[1, 2, 3, 4, 5]
函数参数转数组
将函数参数转数组,利用arguments伪数组形式,再用slice拷贝为新数组。
function argsParam() {
//arguments伪数组形式,再用slice拷贝为新数组
return Array.prototype.slice.call(arguments);
}
console.log(argsParam(1,2,3,4)); //[1, 2, 3, 4]
重复n个字符
利用Array构造函数传参,再使用join函数分隔指定的字符串
/**
@params
num: 重复次数
str: 重复字符串
**/
function repeatStr(num, str) {
return new Array(num+1).join(str);
} console.log(repeatStr(5, 's'));//sssss
创建 N x N 二维矩阵,并初始化数据
使用Array对象传入数组length参数,调用fill再用map循环fill替换对应的值返回一个新数组
/**
@params
num: 矩阵次数
str: 矩阵数组中的值,由于fill函数替换所以值都是一致的
**/
function arrayMatrix(num, matrixStr) {
return Array(num).fill(null).map(() => Array(num).fill(matrixStr));
}
// ["a", "a", "a", "a"] ["a", "a", "a", "a"] ["a", "a", "a", "a"] ["a", "a", "a", "a"]
console.log(arrayMatrix(4, 'a'));
类数组(NodeList)转数组(Array)
其实,前面几个例子也有。如slice,这里加多数组的from方法,ES6语法糖
//返回的不是真正的Array(你无法使用filter、map、reduce等方法)
const nodeList = document.querySelectorAll('div');
// 方法1: 使用Array.from
const arrayList1 = Array.from(nodeList);
// 方法2: 使用slice
const arrayList2 = Array.prototype.slice.call(nodeList);
// 方法3: 使用ES6语法糖
const arrayList3 = [...nodeList];
数组内记录重复次数
使用reduce函数,reduce函数接收4个参数:1.累计变量:默认数组的第一个值;2.当前变量:默认数组的第二个值;3.当前位置:重0开始;4.原数组
const arrs = [1, 1, 1, 2, 2, 3];
//得到{1: 3, 2: 2, 3: 1}
arrs.reduce((obj, item) => {
if(!obj[item]) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
数组去重
数组去重有很多种方式如传统的for循环等,这里例子使用最新的ES6 set不重复方式,并使用set的has、add等 API操作;注意set返回的也是一个不重复的类数组形式要使用Array.from方法转成数组形式
/**
@params
arr: 需要去重的数组
**/
function uniqueArray(arr) {
const setArr = new Set();
return arr.filter(val => !setArr.has(val) && setArr.add(val));
} 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/
js原生API妙用(一)的更多相关文章
- ES7前端异步玩法:async/await理解 js原生API妙用(一)
ES7前端异步玩法:async/await理解 在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...
- 使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
- js原生api之String的slice方法
我们在工作中可能会很少进行这样的思考,对于一些常用的原生api它是如何实现的呢,如果让我们去用js实现一个与原生api功能相同的函数我们该如何设计算法去实现呢? 为了巩固自己的编程技术和提高自己的编程 ...
- jQuery? 回归JavaScript原生API
如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...
- 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- 使用node.js进行API自动化回归测试
概述 传统的QA自动化测试通常是基于GUI的,比如使用Selenium,模拟用户在界面上操作.但GUI测试的开发.维护成本和运行的稳定性一直是测试界的老大难问题.投入大量的人力物力开发.维护.运行,却 ...
- 【转】NativeScript的工作原理:用JavaScript调用原生API实现跨平台
原文:https://blog.csdn.net/qq_21298703/article/details/44982547 -------------------------------------- ...
- 使用JavaScript调用手机平台上的原生API
我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比 ...
随机推荐
- Java NIO vs IO
NIO :http://tutorials.jenkov.com/java-nio/index.html IO:http://tutorials.jenkov.com/java-io/index.ht ...
- Ansible系列(五):playbook应用和roles自动化批量安装示例
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- Opengl4.5 中文手册—G
索引 A B C D E F G H I J K L M N O P Q ...
- 关于API,前后端分离
之前再开放新型web项目和app时,遇到了和前后端交互的问题.总所周知的是,web前后端交接时,最重要的交互方式的接口的制定. 而关于接口的规定,衍生出了一大堆问题,第一是关于空值的制定,是不输出呢? ...
- E - 今年暑假不AC HDU - 2037
"今年暑假不AC?" "是的." "那你干什么呢?" "看世界杯呀,笨蛋!" "@#$%^&* ...
- 1.在CentOS 6.4安装python3
CentOS安装Python3.X 1.系统环境说明 [root@Python ~]# uname -r 2.6.32-431.el6.i686 [root@Python ~]# uname -m i ...
- hdu3974 找上属的模拟
There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...
- POJ 2359 Questions(约瑟夫环——数学解法)
题目链接: http://poj.org/problem?id=2359 题意描述: 输入一个字符串 按照下面的规则,如果剩下的最后一个字符是'?',输出"Yes",如果剩下的最后 ...
- java远程备份mysql数据库关键问题(限windows环境,亲测解决)
其它环境同理也可解决. 条件:为了使用mysql命令,本机要安装mysql ,我本机安装的是mysql 5.5. 错误1:使用命令 mysqldump -h192.168.1.50 -u root - ...
- C-多个行内块布局
1 消除间隔