分类 javascript 下的文章

2024-08-14

JavaScript中的Set是一种新的原生集合类型，类似于数组，但只能有唯一的值。

以下是一些Set的常用方法和操作：

创建Set




let s = new Set();

添加元素




s.add(1);
s.add("hello");

删除元素




s.delete(1);

检查元素是否存在




s.has(1); // false

清空Set




s.clear();

获取Set的长度




s.size;

遍历Set




for (let item of s) {
    console.log(item);
}

使用Array去重




let arr = [1, 2, 3, 2, 4, 1];
let unique = [...new Set(arr)];

交集、并集、差集操作




let setA = new Set([1, 2, 3]);
let setB = new Set([2, 3, 4]);
 
// 并集
let union = new Set([...setA, ...setB]);
 
// 交集
let intersect = new Set([...setA].filter(x => setB.has(x)));
 
// 差集
let difference = new Set([...setA].filter(x => !setB.has(x)));

以上是Set的基本操作和使用方法，Set是一种新的数据结构，可以用于解决一些实际问题，例如，数组去重、数据的交集、并集、差集等操作。

- 阅读更多 -

JavaScript高级——ES6基础入门

System

2024-08-14

所有,javascript

ES6（ECMAScript 2015）是JavaScript语言的一个重要版本，它引入了许多新特性，如类、模块、箭头函数、let和const命令等，以下是一些基本的ES6特性的示例代码：

类（Class）:




class Person {
  constructor(name) {
    this.name = name;
  }
 
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}
 
const person = new Person('Alice');
person.greet(); // 输出: Hello, my name is Alice!

模块（Module）:




// math.js
export function add(a, b) {
  return a + b;
}
 
export function subtract(a, b) {
  return a - b;
}
 
// main.js
import { add, subtract } from './math.js';
 
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

箭头函数（Arrow Function）:




const sum = (a, b) => a + b;
console.log(sum(3, 4)); // 输出: 7

let和const命令:




let x = 5;
x = 10; // 正确
console.log(x); // 输出: 10
 
const y = 5;
// y = 10; // 错误：常量不能重新赋值
console.log(y); // 输出: 5

解构赋值（Destructuring Assignment）:




let [a, b, c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3
 
let { x, y } = { x: 1, y: 2 };
console.log(x); // 输出: 1
console.log(y); // 输出: 2

扩展运算符（Spread Operator）:




const numbers = [1, 2, 3];
const clone = [...numbers];
console.log(clone); // 输出: [1, 2, 3]
 
const merged = [...numbers, 4, 5];
console.log(merged); // 输出: [1, 2, 3, 4, 5]

这些示例展示了ES6的一些基本特性，实际开发中，你可以根据需要使用更多的ES6特性，如Promise、Set和Map、Iterable、Generator等。

- 阅读更多 -

HTML5+CSS3+JS小实例：图片九宫格

System

2024-08-14

所有,javascript

以下是一个简单的HTML5、CSS3和JavaScript代码示例，实现了一个图片九宫格效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片九宫格</title>
<style>
  .container {
    width: 300px;
    height: 300px;
    perspective: 1000px;
    margin: 50px auto;
    position: relative;
  }
  .container .cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  .container .face {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px #000;
    line-height: 100px;
    text-align: center;
    font-size: 3em;
    color: #fff;
  }
  .face1 {
    background: url('img/1.jpg');
    background-size: cover;
  }
  .face2 {
    background: url('img/2.jpg');
    background-size: cover;
    transform: rotateY(90deg) translateZ(100px);
  }
  .face3 {
    background: url('img/3.jpg');
    background-size: cover;
    transform: rotateY(-90deg) translateZ(100px);
  }
  .face4 {
    background: url('img/4.jpg');
    background-size: cover;
    transform: rotateX(90deg) translateZ(100px);
  }
  .face5 {
    background: url('img/5.jpg');
    background-size: cover;
    transform: rotateX(-90deg) translateZ(100px);
  }
  .face6 {
    background: url('img/6.jpg');
    background-size: cover;
    transform: rotateY(180deg) translateZ(100px);
  }
  .face7 {
    background: url('img/7.jpg');
    background-size: cover;
    transform: translateZ(-100px);
  }
  .face8 {
    background: url('img/8.jpg');
    background-size: cover;
    transform: rotateY(90deg) translateZ(-100px);
  }
  .face9 {
    background: url('img/9.jpg');
    background-size: cover;
    transform: rotateY(-90deg) translateZ(-100px);
  }
</style>
</head>
<body>
<div class="container">
  <div class="cube">
    <div class="face face1">1</div>
    <div class="face face2">2</div>
    <div class="face face3">3</div>
    <div class="face face4">4</div>
    <div class="face face5">5</div>
    <div class="face face6">6</div>
    <div class="face face7">7</div>
    <div class="face face8">8</div>
    <div class="face face9">9</div>
  </div>
</div>
<script>
  const cube = document.querySel

- 阅读更多 -

JS 数组过滤元素的方法（ 2 种）

System

2024-08-14

所有,javascript

在JavaScript中，有两种常见的方法可以用于过滤数组中的元素：

使用 filter() 方法：

filter() 方法会创建一个新数组，该数组包含通过所提供函数实现的测试的所有元素。




let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4, 6]

