复制数组

我们都知道数组是引用类型数据。这里使用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. PolarDB · 新品介绍 · 深入了解阿里云新一代产品 PolarDB

    背景意义 云计算为如今的互联网时代提供了更多的计算能力,乃至创造能力,关系型数据库作为所有应用不可或缺的重要部件,开箱即用,高性价加比特性的云数据库深受开发者的喜爱.作为一线的开发和运维人员,在阿里云 ...

  2. 启动PHPstudy提醒80、3306端口被占用

    端口占用会出现如下提醒 解决办法: 进入dos窗口:快捷键win+R,然后输入cmd 在dos窗口中输入命令:netstat   -ano(查找各端口所在进程的PID) 找到80和3306的程序PID ...

  3. 如何用kaldi做孤立词识别-初版

    ---------------------------------------------------------------------------------------------------- ...

  4. C#的"?"修饰符和"??"运算符

    一.  ?  可空类型修饰符 “?”用来修饰为空的值类型,在加上“?”修饰符后,值类型也可以为空了,如: public int? CommandTimeout { get; }: var prop = ...

  5. EXIT_SUCCESS EXIT_FAILURE

    在vc++6.0下头文件stdlib.h中定义如下: /* Definition of the argument values for the exit() function */ #define E ...

  6. poj1014二进制优化多重背包

    Dividing Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 53029   Accepted: 13506 Descri ...

  7. bzoj2111 Perm 排列计数

    称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很大,只能输 ...

  8. Python自学笔记-列表生成式(来自廖雪峰的官网Python3)

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看. 列表生成式 列 ...

  9. XML读取信息并显示

    这个类命名叫Message.cs namespace Common { public class Message { /// <summary> /// 信息编号 /// </sum ...

  10. C# 使用Parallel并行开发Parallel.For、Parallel.Foreach实例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...