前端

编辑 变更圈子

查看历史

分享

举报

JS数组去重的方式例：将下面数组去除重复元素（以多种数据类型为例）const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]1.利用Set()+Array.from()Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。const result = Array.from(new Set(arr)) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：以上去方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值（尽管在js中：NaN !== NaN）。2.利用两层循环+数组的splice方法通过两层循环对数组元素进行逐一比较，然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN。function removeDuplicate(arr) { let len = arr.length for (let i = 0; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) len-- // 减少循环次数提高性能 j-- // 保证j的值自加后不变 } } } return arr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]3.利用数组的indexOf方法新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (newArr.indexOf(item) === -1) { newArr.push(item) } }) return newArr // 返回一个新数组 } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]4.利用数组的includes方法此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。includes()方法：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (!newArr.includes(item)) { newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：为什么includes能够检测到数组中包含NaN，其涉及到includes底层的实现。如下图为includes实现的部分代码，在进行判断是否包含某元素时会调用sameValueZero方法进行比较，如果为NaN，则会使用isNaN()进行转化。具体实现可参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes简单测试includes()对NaN的判断：const testArr = [1, 'a', NaN] console.log(testArr.includes(NaN)) // true5.利用数组的filter()+indexOf()filter方法会对满足条件的元素存放到一个新数组中，结合indexOf方法进行判断。filter() 方法：会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。function removeDuplicate(arr) { return arr.filter((item, index) => { return arr.indexOf(item) === index }) } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined ]注意：这里的输出结果中不包含NaN，是因为indexOf()无法对NaN进行判断，即arr.indexOf(item) === index返回结果为false。测试如下：const testArr = [1, 'a', NaN] console.log(testArr.indexOf(NaN)) // -16.利用Map()Map对象是JavaScript提供的一种数据结构，结构为键值对形式，将数组元素作为map的键存入，然后结合has()和set()方法判断键是否重复。Map 对象：用于保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。function removeDuplicate(arr) { const map = new Map() const newArr = [] arr.forEach(item => { if (!map.has(item)) { // has()用于判断map是否包为item的属性值 map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。7.利用对象其实现思想和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。function removeDuplicate(arr) { const newArr = [] const obj = {} arr.forEach(item => { if (!obj[item]) { newArr.push(item) obj[item] = true } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]原文链接：https://blog.csdn.net/qq_52732369/article/details/121877897

创作场景   记录闭包的博客中有一个节流函数的实际用法和这个知识点相关，创作过程中发现这个知识点涉及到的还有很多，在此记录一下相关的所有知识点并进行比较。阅读前提   此博客适用于所有人群，不仅有基础的用法，同时也对多种实现方式进行比较，本文将围绕一个例子进行讲解，并对涉及到的所有知识点进行穿插，最后进行总结。提前了解的知识点1. 页面可视化高度（clientHeight）   页面可视化高度指的是你当前页面能看到内容的高度，这个高度是可以动态变化的，比如你打开了F12调试器，那么你的可视化高度就会变化，如果你将浏览器最大化，那么你的可视化高度也会变化，但这并不代表你实际页面的高度，可能你的页面高度会远远超过页面可视化高度。代码实现：document.body.clientHeight2. 滚动条高度（scrollHeight）   滚动条高度就是当你的页面高度超过了页面可视化高度，比如body的高度是900，你的页面高度是800，那么滚动条就会产生，一般来说，滚动条高度是比你的页面高度要大16px，可能不同设备会不一样。代码实现：document.body.scrollHeight统计距离页面顶部的距离参考：https://blog.csdn.net/mouday/article/details/125444003 // 滚动方向枚举值 const DIRECTION_ENUM = { DOWN: "down", UP: "up", }; // 距离顶部或底部的阈值，一般滚动条高度是要比页面高度大的，阈值指的就是大的这一点儿 const threshold = 20; // 记录前一个滚动位置 let beforeScrollTop = 0; function handleScroll() { // 距顶部 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || window.scrollY; // 可视区高度 var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 打印数值，console.table是控制台打印表格的写法，同时也有 // console.error和console.warn，对应警告和错误 // 一般使用的就是console.info console.table([ { label: "距顶部", value: scrollTop, }, { label: "可视区高度", value: clientHeight, }, { label: "滚动条总高度", value: scrollHeight, }, { label: "距顶部 + 可视区高度", value: scrollTop + clientHeight, }, ]); // 确定滚动方向 let direction = DIRECTION_ENUM.DOWN; if (beforeScrollTop > scrollTop) { direction = DIRECTION_ENUM.UP; } // 通过滚动方向判断是触底还是触顶 if (direction == DIRECTION_ENUM.DOWN) { // 滚动触底 if (scrollTop + clientHeight + threshold >= scrollHeight) { console.log("滚动触底"); } } else { // 滚动到顶部 if (scrollTop <= threshold) { console.log("滚动到顶部"); } } beforeScrollTop = scrollTop; } window.addEventListener('scroll', handleScroll)window、document、documentElement的区别window是当前页面的顶级对象，其中包含了很多属性和方法，是一个BOM对象，可进行浏览器的交互。document是window对象的子元素，它可以理解为一个DOM对象，其中有很多方法和属性，主要是在页面元素中进行交互。documentElement是document的子元素，注意，这是一个只读对象，也就是说它只能读取元素的属性，不能对元素进行操作。一般他就是你本页面的HTML元素。这里一定要注意一下，如果你的页面是在一个iframe中，那你获取的一定是你iframe中的所有元素，并不是你最大页面的对象。一般在实际开发中都有头部导航栏，而子页面中也会嵌套子页面，那么获取最外部的HTML元素可以用parent对象，一层一层循环，因为最外部的iframe肯定是有一个ID的，这是我在开发中遇到的一个小问题，分享一下。// 第一个参数是当前的iframe对象，第二个是parent对象 // 调用时parentNode不用传入 function getFrameTop(frame, parentNode) { if (frame.attr('id') !== "iframeContent") { if (parentNode) { frame = parentNode.parent.$("iframe") } else { frame = parent.$("iframe") } getFrameTop(frame, parent) } else { topIframe = frame return frame } }解读获取距离页面顶部距离的四种方式 // 距顶部 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || window.scrollY;  这四种拆分下来就是在两个对象上进行操作的，一个是window，一个是document，而之所以这么写完全是为了兼容性，尤其是pageYOffset方法，这是一个过时方法，但是在某些IE就只能识别这个，如果你的产品不需要兼容，那其中一个就够用了。   解读一下原理：   我的div高度是900，页面可视化高度是818，而距离顶部的距离（scrollTop）是98，这其实就是滚动条的高度减去可视区高度算出来的，而这个高度指的是你的div最顶部距离和你可视化页面的顶部距离，如果是计算底部的距离，那加上页面可视化距离即可。如何使用代码滚动页面（四种方式）1. scroll()方法滚动窗口至文档中的特定位置。window.scroll(x, y) x和y就是你需要滚动的绝对位置坐标window.scroll(options) options是一个对象，包含x、y坐标，同时也有滚动的方式window.scroll({ top: 100, left: 100, behavior: "smooth", });   上面这是一种标准用法，当然一般我们不这么写，直接用第一种方式滚动即可。2. scrollBy()方法在窗口中按指定的偏移量滚动文档（比如你只是想在这个基础上向下滚动100px）scrollBy(x-coord, y-coord)scrollBy(options)x-coord 是你想滚动的水平像素值。y-coord 是你想滚动的垂直像素值。options   包含以下参数的字典top   指定沿 Y 轴滚动窗口或元素的像素数。left   指定沿 X 轴滚动窗口或元素的像素数。behavior   指定滚动是否应该平滑（smooth）、瞬时运动到该位置（instant）、或者让浏览器选择（auto，默认）。window.scrollBy({ top: 100, left: 100, behavior: "smooth", });   这个方法和scroll区别在于，这里的x和y指的是偏移量，而不是绝对位置。3. scrollTo()   这个和scroll方法是一样的，个人比较喜欢这种方式，因为可读性比较高，不容易出错，使用标准写法可以随意在x和y上进行随意滚动，因为对象上参数可选。// 设置滚动行为改为平滑的滚动 window.scrollTo({ top: 1000, behavior: "smooth" });4. document.documentElement.scrollTop = 0（非标准写法）   上面说过documentElement是一个只读属性，官方上也是这么说的，但是经过实验发现这种方式也可以用来操作页面的滚动，但不建议这么使用，也不知道会存在什么bug。使用节流函数优化关于节流函数是什么，这个博客中有说明节流函数（闭包中的使用） function throttle(func, wait){ let previous = 0; return function() { var now = Date.now() var context = this // ES5写法：var args = []; args.push.apply(null, arguments) var args = [...arguments] // ES6数组解构知识点：复制数组 // 如果当前时间减去上一次执行时间大于我们执行函数的时间间隔再执行 if(now - previous > wait){ func.apply(context, args); // 闭包，记录本次执行时间戳 // 这么写就是不用将上次执行的时间作为参数传给函数了 // 就算多次调用闭包不会消失，上一次执行时间不会消失，这就是闭包的常用方式 previous = now; } } } // 滚动方向枚举值 const DIRECTION_ENUM = { DOWN: "down", UP: "up", }; // 距离顶部或底部的阈值，一般滚动条高度是要比页面高度大的，阈值指的就是大的这一点儿 const threshold = 20; // 记录前一个滚动位置 let beforeScrollTop = 0; function handleScroll() { // 距顶部 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || window.scrollY; // 可视区高度 var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 打印数值 console.table([ { label: "距顶部", value: scrollTop, }, { label: "可视区高度", value: clientHeight, }, { label: "滚动条总高度", value: scrollHeight, }, { label: "距顶部 + 可视区高度", value: scrollTop + clientHeight, }, ]); // 确定滚动方向 let direction = DIRECTION_ENUM.DOWN; if (beforeScrollTop > scrollTop) { direction = DIRECTION_ENUM.UP; } // 通过滚动方向判断是触底还是触顶 if (direction == DIRECTION_ENUM.DOWN) { // 滚动触底 if (scrollTop + clientHeight + threshold >= scrollHeight) { console.log("滚动触底"); } } else { // 滚动到顶部 if (scrollTop <= threshold) { console.log("滚动到顶部"); } } beforeScrollTop = scrollTop; } // window.addEventListener('scroll', handleScroll) window.addEventListener('scroll', throttle(handleScroll, 200)) 这里只是一个例子，请注意，如果想要绝对精度，也就是当滚动条快速滑动的时候也要监听到，那就将延迟设置为0-50内。总结获取距离顶部的距离document.documentElement.scrollTopdocument.body.scrollTopwindow.pageYOffsetwindow.scrollY可视区高度document.documentElement.clientHeightdocument.body.clientHeight滚动条总高度document.documentElement.scrollHeightdocument.body.scrollHeight滚动页面scroll()scrollTo()scrollBy()document.documentElement.scrollY = 100原文链接：https://blog.csdn.net/weixin_48588897/article/details/138413621

前言在理解浅拷贝和深拷贝浅前，必须先理解基本数据类型和引用数据类型的区别。一、数据类型1.1.基本数据类型字符串（Sring）、布尔值（Boolean）和数字（Number）1.2.引用数据类型数组（Array）和对象（Object）1.3.区别基本数据类型是存储在栈内存中。而引用类型存放的值是指向数据的引用，而不是数据本身，真实数据是存放在堆内存里，具体见如下：二、浅拷贝2.1. 定义浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。2.2. 浅拷贝特点对于基本数据类型的成员对象，因为基础数据类型是值传递的，所以是直接将属性值赋值给新的对象。基础类型的拷贝，其中一个对象修改该值，不会影响另外一个。var a = 10 var b = a b = 20 console.log("a",a) //10 console.log("b",b) //20对于引用类型，比如数组或者类对象，因为引用类型是引用传递，所以浅拷贝只是把内存地址赋值给了成员变量，它们指向了同一内存空间。改变其中一个，会对另外一个也产生影响var obj = { a:"AAA" } var obj2 = obj obj2.a = "BBB" console.log("obj",obj) //{name: "BBB"} console.log("obj2",obj2) //{name: "BBB"}三、深拷贝3.1. 定义深拷贝，在拷贝引用类型成员变量时，为引用类型的数据成员另辟了一个独立的内存空间，实现真正内容上的拷贝。3.2. 深拷贝特点对于基本数据类型的成员对象，因为基础数据类型是值传递的，所以是直接将属性值赋值给新的对象。基础类型的拷贝，其中一个对象修改该值，不会影响另外一个（和浅拷贝一样）。对于引用类型，比如数组或者类对象，深拷贝会新建一个对象空间，然后拷贝里面的内容，所以它们指向了不同的内存空间。改变其中一个，不会对另外一个也产生影响。var obj = { a:"AAA" } var obj2 = {} // 创建新的对象 obj2 = obj obj2.a = "BBB" console.log("obj",obj) //{name: "AAA"} console.log("obj2",obj2) //{name: "BBB"}四、拷贝实现方案4.1. Object.assign()单级结构时深拷贝，多级结构浅拷贝，Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，将返回目标对象。a）单级结构（一级拷贝是深拷贝）：var obj = { a: 10, } var obj2 = Object.assign({}, obj); obj2.a = 20 console.log("obj",obj); //{a: 10} console.log("obj2",obj2) //{a: 20}b）多级结构（一级拷贝是浅拷贝，修改二级对象还是会影响原对象）：var obj = { a: 10, b: { c:"AAA", d:666 } } var obj2 = Object.assign({}, obj); obj2.b.c = "BBB" console.log("obj",obj); //{a: 10,b: {c:"BBB",d:666}} console.log("obj2",obj2); //{a: 10,b: {c:"BBB",d:666}}4.2. concat()单级结构时深拷贝，多级结构浅拷贝a）单级结构（一级拷贝是深拷贝）：let arr = [1, 2]; let arr2 = arr.concat(); arr2[1] = 3; console.log("arr",arr) //[1, 2] console.log("arr2",arr2) //[1, 3]b）多级结构（一级拷贝是浅拷贝）：let arr = [1, 2, { a: 'AAA' }]; let arr2 = arr.concat(); arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'BBB'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.3. slice()单级结构时深拷贝，多级结构浅拷贝a）单级结构（一级拷贝是深拷贝）：let arr = [1, 2, 3]; let arr2 = arr.slice(); arr2[1] = 4; console.log("arr",arr) //[1, 2, 3] console.log("arr2",arr2) //[1, 4, 3]b）多级结构（一级拷贝是浅拷贝）：let arr = [1, 2, {a:'AAA'}]; let arr2 = arr.slice(); arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'BBB'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.4.JSON.parse(JSON.stringify())用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。单级多级均为深拷贝，但需要注意无法拷贝RegExp对象、function和symbollet arr = [1, 2, {a:'AAA'}]; let arr2 = JSON.parse(JSON.stringify(arr)) arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'AAA'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.5. cloneDeep()单级多级均为深拷贝，使用lodash工具中cloneDeep方法实现深拷贝，需要通过npm引入lodash库npm i -save lodash //全局安装<script> import _ from 'lodash'; export default { name: 'Test', mounted() { const arr = [1, 2, { a: 'AAA' }]; const arr2 = _.cloneDeep(arr); arr2[2].a = 'BBB'; console.log('arr', arr); // [1, 2, {a: 'AAA'}] console.log('arr2', arr2); // [1, 2, {a: 'BBB'}] }, }; </script>五、结论类型第一级为基础数据类型原数据中包含子对象浅拷贝改变不会使原始数据改变改变会使原始数据改变深拷贝改变不会使原始数据改变改变不会使原始数据改变原文链接：https://blog.csdn.net/ltlt654321/article/details/127047262

vue 获取元素宽高vue 中获取组件宽高分两种情况：1、获取普通组件宽高，直接使用 $refs 即可2、获取子组件宽高，需使用 $refs.$el子组件<template> <div class="div_box">这是一个子组件</div> </template> <script> export default { name: 'ChileHeight' } </script> <style lang="scss" scoped> .div_box { padding: 20px; border: 20px solid red; } </style>父组件<template> <div class="home"> <div class="div_card" ref="attrRef">获取元素高度</div> <child-height ref="childRef"></child-height> </div> </template> <script> import ChildHeight from './note/child-height.vue' export default { name: 'Home', components: { ChildHeight }, mounted() { // 获取元素宽高 const w = this.$refs.attrRef.offsetWidth const h = this.$refs.attrRef.offsetHeight console.log('获取元素宽高', w, h) // 获取子组件元素宽高 const w_child = this.$refs.childRef.$el.offsetWidth const h_child = this.$refs.childRef.$el.offsetHeight console.log('获取子组件元素宽高', w_child, h_child) } } </script> <style scoped> .div_card { padding: 20px; border: 10px solid yellow; } </style>clientHeight 和 offsetHeight 区别clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度原文链接：https://blog.csdn.net/lgg1997/article/details/125618858

1、定义filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。2、语法array.filter(function(currentValue,index,arr), thisValue);3、参数说明返回4、用法filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。5、注意事项1、filter() 不会对空数组进行检测；2、filter() 不会改变原始数组。6、使用实例1.返回数组array中所有元素都大于等于14的元素、返回等于14、返回大于某个值和小于某个值的元素的元素。const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14) console.log(newArr);//打印 [17,18,32,33,16,40] // 查找某个值------------------------- const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num == 14) console.log(newArr);//打印 [14] //返回大于某个值和小于某个值的元素 const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14 && num < 33) console.log(newArr);//打印 [17, 18, 32, 16]2.数组去重操作：对数组array中所有相同的元素进行去重复操作。const array = [2, 2, 'a', 'a', true, true, 15, 17] const newArr = array.filter((item, i, arr) => { return arr.indexOf(item) === i }) console.log(newArr);//打印 [2, 'a', true, 15, 17] //------------------------------------------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,] const newArr = array.filter((item, i, arr) => { return arr.indexOf(item) === i }) console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]3、数组中保留奇数或者偶数。//保留偶数---------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const newArr = array.filter((item, i, arr) => { return item % 2 === 0 }) console.log(newArr);// 打印 [2, 4, 6, 8, 10] //保留奇数---------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const newArr = array.filter((item, i, arr) => { return item % 2 !== 0 }) console.log(newArr);// 打印 [1, 3, 5, 7, 9]4、去掉数组中的假值，比如：空字符串、undefined、null、0、false。const array = [ { id: 3 }, { id: 4 }, { id: null }, { id: undefined }, { id: '' }, { id: 0 }, { id: false } ] const newArr = array.filter(({ id }) => id) console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }] //------------------------------------------------------------------- const array = [undefined, null, 3, 5, 'a', false, 0] const newArr = array.filter(item => item) console.log(newArr);// 打印 [3, 5, 'a']5、把对象数组array中的某个属性值取出来存到数组newArr中。const array = [ { name: "a", type: "letter" }, { name: '1', type: "digital" }, { name: 'c', type: "letter" }, { name: '2', type: "digital" }, ]; const newArr = array.filter((item, i, arr) => { return item.type === "letter" }) console.log(newArr); // 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]6、filter结合find方法，实现两个数组的补集的解决方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。find() 方法返回数组中满足提供的测试函数的第一个元素的值。这里有四个元素，那么就会返回两个数组元素相等的值，这里取反就返回不相等的值， 不取反的时候因为30的元素不符合，所以不返回30的值。const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40] const oldArr = [32, 33, 16, 40, 30] function myfunction() { const result = array.filter(item1 => { //此处取反去掉，将变换元素状态 return !oldArr.find(item2 => { return item1 === item2 }) }) return result } const newArr = myfunction() console.log(newArr); // 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43] // 不取反打印 [32, 16, 33, 40] 此处30的元素不符合，所以不返回30的值原文链接：https://blog.csdn.net/a15220216758/article/details/124993673

React Native是React下的一个跨平台框架，能让你用熟悉的React JSX语法来进行跨平台开发。所谓的跨平台开发是如今的一种趋势，即用同一种语言来同时进行Web端、手机端安卓与IOS、桌面端Windows、MacOS、Linux的开发。这样不仅能极大的提高开发效率，同时大大增加了代码的可维护性，节省了大量的成本。然而React Native虽然带个React，用的也是JSX语言，却跟React有很多不一样的地方。因为React Native不仅面向网页端，还面向手机端APP，而React Native的代码会直接编译为native原生代码。在本文中，我将会列举说明几个React Native的不同之处。首先，在React Native中我们不能像React那样直接使用HTML语言，因为无论是Android还是IOS，都无法编译HTML语言。因此，我们需要使用React Native提供的组件。在React Native中，如果你想要写<div>，则需要换成<View>。View组件在Web端会被编译成<div>，而在Android和IOS则分别对应android.view和UIView。更多的，如果你想要写<p>或者<span>，那么你需要写<Text>。Text组件可以嵌套（nested），而两个Text在一起会跟p一样换行<View> <Text>1</Text> <Text>2</Text> </View>需要注意的是，在Web端你可以在任意HTML标签里写字符串，如<div>Hello!</div>，但是在React Native你不能在Text外写任何字符串，不然会报错。有了<View>和<Text>（<div>和<p>）你很自然的想要修改他们的样式。在Web端React，你可以写CSS然后通过className来设置样式，或者直接写style来改变样式。而在React Native中，你只能通过style来设置样式，并且CSS属性还跟Web端有很多不同。而设置style的方式也跟Web端React有一些不同，倒是跟Vue挺像。首先跟React一样的是，你可以像className那样写style：<View style={styles.container}></View>，也可以直接写<View style={{ marginTop: 50 }}></View>。而第一种写法，你需要在函数体（functional component）外将style写下来，具体例子见下（来自官网）：import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; const LotsOfStyles = () => { return ( <View style={styles.container}> <Text style={styles.red}>just red</Text> <Text style={styles.bigBlue}>just bigBlue</Text> <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text> <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text> </View> ); }; const styles = StyleSheet.create({ container: { marginTop: 50, }, bigBlue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); export default LotsOfStyles;是不是感觉跟Vue有一点像😂。说完style的语法，接下来就是CSS的属性了。在React Native中，View的display属性默认是flex，并且只有flex或者none可选，并没有Web端的block值。而flexDirection跟往常的一样，除了默认是column，跟Web端相反。因此，在React Native所有layout都是基于flex的，要么不显示（none），要么flex，这跟Web端有很大不同。默认flex也意味着，你想要居中任何东西会变得非常方便，如果你使用React Native版Tailwind CSS——NativeWind，那么你只需要加上className="items-center"。在React Native中，flex: 1将会变得尤为重要，一个screen中的第一个View往往不能全屏，这时就需要flex: 1，而有时字体溢出需要加上flex: 1才会正常。除了flex外，React Native中的margin与padding也与React不同，以margin为例，你不能这样写margin: 10 20，你只能这样写marginHorizontal: 20; marginVertical: 10，而其他属性像marginLeft这些跟原来一样。在某些情况下，我觉得这种写法比Web端还要方便。接着，React Native的边框属性border也跟React有些不同，你不能直接这样写border: 1 solid #ddd，你只能这样一个个列出来borderWidth: 1; borderStyle: 'solid'; borderColor: '#ddd'。而在React Native中position属性只有absolute, relative, static可选，这也意味着如果你想要实现sticky相关的layout，如sticky header、collapsible tabview等，会变得十分困难。而这在Web端，你只需要加个position: sticky或者加个static转到fixed的监听器就能做到。说完View，我们说Text。在React Native中，想要实现文本单行溢出省略或者多行溢出省略，比Web端简便得多。你只需要设置numberOfLines即可：<Text numberOfLines={1}>666666666666666666666666666666666666666666666666666</Text> <Text numberOfLines={4}>999999999999999999999999999999999999999999999999999</Text>需要注意的是，这是唯一方法，你不能像Web端一样设置-webkit-line-clamp: 4或者text-overflow: ellipsis。由于篇幅过长，我将会在下一篇文章中继续本文的话题。

传统移动端开发往往需要同时兼顾Android和IOS的开发，而桌面端开发又需要同时兼顾Windows、MacOS、Linux系统。如果你想要全平台覆盖，不仅意味着要同时维护多套完全不同的代码（极大提高了维护成本），并且代码和逻辑还可能不能复用，这意味着高昂的开发成本（极低开发效率），每个平台都得从零开始写。现在国内还多出个鸿蒙系统，这意味着你要同时开发和维护更多套代码，哪怕补贴钱，这成本也不是小企业能够负担得起的。于是，跨平台框架应运而生，Facebook开源的React Native，曾经是最流行的框架，不过近几年被Flutter超越。它不仅能让你使用React语言同时开发Android和IOS APP，甚至还能进行Windows桌面端开发。而谷歌开源的Flutter，是目前最流行的跨平台框架，略微领先React Native。它能让你使用dart语言开发移动端与桌面端应用。而Tauri则允许你使用任何前端框架进行全平台开发，不过也需要你懂得一些Rust语言。我们先从开发体验出发来对比这三个跨平台框架。首先，React Native能够让你完全用JSX语言来进行跨平台开发，这对于本身熟悉Web技术的Web开发者而言无疑是非常好的。这意味着他们不需要多余学习太多东西即可直接上手。不过React Native虽然前面带个React，却跟Web端React本身有很多不一样的地方（见 给Web开发者写的React Native简介，React Native与React的区别与对比（1）），因此同样需要开发者去适应。而Flutter对于Web开发者而言就没那么好上手了，它需要开发者掌握dart语言进行开发。dart语言跟JavaScript有很大不同，这会让Web开发者觉得“反人类”设计。不过dart的语法跟Java或者Swift有点像，对于Android或者IOS开发者而言，Flutter或许倒没那么难上手。最后Tauri可以说是对Web开发者最友好的跨平台框架了，它允许你使用任何前端框架进行开发。不过想要开发完整的应用，你免不了得懂一些Rust，毕竟Tauri其实就是个Rust GUI框架。而Rust对于新人而言，学起来可比学C++要难一些。接着从性能出发（不准确），React Native会将所有代码编译成原生组件，生成UI画面则是通过原生的渲染，性能上比较接近原生应用。而Flutter则不使用原生的渲染模式，它自己在不同平台使用不同方法实现画面的渲染，性能方面比React Native稍好。最后Tauri通过调用各个平台的WebView来渲染画面，底层使用Rust来进行WebView与OS系统的通信，性能似乎比Flutter和React Native差一些。更细节、更准确的对比网上已经有许多了，我就不过多评价了毕竟性能这方面我也不太懂。最后从生态出发，React Native许多功能的实现非常依赖于社区的第三方库，而有很多库已经没人维护了。Flutter据说也好不到哪里去，但根据我自己的搜索，像渲染HTML、富文本编辑器、渲染数学公式，以及微信、支付宝接口，这些功能Flutter的支持似乎比React Native的要好，故而从整体上而言，Flutter的生态比React Native的要好，这也意味着在React Native想要实现相同的功能，可能要耗费更多时间。而Tauri呢能够完全使用整个Web端的生态，前端方面自然不用多说，主要是Rust的生态还是太不成熟了，有些Rust库早已过时但也没人维护，这就导致有些Tauri的插件用不了，因此你可能会在Rust方面耗费大量时间。总之，移动端方面React Native、Flutter、Tauri各有优劣，对于熟悉Web技术的开发者而言，React Native可能是最好的选择，Tauri次之。但从整体出发，Flutter可能是最好的选择，React Native次之。

本文我们继续之前的话题给Web开发者写的React Native简介，React Native与React的区别与对比（1），在上文中我们讲到在React Native想要写<p>或者<span>需要用Text组件。除了展示文本，还有一个很重要的东西就是展示图片。在React Native中你无法使用HTML的<img>，而要用React Native提供的Image组件。处理图片可以说是React Native中的一个难点，因为在React Native中无论是什么图片都需要你设置一个宽度和高度，见实例：import React from 'react'; import {Image} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const DisplayAnImage = () => ( <SafeAreaProvider> <SafeAreaView style={styles.container}> <Image style={{ width: 50, height: 50 }} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={{ width: 50, height: 50 }} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', }} /> <Image style={{ width: 66, height: 58 }} source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==', }} /> </SafeAreaView> </SafeAreaProvider> ); export default DisplayAnImage;你不能像在Web端那样直接写个width: 100%就完事了，由于React Native并不会计算图片的高度，所以如果你没有给高度设置一个数值，那么图片将会不可见。因此，在React Native想要实现Web端里width: 100%; height: 100%的图片，就需要你动态计算每张图片的高度（宽度固定）。好在React Native提供了getSize() API，允许你得到每张图片的原始宽度和高度，你可以根据自己的需要用这个API来造轮子。图片除了宽度和高度两个重要属性，还有一个很重要的属性就是resizeMode，这个对应Web端CSS的object-fit。而跟Web端不同，resizeMode的取值并非跟object-fit一一对应，并且resizeMode的默认值是cover，即图片会自动裁剪以保持宽高比。除了使用React Native本身的Image组件，你也可以使用expo-image，或者react-native-fast-image。不过fast-image已经没有维护了，倒是有个fork这个库的有维护，有需要的可以自行寻找。说完Image，还有一个很重要的东西就是列表List了。在Web端只要你的内容超出了屏幕高度，那么滚动是很自然的事情。但是在React Native仅仅使用View组件是不能滚动的，内容超出屏幕高度的结果就是内容不可见，想要滚动就需要用到ScrollView。而ScrollView提供了大量的API，可以让你非常方便的设置需要跟滚动相关的东西，这跟Web端相比是一个优势。比如说实现无限滚动，在Web端你要么使用别的组件，要么自己实现，实现方法大多都比较复杂，不仅要监听滚动，还要考虑很多其他东西。而在React Native你只需要将相应的handler放到onEndReached这个prop里，当滚动到底部时就会自动执行一次你的handler。又比如监听滚动，在Web端你需要在页面挂载时添加监听器，然后在页面卸载时去掉监听器，而在React Native你只需要直接将handler放到onScroll这个prop里就可以了。见下面例子：const App = () => { function load_more(){ console.log('end!') } function ScrollHandler(e){ console.log(e) } return ( <SafeAreaProvider> <SafeAreaView style={styles.container} edges={['top']}> <ScrollView style={styles.scrollView} onEndReached={load_more} onScroll={ScrollHandler}> <Text style={styles.text}> Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... </Text> </ScrollView> </SafeAreaView> </SafeAreaProvider> ); }除此之外，你还可以设置水平滚动，甚至水平换页实现走马灯效果。ScrollView只是List最简单的一种方式，它会一次性渲染所有子节点，因此性能不好。这时，FlatList和SectionList就派上用场了，他们继承了ScrollView的几乎所有特征，并且性能更好。而FlatList是其中使用率最高的，它提供了numColumns属性，允许你轻松构建网格布局。而除了React Native本身提供的组件，对于大数据列表，你还可以使用第三方库FlashList或者RecyclerListView，来替代FlatList获得更好的性能。值得一提的是，FlashList除了是高性能列表，还提供了瀑布流布局的列表组件MasonryFlashList。说完列表，我们来讲一下React Native的触碰事件。在React Native你不能像在React Web端那样，随便一个地方都能设置onClick。并且React Native只有Press事件，你需要在特定的组件如Touchable、Pressable、Text、Button才能处理Press事件。其中Touchable组件分为TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback，顾名思义他们分别对应触碰高亮、触碰改变透明度、触碰无反馈（触碰不改变样式）。而Press事件在Pressable和Text又分为Press和LongPress。<Pressable onPress={onPressFunction} onLongPress={onLongPressFunction}> <Text>I'm pressable!</Text> </Pressable>最后，想要写按钮和输入框，需要Button和TextInput组件，React Native的按钮自带样式比HTML的按钮要好看，并且安卓版点击按钮自带波纹效果。而React Native的输入框使用体验跟Web端的大体一样，就是提供props有些不同，这里就不多说了。本文到这里，已经将React Native跟React的主要区别过一遍了。由于篇幅问题，更多的内容以及细节就不详细展开了。之后我还会更更多React Native相关的文章，如果你对React Native感兴趣，欢迎在评论区交流讨论。

Flutter、Tauri、React Native都是目前移动端流行的跨平台开发框架，并且他们还能胜任全平台开发。React Native是最早开源的跨平台框架，而Flutter紧跟其后，并且Flutter最近几年超越React Native成为当前世界上最流行的跨平台框架。Tauri则是最近几年诞生的新跨平台框架，跟其他框架显著不同的一点是，它允许你使用任何前端框架，即你能够自由使用整个Web生态进行跨平台开发。Flutter、Tauri、React Native、Android原生我都尝试过，接下来我说一下我分别使用他们的开发经历。首先，我第一个使用的跨平台框架是Tauri，当时Tauri V2.0已经发布，我看它能够使用Nuxt.js或者Next.js进行开发，觉得蛮不错的。毕竟我有两个网站，一个是Nuxt写的，另一个是Next写的，这样我就只需要在原有代码基础上修改一下就行了。于是很快我就栽跟头了，首先是Nuxt的桌面端应用，我在dev模式下，没有发现任何问题，$fetch请求也能正常发送。结果build以后，发现所有的请求都废了，全是404，将url改为完整url，结果就是跨域问题。之后我才明白，Tauri其实是一个Rust GUI框架，HTML、CSS、JavaScript都只是用来渲染画面罢了，想要发送HTTP请求还得通过Rust。于是，在Tauri官方文档中，我找到了HTTP请求的插件，最后才解决了这个问题。这还只是个小问题，最后真正劝退我的还是写移动端的时候。之后我找到了一个Web端的手机端UI库，于是打算从零开始写一个手机端APP。刚开始一切都没问题，开发起来就跟Web端我适配手机端时一样。直到写登录功能时，我才遇到一个新问题。在Web端我们可以直接使用cookie来实现登录功能，而在Tauri似乎并没有cookie这个概念，我得使用OAuth2实现登录功能，并将access token与refresh token存放到安全的地方。而这就是一切问题的起因，我查看了Tauri官方提供的插件，最后找到了两个能用来存储数据的插件——Store和Stronghold，而Stronghold就是专门用于存储敏感数据的。于是，我直接根据官网的步骤开始使用，结果最后运行的时候rust build报错了，怎么样都修复不了。谷歌上也找不到什么有用的信息，最后我不得已去GitHub提了一下issue，没人答复。于是我只能放弃Tauri，毕竟这么简单的功能都解决不了，谁知道后面有没有更难的。后来我也知道这是为什么了，就是Stronghold的一个依赖过时了，但没人替换掉，总之这个问题短期内是无法解决的。具体见Stronghold doesn't work在放弃Tauri后，接着，我使用了React Native来开发。React Native虽然使用的语言是React的，但是开发体验完全不一样。并且我刚开始使用了错误的UI库Tamagui上手（具体见React Native UI库介绍与对比），加上创建项目使用的template不同，总之刚开始用了不多久，我就放弃React Native了，转而尝试安卓原生和Flutter。说到安卓原生，我的开发时间很短，因为一开始用了没多久就把我劝退了😅。首先是很奇葩的需要将所有的string都写进一个xml文件里，这跟Web开发这么久所形成的习惯格格不入。接着就是布局组件这些，都得在xml文件里写，而函数调用那些就得在kt文件里写。接着就是实现一个ListView想不到也这么麻烦，最后根据网上找的资料，我才勉勉强强实现一个。最后把我劝退的，是在安卓原生发送HTTP请求，我对Java或者Kotlin本身就不熟悉，结果我发现想要发送一个简单的请求居然如此麻烦，对比React Native直接一个fetch搞定，安卓原生哪怕下了OkHttp也还是那么复杂。总之，最后我觉得按这个情况下去，开发完一个APP得猴年马月。于是，这时我第一次使用Flutter进行开发，虽然Flutter用的是dart语言，对熟悉JavaScript的Web开发者来说有些反人类设计，但其写法跟Java相似，并且跟安卓原生相比，已经简化很多了，接着还有一点就是它的官方文档十分齐全，还附有视频。刚开始用Flutter开发也没啥大问题，基本上都克服了。Flutter的状态管理相比于React Native能够使用Zustand还是复杂很多，不过发送HTTP请求还算简单跟fetch有得一比，比安卓原生简单不知道多少倍。而Authentication的实现比React native navigation的实现过程复杂一些，但最后也是顺利实现。目前看来，我应该可以使用Flutter一直开发下去。最后是什么劝退我使用Flutter呢？答案很简单，因为我无法使用Android emulator进行测试。前面我使用flutter都是直接用浏览器来测试的，也就是说我测试的是Web端，而Web端想要实现跨域很麻烦，反正我一直实现不了。毕竟我要开发的只是手机端，于是我直接打开安卓版，结果要么是报错，要么好不容易报错没了，结果Android emulator崩了。最后我花了不少时间，都解决不了Android emulator崩溃的问题，GitHub上也有不少人遇到这个问题，于是我只好放弃Flutter。最后我重新使用React Native进行开发，并且弃用Tamagui，改用React native paper以后，基本上也没遇到什么大问题。一路顺利推进下去，而偶尔也会遇到一些问题，需要花很多时间来解决。就这样前前后后花了三个月，弦圈APP终于在3月1号开发完成。