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开发的前端应用打包成某个手机平台(比 ...
随机推荐
- 接口测试入门(3)--使用httpClient进行登录用例操作/set-cookies验证/ List<NameValuePair>设置post参数/json解析
(最近学的都是很基础的接口测试,都是基于UI界面可见的接口,就是发请求,接收响应,分析返回的结果,校验,对共通模块进行封装,仅此而已,其实做自动化的思路基本都是如此,UI也是.) 现在开始用httpC ...
- Oracle-更新字段-一张表的字段更新另一张的表的字段
设备表ops_device_info中的终端号terminal_id值是以 'D'开头的字符串,而终端表ops__terminal_info中的终端号terminal_id是8位字符串, 它们之间是通 ...
- eclipse安装java ee插件方法步骤
1.本人以前使用的MyEclipse进行Javaweb开发,但是后来由于myeclipse实在太臃肿,经常在运行的过程中不流畅 (可能电脑内存也不是太高吧) !所以坚决换用eclipse,但是问题 ...
- Redisson分布式锁的简单使用
一:前言 我在实际环境中遇到了这样一种问题,分布式生成id的问题!因为业务逻辑的问题,我有个生成id的方法,是根据业务标识+id当做唯一的值! 而uuid是递增生成的,从1开始一直递增,那么在同一台机 ...
- Delphi中paramstr的用法
原型 function paramstr(i:index):string 对于任何application paramstr(0)都默认代表的是应用程序的 ...
- 关于 char 、 wchar_t 、 TCHAR 、 _T() ||| 宏 _T 、 TEXT 、 _TEXT 、 L
char :单字节变量类型,最多表示256个字符,wchar_t :宽字节变量类型,用于表示Unicode字符,它实际定义在<string.h>里:typedef unsigned sho ...
- [UWP]创建一个进度按钮
1. 前言 最近想要一个进度按钮. 传统上UWP上处理进度可以这样实现,首先是XAML,包括一个ProgressBar和一个按钮: <StackPanel Orientation="H ...
- Spring 5:以函数式方式注册 Bean
http://www.baeldung.com/spring-5-functional-beans 作者:Loredana Crusoveanu 译者:http://oopsguy.com 1.概述 ...
- 基于maven创建和部署Webx项目
1.准备工作 下载 Webx Maven 项目的目录结构Artifact插件. archetype-webx-quickstart-1.0.tar.gz插件:http://central.maven. ...
- hdu4614 线段树+二分 插花
Alice is so popular that she can receive many flowers everyday. She has N vases numbered from 0 to N ...