使用 for 循环和 push() 方法：

你也可以使用 for 循环和 push() 方法来过滤数组中的元素，将满足条件的元素添加到新数组中。




let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = [];
for (let number of numbers) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
}
console.log(evenNumbers); // 输出: [2, 4, 6]

这两种方法都可以过滤出数组中的偶数。第一种方法更简洁，第二种方法更直观。选择哪种方法取决于个人喜好和具体情况。

- 阅读更多 -

JS使用dijkstra算法实现查找最短路径

System

2024-08-14

所有,javascript




function dijkstra(graph, start, finish) {
    const distances = {};
    const previous = {};
    const visited = new Set();
    const nodes = Object.keys(graph);
 
    // 初始化距离和前驱节点
    for (let node of nodes) {
        distances[node] = Infinity;
        previous[node] = null;
    }
    distances[start] = 0;
 
    // 循环直到找到最短路径
    while (nodes.length) {
        let currentNode = findClosestNode(nodes, distances, visited);
        if (currentNode === finish) break; // 找到最短路径
        visited.add(currentNode);
 
        // 更新当前节点的邻居节点的距离
        for (let neighbor in graph[currentNode]) {
            if (visited.has(neighbor)) continue;
            let newDistance = distances[currentNode] + graph[currentNode][neighbor];
            if (newDistance < distances[neighbor]) {
                distances[neighbor] = newDistance;
                previous[neighbor] = currentNode;
            }
        }
    }
 
    // 构建最短路径
    const buildPath = (prev, node) => {
        if (prev[node] && prev[node] !== start) {
            return buildPath(prev, prev[node]) + '->' + node;
        } else {
            return node;
        }
    };
 
    return {
        distances: distances,
        path: buildPath(previous, finish)
    };
}
 
// 测试用例
const graph = {
    'start': {'a': 6, 'b': 2},
    'a': {'finish': 1},
    'b': {'a': 3, 'finish': 5},
    'finish': {}
};
 
const shortestPath = dijkstra(graph, 'start', 'finish');
console.log(shortestPath.distances);
console.log('Shortest Path:', shortestPath.path);

这段代码实现了Dijkstra算法，用于找到加权图中两个节点之间的最短路径。它首先初始化距离和前驱节点，然后通过循环找到最短路径，并构建最短路径的路径字符串。

- 阅读更多 -

Next.js Tailwind CSS UI组件

System

2024-08-14

所有,javascript




import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
 
const Header = () => {
  return (
    <header className="bg-white border-b border-gray-100">
      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-gray-900">
          <Link href="/">
            <a className="flex items-center gap-2">
              <Image src="/logo.png" alt="Logo" width={40} height={40} />
              {/* 这里的title是必要的，以便在没有图像时显示文本 */}
              <span className="sr-only">Home</span>
            </a>
          </Link>
        </h1>
      </div>
    </header>
  );
};
 
export default Header;

这个代码实例展示了如何在Next.js应用中使用Tailwind CSS创建一个带有Logo和品牌名称的页头组件。它使用了Next.js的Link组件来实现导航，并且使用了Image组件来处理图片的加载和显示。同时，它还使用了Tailwind CSS的实用程序类来创建页面布局和样式。

- 阅读更多 -

vue-markdown|基于marked.js的Vue Markdown插件

System

2024-08-14

所有,javascript

Vue-markdown是一个基于marked.js的Vue.js插件，用于在Vue应用中渲染Markdown。以下是如何使用vue-markdown的示例代码：

首先，安装vue-markdown：




npm install vue-markdown

然后，在你的Vue组件中引入并使用vue-markdown：




