js如何判断对象自身为空?
如何判断一个对象为空是我们在开发中经常会遇到的问题,今天我们来聊聊几种经常使用的方法,以及在不同的场景下我们如何去使用。
JSON.stringify()使用JSON.stringify()方法:如果对象为空,JSON.stringify()方法将返回{}。
const obj = {};const isEmpty = JSON.stringify(obj) === '{}';console.log(isEmpty);
Object.entries()使用Object.entries()方法:如果对象为空,Object.entries()方法将返回一个空数组。
const obj = {};const isEmpty = Object.entries(obj).length === 0;console.log(isEmpty);
Object.values()使用Object.values()方法:如果对象为空,Object.values()方法将返回一个空数组。
const obj = { ...
Js 常用规则校验或过滤方法
以下是一些 JavaScript 中常用的规则校验或过滤方法
数据过滤手机号码隐藏中间4位function phoneHideMiddle(val) { if (val) { return `${val.substring(0, 3)}****${val.substring(val.length - 4)}` } else { return ""; }}
保留两位小数function keepTwoNum(val) { val = Number(val); return val.toFixed(2);}
每三位逗号隔开,后面补两位小数,多用于金额数字function floatThree(value) { // console.log(value) value = "" + value; if (!value) return ' ...
杀手级的 JS 一行代码
通常指的是那些能够在一行代码内实现复杂功能或解决困难问题的 JavaScript 代码片段。这些代码通常具有高度的创造性和效率,可以大大简化代码的编写过程。欢迎留言补充
数组乱序在使用需要某种程度的随机化的算法时,你会经常发现洗牌数组是一个相当必要的技能。下面的片段以O(n log n)的复杂度对一个数组进行就地洗牌。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5)// 测试console.log(shuffleArray(arr))
复制到剪贴板在Web应用程序中,复制到剪贴板因其对用户的便利性而迅速流行起来。==注意:根据caniuse,该方法对93.08%的全球用户有效。所以必须检查用户的浏览器是否支持该API。为了支持所有用户,你可以使用一个输入并复制其内容。==
const copyToClipboard = (text) => naviga ...
使用 GitHub Pages 部署静态网页
GitHub Pages 是一个免费的静态网页托管服务,你可以使用它来部署你的静态网页。
GitHub Pages 的优点
使用零成本: Github Pages 集成在 Github 中,直接和代码管理绑定在一起,随着代码更新自动重新部署,使用非常方便;
免费域名: Github Pages 提供免费的 <username>.github.io 二级域名,也可以绑定自己的域名;
无数量限制: Github Pages 没有使用的数量限制,每一个 repository 都可以部署为一个静态网站;
一、创建一个GitHub仓库并配置pages1、首先,你需要创建一个 GitHub 仓库来存储你的网页文件。你可以在 GitHub 上创建一个新的仓库,或者将现有的仓库转换为 GitHub Pages 仓库。
2、输入username.github.io作为存储库名称。替换username为您的 GitHub 用户名。例如,如果您的用户名是FairlyHe,则存储库名称应该是FairlyHe.github.io。
3、 在您的存储库名称下,单击 “设置”。如果您看不到“设 ...
使用jsDelivr和GitHub实现免费CDN加速
jsDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。
在GitHub上创建仓库在GitHub上创建一个新的仓库,用于托管你的静态资源文件。如果你已经有了一个仓库,可以跳过这一步。可以通过新建文件夹区分不同的资源文件,也可以将所有资源文件放在同一个文件夹中。
上传资源文件到对应的仓库目录下降你的资源上传到对应的仓库目录下,然后提交到GitHub。确保文件路径的正确性,以便后续的CDN加速中能够正确的引用这些资源。
获取资源文件的URL地址在Markdown语法中,通过指定URL地址来引用图片。格式为
![alt text](https://cdn.jsdelivr.net/gh/{username}/{repository_name}@{branch}/path/to/image)
参数
说明
alt text
图片无法显示时所显示的替代文本
{username}
GitHub用户名称 ...
flex.css声明式布局
flex.css是一个轻量级的 CSS 框架,用于快速构建灵活的响应式布局。它提供了一种简单而直观的方式来实现常见的 Flexbox 布局模式,无需深入了解 Flexbox 的细节。
安装 flex.css你可以通过以下两种方式安装 flex.css
NPMnpm install flex.css --save
下载git clone https://github.com/lzxb/flex.css.git
使用 flex.css将dist目录下的css文件引入到你的页面中,根据你的需要引入flex.css 使用flex属性匹配data-flex.css 使用data-flex属性匹配( React 使用)如果使用了webpack打包,npm安装后,并且配置了ES6编译器的话,flex 属性匹配可以直接使用:import ‘flex.css’;data-flex 属性匹配可以直接使用( React 使用)import ‘flex.css/dist/data-flex.css’;
<!-- flex属性匹配,简单的子元素居中例子: --><d ...
超简单Vue快捷打包并部署到服务器
本文介绍了如何使用Vue快捷打包并部署到服务器。
准备工作#安装scp2npm install scp2 --save-dev#下面两个插件是部署的时候控制台美化所用 可有可无npm install oranpm install chalk
第一步 deploy.js在项目根目录下创建一个deploy.js文件,内容如下:
'use strict'// 引入scp2var client = require('scp2');// 下面两个插件是部署的时候控制台美化所用 可有可无const ora = require('ora');const chalk = require('chalk');const spinner = ora(chalk.green('正在发布到服务器...'));spinner.start();client.scp('./dist/', { // 本地打包文件的位置,根据项目的需求修改 "host": ...
JavaScript常用方法
JavaScript 中一些常用方法的简要介绍。这些方法只是 JavaScript 方法的一小部分,JavaScript 提供了许多其他方法来处理字符串、数组、对象、数学计算和日期操作。具体使用哪些方法取决于你的具体需求。
一、字符串方法
replace(): 替换字符串中的子串。
split(): 将字符串分割成数组。
toUpperCase() 和 toLowerCase(): 将字符串转换为大写或小写。
trim(): 删除字符串两端的空格。
indexOf() 和 lastIndexOf(): 查找子串在字符串中的位置。
二、数组方法
push(), pop(), unshift(), shift(): 向数组末尾添加元素、从数组末尾删除元素、向数组开头添加元素、从数组开头删除元素。
slice(): 从数组中提取子数组。
filter(): 过滤数组中的元素。
map(): 对数组中的每个元素进行操作,并返回一个新的数组。
reduce(): 对数组中的元素进行聚合操作,并返回一个最终结果。
forEach(): 对数组中的每个元素执行指定的操作。
三、对象方法
ha ...
基于 Hexo.js + Vercel 快速搭建免费的个人博客
什么是 Hexo?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
安装前提Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)Git
安装 Hexo
所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。
npm install -g hexo-cli
安装完成之后输入 hexo -v 查看一下版本
hexo -v
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
hexo init <folder>cd <folder>npm install
新建完成后,指定文件夹的目录如下:
.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes
接下来,启动Hexo服务器,并在浏览器输入 localhost:4000 就可以看到你生 ...
基于 Astro.js + Vercel 快速搭建免费的个人博客
Astro 可构建快速的内容网站、功能强大的网络应用程序、动态服务器 API 以及介于两者之间的所有内容。它是一个现代的、轻量级的、可扩展的框架,可让您使用 JavaScript 构建任何内容。
主要特性:
组件群岛: 用于构建更快网站的全新 web 架构。
服务器优先的 API 设计: 移除客户端上高资源消耗的激活过程。
默认零 JS: 没有 JavaScript 运行时开销来减慢你的速度。
边缘就绪: 在任何地方部署,甚至像 Deno 或 Cloudflare 这样的全球边缘运行时。
可定制: Tailwind, MDX 和 100 多个其他集成可供选择。
不依赖特定 UI: 支持 React, Preact, Svelte, Vue, Solid, Lit 等等。
打开官网 Astro Docs ,开始你的第一个项目!
开始你的第一个项目# 使用 npm 创建新项目npm create astro@latest# 使用 pnpm 创建新项目pnpm create astro@latest# 使用 yarn 创建新项目yarn create astro
进阶 Astro这边 ...