技術文章 » es6解構支援字串嗎

es6解構支援字串嗎

2022-10-24 22:00:35

es6解構支援字串。ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構；通過解構賦值可以將屬性值從物件/陣列中取出賦值給其他變數。字串也可以解構賦值，字串會被轉換成了一個類似陣列的物件；類似陣列的物件都有一個length屬性，因此還可以對這個屬性解構賦值。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows10系統、ECMAScript 6版、Dell G3電腦。

es6的解構是什麼意思

destructuring：百度百科的意思是結構分解，ES6 中允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。

解構賦值語法是一種 Javascript 表示式，通過解構賦值可以將屬性值從物件/陣列中取出賦值給其他變數

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構

開發中比較常見的有字串解構、物件解構、 陣列解構、混合解構。這是一種將資料結構分解為更小的部分的過程，從而達到簡化提取資訊的目的。

1. 基本資料型別解構

1-1 字串解構賦值

字串也可以解構賦值，字串會被轉換成了一個類似陣列的物件

類似陣列的物件都有一個length 屬性，因此還可以對這個屬性解構賦值

// 會將字串轉換成一個類陣列物件
let [a, b, c, d ,e] = 'hello';
console.log(a, b, c, d ,e); // h e l l o

// 類陣列物件lenth 屬性解構
let {length : num} = 'hello';
console.log(num); // 5
登入後複製

1-2 數值、布林值解構賦值

解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件

解構賦值的規則是，只要等號右邊的值不是物件或陣列，就先將其轉為物件

數值和布林值的包裝物件都有 toString 屬性，變數都能取到值

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
登入後複製

由於 undefined 和 null 無法轉為物件，所以對它們進行解構賦值，都會報錯

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
登入後複製

2. 陣列解構

2-1 基本用法

  • 陣列可以變數宣告並賦值時解構，也可以在變數先宣告後賦值時解構
// 陣列可以在變數宣告並賦值時解構
let arr = ['jsx', 'ljj', 'zdj', 'ddc']
let [one, two, three, four] = arr;
console.log(one, two, three, four);
// jsx ljj zdj ddc

// 也可以在變數先宣告後賦值解構
let name1, name2, name3, name4;
[name1, name2, name3, name4] = ['jsx', 'ljj', 'zdj', 'ddc'];
console.log(name1, name2, name3, name4);
// jsx ljj zdj ddc
登入後複製

2-2 完全解構

  • 只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值
let [one, two, three] = ['html', 'css', 'js'];
console.log(one, two, three); // html css js

let [str1, [str2], str3] = ['jsx', ['ljj'], 'ddc']
console.log(str1, str2, str3); // jsx ljj ddc
登入後複製
  • 陣列中不想要的元素也可以使用逗號 , 來忽略
let [, , name] = ['haha', 'xixi', 'jsx'];
console.log(name); // jsx

let [, xixi , ] = ['haha', 'xixi', 'jsx'];
console.log(xixi); // xixi
登入後複製
  • 當解構一個陣列時，可以使用擴充套件語法 ...，將陣列剩餘部分賦值給一個變數
let [num, ...numN] = [1, 2, 3, 4];
console.log(num); // 1
console.log(numN); //  [2, 3, 4]
登入後複製
  • 交換變數值，在一個解構表示式中可以交換兩個變數的值
let name1 = 'jsx';
let name2 = 'ljj';
let name3 = 'ddc';
[name1, name2, name3] = [name3, name1, name2];
console.log(name1, name2, name3); // ddc jsx ljj
登入後複製
  • 等號右側可以是任何可迭代物件（具備 Iterator 介面物件或陣列）
let [a, b, c] = 'jsx';
console.log(a, b, c); // j s x

let [one1, two1, three1] = new Set([1, 2, 3]);
console.log(one1, two1, three1); // 1 2 3
登入後複製

2-3 不完全解構

  • 當等號左邊的變數只匹配一部分的等號右邊的陣列，右邊的陣列多餘元素會被忽略
