复制数组

我们都知道数组是引用类型数据。这里使用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妙用(一)的更多相关文章

  1. ES7前端异步玩法:async/await理解 js原生API妙用(一)

    ES7前端异步玩法:async/await理解   在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...

  2. 使用Node.js原生API写一个web服务器

    Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...

  3. js原生api之String的slice方法

    我们在工作中可能会很少进行这样的思考,对于一些常用的原生api它是如何实现的呢,如果让我们去用js实现一个与原生api功能相同的函数我们该如何设计算法去实现呢? 为了巩固自己的编程技术和提高自己的编程 ...

  4. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  5. 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

  6. 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  7. 使用node.js进行API自动化回归测试

    概述 传统的QA自动化测试通常是基于GUI的,比如使用Selenium,模拟用户在界面上操作.但GUI测试的开发.维护成本和运行的稳定性一直是测试界的老大难问题.投入大量的人力物力开发.维护.运行,却 ...

  8. 【转】NativeScript的工作原理:用JavaScript调用原生API实现跨平台

    原文:https://blog.csdn.net/qq_21298703/article/details/44982547 -------------------------------------- ...

  9. 使用JavaScript调用手机平台上的原生API

    我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比 ...

随机推荐

  1. Mybatis第八篇【一级缓存、二级缓存、与ehcache整合】

    Mybatis缓存 缓存的意义 将用户经常查询的数据放在缓存(内存)中,用户去查询数据就不用从磁盘上(关系型数据库数据文件)查询,从缓存中查询,从而提高查询效率,解决了高并发系统的性能问题. myba ...

  2. Python学习笔记009_构造与析构

    >>> # 魔法方法>>> >>> # 魔法方法总是被双下划线包围,例如 __init__>>> # 魔法方法是面向对象的Pyt ...

  3. 来自projecteuler.net网站的练习题1

    0.题目如下: By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prim ...

  4. [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战

    我们还是从一些现有的需求和问题出发,为什么会有set,他的存在是为了解决什么问题? 我们看一个这样的例子,为一个对象添加键值对 var obj = Object.create( null ); obj ...

  5. JQuery中关于浏览器兼容性的问题

      前  言 LIUWE JQuery是一个特别强大的javascript代码库,,它的操作DOM的能力是相当强大的,JQuery可以说是支持各大主流浏览器,但是随着时代的不断发展,浏览器是在不断的更 ...

  6. 理解及操作环境变量(基于Mac操作)

    通过本文,简单的了解下环境变量及其操作,与便于遇到相关问题时能够准确快捷的解决. 什么是环境变量 An environment variable is a dynamic-named value th ...

  7. 第4章 同步控制 Synchronization ----信号量(Semaphore)

    许多文件中都会提到 semaphores(信号量),因为在电脑科学中它是最具历史的同步机制.它可以让你陷入理论的泥淖之中,教授们则喜欢问你一些有关于信号量的疑难杂 症.你可能不容易找到一些关于 sem ...

  8. 用es6的class关键字定义一个类

    es6新增class关键字使用方法详解. 通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法 ...

  9. Temperature hdu 3477

    Temperature Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  10. Reverse Words in a String III

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...