如何在 JavaScript 中使用结构?
javascriptweb developmentfront end technology更新于 2024/6/19 17:15:00
在本教程中，让我们讨论如何在 JavaScript 中使用结构。
什么是结构?结构是数据结构的简称。结构在单个变量中创建不同类型的多个值。我们可以使用结构来生成记录。
JavaScript 中的结构是对象创建。除此之外，JavaScript 没有结构功能。
让我们看看创建结构的方法。
使用字符串 split() 方法
让我们学习使用字符串 split 创建结构。
用逗号和空格分隔字符串，并将其作为输入以创建我们需要的结构的构造函数。现在我们可以访问此构造函数的对象。
用户可以按照以下语法来完成此操作。
语法
function createStruct(keys) {
if (!keys) return null;
const kArr = keys.split(', ');
const kCount = kArr.length;
function createConstructor() {
for (let i = 0; i < kCount; i++)
this[kArr[i]] = arguments[i];
}
return createConstructor;
}
const keyObj = new createStruct('key1, key2');
const valObj = new keyObj('val1, val2');
valObj.key1;
上述语法从字符串输入创建一个构造函数。
属性
keys − 键是输入字符串。
返回值
构造函数返回一个对象结构。
示例
下面的程序从字符串输入创建一个简单对象和两个复杂对象结构。
第一个复杂对象结构包含一个数组，第二个复杂对象结构包含另一个对象。输出显示对象结构和对象结构的属性。
<html> <body> <h2> Working with struct using<i> string split </i> </h2> <div id="structOneBtnWrap"> <button id="structOneBtn"> Click Me </button> </div> <p id="structOneOut"></p> <script> var structOneOut = document.getElementById("structOneOut"); var structOneBtnWrap = document.getElementById("structOneBtnWrap"); var structOneBtn = document.getElementById("structOneBtn"); var structOneInpStr = ""; structOneBtn.onclick = function() { structOneInpStr = ""; //structOneBtnWrap.style.display = "none"; function createStruct(keys) { if (!keys) return null; const kArr = keys.split(', '); const kCount = kArr.length; function createConstructor() { for (let i = 0; i < kCount; i++) this[kArr[i]] = arguments[i]; } return createConstructor; } const user = new createStruct("id, name"); const egan = new user(1, 'Egan'); structOneInpStr += JSON.stringify(egan) + "<br><br>"; structOneInpStr += "<b>name = </b>" + egan.name + "<br><br>"; structOneInpStr += "<b>id = </b>" + egan.id + "<br><br><br><br>"; const userMult = new createStruct("id, name, color"); const colors = new userMult(1, 'Anna', ['Blue', 'Grey']); structOneInpStr += JSON.stringify(colors) + "<br><br>"; structOneInpStr += "<b>color = </b>" + colors.color + "<br><br>"; structOneInpStr += "<b>first color = </b>" + colors.color[0] + "<br><br>"; structOneInpStr += "<b>second color = </b>" + colors.color[1] + "<br><br>"; structOneInpStr += "<b>id = </b>" + colors.id + "<br><br>"; structOneInpStr += "<b>name = </b>" + colors.name + "<br><br><br><br>"; const userData = new createStruct('job, place'); const moreData = new userData('Handicapper', 'USA'); const userObj = new createStruct('id, name, info'); const grace = new userObj(1, 'Grace', moreData); structOneInpStr += JSON.stringify(grace) + "<br><br>"; structOneInpStr += "<b>name = </b>" + grace.name + "<br><br>"; structOneInpStr += "<b>id = </b>" + grace.id + "<br><br>"; structOneInpStr += "<b>job = </b>" + grace.info.job + "<br><br>"; structOneInpStr += "<b>place = </b>" + grace.info.place + "<br><br>"; structOneOut.innerHTML = structOneInpStr; }; </script> </body> </html>
使用 'this' 关键字
让我们学习使用 'this' 关键字创建一个结构体。
用户可以按照以下语法来完成此操作。
语法
function createStruct(val1, val2){
this.key1 = val1;
this.key2 = val2;
}
var objArr = [
new createStruct('val1', 'val2')
];
上述语法使用"this"关键字创建构造函数。
属性
val1, val2 − 值。
返回值
构造函数返回一个数组结构。
示例
下面的程序使用"this"关键字从数组输入创建一个结构。
<html> <body> <h2> Working with struct using <i> 'this' </i> keyword reference function </h2> <div id="structFuncBtnWrap"> <button id="structFuncBtn"> Click Me </button> </div> <p id="structFuncOut"></p> <script> var structFuncOut = document.getElementById("structFuncOut"); var structFuncBtnWrap = document.getElementById("structFuncBtnWrap"); var structFuncBtn = document.getElementById("structFuncBtn"); var structFuncInpStr = ""; structFuncBtn.onclick = function() { structFuncInpStr = ""; //structFuncBtnWrap.style.display = "none"; function createMovie(rating, review) { this.rating = rating; this.review = review; structFuncInpStr += "Rating = <b>" + this.rating + "</b><br><br>"; structFuncInpStr += "Review = <b>" + this.review + "</b><br><br>"; } var movieArr = [ new createMovie('5', 'Great'), new createMovie('1', 'Poor') ]; structFuncInpStr += "<b>Struct = </b><br><br>" + JSON.stringify(movieArr); structFuncOut.innerHTML = structFuncInpStr; }; </script> </body> </html>
本教程教我们如何使用 JavaScript 中的结构体。结构体与 JavaScript 对象相同。第一种方法是使用字符串拆分来创建结构体，有点嵌套。第二种方法使用"this"关键字，实现起来很简单。
