如何創建一個包含資料屬性的每個字母以及該字母的位置的物件

我目前正在做一個編碼挑戰，我必須撰寫一個 jQuery 函式來獲取下面每個 div 的資料引數的值，并創建一個包含每個字母以及字母表中該字母位置的物件。

<div class="foo" data-widget="bar">This</div>
<div class="foo" data-widget="baz">That</div>

輸出應該是：

This: {"b":"2", "a":"1", "r":"18"}
That: {"b":"2", "a":"1", "z":"26"}

到目前為止，這就是我所擁有的：

var allAttributes = $('.foo').map(function() {
  return $(this).attr('data-widget');
}).get();

console.log(allAttributes);

//this function finds the numerical position of the letters in a string
var alphabet = "abcdefghijklmnopqrstuvwxyz".split('');
var alphabetPosition = text => 
  text.split('').map(x => alphabet.indexOf(x)   1);

uj5u.com熱心網友回復：

要為 each 構造物件div，您可以獲取專案的data-widget屬性值，拆分為字符陣列，映射每個并構造一個包含字母及其索引的陣列alphabet，然后使用Object.fromEntries將其轉換為物件。

var alphabet = "abcdefghijklmnopqrstuvwxyz".split('');

const obj = {}

$('.foo').each(function(){
  obj[this.textContent] = Object.fromEntries(this.dataset.widget.split('').map(e => [e, alphabet.indexOf(e)   1]))
})

console.log(obj)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo" data-widget="bar">This</div>
<div class="foo" data-widget="baz">That</div>

uj5u.com熱心網友回復：

考慮以下。

$(function() {
  var myText = {};

  function charPos(c) {
    var alphabet = "abcdefghijklmnopqrstuvwxyz".split('');
    return alphabet.indexOf(c)   1;
  }

  function wordDetails(w) {
    var r = {};
    $.each(w.split(""), function(i, c) {
      r[c] = charPos(c.toString());
    });
    return r;
  }

  $(".foo").each(function(i, el) {
    myText[$(el).text().trim()] = wordDetails($(el).data("widget"));
  });
  console.log(myText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo" data-widget="bar">This</div>
<div class="foo" data-widget="baz">That</div>

結果：

{
  "This": {
    "b": 2,
    "a": 1,
    "r": 18
  },
  "That": {
    "b": 2,
    "a": 1,
    "z": 26
  }
}

如果你想最小化它：

$(function() {
  var myText = {};

  $(".foo").each(function(i, el) {
    var obj = {};
    $.each($(el).data("widget").split(""), function() {
      obj[this] = "abcdefghijklmnopqrstuvwxyz".split('').indexOf(this.toString())   1;
    });
    myText[$(el).text().trim()] = obj;
  });

  console.log(myText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo" data-widget="bar">This</div>
<div class="foo" data-widget="baz">That</div>

uj5u.com熱心網友回復：

我接受你的挑戰，但是在完成它之后我意識到你確實說過 JQuery 而這個解決方案只是 Javascript。

在此處查看我的解決方案：CodePen

let elements = document.querySelectorAll(".foo");
let alph = 'abcdefghijklmnopqrstuvwxyz'.split('');
let result = {};
Array.from(elements).map(e => {
  let key = e.innerText;
  let value = {};
  let data = e.dataset.widget.split('');
  data.map( c => value[c] = alph.indexOf(c)   1 );
  result[key] = value;
})
console.log(result);

uj5u.com熱心網友回復：

你可以做到……
在Array.reduce()的幫助下

const
  alphabet = ' abcdefghijklmnopqrstuvwxyz'
, result =
    Array
    .from(document.querySelectorAll('.foo'))
    .reduce( (res,e) => 
      {
      res[e.textContent] = 
        [...e.dataset.widget]
        .reduce( (r,c) =>
          (r[c] = alphabet.indexOf(c).toString(10), r )
        ,{})
      return res
      },{})
 
const // show result
  rpl  = [[`"`,`'`],[`}`,` }`],[`{`,`{ `],[`:`,`: `],[`},`,`}\n,`],[`,`,`, `],[`} }`,`}\n}`]]
, clog = s => rpl.reduce((r,[x,y])=>r.replaceAll(x,y),s)

console.log( clog(JSON.stringify(result)) )

.as-console-wrapper { max-height: 100% !important; top: 0 }

<div class="foo" data-widget="bar">This</div>
<div class="foo" data-widget="baz">That</div>

標籤：javascript 查询

上一篇：獲取洗牌blob的索引[影像、音頻等的blob...]

下一篇：錨點/影像標簽html上的onClick事件