1数组中删除重复

let arr = [1,2,4,3,6,4]

Array.from(new Set(arr)) // es6中 .from()[1,2,4,3,6]

[...new Set(arr)] // 扩展运算符[1,2,4,3,6]

2替换数组中指定的值

arr .splice(1,3,7,8,9) // [7, 8, 9]
arr // [1, 7, 8, 9, 6, 4]

3数组映射

let mapValue = [
{ name: '山东', value: 22 },
{ name: '北京', value: 23 },
{ name: '上海', value: 24 }
] mapValue.map(item=> {item.name}); // map Array.from(mapValue, ({name}) => name); // .from()

4清空数组 

arr.length = 0 //   arr =[]

5将数组转化为对象

let obj = {...arr } // {0: 1, 1: 7, 2: 8, 3: 9, 4: 6, 5: 4}

6合并数组

let arr2 =['one','two',2] // [1, 2, 4, 3, 6, 4, "one", "two"]

[...arr2,...arr] // ["one", "two", 1, 2, 4, 3, 6, 4]

7两个数组的交集

首先保证数组中的值不重复,然后利用.filter和.includes方法即可

let numOne = [0, 2, 4, 6, 8, 8];
let numTwo = [1, 2, 3, 4, 5, 6]; [...new Set(numOne)].filter(item => numTwo.includes(item))

8从数组中删除假值

首先在Javascript中,假值包括false、0、''、null、NaN、undefined

let mixArrs =[null,3,undefined,true,'']

mixArrs.filter(Boolean); // [3, true]

9颠倒数组中元素的顺序

let mixArrs =[null,3,undefined,true,'']

mixArrs.reverse() // ["", true, undefined, 3, null]

10数组中的所有值求和

let  array = [1, 2, 3, 4, 5]

eval(array.join("+")) ; //
array.reduce((x, y) => x + y); //

11使用固定值填充数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.fill("Runoob"); //Runoob,Runoob,Runoob,Runoob

let newArr =  new Array(6).fill('2'); // ["2", "2", "2", "2", "2", "2"]

JavaScript 实用技巧的更多相关文章

  1. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  2. 【JavaScript实用技巧(二)】Js操作DOM(由问题引发的文章改版,新人大佬都可)

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  3. JavaScript 实用技巧和写法建议

    1.前言 从大学到现在,接触前端已经有几年了,感想方面,就是对于程序员而言,想要提高自己的技术水平和编写易于阅读和维护的代码,我觉得不能每天都是平庸的写代码,更要去推敲,去摸索和优化代码,总结当中的技 ...

  4. javascript实用技巧,js小知识

    一.js整数的操作 使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等效果的时候会很有用.性能比较见此. var foo = (1 ...

  5. JavaScript实用技巧总结

    前言 总结一下最近接触到的JavaScript语法糖,与大家共享. 每块糖都有详细的说明和示例,就不多说了. 准确的类型检查 /* * @function: * 类型检查示例 * 通过此方法,可以检查 ...

  6. Javascript实用技巧

    1. 给参数赋默认值 //通常写法 function dateRender(format){ if(format){ format = 'Y-m-d'; } // code } //强推 functi ...

  7. 41个Web开发者必须收藏的JavaScript实用技巧

    1. 将彻底屏蔽鼠标右键 oncontextmenu=”window.event.returnValue=false” < table border oncontextmenu=return(f ...

  8. 12个十分实用的JavaScript小技巧

    12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...

  9. 实用Javascript调试技巧

    摘要: 高效调试JS代码. 原文:实用Javascript调试技巧分享 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 见过太多同学调试Javascript只会用简单的con ...

随机推荐

  1. Basler acA2500-14gm 连接采图报错处理

    新购 Basler acA2500-14gm 相机,使用从官方网站下载的 pylon v6 版本连接测试,报错: Type    Time    Source    MessageError    2 ...

  2. 开源流媒体Red5-编译和部署

    源码下载地址:https://github.com/Red5/red5-server 使用工具:IntelliJ IDEA 下载源码后直接用IDEA打开,等待全部加载完成后 编译看是否报错,应该没什么 ...

  3. Windows server 2008 快速搭建域环境

    之前根据网上的教程搭建,然后出现了很多问题,最后摸索出了一个比较稳妥一点的方法. 对于选系统这里,虽然上一篇文章已经说过了,这里也再强调一下,我使用的是08的系统,使用其他系统的暂不做评价,使用08系 ...

  4. Webpack配置区分开发环境和生产环境

    在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...

  5. JavaSE知识点总结(一)

    第一章 课程介绍第二章 java语言概述 课时2:作业 1.常用软件分为那两类? 系统软件 应用软件 2.人机交互的两种方式是哪两种? 图形化界面 代码行命令 课时3:作业 1.java语言的特性有哪 ...

  6. Android之SOAP协议与WebService服务器交互,解决超时的问题

    网络搜索大部分不能实际解决问题.特意将解决方法写下.创建MyAndroidHttpTransport 类 , package com.example.omhandroid.lib; import or ...

  7. 23种设计模式之观察者模式(Observer Pattern)

    观察者模式(Observer Pattern):定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主体对象,这个主题对象在状态发生变化时,会通知所有观察者.当一个对象改变需要同时改变其他对象, ...

  8. 详解http报文(2)-web容器是如何解析http报文的

    摘要 在详解http报文一文中,详细介绍了http报文的文本结构.那么作为服务端,web容器是如何解析http报文的呢?本文以jetty和undertow容器为例,来解析web容器是如何处理http报 ...

  9. spring boot通过Spring Data Redis集成redis

    在spring boot中,默认集成的redis是Spring Data Redis,Spring Data Redis针对redis提供了非常方便的操作模版RedisTemplate idea中新建 ...

  10. React入门学习

    为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaS ...