注意:
- 赋值语句周围的圆括号 ( … ) 在使用对象字面量无声明解构赋值时是必须的。
{a, b} = {a: 1, b: 2} 不是有效的独立语法,因为左边的 {a, b} 被认为是一个块而不是对象字面量。
-
你的 ( … ) 表达式之前需要有一个分号,否则它可能会被当成上一行中的函数执行。
-
左右两边语句的变量名称需要一一对应
可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
注意:
- 可以不需要定义foo、bar变量
变量可以先赋予默认值。当要提取的对象没有对应的属性,变量就被赋予默认值。
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
一个属性可以同时 1)从一个对象解构,并分配给一个不同名称的变量 2)分配一个默认值,以防未解构的值是 undefined。
var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5
注意:
- 可以不需要定义aa、bb变量
计算属性名,如 object literals,可以被解构。
let key = “z”;
let { [key]: foo } = { z: “bar” };
console.log(foo); // “bar”
======================================================================
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
右边也可以是函数的返回值
// 例一
var a, b;
var c = [1, 2];
[a, b] = c;
console.log(a); // 1
console.log(b); // 2
// 例二
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
为了防止从数组中取出一个值为undefined的对象,可以在表达式左边的数组中为任意对象预设默认值。
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
在一个解构表达式中可以交换两个变量的值。没有解构赋值的情况下,交换两个变量需要一个临时变量(或者用低级语言中的XOR-swap技巧)。
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
你也可以忽略你不感兴趣的返回值:
function f() {
return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
你也可以忽略全部返回值:
[,] = f();
当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。
var [a, …b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
注意:
- 如果剩余元素右侧有逗号,会抛出 SyntaxError,因为剩余元素必须是数组的最后一个元素。
var [a, …b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma
=======================================================================
function test({size = ‘big’, cords = { x: 0, y: 0 }, radius = 25} = {})
{
console.log(size, cords, radius);
}
test({
cords: { x: 18, y: 30 },
radius: 30
}); // big {x: 18, y: 30} 30
在箭头函数中访问不了arguments,那入参在不确定的情况下怎么样动态获取呢?箭头函数的特性☞戳这里
var test = (…arg) => {
console.log(arg)
}
test(1,2,3) // [1, 2, 3]
========================================================================
var [a, b, c] = ‘abcde’;
console.log(a);//“a”
console.log(b);//“b”
console.log©;//“c”
const { length } = ‘abcde’;
console.log(length);// 5
===========================================================================
// vue监听不到object属性变化时
let tmp = {a:“change”}
this.obj = Object.assign({},this.obj, …tmp)
// 提取接口返回result的值
let result = {a: ‘input’, b: ‘button’}
let {a, b} = result
// dom.js
/* istanbul ignore next */
/eslint-disable/
import Vue from ‘vue’;
const isServer = Vue.prototype.$isServer;
const SPECIAL_CHARS_REGEXP = /([:-_]+(.))/g;
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const ieVersion = isServer ? 0 : Number(document.documentMode);
/* istanbul ignore next */
const trim = function(string) {
return (string || ‘’).replace(/1+|[\s\uFEFF]+$/g, ‘’);
};
/* istanbul ignore next */
const camelCase = function(name) {
return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
}).replace(MOZ_HACK_REGEXP, ‘Moz$1’);
};
/* istanbul ignore next */
export const on = (function() {
if (!isServer && document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent(‘on’ + event, handler);
}
};
}
})();
/* istanbul ignore next */
export const off = (function() {
if (!isServer && document.removeEventListener) {
return function(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event) {
element.detachEvent(‘on’ + event, handler);
}
};
}
})();
/* istanbul ignore next */
export const once = function(el, event, fn) {
var listener = function() {
if (fn) {
fn.apply(this, arguments);
}
off(el, event, listener);
};
on(el, event, listener);
};
/* istanbul ignore next */
export function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(’ ') !== -1) throw new Error(‘className should not contain space.’);
if (el.classList) {
return el.classList.contains(cls);
} else {
return (’ ’ + el.className + ’ ‘).indexOf(’ ’ + cls + ’ ') > -1;
}
};
/* istanbul ignore next */
export function addClass(el, cls) {
if (!el) return;
var curClass = el.className;
var classes = (cls || ‘’).split(’ ');
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.add(clsName);
} else if (!hasClass(el, clsName)) {
curClass += ’ ’ + clsName;
}
}
if (!el.classList) {
el.className = curClass;
}
};
/* istanbul ignore next */
export function removeClass(el, cls) {
if (!el || !cls) return;
var classes = cls.split(’ ');
var curClass = ’ ’ + el.className + ’ ';
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else if (hasClass(el, clsName)) {
curClass = curClass.replace(’ ’ + clsName + ’ ', ’ ');
}
}
if (!el.classList) {
el.className = trim(curClass);
}
};
/* istanbul ignore next */
export const getStyle = ieVersion < 9 ? function(element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === ‘float’) {
styleName = ‘styleFloat’;
}
try {
switch (styleName) {
case ‘opacity’:
try {
return element.filters.item(‘alpha’).opacity / 100;
} catch (e) {
return 1.0;
}
default:
return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
}
} catch (e) {
return element.style[styleName];
}
} : function(element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
\s\uFEFF ↩︎