返回

拓展ES6之全局对象方法与数据类型新增特性

前端

ES6 全局对象的新增方法

Object.assign()

Object.assign() 方法用于将一个或多个源对象的可枚举属性复制到目标对象。

const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { d: 5, e: 6 };

Object.assign(target, source1, source2);

console.log(target); // { a: 1, b: 3, c: 4, d: 5, e: 6 }

Object.keys()

Object.keys() 方法返回一个数组,其中包含对象的键名。

const object = { a: 1, b: 2, c: 3 };

console.log(Object.keys(object)); // ['a', 'b', 'c']

Object.values()

Object.values() 方法返回一个数组,其中包含对象的值。

const object = { a: 1, b: 2, c: 3 };

console.log(Object.values(object)); // [1, 2, 3]

Object.entries()

Object.entries() 方法返回一个数组,其中包含对象键值对的数组。

const object = { a: 1, b: 2, c: 3 };

console.log(Object.entries(object)); // [['a', 1], ['b', 2], ['c', 3]]

ES6 数据类型的新增特性

Unicode 字符表示

ES6 允许使用 \u 开头的四位十六进制数据来表示一个 16 位的 Unicode 字符。

const unicodeCharacter = '\u0041';

console.log(unicodeCharacter); // 'A'

箭头函数

箭头函数是简写形式的函数表达式,使用 => 符号定义。

const add = (a, b) => a + b;

console.log(add(1, 2)); // 3

扩展运算符

扩展运算符 (...) 用于将数组或对象展开为一组单独的元素。

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

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

解构赋值

解构赋值允许将数组或对象的元素赋值给变量。

const numbers = [1, 2, 3];
const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

模版字符串

模版字符串允许使用 ${} 来嵌入变量或表达式。

const name = 'John Doe';
const age = 30;

const greeting = `Hello, ${name}! You are ${age} years old.`;

console.log(greeting); // Hello, John Doe! You are 30 years old.

Proxy

Proxy 对象允许您拦截和修改对另一个对象的访问。

const target = { a: 1, b: 2 };

const proxy = new Proxy(target, {
  get: (target, property) => {
    console.log(`Getting property ${property} from target`);
    return target[property];
  },
  set: (target, property, value) => {
    console.log(`Setting property ${property} to ${value} on target`);
    target[property] = value;
  }
});

proxy.a; // Getting property a from target
console.log(proxy.a); // 1

proxy.b = 3; // Setting property b to 3 on target
console.log(proxy.b); // 3