首页 > 开发 > JS > 正文

ES6知识点整理之数组解构和字符串解构的应用示例

2024-05-06 16:50:04
字体:
来源:转载
供稿:网友

本文实例讲述了ES6知识点整理之数组解构和字符串解构的应用。分享给大家供大家参考,具体如下:

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 而数组的解构赋值是从数组中提取值,按照对应位置,对变量赋值。

ES6之前的赋值操作

var arr = [1,2,3];var a = arr[0];var b = arr[1];var c = arr[2];console.log(a,b,c); // 1 2 3

对一维数组的解构赋值的应用

var arr = [1,2,3];var [a,b,c] = arr;console.log(a,b,c); // 1 2 3

对多维数组的解构赋值的应用

let arr = [22, [5,8], 11];let [a,[b,c],d] = arr;console.log(a,b,c,d); // 22 5 8 11

解构赋值用于变量的交换举例

let x = 11;let y = 22;[y,x] = [x,y];console.log(x,y); // 22 11

解构赋值中不完全的解析示例

let arr = [22, [5,8], 11];let [a,[b],c] = arr;console.log(a, b, c); // 22 5 11let [m,[,n],o] = arr;console.log(m, n, o); // 22 8 11

不能被数组解析的值

let [m] = "";console.log(m); // undefined;let [x,y] = NaN; // NaN is not iterable. 不能被数组解析的值:NaN, undefined, null, {}

实现了iterator接口的类型都可以被解析赋值

let [x,y] = new Set([22, 33]);console.log(x,y); // 22 33

自己创造一个实现iterator接口的对象进行解构赋值

class Group{ constructor() { } next() {  return {value:'Joh', done: false}; } [Symbol.iterator]() {  return this; }}let group = new Group();let [x,y,z,m,n] = group;console.log(x,y,z,m,n); // Joh Joh Joh Joh Joh 备注:这里如果类中的next的done为true,那么全为undefined

… 运算符 转换成数组的解构举例

var [x,w, ...y] = [1,2,3,4,5,6];console.log(x,w, y); // 1 2 [3,4,5,6]

解构数组的默认值

如果数组中的不是undefined,都会被成功解构, 不会被默认值替代

let [x=15, y] = [undefined, 12];console.log(x,y); // 15 12let [m=12, n] = [null, 10];console.log(m, n); // null 10

字符串解构的处理

var [a,b,c] = 'hello';console.log(a,b,c); // h e l

 

希望本文所述对大家JavaScript程序设计有所帮助。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表