let [one, two] = [1, 2, 3];
console.log(one, two); // 1 2

let [a, [b], c] = [1, [2, 3], 4]
console.log(a, b, c); // 1 2 4
登入後複製
  • 當等號左邊的變數數量多於等號右邊的陣列元素，解構賦值左邊多餘的變數則為 undefined
let [str1, str2] = ['jsx'];
console.log(str1, str2); // jsx undefined
登入後複製
  • 擴充套件語法 ... 變數解構時匹配不到元素值時返回 [] 空陣列
let [str3, ...str4] = ['jsx'];
console.log(str3, str4); // jsx []
登入後複製
  • 如果等號的右邊不是陣列，也不是可迭代物件，那麼解構賦值將會報錯
let [foo1] = 1;
let [foo2] = false;
let [foo3] = NaN;
let [foo4] = undefined;
let [foo5] = null;
let [foo6] = {};
console.log(foo1, foo2, foo3, foo4, foo5, foo6); // is not iterable
登入後複製

2-4 預設值

  • 陣列解構時可以在表示式左邊的陣列中為任意物件預設預設值
let [name1 = 'jsx', name2 = 'ljj'] = [];
console.log(name1, name2); // jsx ljj
登入後複製
  • ES6 內部使用嚴格相等運運算元 === 判斷一個位置是否有值，當一個陣列缺少的值時，元素嚴格等於undefined，預設值才會生效
let [num = 123] = [undefined];
console.log(num); // 123

// null ！== undefined means
let [num1 = 123] = [null];
// null嚴格相等undefined所有預設值無效
console.log(num1); // null
登入後複製
  • 如果預設值是一個函數宣告，函數宣告是惰性求值的，只有在右邊沒有匹配值時才會執行
function func() {
    return 123
}
let [num2 = func()] = [undefined];
console.log(num2)
登入後複製
  • 預設值可以參照解構賦值的其他變數，但該變數必須已經宣告
let [str1 = 'jsx', str2 = str1] = [];
console.log(str1, str2); // jsx jsx
// str4未宣告
let [str3 = str4, str4 = 'ljj'] = []; // Uncaught ReferenceError
登入後複製

3. 物件解構

3-1 基本用法

  • 基本語法
let {var1, var2} = {var1:…, var2:…}
登入後複製
  • 物件解構賦值與先宣告後獨立進行解構賦值
let { name, age } = { name: 'jsx', age: 22 };
console.log(name, age); // jsx 22

// 先宣告後獨立解構賦值
let a, b;
// 賦值語句需要通過()包圍 因為{}是一個塊級而不是字面量
({a, b} = {a: 1, b: 2});
console.log(a, b); // 1 2
登入後複製

3-2 屬性變數同名

  • 物件的屬性沒有次序，左邊的變數必須與物件屬性同名，才能取到正確的值
let {name, age} = {name: 'jsx', age: 22};
console.log(name, age); // jsx 22
登入後複製
  • 當變數沒有對應的同名物件屬性時，會導致1取不到值返回 undefined
// 如果解構失敗，變數的值等於undefined
let {a, b} = {a: 'jsx', c: 'ljj'};
console.log(a, b); // jsx undefined
登入後複製

3-3 屬性變數不同名

  • 當變數名與物件屬性名不一致時，可以使用冒號 : 來設定，將物件屬性值賦值給 : 冒號後的變數
let {user: name, age: num} = {user: 'jsx', age: 22}
console.log(name, num); // jsx 22
登入後複製
  • foo:baz 此時冒號前面 foo 則是匹配模式匹配物件屬性，baz 則是匹配屬性的值
let {foo:baz} = {name: 'jsx'};
console.log(foo); // ncaught ReferenceErro
console.log(baz); // undefined
登入後複製
  • 先找到同名屬性，然後再賦給對應的變數，真正被賦值的是後者，而不是前者
let {name: str, age: num1} = {user: 'jsx', age: 22};
console.log(str, num1); // undefined 22
登入後複製
  • 陣列物件巢狀解構賦值
