ES6(二)解构赋值+字符串的扩展

详解一下之前的解构赋值

  ①解构赋值中的“...”

let [a,...b]= [1];     b   // []     ...代表变量b去匹配剩余的所有元素返回一个数组 ,匹配不到时返回[]  //注意:"...b"只能放在最后

  ②解构赋值的等号两边的数据类型必须一样

即:

let [] = [] 或者 let {} = {}

但是:Set结构也允许使用数组进行解构赋值 

let [a,b]= new Set([1,2,3,4])
a  //1
b  //2

技巧: 如果你不确定该结构是否能够解构赋值,判断其是否有Iterator接口就可以啦!判断方法如下:

function* fibs() {
  var x= 0;
  var y= 1;
  while (true) {
    yield x;
    [x, y] = [y, x+ y];
  }
}

var [a, b, c, d, e, f] = fibs();
f// 5
//   fibs是一个Generator函数,原生具有Iterator接口。解构赋值会依次从这个接口获取值。

  ③解构赋值不仅适用于 let / const也适用于var指令

  ④解构赋值允许添加默认值

let [a = 4] = []
a //4

  (解构赋值的匹配模式是===)注:如果解构赋值不严格等于 undefined 的话默认值不会生效

let [a = 4]=[undefined]
a //4
let [b = 4]=[null]
b//null

  ⑤我自己犯过的错

let [x = y, y = 1] = [];     //报错  因为x=y时y还没有被声明    不会被提升!!! 牢记var [a = b, b = 1] = [];      // a===undefined  b === 1

对象的解构赋值

  ①对象不像数组那样有顺序所以,对象的解构赋值是按照‘键’的方式匹配的

var { foo: baz } = { foo: ‘aaa‘, bar: ‘bbb‘ };
baz //  ‘aaa‘      foo是匹配模式  baz是变量

  ②对象和数组的嵌套    如果看明白一下例子也就差不多了

var obj = {
  p: [
    ‘Hello‘,
    { y: ‘World‘ }
  ]
};

var { p: [x, { y }] } = obj;      //p是匹配模式  [x , { y }]是值   然后再看数组中的每一项
x // "Hello" y // "World" 

  ③不像数组那样不存在时返回undefined  对象是会报错的

字符串的解构赋值

const [a, b, c, d, e] = ‘hello‘;
a  // h
b  // e
c  // l
let {length : len} = ‘hello‘;
len // 5      匹配的是字符串的length属性

干货:用途

(1)交换变量的值 

[a,b]=[b,a]

(2)从函数返回多个值

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

(3)函数参数的定义

function f([x, y, z]) { ... }
f([1, 2, 3]);

(4)提取JSON数据

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

(5)函数参数的默认值

function f([x = 1, y = 2 , z]) { ... }

(6)遍历Map结构

var 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
// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}
 

(7)输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

  

时间: 2024-10-30 01:31:39

ES6(二)解构赋值+字符串的扩展的相关文章

Es6 新增解构赋值

1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于模式匹配:只要等号两边的模式相同,左边的变

ES6 之 解构赋值

本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. ES6 以前,为变量赋值,只能直接指定值. let a = 1 let b = 2 let c = 3 ES6 允许写成下面的样式. let [a, b, c] = [1, 2, 3] 该代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 相关示例 本质上来说,这种写法属于“模式匹配”.即

ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会,那大量的函数调用会白白生成很多有待 GC 释放的临时对象,那么就意味着在函数参数少时,还是需要尽量避免采用解构传参,而使用传统的: function f(a,b){} f(1,2); 上面的描述其实同时提了好几个问题: 会不会产生一个对象? 参数少时,是否需要尽量避免采用解构传参? 对性能(CPU

复习es6-解构赋值+字符串的扩展

1. 数组的解构赋值 从数组中获得变量的值,给对应的声明变量赋值,,有次序和对应位置赋值 解构赋值的时候右边必须可以遍历 解构赋值可以使用默认值 惰性求值,当赋值时候为undefined时候,默认是个函数就会执行函数 2.对象解构赋值 与数组不同的是,对象没有按次序排序 对象按照属性名赋值 3.字符串扩展 字符串使用unicode表示法 es6给字符串加上了遍历器借口,可用( for  of ) 遍历 字符串模板 1.用反引号(')设置字符串 2.${param} 来显示变量 3.<%   %>

ES6-个人学习笔记二--解构赋值

第二期,解构赋值如果能够熟练应用确实是个十分方便的功能,但是过分的依赖和嵌套只会让代码理解和维护起来十分困难,是个体现高逼格的表达式呢~ 1,解构赋值的基础 //定义:es6运行按照一定模式,从数组或对象中提取值,并对变量进行赋值,如 var [a,b,c] = [1,2,3]; //一些其他方式 let [ , , a1] = [1,2,3]; //a1:3 let [a2,...b2] = [1,2,3,4]; //a2:1,b2:[2,3,4] let [a3,b3,...c3] = [1

es6学习 -- 解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子. 我认为

es6变量解构赋值的用途

这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x,y]=[1,2]; [x,y]=[y,x]; console.log(x);//输出2 console.log(y);//输出1 2.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里面返回.有了解构赋值,取出这些值那是非常的方便,最关键是易读 function

ES6 对象解构赋值(浅拷贝 VS 深拷贝)

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. 拷贝对象 let aa = { age: 18, name: 'aaa' } let bb = {...aa}; console.log(bb); // {age: 18, name: "aaa"} 合并对象 扩展运算符(...)可以用于合并两个对象 let aa = { age: 18, name: 'aaa' } let bb = { sex: '男' } let cc = {...aa, ...bb

es6(es2015)解构赋值

?es6新增结构赋值,结构赋值分为两种 数组解构赋值,对象解构赋值. 数组解构赋值: 分别按顺序给数组中的每一项赋值.  如上所示如果c未给赋值,c为undefind. a==1,b==2 那么3并没有被保存到变量中,这时如果想要将剩余值进行保存,可以只用“...” ...c 这样的形式,可以将剩余值以数组的形式将其保存到变量c中. 另外...可用于复制数组 实际项目中有时候我们需要将函数中的实际参数放到一个数组中, es5:Array.prototype.slice.call(argument