《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 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 。 代码示例: 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。 代码示例： 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" 如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。 个人微信 公众号_前端微说.jpg

本文章由javascript技术分享原创和收集