2022-06-26 前端vue面试题1

# v-if和v-show的区别:

v-if是操作DOM元素,v-show是不操作DOM元素,控制css中样式的显示和隐藏。

v-if的切换消耗大,v-show的初始化消耗大。

v-for为什么不能和v-if同时使用:

v-for的优先级比v-if的优先级高,如果在同一元素上,渲染时,消耗性能,先循环再判断,

如果要避免的话,先在外层套一个template,进行v-if判断,在内部用v-for

如果条件在循环内的话,可用计算属性compted提前过滤出不逊要显示的项目。

# v-for中的key有什么用:

用来更高效的对比虚拟DOM的节点是否相同。

提高渲染效率,如果一个虚拟DOM元素的节点发生变化,不用重新渲染所有DOM,就渲染改变的

DOM元素。

#watch和compated的区别:

watch是对数据data的监听,compated是对数据的计算,都是根据数据的变化来显示,

一般compated能做到的,watch也可以做到,compated有缓存

watch可以监听异步操作,高消耗,watch有deep,和immedate两种监听方式。

#map和forEach的区别:

map返回一个新数组,支持return,forEach不返回新数组,不支持return。

forEach举例:

var array = [10,34,57,43,76]; 

var res = array.forEach(function (item,index,input) { 

      input[index] = item*10; 

}) 

console.log(res);//--> undefined; 

console.log(array);//--> 通过数组索引改变了原数组;

[100,340,570,430,760]

map举例:

var array = [10,34,57,43,76]; 

var res = array.map(function (item,index,input) { 

      return item*10; 

}) 

console.log(res);

console.log(array);不变

each举例:不支持return

$.each(arr,function(index,value){

  xxxx

})

$.each( ["a","b","c"], function(i, v){ 

    alert( i + ": " + v ); 

}); 

#module语法:import和export:

#promise对象aynsc和awiti

promise是一个对象,可以用来传递异步任务的消息。我们知道异步任务的执行时间和执行结果是无法预测的,但是在实际项目中我们想要在异步任务执行之前,就根据不同的执行结果做出相应的处理。所以这时候就需要Promise这个用于获取异步任务消息的对象。

使用场景:

处理异步任务。因为JS是单线程的,使用Promise可以将异步任务以同步的方式展现出来,避免了层层的回调函数。

Promise对象特点:

Promise对象三种状态:

Pending(进行中)、resolved(已完成)、Reject(已失败)。

只有异步任务的结果能唯一确定promise对象的状态。

并且,一旦状态改变了之后,就固定了,任何的操作都无法改变当前状态。

promise的构造函数接受一个函数作为参数。函数的两个参数分别是函数resolve和函数reject。

如果异步任务成功就用resolve方法将promise的状态从pending改为resolved,如果异步任务失败,就用reject改变Promise的状态,从pending改为rejected。

newPromise(resolve,reject)=>{resolve();reject();}

// 一个Promise实例constp=newPromise((resolve,reject)=>{// do somethingif(success){resolve(results)}else{reject(err);}}).then((results)=>{console.log(results);}).catch((err)=>{console.log(err);})

上图是一个Promise实例。P是生成的Promise实例,一般字promise构造函数的内部会包裹一个异步函数。当实例生成之后,可以用then方法分别指定异步函数成功或者失败的时候的回调函数。results就是异步任务成功时候的返回的结果,一般then的回调函数包括两个,第一个是resolve时候的回调函数,第二个是reject时候的回调函数,第二个参数可以省略。

Promise的方法:

p.then((results)={},(err)=>{});

注意Promise新建之后会立刻执行,而then方法会在当前脚本所有同步任务执行完之后才会开始执行。

