Sougata Mukherjee's questions

在这里，我创建了一个用于字符串压缩的程序，因此对于输入 chars = ["a","a","b","b","c","c","c"] 我们得到像 6 这样的输出字符 [“a”、“2”、“b”、“2”、“c”、“3”]。所以我使用数组方法创建了一个程序，该程序也非常冗长且复杂。有没有使用两指针或递归方法以很少的代码和效率来解决该程序的解决方案？您能提供非常短的代码吗？代码如下。

var compress = function(chars) {
 if (!chars.length) {
    return 0;
  }
   let j = 0;                 
  let cur = chars[0];        
  let counter = 0;         
   for (let i = 0; i <= chars.length; i++) {
  
    if (chars[i] === cur) {
      counter++;              
    } else {
      // Otherwise, add the current character and count to the compressed array
      chars[j] = cur;        
      if (counter > 1) {
        const s = counter.toString();
        for (let k = 0; k < s.length; k++) {
          chars[++j] = s[k];  
        }
      }
      j++;                  
      cur = chars[i];      
      counter = 1;           
    }
   }
   return j
};
console.log(compress ('aaaabbc'))//a4b2c

在这里，我编写了一个程序，它将找到所有子集数组，就像数组是 一样[1, 2, 3]，我想要像这样的输出[[], 2],, 2, , [2, 1], 3, , [3, 1], [3, 2], [3

我编写了一个表示二进制逻辑表示的程序。输出没有按预期进行。

能否请您纠正并修改该程序？

const getAllSubsets = arr => {
    let n = arr.length
    let add = []
    for (let i = 0; i < (1 << n); i++) {
        for (let j = 0; j < n; j++) {
            if ((1 << j) & i) {
                add.push([arr[j]])
            }
        }
    }

    return add
}
      
console.log(getAllSubsets([1,2,3]))

在这里，我编写了一个程序，遍历并反转数组元素的最后一部分，就像如果数组是[5, 17, 11, 10, 12, 6]，并且我想要像 一样的输出[5, 17, 11, 6, 12, 10]，所以我编写了一个程序，但输出没有按预期输出。您能否检查并修改它以便我得到想要的结果？

let a = [5, 17, 11, 10, 12, 6];
let n = a.length;
for (let i = 0, j = (n / 2) - 1; i < n / 4; i++, j--) {
  let temp = a[n / 2 + i];
  a[n / 2 + i] = a[j];
  a[j] = temp;

}

for (i = 0; i < n; i++) {
  console.log(a[i])
}

我想在 JavaScript 中使用 Stack 反转一个句子，所以在这里如果我输入，嘿，你好吗？并想完成输出？你是嘿，所以我遍历循环并检查直到找到空间，然后压入该单词，然后从堆栈中弹出所有单词，但它没有显示未定义的内容，所以您如何纠正该代码？

function reverseSentence(S){
    let stack = [];
    let word="";
    for(let i=0;i<S.length;i++){
        while(S[i]!=' '&&i<S.length){ 
            word+=S[i]
            i++
        }
       return stack.push(word)
    }
    while(!stack.length){
       return stack.pop()
    }
}
console.log(reverseSentence("Hey, how are you doing?"))

在这里，我在父组件中创建了一个重新渲染的切换按钮，在子组件中创建了一个加号按钮，计数器要求是切换按钮重新渲染是一个将隐藏和显示组件的切换按钮，但如果有最后一个计数器添加，例如从0到2，隐藏和显示后它应该保持不变，就像2而不是0，但问题是我无法隐藏子组件，那么我该如何隐藏和显示子组件并维护子状态？基本上，通过渲染父级，我想继续维护子级状态值。父代码是

import React, { useRef, useState, useMemo } from 'react';
import DropDown from './DropDown';

function App() {
  const shouldRenderChild = useRef(true);
  const [hide, setHide] = useState(false);

  const toggleChildRendering = () => {
    shouldRenderChild.current = !shouldRenderChild.current;
    setHide(!hide);
  };

  const MemoizedDropDown = useMemo(() => {
    return shouldRenderChild.current ? <DropDown /> : null;
  }, []);

  return (
    <div>
      <button onClick={toggleChildRendering}>
        Toggle Child Rendering
      </button>
      {MemoizedDropDown}
    </div>
  );
}

export default App;

子代码是

import React, { useState } from "react";
export default function DropDown() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <button onClick={() => setNumber(number + 1)}>+</button>
      <div>Child Component{number}</div>
    </>
  );
}

