《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
  1. 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"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352