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

本文实例讲述了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 11
let [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 12
let [m=12, n] = [null, 10];
console.log(m, n); // null 10

字符串解构的处理

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

(0)

相关推荐

  • 深入理解ES6之数据解构的用法

    一 对象解构 对象解构语法在赋值语句的左侧使用了对象字面量 let node = { type: true, name: false } //既声明又赋值 let { type, name } = node; //或者先声明再赋值 let type, name ({type,name} = node); console.log(type);//true console.log(name);//false type与name标识符既声明了本地变量,也读取了对象的相应属性值. 解构赋值表达式的值为表

  • ES6解构赋值实例详解

    本文实例讲述了ES6解构赋值.分享给大家供大家参考,具体如下: 基本用法 let [x, y, ...z] = ['a'] //"a", undefined, [] 1.等号右边如果不是数组,将会报错(不是可遍历结构) 2.解构赋值 var, let, const命令声明均适用 3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合 let [x, y, z] = new Set(["a", "b

  • 深入浅出讲解ES6的解构

    什么是解构? 解构与构造数据截然相反. 例如,它不是构造一个新的对象或数组,而是逐个拆分现有的对象或数组,来提取你所需要的数据. ES6使用了一种新模式来匹配你想要提取的数值, 解构赋值就是采用了这种模式. 该模式会映射出你正在解构的数据结构,只有那些与该模式相匹配的数据,才会被提取出来. 被解构的数据项位于赋值运算符 = 的右侧,可以是任何数组和对象的组合,允许随意嵌套.用于给这些数据赋值的变量个数不限. 数组解构 数组解构 使用一个数组作为一个数据项,你可以根据 数组模式 (用于从数组中匹配

  • es6学习之解构时应该注意的点

    前言 本文主要给大家介绍了关于在es6解构时需要注意的一些事项,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如果要将一个已经声明的变量用于解构赋值,必须非常小心. // 错误的写法 let x; {x} = {x: 1}; // SyntaxError: syntax error 上面代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误.只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题. //

  • ES6 对象的新功能与解构赋值介绍

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始值可以简写,并可以使用可计算的属性名称.对象方法的定义消除了冒号和 function 关键字,示例如下: // Demo1 var value = "name", age = 18 var person = { age, // age: age ['my' + value]: 'Jenny

  • ES6新特性之解构、参数、模块和记号用法示例

    本文实例讲述了ES6新特性之解构.参数.模块和记号用法.分享给大家供大家参考,具体如下: 一.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值.一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2; [x,y]=[y,x];x=2 y=1 解构也可以用于对

  • ES6学习之变量的解构赋值

    变量的解构赋值 ES6中允许按照一定模式,从数组和对象中提取,对变量进行赋值. 数组的解构赋值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代码标示可以从数组中提取值,按照位置的对应关系对变量进行赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [foo,[[bar],baz]] = [1,[[2],3]]; foo //1; bar //2; baz //3; let [,

  • 基于ES6作用域和解构赋值详解

    ES6 强制开启严格模式 作用域 •var 声明局部变量,for/if花括号中定义的变量在花括号外也可访问 •let 声明的变量为块作用域,变量不可重复定义 •const 声明常量,块作用域,声明时必须赋值,不可修改 // const声明的k指向一个对象,k本身不可变,但对象可变 function test() { const k={ a:1 } k.b=3; console.log(k); } test()解构赋值 { let a, b, 3, rest; [a, b, c=3]=[1, 2]

  • ES6知识点整理之函数数组参数的默认值及其解构应用示例

    本文实例讲述了ES6知识点整理之函数数组参数的默认值及其解构应用.分享给大家供大家参考,具体如下: 在ES6中, 函数的参数也可以使用解构赋值和默认值的设置,下面我们来看下 在ES6之前设置函数默认值的写法 function test(x,y) { x = x || 12; y = y || 22; console.log(x,y); } test(); // 12 22 test(1,2) // 1 2 在ES6中给函数参数赋默认值 function test(x=12, y=22) { co

  • ES6解构赋值的功能与用途实例分析

    本文实例讲述了ES6解构赋值的功能与用途.分享给大家供大家参考,具体如下: (1)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.有了解构赋值,取出这些值就非常方便. // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返

  • 解析JavaScript的ES6版本中的解构赋值

    什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

随机推荐