let obj = { lesson: ['html', { class: 'css' }] }
let { lesson: [x, { class: y }] } = obj;
// console.log(x, y); // html css

let { lesson } = obj;
console.log(lesson); //  ['html', {…}]

let obj1 = {};
let arr1 = [];

({ foo: obj1.prop, bar: arr1[0] } = { foo: 123, bar: true });

console.log(obj1) // {prop:123}
console.log(arr1) // [true]
登入後複製
  • 物件的解構賦值可以取到物件繼承的屬性
let obj2 = {};
let obj3 = { user: 'ljj' };
Object.setPrototypeOf(obj2, obj3);
let { user } = obj2;
console.log(user); // ljj
登入後複製
  • 可以使用擴充套件語法 ... 將物件剩餘的屬性與值賦值給一個變數
let options = {
    title: "Menu",
    height: 200,
    width: 100
};

// title = 名為 title 的屬性
// rest = 存有剩餘屬性的物件
let { title, ...rest } = options;

// 現在 title="Menu", rest={height: 200, width: 100}
console.log(rest.height);  // 200
console.log(rest.width);   // 100
登入後複製

3-4 預設值

  • 物件的解構也可以指定預設值，預設值生效的條件是物件的屬性值嚴格等於undefined
let {name = 'jsx'} = {};
console.log(name); // jsx
 
let {name1 = 'jsx'} = {name1: 'ljj'};
// 預設值失效 
console.log(name1); // ljj

// 當物件屬性值為undefined時有效
let {name2 = 'jsx'} = {name2: undefined};
console.log(name2); // jsx

let {x: y = 3} = {x: 5};
console.log(y); // 5

let {x1 = 3} = {x1: null};
console.log(x1); // null
登入後複製
  • 當指定的物件屬性不存在時，直接在變數後新增預設值
  • 當指定的物件屬性存在，而屬性值不存在或者為 undefined 時，先匹配屬性再在變數值後新增一個等號 = 和相應的預設值即可
let {user: xm = 'jsx'} = {};
console.log(xm); // jsx
登入後複製

4. 巢狀解構

如果一個物件或陣列巢狀了其他的物件和陣列，我們可以在等號左側使用更復雜的模式（pattern）來提取更深層的資料

// 陣列巢狀
let [name, [name1, [name2]]] = ['jsx', ['ljj', ['ddc']]];
console.log(name, name1, name2); // jsx ljj ddc

// 物件解構
let obj = {
	title: '物件解構',
	info: {
		target: '物件',
		difficulty: {
			level: 1
		}
	}
}
let {
	title,
	info,
	info: {
		target,
		difficulty,
		difficulty: {
			level
		}
	}
} = obj;
console.log(title, info, target, difficulty, level);
// 物件解構
// {target: '物件', difficulty: {…}}
// 物件
// {level: 1}
// 1

// 物件陣列巢狀
let objArr = {
	message: '物件陣列巢狀',
	lesson: ['html', 'css', 'js'],
	news: {
		main: '新訊息'
	}
}
let {
	message,
	lesson,
	lesson: [item1, item2, item3],
	news,
	news: {
		main
	}
} = objArr;
console.log(message, lesson, item1, item2, item3, news, main)
// 物件陣列巢狀
//  ['html', 'css', 'js']
// html css js
// {main: '新訊息'}
// 新訊息
登入後複製

5. 函數引數解構

一個函數可以有很多引數，其中大部分的引數都是可選的

  • 把所有引數當作一個陣列來傳遞，然後函數馬上把這個陣列解構成多個變數
function arrFn([name, age]) {
    console.log(name, age)
}
arrFn(['jsx', 22]); // jsx 22
登入後複製
  • 把所有引數當作一個物件來傳遞，然後函數馬上把這個物件解構成多個變數
let obj = {
	title: "My menu",
	items: ["Item1", "Item2"]
}

function objFn({
	title,
	items: [item1, item2]
}) {
	console.log(title); // My menu
	console.log(item1, item2); // Item1 Item2
}
objFn(obj);
登入後複製
  • 可以使用帶有巢狀物件和冒號對映的更加複雜的解構
