序文
大家好，我是梁木由，一个有想头的前端，最近呢也在为明年跳槽做复习准备。但我有个朋友呢，打算在年前跳槽，这不这几天正在疯狂面试中，前两天问了我两个问题，说是面试中遇到的。我看了下问题，思考的久久不能自拔，有个大概的模糊的想法，但是呢具体的写法还真没思考出来，于是呢便去查了查,给大家整理了出来
インターセプト文字列パラメータ
URL 上のすべてのパラメータを取得し、オブジェクトの形式で表示する方法
実装手順
- まず、URLパラメータ部分を取得する必要があります
- パラメータを保持するオブジェクトを宣言する
- パラメータの各ペアを配列に分割して保存します
- パラメーターの各ペアを走査し、キーと値のペアを取得して、パラメーターを保存するオブジェクトにそれを保存します。
- decodeURIComponent は中国語用にデコードする必要があることに注意してください。
function getQueryStringArgs(){
// 取得参数字符串并去掉问号
let params = location.search.length > 0 ? location.search.substring(1) : '',
// 声明保存参数的对象
args = {
},
// 保存每对参数
items = params.length ? params.split('&') : [],
// 存储键值对
item = null,
// 键
name = null,
// 值
value = null,
len = items.length;
// 遍历每对参数
for(let i = 0; i < len; i++){
// 获取键值对
item = items[i].split('=');
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
// 将每一对参数都添加到args中
if(name.length){
args[name] = value
}
}
return args
}
JSON の解析とシリアル化
JSON オブジェクトの stringify() と parse() という 2 つのメソッドは皆さんよく使うと思いますが、その完全な使い方をご存知ですか?
解析する
JSON 文字列をネイティブ JavaScript オブジェクトに解析します。
JSON.parse(text[, reviver])
- テキストは、JavaScript 値に解析される有効な JSON 文字列を渡す必要があります
- reviver オプション。結果を変換する関数。この関数はオブジェクトのメンバーごとに呼び出され、結果を返す前に解析によって生成された元の値を変更するために使用されます。
const str = '{"date":"2023-01-11T03:24:36.398Z","time":"111","aa":null}'
const jsonStr = JSON.parse(str)
console.log(jsonStr) // { date: '2023-01-11T03:24:36.398Z', time: '111', aa: null }
const jsonStr1 = JSON.parse(str,(key, value) => {
if(key === 'date'){
return new Date(value)
}else {
return value
}
})
console.log(jsonStr1.date.getFullYear()) //2023
文字列化する
JavaScript オブジェクトを JSON 文字列にシリアル化する
JSON.stringify(value[, replacer[, space]])
-
value は最初のパラメータであり、JSON 文字列にシリアル化される値です。
-
リプレイサーはオプションです。結果を変換する関数または配列
replacer が関数の場合、JSON.stringify はその関数を呼び出し、各メンバーのキーと値を渡します。元の値の代わりに戻り値を使用します。この関数が未定義を返した場合、メンバーは除外されます。ルート オブジェクトのキーは空の文字列「"」です。
replacer が配列の場合、キー値を持つ配列のメンバーのみが変換されます。メンバーは、配列内のキーと同じ順序で変換されます。value パラメータも配列の場合、replacer 配列は無視されます。
-
スペースはオプションです。テキストにインデント、スペース、改行を追加します。スペースが数値の場合、戻り値のテキストは各レベルで指定されたスペースの数だけインデントされます。スペースが 10 より大きい場合、テキストは 10 ずつインデントされます。スペース。スペースには、\t などの数字以外も使用できます。
値パラメータ
最初のデモ、JSON.stringify() の基本的な使用法を見てみましょう。
var obj = {
date: new Date(),
time:'111',
aa:null,
vv:undefined
}
console.log(JSON.stringify(obj)) // {"date":"2023-01-11T03:24:36.398Z","time":"111","aa":null}
stringfiy を通過すると失われることに気づきましたかobj.vv。なぜなら、JSON.stringify値が定義されていないフィールドは変換プロセス中に無視されるからです。
置換パラメータ
次に、2 番目のデモである replacer パラメータの使用法を見てください。
パラメーターが function の場合、元の値を変更できます。どこで使用できますか? たとえば、プロジェクトで JSON.stringify() を使用する必要がありますが、それを定義されたフィールドとして保持したい場合は、次のようにすることができます。まず変換してください
var obj = {
date: new Date(),
time:'111',
aa:null,
vv:undefined
}
console.log(
JSON.stringify(obj, (key,value) => {
if(typeof value == 'undefined'){
return true
}
return value
})
)
// {"date":"2023-01-11T06:30:26.702Z","time":"111","aa":null,"vv":true}
パラメータが配列の場合、日付属性の値のみが保持されます。
var obj = {
date: new Date(),
time:'111',
aa:null,
vv:undefined
}
console.log(
JSON.stringify(obj,['date'])
)
//{"date":"2023-01-11T06:33:20.772Z"}
スペースパラメータ
インデントの制御に使用される空白文字列は役に立たないようです
var obj = {
date: new Date(),
time:'111',
aa:null,
vv:undefined
}
console.log(
JSON.stringify(obj,'',2)
)
/*{
"date": "2023-01-11T06:37:39.995Z",
"time": "111",
"aa": null
*/}
console.log(
JSON.stringify(obj,'',10)
)
/*{
"date": "2023-01-11T06:38:53.998Z",
"time": "111",
"aa": null
*/}