<script>window.onload = ()=>{            // 创建3个异步任务            const pro1 = ()=>{                return new Promise((reject, resolve)=>{                    setTimeout(()=>{                        console.log('执行异步任务1');                        resolve('异步任务1执行成功');                    }, 2000);                    });            }</script>

我来仔细剥离一下这个上面的pro1;

最外层 const pro1 = ()=>{} 可以看出pro1是一个函数。

然后pro1这个函数的返回值是一个Promise对象。

这个promise对象是通过构造函数构造的,他的构造函数参数是一个函数,这个函数是:

(reject,resolve)=>{setTimeout(()=>{console.log('执行异步任务1');resolve('异步任务1执行成功');},2000);}*/// 一般这个函数内部都会包裹一个异步任务    }

promise.all

异步函数(async/await)

用async包裹一个函数,可以把这个函数变成一个异步函数。但是也只是让这个函数具有异步特性,执行上还是同步执行的。

let fun1 = async ()=>{}

async函数的返回值

是一个Promise对象

asyncfunctionfoo(){console.log(1);return3;// 等价于return Promise.resolve(3);}foo().then(console.log);console.log(2);// result: 1 2 3

await

使用await可以暂停异步函数代码的执行。  await只能在async中使用 。

await和async一起使用的时候,起作用的其实只有await,因为只有async的话,他的执行和普通函数没有什么区别

async()=>{// do aawaitP// do b}

以上代码的执行顺序是,进入异步函数之后执行do a 遇到await则暂停异步任务的执行,等待await右侧的p执行完毕之后,恢复异步任务的执行,执行do b。一般情况下这个P是一个Promise

asyncfunctionfoo(){console.log(2);console.log(awaitPromise.resolve(8));console.log(9);}asyncfunctionbar(){console.log(4);console.log(await6);console.log(7);}console.log(1);foo();console.log(3);bar();console.log(5);// result 1 2 3 4 5 6 7 8 9

8个生命周期

beforecreate ,created,beforemount mounted(真实的DOM挂在完成,数据完成素箱数据绑定,可以访问到Dom节点),beforeupdate(数据更新),update(Dom更新),beforedestory,destoryed

vue组件通信

父->子间通信props 子->父通信$emit

兄弟间通信Bus实现跨组件之间通信

vuex是一种状态管理系统

State--this.$store.state.xxx 取值

Getter--this.$store.getter.xxx 取值

Mutation--this.$store.commit("xxx") 赋值

Action--this.$store.dispatch("xxx") 赋值

Module


#set和map的数据结构:

、Set数据结构

1、ES6提供了新的数据类型Set。它类似于数组,但是成员的值都是唯一的,没有重复的值

2、Set的实例

Set本身是一个构造函数,用来生成Set数据结构,Set函数接受一个数组或者具有iterable接口的其他数据结构作为参数,用来初始化

const set = new Set([1,2,3,4,4])

console.log(set);//Set(4) { 1, 2, 3, 4 }

console.log([...set]);//[ 1, 2, 3, 4 ]

const s1 = new Set('hello')

console.log(s1);//Set(4) { 'h', 'e', 'l', 'o' }

console.log([...s1]);//[ 'h', 'e', 'l', 'o' ]

3、Set的用途

// 数组去重

console.log([...new Set([1,2,1,2,2,5,3,2])]);

//[1,2,5,3]

//数组去重的另一种方法

function dedupe(array) {

    return Array.from(new Set(array))

}

console.log(dedupe([1,1,2,2,3,3]));//[1,2,3]

// 字符串去重

console.log([...new Set('helloe')].join(''));

//'helo'

4、Set实例的属性

(1) size 返回实例的成员总数

let s = new Set([1,2,3,4,5])

console.log(s.size);//5

(2)constructor 返回构造函数

let s = new Set([1,2,3,4,5])

console.log(s.constructor);

//[Function: Set]相当于Set()

5、Set实例的操作方法

let s = new Set([1,2,3,4,5])

//1、add(value),添加某个值,返回实例本身

console.log(s.add('a'));//Set(6) { 1, 2, 3, 4, 5, 'a' }

//2、delete(value),删除某个值,返回布尔值,表示删除是否成功

console.log(s.delete(2));//true

//3、has(value),检测该值是否是实例的成员,返回布尔值

console.log(s.has(4));//true

//4、clear(),清空所有成员,没有返回值

s.clear()

console.log(s);//Set(0) {}

6、 Set实例的遍历方法

由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

let s = new Set([1,2,3,4,5])

//1、keys()    返回键名的遍历器

console.log(s.keys());//[Set Iterator] { 1, 2, 3, 4, 5 }

for(let i of s.keys()){

    console.log(i);//1 2 3 4 5

}

//2、values()      返回键值的遍历器

for(let i of s.values()){

    console.log(i);//1 2 3 4 5

}

//3、entries()    返回键值对的遍历器

for (const i of s.entries()) {

    console.log(i);//[1,1] [2,2] [3,3] [4,4] [5,5]

}

//4、forEach()    遍历Set实例,和数组用法一样

s.forEach((val,index,s)=>console.log(val+'---'+index+'---'+s))

1---1---[object Set]

2---2---[object Set]

3---3---[object Set]

4---4---[object Set]

5---5---[object Set]

二、Map数据结构

ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值都可以当作键。Object结构提供了“字符串—值的对应”,Map结构提供了“值—值的对应”

1、创建Map的实例

Map构造函数接受一个数组作为参数,这个数组的元素是一个一个表示键值对的数组

const map = new Map([['name','lisi'],['age',23]])

console.log(map);

//Map(2) { 'name' => 'lisi', 'age' => 23 }

2、Map结构实例的属性

const map = new Map([['name','lisi'],['age',23]])

//1、size    返回实例的成员总数

console.log(map.size);//2

//2、constructor  返回Map构造函数

console.log(map.constructor);//[Function: Map]相当于Map(、 Map结构实例的操作方法

const map = new Map([['name','lisi'],['age',23]])

//1、set(key,value)    给实例添加键值对,返回实例本身,如果键已经存在,对应的键值将被修改

console.log(map.set('height',70));

//Map(3) { 'name' => 'lisi', 'age' => 23, 'height' => 70 }

//2、get(key)  获取key对应的键值,如果找不到key,返回undedined

console.log(map.get('age'));//23

//3、has(key),检测某个键是否存在,返回布尔值

console.log(map.has('age'));//true

//4、delete(key)  删除某个键,返回布尔值

console.log(map.delete('age'));//true

//5、clear() 清除所有成员,没有返回值

map.clear()

console.log(map);

Map(0) {}

4、Map实例的遍历方法

const map = new Map([['name','lisi'],['age',23]])

// 1、keys()    返回键名的遍历器

for(let i of map.keys()){

    console.log(i);

    // name age

}

// 2、values()      返回键值的遍历器

for(let i of map.values()){

    console.log(i);

    // lisi 23

}

// 3、entries()    返回键值对的遍历器

for(let i of map.entries()){

    console.log(i);

    // [ 'name', 'lisi' ]  [ 'age', 23 ]

}

// 4、forEach()    遍历所有成员

map.forEach((value,index,map)=>console.log(value + '---' + index + '---' + map))

// lisi---name---[object Map]  23---age---[object Map]

js中的遍历:

for 循环

普通的for循环,也是最常用到的

for(let i = 0;i<arr.length;i++){

console.log(arr[i]);

}

for in

for in 循环 用于遍历对象的属性

如果用其来遍历数组 key值则为下标

let obj = {

    age: 18, name: "Joker", sayHello() {

        console.log("Hello")

    }

};

for (let key in obj) {

    console.log(`key:${key},value:${obj[key]}`);

}

for of

for of 语句循环遍历可迭代对象的值。such as:数组,字符串,节点列表…

for (let item of arr) {

console.log(item)

}

forEach

ES5数组自带的循环,主要是用来遍历数组,性能比for循环还弱

arr.forEach((item,index,arr)=>{

console.log(`key:${index},value:${item}`)

})

map

用法与forEach类同,但参数中的函数支持返回值

返回值是一个新的数组,其每项就是参数中的函数返回的值

arr.map((value, index, array) => {

return value === 123;

});

filter

用法与forEach类同,但参数中的函数支持返回值

返回值为一个新的数组,如果参数中的函数返回为真 则会将这一项push进新的数组当中,为假或没有返回,则不会

arr.filter((value, key) => {

return value === 123;//[]

return value.indexOf('o') !== -1;//['Joker', 'north']

})

includes

检测数组当中是不是存在某个元素

console.log(arr.includes('Joker'));//true

console.log(arr.includes('111'));//false

console.log(arr.includes('north'));//true

find

寻找第一个符合条件的元素

console.log(arr.find((value, key, arr) => {

    return value.indexOf('o') !== -1;

}));//Joker

findIndex

寻找第一个符合条件元素的索引

console.log(arr.findIndex((value, key, arr) => {

    return value.indexOf('o') !== -1;

}));//0

some

数组中是不是有值符合某个条件

所有值中有一个符合条件就不继续执行,返回true

console.log(arr.some((value, key, arr) => {

return value.indexOf('o') !== -1;

}));//true

every

数组中是不是所有值符合某个条件

所有值中有一个不符合条件就不继续执行,返回false

console.log(arr.every((value, key, arr) => {

return value.indexOf('o') !== -1;

}));//false

都是块级作用域,不支持变量提升,const一般是常量定义。

变量的解构赋值:

以前,为变量赋值,只能直接指定值。

let a = 1;

let b = 2;

let c = 3;

es6允许写法

let [ a, b, c ] = [ 1, 2, 3 ];

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1,[[2], 3]]

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo // 1

bar // 2

baz // 3

let [ , , third] = ["foo", "bar", "baz"];

third // "baz"

let [x, , y] = [1, 2, 3];

x // 1

y // 3

let [head, ...tail] = [1, 2, 3, 4];

head // 1

tail // [2, 3, 4]

let [x, y, ...z] = ['a'];

x // "a"

y // undefined

z // []

如果解构不成功,变量的值就等于undefined。

let [ foo ] = []

let [bar, foo] = [1];

另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

let [x, y] = [1, 2, 3];

x // 1

y // 2

let [a, [b], d] = [1, [2, 3], 4];

a // 1

b // 2

d // 4

如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。

// 报错

let [foo] = 1;

let [foo] = false;

let [foo] = NaN;

let [foo] = undefined;

let [foo] = null;

let [foo] = {};

上面的语句都会报错,因为等号右边的值,要么转为对象以后不具备 Iterator 接口(前五个表达式),要么本身就不具备 Iterator 接口(最后一个表达式)。

对于 Set 结构,也可以使用数组的解构赋值。

let [x, y, z] = new Set(['a', 'b', 'c']);

x // "a"

默认值

let [foo = true] = [];

foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'

let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

let [x = 1] = [undefined];

x // 1

let [x = 1] = [null];

x // null

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

function f() {

  console.log('aaa');

}

let [x = f()] = [1];

x = 1; 而 函数f 没有去执行

上面的代码中,因为X能取到值,所以函数f根本不会执行,上面的代码其实等价于下面的代码

let x;

if ([1][0] === undefined) {

  x = f();

} else {

  x = [1][0];

}

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

let [x = 1, y = x] = [];    // x=1; y=1

let [x = 1, y = x] = [2];    // x=2; y=2

let [x = 1, y = x] = [1, 2]; // x=1; y=2

let [x = y, y = 1] = [];    // ReferenceError: y is not defined

上面最后一个表达式之所以会报错,是因为x用y做默认值时,y还没有声明。

对象的建构赋值

解构不仅可以用于数组,还可以用于对象。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

foo // "aaa"

bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };

foo // "aaa"

bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };

baz // undefined

如果解构失败,变量的值等于undefined。

对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。

let {log, sin, cos, PI }  = Math;

const { log } = console;

log('hello')

上面代码的例一将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。例二将console.log赋值到log变量。

如果变量名与属性名不一致,必须写成下面这样。

let { foo: a } = { foo: 'aaa' }

a // "aaa"

let obj = { first: 'hello', last: 'world' };

let { first: f, last: l } = obj;

f // 'hello'

l // 'world'

这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

也就是说,对象的结构赋值的内部机制,是先找同名属性,然后再赋值给对应的变量,真正赋值的是后者,而不是前者

let {foo : baz } = { foo: 'aaa', bar: 'bbb'}

console.log(baz) // aaa

console.log(foo)  error: foo is not defined

上面的代码中 foo 是匹配的模式, baz 才是变量, 真正被赋值的是baz,而不是模式 foo

与数组一样,解构也可以用于嵌套解构的对象

let obj = {

  p: [

    'Hello',

    { y: 'World' }

  ]

};

let { p: [x, { y }] } = obj;

x // "Hello"

y // "World"

注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。

let obj = {

  p: [

    'Hello',

    { y: 'World' }

  ]

};

let { p: [x, { y }] } = obj;

x // "Hello"

y // "World"

注意 这里的p是模式,不是变量,因此不会被赋值,如果p也作为变量赋值,可以写成下面这样