<template>
  <vue-markdown>{{ markdownContent }}</vue-markdown>
</template>
 
<script>
// 引入vue-markdown组件
import VueMarkdown from 'vue-markdown'
 
export default {
  components: { VueMarkdown },
  data() {
    return {
      // 这里是你的Markdown内容
      markdownContent: `
# 标题
 
这是一个例子。
 
- 列表项A
- 列表项B
      `
    }
  }
}
</script>

在这个例子中，我们创建了一个Vue组件，其中包含了vue-markdown标签。markdownContent是一个包含Markdown内容的数据属性，它将被渲染为HTML。

vue-markdown插件还允许你传递额外的选项给marked.js，例如：




<template>
  <vue-markdown :source="markdownContent" :toc="true"></vue-markdown>
</template>

在这个例子中，:toc="true"表示启用目录（Table of Contents）功能。

- 阅读更多 -

屏幕适应之关于flexible.js的使用

System

2024-08-14

所有,javascript

flexible.js 是一个用于在移动端自适应的脚本，可以帮助我们在开发响应式网页时处理不同屏幕尺寸的显示问题。以下是一个简单的使用示例：

首先，在你的HTML文件中引入flexible.js：




<script src="path/to/flexible.js"></script>

然后，你可以通过CSS媒体查询和百分比宽度来创建一个响应式布局。例如：




/* 设置基本字体大小 */
html {
    font-size: 10px;
}
 
/* 通过媒体查询调整基本字体大小 */
@media screen and (min-width: 320px) {
    html {
        font-size: 10px;
    }
}
 
@media screen and (min-width: 360px) {
    html {
        font-size: 11.25px; /* 10px * (360/320) */
    }
}
 
/* 使用rem单位设置元素宽度和字体大小 */
.container {
    width: 6.25rem; /* 62.5px */
    font-size: 0.875rem; /* 8.75px */
}

在这个例子中，我们设置了基本的字体大小为10px，然后通过媒体查询调整不同屏幕宽度下的字体大小比例。这样，我们就可以用rem单位来设置元素的宽度和字体大小，这些值会根据根元素（html）的字体大小变化而自适应。

注意，flexible.js 会根据屏幕宽度动态调整html元素的字体大小，所以不需要手动设置固定的字体大小。只需要使用rem单位来定义布局尺寸，就可以实现响应式设计。

- 阅读更多 -

Chrome 自动执行 JS 脚本 | Tampermonkey 插件

System

2024-08-14

所有,javascript




// ==UserScript==
// @name        自动执行JavaScript脚本
// @namespace   your.name/your.script
// @version     1.0
// @description 在Chrome中自动执行JS脚本
// @match       *://*/*
// @grant       none
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 需要自动执行的JS代码
    var myScript = `
        alert('脚本已自动执行！');
    `;
 
    // 将脚本添加到文档中
    var script = document.createElement('script');
    script.textContent = myScript;
    (document.head||document.documentElement).appendChild(script);
    script.parentNode.removeChild(script);
})();

这段代码使用了Tampermonkey用户脚本的结构，并在匹配的网页上自动执行了一个简单的JavaScript警告框。开发者可以将自己的JS代码替换到myScript变量中，以实现特定的功能。

- 阅读更多 -

WebView与JS的交互

System

2024-08-14

所有,javascript

在Android中，你可以使用WebView来加载和显示网页内容，并且可以通过WebView与JavaScript代码进行交互。以下是一个简单的例子，展示了如何从Android应用中调用JavaScript函数：

首先，在布局文件中定义WebView组件：




<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

然后，在Activity中设置WebView并调用JavaScript代码：




public class WebViewActivity extends AppCompatActivity {
    private WebView webView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
 
        webView = findViewById(R.id.webview);
 
        // 启用JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
 
        // 加载页面
        webView.loadUrl("file:///android_asset/your_page.html");
 
        // 当页面加载完成后调用JavaScript函数
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                webView.evaluateJavascript("javascriptFunction()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        // 处理JavaScript返回的结果
                    }
                });
            }
        });
    }
}

在这个例子中，evaluateJavascript方法被用来异步执行JavaScript代码。javascriptFunction()是你想要执行的JavaScript函数，它必须已经定义在你的网页中。onReceiveValue回调用于接收JavaScript返回的结果。

请确保你的HTML文件（在这个例子中是your_page.html）已经放在Android项目的assets目录下，并且包含了你想要调用的JavaScript函数javascriptFunction()。

- 阅读更多 -