技术标签: JS
1、map()当数组中元素是值类型,map不会改变原数组;当是引用类型,则可以改变原数组,map()没法做到的过滤
1.当数组中元素是值类型时
const arr = [1, 2, 3];
const result = arr.map(item => {
item = item * 2;
return item;
});
console.log('arr', arr); // [1, 2, 3]
console.log('result', result); // [2, 4, 6]
2.当数组中元素是引用类型时
const arr = [
{ name: 'Tom', age: 16 },
{ name: 'Aaron', age: 18 },
{ name: 'Denny', age: 20 }
]
const result = arr.map(item => {
item.age = item.age + 2; // 将他们的年龄都加2
return item
});
console.log('arr', arr); // [{ name: 'Tom', age: 18 },{ name: 'Aaron', age: 20 },{ name: 'Denny', age: 22 }]
console.log('result', result); // [{ name: 'Tom', age: 18 },{ name: 'Aaron', age: 20 },{ name: 'Denny', age: 22 }]
// map()没法做到的过滤
let newArr = [1,2,3,4,5].map(item => { if(item > 3) return item })
console.log(newArr) // [undefined, undefined, undefined, 4, 5]
2、forEach当数组中元素是值类型,forEach绝对不会改变数组;当是引用类型,则可以改变数组
特性:
let arr1 = [
{name:'张三',age:10},
{name:'李四',age:20}
];
arr1.forEach(item => {
item.age = item.age + 1;
});
console.log(arr1); // [{name:'张三',age:11},{name:'李四',age:21}]
let newArr = arr1.forEach(item => {
item.age = item.age + 1;
});
console.log(arr1); // [{name:'张三',age:11},{name:'李四',age:21}]
console.log(newArr); // undefined 验证forEach没有返回值
// forEach当数组中元素是值类型,不会改变原数组
let arr2 = [1,2,3];
arr2.forEach(item => {
item = item * 2
});
console.log(arr2) // [1,2,3]
3、filter()方法: 由于map()没法做到的过滤,filter()可以过滤
let arr = [1,2,3,4,5];
let newArr = arr.filter(item =>{
if(item > 3) return item
})
console.log(newArr) // [4,5]
console.log(arr) // => [1,2,3,4,5]
4、some()方法: 检查数组中是否有某些符合条件,只要有一个满足即返回true,之后的不再执行
let result = [
{name: '张三',age: 10},
{name: '李四',age: 20}
];
let flag = result.some(item => {
return item.age > 16
});
console.log(flag); // true
5、every():检测数组中的每一项是否都满足条件,只有都满足了才会返回true
let result = [
{name: '张三',age: 10},
{name: '李四',age: 20}
];
let flag = result.some(item => {
return item.age > 16
});
console.log(flag); // false
6、find(): 用来在数组中找到我们所需要的元素,只要有一个满足即返回该元素,不会多余遍历;(注:
IE 11及更早版本不支持find()
方法)
let arr= [{name:'张三',age:10},{name:'王二',age:21},{name:'小李',age:78}]
let obj = arr.find(item => { return item.age > 20 });
console.log(obj) // {name:'王二',age:21} 返回数组元素
7、findIndex(): 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1;(注:
IE 11及更早版本不支持findIndex()
方法)
场景:在数组中找到我想要的那一个,并且返回给我,这个数组里即使有我想的那个,也肯定只有一个,不可能出现多个,所以,出于性能的考虑,不想从头遍历到尾;
let arr= [{name:'张三',age:10},{name:'王二',age:19},{name:'小李',age:78}]
let indexs = arr.findIndex(item => { return item.age > 20 });
console.log(indexs) // => 1 返回数组索引值
8、数组去重
8.1 new Set() 的局限性;new Set()只能去重元素是值类型;当元素是引用对象的数组没法用new Set()去重
// 1.当元素是值类型
let tempArr = new Set([1,2,3,3,4,4,5])
console.log(tempArr) // => {1,2,3,4,5} new Set()会将结果转换成对象
//并且已有元素是添加不进去的:
tempArr.add(3)
console.log(tempArr) // => {1,2,3,4,5}
tempArr.add(6)
console.log(tempArr) // => {1,2,3,4,5,6}
// 2.当元素是引用类型
let mySet = new Set();
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
mySet.add('some text');
console.log([...mySet])
// => [1,5,'some text']
mySet.add({name:'jay Chou',age:40});
mySet.add({name:'jay Chou',age:40});
console.log([...mySet])
// => [1,5,'some text',{name:'jay Chou',age:40},{name:'jay Chou',age:40}]
8.2 对象属性去重
function uniqueArr(arr) {
var obj = {};
var result = [];
for (var i = 0, j = arr.length; i < j; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = true;
result.push(arr[i]);
}
}
return result;
}
let testArr = [1, 1, 2, 4, 2, 2, 3, 3, 5, 6, 1];
console.log(uniqueArr(testArr));// 1,2,4,3,5,6
8.3 _.uniqWith();(使用Lodash提供的方法)
import _ from 'lodash';
let objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
_.uniqWith(objects, _.isEqual);
//=> [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
文章浏览阅读794次,点赞2次,收藏5次。XFRM框架_linux的xfrm框架
文章浏览阅读774次。DedeCMS常用标签讲解笔记整理 今天我们主要将模板相关内容,在前面的几节课中已经基本介绍过模板标签的相关内容,大家可以下载天工开物老师的讲课记录:http://bbs.dedecms.com/132951.html,这次课程我们主要讲解模板具体的标签使用,并且结合一些实例来介绍这些标签。 先前课程介绍了,网站的模板就如同一件衣服,衣服的好坏直接决定了网站的好坏,很多网站一看界面_织梦中什么页面用什么标签教学
文章浏览阅读2.5k次,点赞2次,收藏15次。编译是大部分工程师的烦恼,大家普遍喜欢去写业务代码。但我觉得基本的编译流程,我们还是需要掌握的,希望遇到相关问题,不要退缩,尝试去解决。天下文章一大抄,百度能解决我们90%的问题。_gdb编译
文章浏览阅读1.8k次,点赞4次,收藏6次。python简易爬虫v1.0作者:William Ma (the_CoderWM)进阶python的首秀,大部分童鞋肯定是做个简单的爬虫吧,众所周知,爬虫需要各种各样的第三方库,例如scrapy, bs4, requests, urllib3等等。此处,我们先从最简单的爬虫开始。首先,我们需要安装两个第三方库:requests和bs4。在cmd中输入以下代码:pip install requestspip install bs4等安装成功后,就可以进入pycharm来写爬虫了。爬
文章浏览阅读2.6k次。解决方法:解决方法可以去github重新下载一个pyflakes.vim。执行如下命令git clone --recursive git://github.com/kevinw/pyflakes-vim.git然后进入git克降目录,./pyflakes-vim/ftplugin,通过如下命令将python目录下的所有文件复制到~/.vim/ftplugin目录下即可。cp -R ...._freetorn.vim
文章浏览阅读210次,点赞7次,收藏3次。本文简述了hello.c源程序的预处理、编译、汇编、链接和运行的主要过程,以及hello程序的进程管理、存储管理与I/O管理,通过hello.c这一程序周期的描述,对程序的编译、加载、运行有了初步的了解。_hit csapp
文章浏览阅读472次。点击上方 "程序员小乐"关注,星标或置顶一起成长后台回复“大礼包”有惊喜礼包!关注订阅号「程序员小乐」,收看更多精彩内容每日英文Sometimes you play a..._挑战安卓和ios!华为官宣鸿蒙手机版,p40搭载演示曝光!高管表态:我们准备好了
文章浏览阅读3.8w次,点赞107次,收藏993次。点击上方“Python爬虫与数据挖掘”,进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤昔闻洞庭水,今上岳阳楼。大家好,我是小F。Python是目前最好的编程语言之一。由于其可读性和对初学者的友好性,已被广泛使用。那么要想学会并掌握Python,可以实战的练习项目是必不可少的。接下来,我将给大家介绍20个非常实用的Python项目,帮助大家更好的..._python项目
文章浏览阅读1.3k次。在网站的导航资源里看到了一个非常好用的东西:Android Asset Studio,可以在线生成各种图标。之前一直在用一个叫做Android Icon Creator的插件,可以直接在Android Studio的插件里搜索,这个工具的优点是可以生成适应各种分辨率的一套图标,有好几种风格的图标资源,遗憾的是虽然有很多套图标风格,毕竟是有限的。Android Asset Studio可以自己选择其..._在线 android 图标
文章浏览阅读514次。无限轮播广告位没有录屏,将就将就着看,效果就是这样主要代码KsBanner.java/** * 广告位 * * Created by on 2016/12/20. */public class KsBanner extends FrameLayout implements ViewPager.OnPageChangeListener { private List
文章浏览阅读2.2k次,点赞2次,收藏6次。继续上次的echart博客,由于省会流向图是从echart画廊中直接取来的。所以直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&_java+echart地图+物流跟踪
文章浏览阅读1.4k次。一、OSD模块简介1.1 消息封装:在OSD上发送和接收信息。cluster_messenger -与其它OSDs和monitors沟通client_messenger -与客户端沟通1.2 消息调度:Dispatcher类,主要负责消息分类1.3 工作队列:1.3.1 OpWQ: 处理ops(从客户端)和sub ops(从其他的OSD)。运行在op_tp线程池。1...._ceph 发送数据到其他副本的源码