1.判断数据是否包含某些数据

var ary=[{age:20,name:"a"},{age:20,name:"b"},,{age:30,name:"c"}]

我们需要判断数据中否有有年龄为20的数据

var isExist= ary.some(v=>v.age==20);

2.对象合并

var user={name:"ray"};

var user2=Object.assign({}, user, {
title: "经理"
});

user2 为 {name:"ray",title:"经理"};

user2 是一个新的用户对象。

var user={name:"ray"}
var user2=Object.assign(user, {age:20});

这种方式和第一种方式不同在于,user 和 user2 是同一个对象。

3.数组是否包含某个数据

var users=["a","b"];

var isExist=users.includes("a");

4.数组遍历

使用 entries 进行遍历

var users=[{name:"a",age:20},{name:"b",age:20},{name:"c",age:30}]
for (const [i, v] of users.entries()) {
if (v.age === 20) {
users.splice(i, 1)
//break
}
}
console.info(users)

5.获取数据在数组中的索引

var ary=["a","b","c"]

var idx=ary.indexOf("c");

idx 为2.

 6.过滤数组的数据

var ary=[{age:20,name:"a"},{age:20,name:"b"},{age:30,name:"c"}]

var ary2=ary.filter(v=>v.age==20);

这个是过滤年龄为20的数据。

var ary3=ary.filter(function(v){return v.age==20})

使用函数效果是一样的。

7.三个点操作符

... 的作用是将数组转化成 使用逗号分隔的参数序列。

比如:

var a=[1,2,3];

var b=[4,5];
a.push(...b);

那么a 就变成了 [1,2,3,4,5]

1.合并数组

var a=[3,4];

var b=[1, 2, ...a];

b 变成了 [1,2,3,4];

2.日期参数

var date=[2014,5,16];
var d=new Date(...date);

3.将字符串转成数组

[...'你好2'].length 显示长度为3

8. nodejs 的path reslove 解释

作用:path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径。

语法:path.resolve( [from…],to )

说明:将参数to位置的字符解析到一个绝对路径里,[from … ]为选填项,路径源;

用法:

var path = require("path")     //引入node的path模块

path.resolve('/foo/bar', './baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', 'baz') // returns '/foo/bar/baz'
path.resolve('/foo/bar', '/baz') // returns '/baz'
path.resolve('/foo/bar', '../baz') // returns '/foo/baz'
path.resolve('home','/foo/bar', '../baz') // returns '/foo/baz'
path.resolve('home','./foo/bar', '../baz') // returns '/home/foo/baz'
path.resolve('home','foo/bar', '../baz') // returns '/home/foo/baz'

总结:从后向前,若字符以 / 开头,不会拼接到前面的路径;若以 ../ 开头,拼接前面的路径,且不含最后一节路径;若以 ./ 开头 或者没有符号 则拼接前面路径;

9.非常简洁的构建树形数据代码

我们在开发中经常会需要将一个数组的有父子关系的数据,转换成 一个树结构。

下面的代码可以很简单的实现这个功能。

var list=[
{id:1,parentId:0,name:"一级菜单A",rank:1},
{id:2,parentId:0,name:"一级菜单B",rank:1},
{id:3,parentId:0,name:"一级菜单C",rank:1},
{id:4,parentId:1,name:"二级菜单A-A",rank:2},
{id:5,parentId:1,name:"二级菜单A-B",rank:2},
{id:6,parentId:2,name:"二级菜单B-A",rank:2},
{id:7,parentId:4,name:"三级菜单A-A-A",rank:3},
{id:8,parentId:7,name:"四级菜单A-A-A-A",rank:4},
{id:9,parentId:8,name:"五级菜单A-A-A-A-A",rank:5},
{id:10,parentId:9,name:"六级菜单A-A-A-A-A-A",rank:6},
{id:15,parentId:0,name:"一级菜单C",rank:1},
{id:16,parentId:0,name:"一级菜单C",rank:1},
{id:17,parentId:0,name:"一级菜单C",rank:1},
{id:18,parentId:0,name:"一级菜单C",rank:1},
{id:19,parentId:0,name:"一级菜单C",rank:1},
{id:20,parentId:0,name:"一级菜单C",rank:1},
{id:37,parentId:0,name:"一级菜单C",rank:1},
{id:38,parentId:0,name:"一级菜单C",rank:1},
{id:39,parentId:0,name:"一级菜单C",rank:1},
{id:40,parentId:0,name:"一级菜单end",rank:1}
];
var tmp =list.filter(father=>{ // 循环所有项,并添加children属性
let branchArr = list.filter(child=>father.id == child.parentId); // 返回每一项的子级数组
branchArr.length>0 ? father.children=branchArr : '' //给父级添加一个children属性,并赋值
return father.parentId==0; //返回第一层
});
console.info(tmp)

 10.js map 方法使用

