《JS原理、方法与实践》- ES6原有对象新增属性

简介: 《JS原理、方法与实践》- ES6原有对象新增属性

ES5.1中一共有11个内置对象(不包含global),分别时Function, JSON,Error,Date,Boolean,Object,String,Number,Math,RegExp,Array。在ES5.1中前5个没有发生变化,后6个发生了变化。

#### Object

Object新增了4个方法属性: assign,getOwnPropertySymbls,is和setPrototypeOf。

###### 1.assign

assign可以将一个对象中的属性复制到另一个对象中。assign方法的语法如下:

```

Object.assign(target, ...,sources);

```

代码示例:

```

let p1 = {

name: 'zzh'

};

let p2 = {

age: 18

};

let p3 = {

sex: 'male'

};

Object.assign(p1, p2, p3);

console.log(p1); // { name: 'zzh', age: 18, sex: 'male' }

console.log(p2); // { age: 18 }

console.log(p3); // { sex: 'male' }

```

###### 2.getOwnPropertySymbols

获取一个对象中所有Symbol类型的属性名。

代码示例:

```

function Person (name, age) {

let _name = Symbol("name");

let _age = Symbol("age");

 

this[_name] = name;

this[_age] = age;

}

const p = new Person('zzh', 18);

const symbols = Object.getOwnPropertySymbols(p);

console.log(symbols); // [ Symbol(name), Symbol(age) ]

console.log(p[symbols[0]]); // zzh

```

3. is

判断两个值是否相同,对象先判断内存地址,直接量先判断类型,不同则返回false, 再对比值。

代码示例:

```

function Person (name, age) {

let _name = Symbol("name");

let _age = Symbol("age");

 

this[_name] = name;

this[_age] = age;

};

function Student (name, age) {

let _name = Symbol("name");

let _age = Symbol("age");

 

this[_name] = name;

this[_age] = age;

}

const p = new Person('zzh', 18);

const p1 = new Person('zzh', 18);

const p2 =  p;

const s = new Student('zzh', 18);

console.log(Object.is(p, p1)); // false

console.log(Object.is(p, p2)); // true

console.log(Object.is(p, s)); // false

```

###### 4.setPrototypeOf

用来修改一个对象的[[prototype]]属性。

代码示例(将Arrary.toString方法替换成Object.toString):

```

const arr = [1,2,3];

console.log(arr.toString()); // 1,2,3

Object.setPrototypeOf(arr, Object.prototype);

console.log(arr.toString()); // [object Array]

```

#### String

String对象自身新增两个方法属性:fromCodePoint和raw。String.proprtype新增6个方法属性: codePointAt, startsWith, endsWith, includes, normalize和repeat。

###### 1. fromCodePoint

## 此处实践与书本内如不符,暂记!

与fromCharCode类似,不同之处在于fromCharCode方法只能接受16位的Unicode值,而fromCodePoint可以接受扩展后的21位的Unicode.

代码示例:

```

console.log(String.fromCharCode(0x4e2d,0x56fd)); // 中国

console.log(String.fromCodePoint(0x4e2d, 0x56fd)); // 中国

console.log(String.fromCharCode(0x20BDC)); // ௜

console.log(String.fromCodePoint(0x20BDC)); // 𠯜

```

###### 2. raw

raw方法有两种用法,一种用在字符串模板时,另一种用在数组转换位字符串时。

代码示例:

```

// 不适用raw

let str = `a\tb\tc`;

console.log(str); // a b c

str = String.raw`a\tb\c`;

console.log(str); // a\tb\c

// 使用raw连接数组

str = String.raw({raw:[1,2,3]}, '、 ', "\\ ");

console.log(str); // 1、 2\ 3

// 使用raw连接字符串

str = String.raw({raw:'我爱中国'}, 'I','Love','China');

console.log(str);

```

###### 3. codePointAt

返回值是在字符串中的给定索引的编码单元体现的数字,如果在索引处没找到元素则返回 [`undefined`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined "undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。") 。

代码示例:

```

console.log('ABC'.codePointAt(0)); // 65

console.log('abc'.codePointAt(0)); // 97

console.log('ABC'.codePointAt(3)); // undefined

```

###### 4. startsWith& endsWitdh

startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 true 或 false。

endsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的,根据判断结果返回 true 或 false。

###### 5. includes

includes() 方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。

> 语法:str.includes(searchString[, position])

position

可选。从当前字符串的哪个索引位置开始搜寻子字符串,默认值为0。

代码示例:

```

const str = 'I Love China';

console.log(str.includes('i')); // true

console.log(str.includes('I', 2)); // false

```

###### 6. repeat

repeat() 构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。

> /**  * str: String * count: Number */

let resultString = str.repeat(count);

代码示例:

```

const str = 'I Love China';

const newStr = str.repeat(2);

console.log(newStr); // I Love ChinaI Love China

```

###### 7. normalize

按照指定的一种 Unicode 正规形式将当前字符串正规化。(如果该值不是字符串,则首先将其转换为一个字符串)。

#### Array

Array对象新增了两个方法属性: of 和from。 Array.prototype新增了7个方法属性:fill,copyWithin, find, findIndex,entries,keys,values.

###### of

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。

代码示例:

```

Array.of(7);       // [7]  

Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]

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

```

###### from

Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

代码示例:

```

console.log(Array.from('foo'));

// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));

// expected output: Array [2, 4, 6]

```

###### fill

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

代码示例:

```

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4

console.log(array1.fill(0, 2, 4));

// expected output: [1, 2, 0, 0]

// fill with 5 from position 1

console.log(array1.fill(5, 1));

// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));

// expected output: [6, 6, 6, 6]

```

###### copyWithin

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

> 语法:

arr.copyWithin(target[, start[, end]])

参数:

target

0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。

如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。

start

0 为基底的索引,开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。

如果 start 被忽略,copyWithin 将会从0开始复制。

end

0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。

如果 end 被忽略,copyWithin 方法将会一直复制至数组结尾(默认为 arr.length)。

代码示例:

```

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

// copy to index 0 the element at index 3

console.log(array1.copyWithin(0, 3, 4));

// expected output: Array ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end

console.log(array1.copyWithin(1, 3));

// expected output: Array ["d", "d", "e", "d", "e"]

```

###### find

`find()`方法返回数组中满足提供的测试函数的**第一个**元素的值。否则返回 [`undefined`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)。

代码示例:

```

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);

// expected output: 12

```

###### findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

代码示例:

```

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));

// expected output: 3

```

###### entries

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

代码示例:

```

const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

console.log(iterator1.next().value);

// expected output: Array [0, "a"]

console.log(iterator1.next().value);

// expected output: Array [1, "b"]

```

###### keys

keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

代码示例:

```

const array1 = ['a', 'b', 'c'];

const iterator = array1.keys();

for (const key of iterator) {

 console.log(key);

}

// expected output: 0

// expected output: 1

// expected output: 2

```

###### values

values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值。

```

const array1 = ['a', 'b', 'c'];

const iterator = array1.values();

for (const value of iterator) {

 console.log(value);

}

// expected output: "a"

// expected output: "b"

// expected output: "c"

```

目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
135 52
|
18天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
24 1
JavaScript中对象的数据拷贝
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
1月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
75 1
|
1月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
29 5