javascript - 设置 JavaScript 对象中所有属性的 trim() 空格字符的有效方法？

Question

这是一个精简的演示，其中包含复制我需要执行的操作所需的非常基本的功能。

在我的 JavaScript 应用程序中，我在 Project Task Records 上有一个Click 事件。

当点击一个任务时，我用 DOM 中与被点击的任务记录相关的数据填充一个 JavaScript 对象。

我的问题是，当我从 DOM 打印出保存到我​​的对象的值时，我的字符串前后总是有大量空格字符。

我有这个 Shim 可以利用较新的内置 JavaScript trim() 函数...

/* JavaScript trim() method is ES 5, just in case polyfill it (IE 8 and down):
 * example usage:
 *  var str = " a b    c d e   f g   ";
 *  var newStr = str.trim();
*/
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, '');
  };
}

下面我针对这个问题做了一个简单的演示。

您将看到一个 JavaScript 对象存储在 taskDataObject

(NOTICE: I realize the actual selector code below is disgusting, that is next on my to-do list!)

这个 JSFiddle 页面包含显示我的演示运行的所有代码:
http://jsfiddle.net/jasondavis/2hkz0gp4/

当点击 .taskName 时，它会从 DOM 中抓取数据并将其保存到 taskDataObject JavaScript 对象中。

我正在寻找一种将此 str.trim() 代码应用于 taskDataObject 中所有属性的好方法，并希望我不必做一堆临时变量。

演示代码

//Open Task Modal when a Task record is clicked in Task List
$('body').on('click', '.taskName', function() {


    // Set and Cache Task ID from clicked on Task Item
    var taskId = $(this).parent().parent().parent().dataAttr('task-id');

    var $taskEl = $(this);

    // Populate Task Data Object from DOM values
    taskDataObject = {
        //projectId: projectTaskModal.cache.projectId,
        taskId: taskId,
        taskName: $taskEl.text(),
        taskDescription: $taskEl.next('.description').text(),
        taskStatus: $taskEl.parent().parent('td').next().text(),
        taskPriority: $taskEl.parent().parent('td').next().next().text(),
        taskTags: $taskEl.parent().parent('td').next().next().next().text(),
        taskCreatedDate: $taskEl.parent().parent('td').next().next().next().next().text(),
        taskModifiedDate: $taskEl.parent().parent('td').next().next().next().next().next().text(),
        taskDueDate: $taskEl.parent().parent('td').next().next().next().next().next().next().text(),
    };

    console.log('taskDataObject', taskDataObject);


    // Just playing around, this applies the trim() however I had
    // to create a bunch of temp variables and I am not sure if 
    // this can be avoided or done differently?
    for (var key in taskDataObject) {

      if (taskDataObject.hasOwnProperty(key)) {

        alert(key + " -> " + taskDataObject[key]);

        //console.log(key + " -> " + taskDataObject[key]);

          console.log(taskDataObject[key]);

          var tmpVal1 = taskDataObject[key]
          var tmpVal2 = tmpVal1.trim();

          console.log(tmpVal2);

      }
    }

});

Answer 1

如果我正确理解你的问题，你只需要调用 text().trim() 而不是 text()。 text() 返回一个 String

如果您确实需要对每个属性值进行 trim ，请执行以下操作:

for (var key in taskDataObject) {
    if(taskDataObject[key].trim)
       taskDataObject[key] = taskDataObject[key].trim(); 
}

这里有一个函数可以递归地执行所有子属性:

function trimObjectProperties(objectToTrim) {
    for (var key in objectToTrim) {
        if (objectToTrim[key].constructor && objectToTrim[key].constructor == Object)
            trimObjectProperties(objectToTrim[key]);
        else if (objectToTrim[key].trim)
            objectToTrim[key] = objectToTrim[key].trim();
    }
}

// Using this function, you should call it in that way:
trimObjectProperties(taskDataObject);