在这里，我想创建一个切换开关滑块按钮。我已经创建了它，但是当我单击它时，“它的背景将是蓝色的，当我单击关闭时，”它的背景将是蓝色的，但这里的文本被隐藏和关闭并显示。我想要像这张照片一样：

每次我只将背景颜色切换为蓝色时，我想连续显示打开和关闭按钮，如下图所示：

因此，当我单击切换背景颜色时，会通过一些过渡从一种颜色切换到另一种颜色，下面给出如何使用代码实现此目的。

import React, { useState } from 'react';
import './styles.css'; 

const App = () => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (<>
    <div className="toggle-container">
      <button
        className={`toggle-button ${isOn ? 'on' : 'off'}`}
        onClick={toggleSwitch}
        style={{color:isOn?'blue':'white',textAlign:isOn?'left':'right'}}
      >
        {isOn ? 'On' : 'Off'}
      </button>
    </div>
    
    </>
  );
};

export default App;

css 如下

.toggle-button {
  border:2px solid blue;
  outline: none;
  cursor: pointer;
  width: 100px;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
}

.toggle-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
  transition: left 0.3s, background-color 0.3s;
}

.toggle-button.on:before {
  left: 50%;
  background-color: white;
}

.toggle-button.off {
  background-color: blue;
}

.toggle-button.on {
  background-color: white;
}

.toggle-button.on.off:before {
  background-color: blue;
}

.toggle-button.off.on:before {
  background-color: white;
}

我创建了一个选项卡，每个选项卡中都包含每个组件。选项卡大小看起来像一个矩形形状，但我想以这种格式获得一个像箭头形状的选项卡。在这里，我添加了带有组件的每个选项卡链接，但我无法做类似箭头的选项卡设计。下面给出了如何使用 css 代码片段制作类似选项卡的形状

import React, { useState } from 'react';
import './styles.css';
const TabContent = ({ children }) => {
  return (
    <div style={{ width: '100vw', height: '100vh', backgroundColor: 'gray' }}>
      {children}
    </div>
  );
};

const Tab = ({ label, active, onClick }) => {
  const tabClass = active ? 'tab active' : 'tab';

  return (
    <div className={tabClass} onClick={onClick}>
      {label}
    </div>
  );
};

const App = () => {
  const [activeTab, setActiveTab] = useState(1);

  const handleTabClick = (tabIndex) => {
    setActiveTab(tabIndex);
  };

  return (
    <div className="tab-container">
      <div style={{ display: 'flex' ,gap:'20px'}}>
        <div style={{ flex: '0 0 180px', marginRight: '10px' }}>
          <Tab label="Tab 1" active={activeTab === 1} onClick={() => handleTabClick(1)} />
          <Tab label="Tab 2" active={activeTab === 2} onClick={() => handleTabClick(2)} />
          <Tab label="Tab 3" active={activeTab === 3} onClick={() => handleTabClick(3)} />
        </div>
        <div style={{ flex: '1 1 auto' }}>
          {activeTab === 1 && <TabContent>Component1</TabContent>}
          {activeTab === 2 && <TabContent>Component2</TabContent>}
          {activeTab === 3 && <TabContent>Component3</TabContent>}
        </div>
      </div>
    </div>
  );
};

export default App;

和CSS是

  .tab-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 25vh;
}

.tab {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #434DB8;
  color:#434DB8;
  cursor: pointer;
  border-top-right-radius:100%;
  border-bottom-right-radius:100%;
}

.tab::after{
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 30%;
  border-bottom: 2px solid #434DB8;
  border-right: 3px solid #434DB8;
  border-left: 5px solid transparent;
  transform: rotate(-45deg);
  
}
.tab.active {
  background-color: #434DB8;
  color:#FFFFFF;
  font-weight: bold;
}