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

编程语言 2023-09-16 19:31:48 阅读次数: 0

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

简介

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

一、对象的解构

1.基本赋值

var o = {
    
    p: 42, q: true};
var {
    
    p, q} = o;
console.log(p); // 42
console.log(q); // true

2.无声明赋值

一个变量可以独立于其声明进行解构赋值。

var a, b;
({
    
    a, b} = {
    
    a: 1, b: 2});
console.log(a); // 1
console.log(b); // 2

注意：

  1. 赋值语句周围的圆括号 ( … ) 在使用对象字面量无声明解构赋值时是必须的。
    {a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 {a, b} 被认为是一个块而不是对象字面量。
  2. 你的 ( … ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行。
  3. 左右两边语句的变量名称需要一一对应

3.给新的变量名赋值

可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

var o = {
    
    p: 42, q: true};
var {
    
    p: foo, q: bar} = o;
 
console.log(foo); // 42 
console.log(bar); // true

注意：

  1. 可以不需要定义foo、bar变量

4.默认值

变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。

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

console.log(a); // 3
console.log(b); // 5

5.给新的变量命名并提供默认值

一个属性可以同时 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, ...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);//"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(/^[\s\uFEFF]+|[\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;
  styleName = camelCase(styleName);
  if (styleName === 'float') {
    
    
    styleName = 'cssFloat';
  }
  try {
    
    
    var computed = document.defaultView.getComputedStyle(element, '');
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    
    
    return element.style[styleName];
  }
};

/* istanbul ignore next */
export function setStyle(element, styleName, value) {
    
    
  if (!element || !styleName) return;

  if (typeof styleName === 'object') {
    
    
    for (var prop in styleName) {
    
    
      if (styleName.hasOwnProperty(prop)) {
    
    
        setStyle(element, prop, styleName[prop]);
      }
    }
  } else {
    
    
    styleName = camelCase(styleName);
    if (styleName === 'opacity' && ieVersion < 9) {
    
    
      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
    } else {
    
    
      element.style[styleName] = value;
    }
  }
};

// 引用dom.js中的getStyle
import {
    
    getStyle} from './dom.js'

参考文章：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://github.com/lukehoban/es6features#destructuring

猜你喜欢

转载自blog.csdn.net/qq_29510269/article/details/106564359
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022