问题[javascript]

不是所有的JS命令都要大写吗？

我无法理解。为什么普通函数的结果是未定义的，而箭头函数的结果是预期的结果？

let testArr = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
]

console.log (testArr)

let sumArr = testArr.map(function(item){
  item.reduce(function(acc, item){
    return acc + item;   
  })
})
console.log (sumArr)

let sumArr1 = testArr.map(item => item.reduce((acc, item) => acc + item));

console.log (sumArr1)

这是布局

这就是我的方式

这是 HTML

.thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumb {
  display: flex;
  width: 50%;
  background: #E4E7F6;
}

.thumb:nth-child(odd) {
  background: #fff;
}

<div class="thumbnails">
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
</div>

您需要按照布局分配颜色。如何做到这一点？

我决定尝试使用 javascript 中的生成器，并发现了奇怪的（对我来说）行为。我个人并不完全清楚yield的执行顺序。

让我们看一下这段代码：

function* gen() {
   return yield yield 5;
}
const iter = gen();
console.log(iter.next()); // value = 5
console.log(iter.next(2)); // value = 2
console.log(iter.next(3)); // value = 3

原则上，最右边的yield首先执行是合乎逻辑的，并且它们的顺序与堆栈的顺序相同。

但我们以下面的代码为例：

function* gen() {
  return (yield) + (yield) - (yield);
}
const iter = gen();
console.log(iter.next()); // value = undefined
console.log(iter.next(2)); // value = undefined
console.log(iter.next(4)); // value = undefined
console.log(iter.next(7)); // value = -1
// Вот как получилось -1: 2 + 4 - 7 = -1

由于某种原因，添加括号和运算符可以使顺序保持一致。

这是下一个例子：

function* gen() {
  return yield (yield) - (yield);
}
const iter = gen();
console.log(iter.next()); // value = undefined,
console.log(iter.next(3)); // value = undefined,
console.log(iter.next(6)); // value = -3,
console.log(iter.next(7)); // value = 7,
// Вот как получилось -3: 3 - 6 = -3
// А 7 просто подставилось

但在这个例子中，yield 触发顺序是 2,3,1。

为什么顺序是这样的，文档或标准中是否有描述？如果没有描述，那么阅读您对触发什么原则收益率的看法会很有趣

大家好！我遇到了以下 websocket 代理问题ws/**：

<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e>     at TCP.onStreamRead (node:internal/stream_base_commons:217:20) {
<e>   errno: -4077,
<e>   code: 'ECONNRESET',
<e>   syscall: 'read'
<e> }

我已在最底部附加了我的配置和软件包版本。

最初，webpack从版本4迁移到版本5。在版本4中，没有观察到这个问题。即使现在，切换到旧版本的项目，/ws/**使用套接字时也不会发生这样的错误。

数据通常通过 websocket 本身到达，但每次与 websocket 交互时，IDE 控制台中都会显示此错误。尝试过：

• 添加字段webSocketTransport，webSocketURL以及webSocketServer
• 将 webpack 包更新到最新版本
• 直接安装ws最新版本包

封装版本：

        "webpack": "^5.89.0",
        "webpack-bundle-analyzer": "^4.10.1",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1",
        "html-webpack-plugin": "^5.6.0",

网络包配置：

"use strict";

const webpack = require("webpack");
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { DefinePlugin } = require('webpack');

const Xliff2Json = require("./Xliff2Json");

const ip = require("ip");
const DEV_IP_ADDR = ip.address();
const DEV_PORT = 5002;
const ASSET_PATH = process.env.ASSET_PATH || "/";
const API_DOMAIN = "";
const API_PORT = "";

const isDevelopment = process.argv[process.argv.indexOf('--mode') + 1] === 'development';

const webpackConfig = {
    entry: ["@babel/polyfill", "./src/index.jsx"],
    output: {
        filename: isDevelopment ? "[name].bundle.js" : "[contenthash].bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/",
        library: "app",
    },
    devServer: {
        port: DEV_PORT,
        host: DEV_IP_ADDR,
        historyApiFallback: true,
        devMiddleware: {
            publicPath: ASSET_PATH,
            stats: "minimal",
        },
        client: {
            logging: "info",
            overlay: {
                errors: true,
                warnings: false,
                runtimeErrors: true,
            },
            webSocketTransport: 'ws',
            webSocketURL: `ws://${DEV_IP_ADDR}:${DEV_PORT}/ws`,
        },
        webSocketServer: 'ws',
        static: {
            directory: path.join(__dirname, "dist"),
        },
        open: true,
        hot: true,
        liveReload: true,
        proxy: [
            {
                context: [
                    "/api/**",
                    "/stream/sse/**",
                    "/download/**"
                ],
                target: "https://my-instance.com",
                secure: false,
                changeOrigin: true,
            },
            {
                context: [
                    "/ws/**",
                    "/stream/ws/**"
                ],
                target: "wss://my-instance.com",
                ws: true,
                secure: false,
                changeOrigin: true,
            },
        ],
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ],
            },
            {
                test: /\.(jsx|js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
            }
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: isDevelopment ? "[id].css" : "[contenthash].css",
            ignoreOrder: true
        }),
        new HtmlWebpackPlugin({
            inject: true,
            hash: true,
            favicon: "./src/static/images/favicon.png",
            template: "./src/index.html",
            filename: "index.html",
        }),
        new DefinePlugin({
            API_DOMAIN: `"${API_DOMAIN}"`,
            API_PORT: `"${API_PORT}"`,
        }),
        new CspHtmlWebpackPlugin(
            {
                "default-src": ["'self'", "my-sentry-backend.com", "wss:", "ws:"],
                "base-uri": "'self'",
                "object-src": "'none'",
                "frame-src": "'none'",
                "worker-src": "blob:",
                "img-src": ["'self'", "data:"],
                "script-src": ["'self'", "'unsafe-eval'"],
                "style-src": ["'unsafe-inline'", "'self'"],
            },
            {
                enabled: true,
                hashingMethod: "sha256",
                hashEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": true,
                },
                nonceEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": false,
                },
            }
        )
    ],
};

if (isDevelopment) {
    webpackConfig.devtool = 'inline-cheap-module-source-map';
}

module.exports = webpackConfig;