// 語法
function({
  incomingProperty: varName = defaultValue
  ...
})

let obj1 = {
	message: '巢狀帶冒號',
	info: {
		name: 'jsx',
		lesson: ['html', 'css'],
		grilfriend: {
			xm: 'ljj'
		}
	}
}

function complexFn({
	message,
	info: {
		name,
		lesson: [list1, list2],
		grilfriend: {
			xm
		}
	}
}) {
	console.log(message); // 巢狀帶冒號
	console.log(list1, list2); // html css
	console.log(xm); // ljj
}
complexFn(obj1);
登入後複製
  • 可以通過指定空物件 {} 為整個引數物件設定預設值
function nullFn({
	info = 'jsx',
	width = 100,
	height = 200
} = {}) {
	console.log(info); // jsx
	console.log(width); // 100
	console.log(height); // 200
}
nullFn();
登入後複製

6. 圓括號問題

不可以使用圓括號的情況：

  • 變數宣告語句，不得使用圓括號

  • 函數引數也屬於變數宣告，因此不能帶有圓括號

  • 賦值語句的模式，將整個模式放在圓括號之中，導致報錯

// 宣告語句時不能使用圓括號包裹變數
let [(num)] = [1];
console.log(a); // Uncaught SyntaxError

let {(name: str)} = {name: 'jsx'};
console.log(str); // Uncaught SyntaxError

// 函數引數內也不可以
function fn([(a)]) {
     console.log(a);
}
fn(1);  

// 賦值語句內不可使用圓括號包裹
let a, b;
([a, b]) = [1, 2];
console.log(a, b) // Uncaught SyntaxError
登入後複製

可以使用圓括號的情況：

  • 賦值語句的非模式部分，可以使用圓括號
let num;
[(num)] = [123];
console.log(num); // 123

let str;
({name: str} = {name: 'jsx'});
console.log(str); // jsx
登入後複製

7. 解構賦值使用場景

  • 交換變數的值
let name1 = 'jsx';
let name2 = 'ljj';
[name1, name2] = [name2, name1];
console.log(name1, name2); // ljj, jsx
登入後複製
  • 從函數返回多個值
function returnFn() {
	return {
		name: 'jsx',
		age: 22
	}
}
let {
	name,
	age
} = returnFn();
console.log(name, age); // jsx 22
登入後複製
  • 函數引數的定義
 function argumentFn([list1, list2]) {
 	console.log(list1); // jsx
 	console.log(list2); // ljj
 }
 argumentFn(['jsx', 'ljj'])

 function argumentFn1({obj}) {
 	console.log(obj); // jsx
 }
 argumentFn1({obj: 'jsx'})
登入後複製
  • 提取 JSON 資料
let jsonData = {
	id: 42,
	status: "OK",
	data: [867, 5309]
};
let {
	id,
	status,
	data: number
} = jsonData;
console.log(id, status, number); // 42 'OK' (2) [867, 5309]
登入後複製
  • 函數引數的預設值
function func({ title = '預設值' } = {}) {
    console.log(title)
}
func(); // 預設值
登入後複製
  • 遍歷 Map 結構
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
	console.log(key + " is " + value);
	// first is hello
	// second is world
}
登入後複製
  • 與 .entries() 方法進行迴圈操作
let user = {
	name: "John",
	age: 30
};
for (let [key, value] of Object.entries(user)) {
	console.log(`${key}: ${value}`);
	// name: John
	// age: 30
}
登入後複製
  • 輸入模組的指定方法
<script type="module">
    import {sayHi, sayHello} from './index.js';
    sayHi(); // say hi
    sayHello(); // say hello
</script>
登入後複製
// index.js
export function sayHi() {
    console.log('say hi')
}

export function sayHello() {
    console.log('say hello')
}
登入後複製

【相關推薦：、】

以上就是es6解構支援字串嗎的詳細內容，更多請關注TW511.COM其它相關文章！