ES6新特性篇之解构赋值(Destructuring)及在项目实际中的应用

一个属性可以同时 1)从一个对象解构,并分配给一个不同名称的变量 2)分配一个默认值,以防未解构的值是 undefined。

var {a:aa = 10, b:bb = 5} = {a: 3};

console.log(aa); // 3

console.log(bb); // 5

注意:

  1. 可以不需要定义aa、bb变量

[](()6.对象属性计算名和解构


计算属性名,如 object literals,可以被解构。

let key = “z”;

let { [key]: foo } = { z: “bar” };

console.log(foo); // “bar”

[](()二、数组的解构

======================================================================

[](()1.基本用法


var a, b, rest;

[a, b] = [10, 20];

console.log(a); // 10

console.log(b); // 20

[](()2.左右两边都是变量


右边也可以是函数的返回值

// 例一

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

[](()3.默认值


为了防止从数组中取出一个值为undefined的对象,可以在表达式左边的数组中为任意对象预设默认值。

var a, b;

[a=5, b=7] = [1];

console.log(a); // 1

console.log(b); // 7

[](()4.交换变量


在一个解构表达式中可以交换两个变量的值。没有解构赋值的情况下,交换两个变量需要一个临时变量(或者用低级语言中的XOR-swap技巧)。

var a = 1;

var b = 3;

[a, b] = [b, a];

console.log(a); // 3

console.log(b); // 1

[](()5.忽略某些返回值


你也可以忽略你不感兴趣的返回值:

function f() {

return [1, 2, 3];

}

var [a, , b] = f();

console.log(a); // 1

console.log(b); // 3

你也可以忽略全部返回值:

[,] = f();

[](()6.将剩余数组赋值给一个变量


当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。

var [a, … 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 b] = [1, 2, 3];

console.log(a); // 1

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

注意:

  1. 如果剩余元素右侧有逗号,会抛出 SyntaxError,因为剩余元素必须是数组的最后一个元素。

var [a, …b,] = [1, 2, 3];

// SyntaxError: rest element may not have a trailing comma

[](()三、函数中的解构

=======================================================================

[](()1.基本用法


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

[](()2.在es6箭头函数中的用法


在箭头函数中访问不了arguments,那入参在不确定的情况下怎么样动态获取呢?箭头函数的特性[☞戳这里](()

var test = (…arg) => {

console.log(arg)

}

test(1,2,3) // [1, 2, 3]

[](()四、字符串中的解构

========================================================================

[](()1.获取字符单个字符


var [a, b, c] = ‘abcde’;

console.log(a);//“a”

console.log(b);//“b”

console.log©;//“c”

[](()2.获取字符串长度


const { length } = ‘abcde’;

console.log(length);// 5

[](()五、vue项目实战中应用

===========================================================================

[](()1.对象合并属性及提取变量


// vue监听不到object属性变化时

let tmp = {a:“change”}

this.obj = Object.assign({},this.obj, …tmp)

// 提取接口返回result的值

let result = {a: ‘input’, b: ‘button’}

let {a, b} = result

[](()2.在实际项目中import的用法


// 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;


  1. \s\uFEFF ↩︎

你可能感兴趣的:(Web前端,经验分享,前端,前端框架)