let obj = {

p: [

'hello',

{ y: 'world' }

]

}

let { p, p: [ x, { y } ] } = obj;

x // hello

y //world

p // [ 'hello' , {y: 'wrold' } ]

下面一个例子

const node = {

  loc: {

    start: {

      line: 1,

      column: 5

    }

  }

};

let { loc, loc: { start }, loc: { start: { line }} } = node;

line // 1

loc  // Object {start: Object}

start // Object {line: 1, column: 5}

上面代码有三次解构赋值,分别是对loc、start、line三个属性的解构赋值。注意,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式,不是变量。

下面是嵌套赋值的例子

let obj = {};

let arr = [];

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

obj // {prop:123}

arr // [true]

如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

// 报错

let {foo: {bar}} = {baz: 'baz'};

上面代码中,等号左边对象的foo属性,对应一个子对象。该子对象的bar属性,解构时会报错。原因很简单,因为foo这时等于undefined,再取子属性就会报错。

注意,对象的解构赋值可以取到继承的属性

const obj1 = {};

const obj2 = { foo: 'bar' };

Object.setPrototypeOf(obj1, obj2);

const { foo } = obj1;

foo // "bar"

默认值

var {x = 3} = {};

x // 3

var {x, y = 5} = {x: 1};

x // 1

y // 5

var {x: y = 3} = {};

y // 3

var {x: y = 3} = {x: 5};

y // 5

var { message: msg = 'Something went wrong' } = {};

msg // "Something went wrong"

默认值生效的条件是,对象的属性值严格等于undefined。

var {x = 3} = {x: undefined};

x // 3

var {x = 3} = {x: null};

x // null

上面代码中,属性x等于null,因为null与undefined不严格相等,所以是个有效的赋值,导致默认值3不会生效。

注意点

(1)如果要将一个已经声明的变量用于解构赋值,必须非常小心。

// 错误的写法

let x;

{x} = {x: 1};

// SyntaxError: syntax error

上面的代码写法错误 因为javascript 引擎会将 {x} 理解成一个代码块,从而发生语法错误,只有不将大括号写在行首,避免js将其解释为代码块,才能解决这个问题

let x;

({x} = { x: 11})

上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。关于圆括号与解构赋值的关系,参见下文。

由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];

let {0 : first, [arr.length - 1] : last} = arr;

first // 1

last // 3

上面代码对数组进行对象解构。数组arr的0键对应的值是1,[arr.length - 1]就是2键,对应的值是3。方括号这种写法,属于“属性名表达式”(参见《对象的扩展》一章)。

字符串解构

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

let {length : len} = 'hello';

len // 5

函数参数结构

function add([x, y]){

  return x + y;

}

add([1, 2]); // 3

上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。

下面是另一个例子

[[1, 2], [3, 4]].map(([a, b]) => a + b);

// [ 3, 7 ]

函数参数的解构也可以使用默认值

function move({x = 0, y = 0} = {}) {

  return [x, y];

}

move({x: 3, y: 8}); // [3, 8]

move({x: 3}); // [3, 0]

move({}); // [0, 0]

move(); // [0, 0]

上面代码中,函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值

function move({x, y} = { x: 0, y: 0 }) {

  return [x, y];

}

move({x: 3, y: 8}); // [3, 8]

move({x: 3}); // [3, undefined]

move({}); // [undefined, undefined]

move(); // [0, 0]

上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);

// [ 1, 'yes', 3 ]

用途

交换变量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。

从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

// 返回一个数组

function example() {

  return [1, 2, 3];

}

let [a, b, c] = example();

// 返回一个对象

function example() {

  return {

    foo: 1,

    bar: 2

  };

}

let { foo, bar } = example();

函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值

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

f([1, 2, 3]);

// 参数是一组无次序的值

function f({x, y, z}) { ... }

f({z: 3, y: 2, x: 1});

提取 JSON 数据

解构赋值对提取 JSON 对象中的数据,尤其有用。

let jsonData = {

  id: 42,

  status: "OK",

  data: [867, 5309]

};

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

console.log(id, status, number);

// 42, "OK", [867, 5309]

函数参数的默认值

jQuery.ajax = function (url, {

  async = true,

  beforeSend = function () {},

  cache = true,

  complete = function () {},

  crossDomain = false,

  global = true,

  // ... more config

} = {}) {

  // ... do stuff

};

遍历 Map 结构

任何部署了 Iterator 接口的对象,都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。

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

如果只想获取键名,或者只想获取键值,可以写成下面这样。

// 获取键名

for (let [key] of map) {

  // ...

}

// 获取键值

for (let [,value] of map) {

  // ...

}

输入模块的指定方法

加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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

例子

  function move({x = 0, y = 1} = {}) {  // 默认赋值 x: 0, y: 1

    console.log([x, y])  //

  }

  move({ x:111 });  // [111, 1]

  move(); // [0, 1]

  move({}); // [0, 1]

function f({x, y} = {x: 0, y: 0}) { //

  console.log([x, y])

}

f();  // [0,0]

f({}); // [undefined, undefined]

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容