JavaScript は親ノード ID によって JSON ツリーを再帰的に生成します。
実装のアイデア: 再帰を通じて実装 (最初の再帰中にすべての親ノードをクエリし、その後、再帰が完了して返されるまで、現在の親ノード ID を通じてすべての子ノードを継続的にクエリします)
// 模拟数据
const ary = [
{ id: '1', name: '11', parent_id: '' },
{ id: '2', name: '22', parent_id: '' },
{ id: '3', name: '33', parent_id: '' },
{ id: '11', name: '11-11', parent_id: '1' },
{ id: '12', name: '11-12', parent_id: '1' },
{ id: '21', name: '22-21', parent_id: '2' },
{ id: '31', name: '33-31', parent_id: '3' },
]
/**
* 递归通过父节点ID生成树结构
* 思路：
* 1. 第一次递归的时候查询出所有的父节点
* 2. 然后通过当前父节点id不断地去查询所有子节点，直到递归完毕返回
* @param {
String} pid 父节点id
*/
function getTrees(pid='') {
if(!pid) {
// 如果没有父id（第一次递归的时候）将所有父级查询出来
return ary.filter(item => !item.parent_id).map(item => {
// 通过父节点ID查询所有子节点
item.children = getTrees(item.id)
return item
})
} else {
return ary.filter(item => item.parent_id === pid).map(item => {
// 通过父节点ID查询所有子节点
item.children = getTrees(item.id)
return item
})
}
}
console.log(getTrees())
/** 输出：
* [{
* id: "1",
* name: "11",
* parent_id: 0,
* children: [
* {
* id: "11",
* name: "11-11",
* parent_id: '1',
* }
* ]
* },......]
*/JSは配列内のオブジェクトのプロパティ名を変更します
バックエンドがフロントエンドに応答する配列内のオブジェクト属性名は、私たちが望むものではないため、このメソッドを通じて変換できます。
変換後、元の応答本文は変更されていません。
const data = {
totalEmelents: 100,
list: [
{ id: 0, name: "a" },
{ id: 1, name: "b" },
{ id: 2, name: "c" },
]
}
const myList = data.list.map(item => {
return {
key: item.id,
value: item.name
}
});
console.log(...data.list)
console.log(...myList)
{
id: 0, name: 'a'} {
id: 1, name: 'b'} {
id: 2, name: 'c'}//原来的
{
key: 0, value: 'a'} {
key: 1, value: 'b'} {
key: 2, value: 'c'}//修改之后的子の属性名を変更する
for ループメソッドを使用する
const list = [
{ id: 0, name: "a", children: { id: 100, name: 'dd' } },
{ id: 1, name: "b" },
{ id: 2, name: "c" }
];
for (let i = 0; i < list.length; i++) {
if (list[i].children) {
list[i].children.pid = list[i].children.id;
delete list[i].children.id;
}
}
console.log(list);
打印结果：[
{ id: 0, name: 'a', children: { name: 'dd', pid: 100 } },
{ id: 1, name: 'b' },
{ id: 2, name: 'c' }
]マップメソッドを使用する
const list = [
{ id: 0, name: "a", children: { id: 100, name: 'dd' } },
{ id: 1, name: "b" },
{ id: 2, name: "c" }
];
const modifiedList = list.map(({ id, name, children }) => ({
id,
name,
children: children ? { pid: children.id, name: children.name } : undefined
}));
console.log(modifiedList);
打印结果[
{ id: 0, name: 'a', children: { name: 'dd', pid: 100 } },
{ id: 1, name: 'b' },
{ id: 2, name: 'c' }
]模擬試験問題
質問と回答は Niuke.com からのコピーです。答えはそれほど単純ではありませんが、JS オブジェクトのメソッドに適用するだけで十分です。
++ 文字列文字統計 (Niuke.com)
トピックの説明:
文字列内の各文字の出現頻度をカウントし、オブジェクトを返します。キーは統計文字、値は出現頻度です。
- キーの順序に制限はありません
- 入力文字列パラメータは空にはなりません
- 空白文字を無視する
入力：
'こんにちは世界'
出力：
{h: 1、e: 1、l: 3、o: 2、w: 1、r: 1、d: 1}
答え: (さらに必要ですか? )
function count(str) {
//用正则表达式去除空白符
var newStr = str.replace(/\s/g,"");
//console.log(newStr) //helloworld
var res={};
for(var i=0 ; i<newStr.length; i++){
//循环字符串，判断是否已存在对象中
if(newStr.charAt(i) in res){
res[newStr.charAt(i)]++;
}
else{
res[newStr.charAt(i)] = 1;
}
}
return res;
}
count('hello world')
++ 時刻形式の出力 (Niuke.com)
トピックの説明:
指定された時刻を指定された時刻形式に従って出力します。
形式の説明:
2014.09.05 13:14:20 の場合、
yyyy: 年、2014
yy: 年、14
MM: 月、2 桁で埋められ、09
M: 月、9
dd:日付、2 桁で入力、05
d: 日付、5
HH: 24 時間制、2 桁で入力、13
H: 24 時間制、13
hh: 12 桁で時、2 桁で入力、01
h: 12 時間制、1
mm : 分、2 桁で埋められます、14
m: 分、14
ss: 秒、2 桁で埋められます、20
s: 秒、20
w: 週、つまり ['day', 'one', 'two' 、「three」、「four」、「five」、「six」]、このデモの結果は 5 です
入力：
formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')
出力：
2014-09-05 13:14:20 金曜日
答え: (さらに必要ですか? )
function formatDate(t,str){
var obj = {
yyyy:t.getFullYear(),
yy:(""+ t.getFullYear()).slice(-2),
M:t.getMonth()+1,
MM:("0"+ (t.getMonth()+1)).slice(-2),
d:t.getDate(),
dd:("0" + t.getDate()).slice(-2),
H:t.getHours(),
HH:("0" + t.getHours()).slice(-2),
h:t.getHours() % 12,
hh:("0"+t.getHours() % 12).slice(-2),
m:t.getMinutes(),
mm:("0" + t.getMinutes()).slice(-2),
s:t.getSeconds(),
ss:("0" + t.getSeconds()).slice(-2),
w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
};
return str.replace(/([a-z]+)/ig,function($1){
return obj[$1]});
}
formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')
//"2014-09-05 13:14:20 星期五"
プロジェクトで出会った
JS は文字列内の特定の単語をクエリし、それにスタイル、タグ、文字列を追加します
++ 配列の重複排除
トピックの説明:
重複を削除するメソッドを Array オブジェクトに追加します。
入力：
[false、true、未定義、null、NaN、0、1、{}、{}、'a'、'a'、NaN]
出力：
[false、true、未定義、null、NaN、0、1、{}、{}、'a']
答え: (さらに必要ですか? )
Array.prototype.uniq = function () {
var resArr = [];
var flag = true;
for(var i=0;i<this.length;i++){
if(resArr.indexOf(this[i]) == -1){
if(this[i] != this[i]){ //排除 NaN
if(flag){
resArr.push(this[i]);
flag = false;
}
}else{
resArr.push(this[i]);
}
}
}
return resArr;
}
var arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
arr.uniq()//[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']
++ 文字列をキャメルケース形式に変換します
トピックの説明:
CSSではbackground-imageのような文字が-でつながっている場合が多いですが、JavaScriptでスタイルを設定する場合、このスタイルをbackgroundImageのキャメルケース形式に変換する必要がありますので、この変換機能を完了させてください。
- - を区切り文字として使用して、空ではない 2 番目の単語の最初の文字を大文字に変換します。
- -webkit-border-image 変換結果は webkitBorderImage です
入力：
'フォントサイズ'
出力：
フォントサイズ
答え: (さらに必要ですか? )
function cssStyle2DomStyle(sName) {
let sNameArr = sName.split(''); //["f", "o", "n", "t", "-", "s", "i", "z", "e"]
if(sNameArr.indexOf('-')==0){
sNameArr.splice(0,1)//删除连接符'-'
}
for(var i=1; i<sNameArr.length; i++){
if(sNameArr[i] == '-'){
sNameArr.splice(i,1);//删除连接符'-'
sNameArr[i]=sNameArr[i].toUpperCase();//将首个单词转换成大写
}
}
return sNameArr.join('');
}
cssStyle2DomStyle('font-size')//fontSize