var ary=
[{"groupId":1,"hasChild":0,"name":"A","alias":"A","parentId":0},{"groupId":2,"hasChild":2,"name":"B","alias":"B","parentId":0}];
ary.map(o=>{
o.isLeaf=o.hasChild==0
})
console.info(ary)

map的作用是遍历数组,允许数组中的元素操作,将数组进行返回。

JS 基本操作的更多相关文章

  1. two.js基本操作

    今天介绍一个网络上并不常用的插件two.js,two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果 下载网址如下: https://two.js.org/#download 一: ...

  2. js基本操作

    js操作页面三步骤 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  3. 模仿WC.exe的功能实现--node.js

    Github项目地址:https://github.com/102derLinmenmin/myWc WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要 ...

  4. IOS-网络(网页开发-UIWebView,HTML,CSS,JavaScript,OC和JS代码互调)

    一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...

  5. 如何让 JS 代码不可断点

    绕过断点 调试 JS 代码时,单步执行(F11)可跟踪所有操作.例如这段代码,每次调用 alert 时都会被断住: debugger alert(11) alert(22) alert(33) ale ...

  6. vue中解决时间在ios上显示NAN的问题

    最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

  7. js数组(列表)的基本操作

    本文主要介绍JS对数组(列表)的基本操作.习惯了用数据库的操作顺序来说明:增.删.改.查:合并,裁剪,排序,格式化. 一.数组元素的添加(增加) 增加数组元素有三种方法:unshift()  push ...

  8. H5JS二维动画制作!two.js的基本操作class1

    今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作 two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果 下载网址如下: ...

  9. js对WebApi请求的基本操作

    在WebAPI对外提供的,大概有4种接口,get,post,delete,put,现在,我就简单的来说一下js请求webApi的方式和大概的作用: get:在webApi中,get方法通常是用来获取数 ...

随机推荐

  1. PATA1055 The World's Richest (25 分)

    1055 The World's Richest (25 分) Forbes magazine publishes every year its list of billionaires based ...

  2. 在eclipse中新建java问题报错:The type XXX cannot be resolved. It is indirectly referenced from required .class files

    在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...

  3. NDCG、AUC介绍

    https://blog.csdn.net/u014313009/article/details/38944687 SIGIR的一篇推荐算法论文中提到用NDCG和AUC作为比较效果的指标,之前没了解过 ...

  4. python requests 上传excel数据流

    headers=self.headers #获取导入模版 file_home = self.import_template log.info(file_home) wb = load_workbook ...

  5. 二叉树遍历(前序、中序、后序)-Java实现

    一.前序遍历 访问顺序:先根节点,再左子树,最后右子树:上图的访问结果为:GDAFEMHZ. 1)递归实现 public void preOrderTraverse1(TreeNode root) { ...

  6. vue报错: Class constructor FileManager cannot be invoked without 'new'.

    vue中报Class constructor FileManager cannot be invoked without 'new'.错处理: 原因:less 3.10 正式版报错 解决方法很简单,把 ...

  7. 关于深度学习框架 TensorFlow、Theano 和 Keras

    [TensorFlow] ——( https://morvanzhou.github.io/tutorials/machine-learning/tensorflow/) 1.TensorFlow是啥 ...

  8. -Git 使用技巧 总结 MD

    目录 目录 Bash下的快捷操作 常用命令 常用操作 移动光标 删除输入内容 Tab键的作用 Git默认Vim编辑器基本使用 Git 使用场景 合并多个commit:rebase -i[s] 删除多个 ...

  9. pandas mode()填充nan异常问题

    df.mode()return的是一个frame,因为可能存在多个总数.那么用mode()来填充nan的时候就要注意了,如果直接 df.fillna(df.mode()) 会发现还是有很多空值没有填充 ...

  10. vs2017专业版和企业版的密钥

    Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH