使用 Svelte 进行无箭头函数的复选框验证

Question

我想知道是否可以使用相同的方式编写代码运行但不使用箭头函数。我试图通过使用我已经知道的基本概念编写代码来使代码更容易理解。我仍然希望代码运行通过将颜色保存到本地存储并将字符串更改为用户 checks/unchecks 一个选项而完全相同。我无法以同样的方式将我的版本升级到运行。这是代码：

这是原始版本：

 <script>
        const colours = {
            blue: false,
            red: false,
            green: false,
            purple: false
        };

  $: colourString = Object.keys(colours).filter(c => colours[c]).join(',');
    $: {
    console.log(colourString);
    localStorage.setItem("colors", colourString);
    }
</script>

{#if !Object.keys(colours).filter(c => !!colours[c]).length}
<p>please pick a color</p>
{:else}
String of colours being saved is: {colourString}
{/if}

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.blue}>
    <label>Blue</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.red}>
    <label>Red</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.green}>
    <label>Green</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.purple}>
    <label>Purple</label><br><br>
</div>

更改版本：

        <script>
        const colours = {
            blue: false,
            red: false,
            green: false,
            purple: false
        };

function myFunction (color) {
  switch (color) {
    case 'blue': 
            return color.blue;
   case 'red': 
            return color.red;
   case 'green':
            return color.green;
    case 'purple':
            return color.purple;
  }
}

    $: {
    console.log(colourString);
    //localStorage.setItem("colors", colourString);
    }
</script>

<p>please pick a color</p>
<p>String of colours being saved is: {color}</p>

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.blue}>
    <label>Blue</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.red}>
    <label>Red</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.green}>
    <label>Green</label><br>
    <input type="checkbox" id="color" name="color" bind:checked={colours.purple}>
    <label>Purple</label><br><br>
</div>

Answer 1

我认为您误解了它的工作原理：

$: colourString = Object.keys(colours).filter(c => colours[c]).join(',');
    $: {
    console.log(colourString);
    localStorage.setItem("colors", colourString);
    }

让我分解一下，首先您将字符串 colourString 绑定到任何更改。

$: colourString =

然后你从 const 对象（蓝色，红色..）中获取所有键

Object.keys(colours)

然后循环遍历键（基本上是一个 foreach），返回所有为真值的数组

.filter(

然后在 foreach 中，运行一个返回 bool 的函数：

c => colours[c]

这等同于：

function(color) {
    return colours[color];
}

你也可以这样写：

function(color) {
  switch color {
    case 'blue': return colours.blue;
    case 'red': return colours.red;
    case 'green': return colours.green;
    case 'purple': return colours.purple;
  }
}

最后一步：.join(',');是另一个循环，循环遍历过滤器函数的结果数组，将所有键连接在一个“，”分隔的字符串中。

//编辑

$: {
    console.log(colourString);
    //localStorage.setItem("colors", colourString);
}

这是另一种写法：

$: {
  let colorString = "";
  for (var key in colours) {
    colorString += getColor(key) ? key : "";
  }
  console.log(colorString);

  function getColor(color) {
    switch (color) {
      case 'blue'  : return colours.blue;
      case 'red'   : return colours.red;
      case 'green' : return colours.green;
      case 'purple': return colours.purple;
    }
  }
}

使用 Svelte 进行无箭头函数的复选框验证

Checkbox Validation Without Arrow Functions using Svelte

svelte