mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-15 15:20:30 +08:00
语法高亮,滚动条美化,设置页面调整
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/object-assign.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code>Object.assign(<var>target</var>, ...<var>sources</var>)</code></pre>
|
||||
<pre><code class="language-javascript"><code>Object.assign(<var>target</var>, ...<var>sources</var>)</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>target</code></dt>
|
||||
@@ -22,13 +22,13 @@
|
||||
<p>注意,<code>Object.assign</code> 不会跳过那些值为 <a href="Reference/Global_Objects/null" title="值 null 特指对象的值未设置。它是 JavaScript 基本类型 之一。"><code>null</code></a> 或 <a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a> 的源对象。</p>
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Cloning_an_object" name="Example:_Cloning_an_object">复制一个对象</h3>
|
||||
<pre class="brush: js">const obj = { a: 1 };
|
||||
<pre><code class="language-javascript">const obj = { a: 1 };
|
||||
const copy = Object.assign({}, obj);
|
||||
console.log(copy); // { a: 1 }
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Deep_Clone" name="Deep_Clone">深拷贝问题</h3>
|
||||
<p>针对深拷贝,需要使用其他办法,因为 <code>Object.assign()</code>拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。</p>
|
||||
<pre class="brush: js">let obj1 = { a: 0 , b: { c: 0}};
|
||||
<pre><code class="language-javascript">let obj1 = { a: 0 , b: { c: 0}};
|
||||
let obj2 = Object.assign({}, obj1);
|
||||
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
|
||||
|
||||
@@ -49,33 +49,33 @@ obj1 = { a: 0 , b: { c: 0}};
|
||||
let obj3 = JSON.parse(JSON.stringify(obj1));
|
||||
obj1.a = 4;
|
||||
obj1.b.c = 4;
|
||||
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}</pre>
|
||||
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}</code></pre>
|
||||
<h3 id="Example:_Merging_objects" name="Example:_Merging_objects">合并对象</h3>
|
||||
<pre class="brush: js">const o1 = { a: 1 };
|
||||
<pre><code class="language-javascript">const o1 = { a: 1 };
|
||||
const o2 = { b: 2 };
|
||||
const o3 = { c: 3 };
|
||||
|
||||
const obj = Object.assign(o1, o2, o3);
|
||||
console.log(obj); // { a: 1, b: 2, c: 3 }
|
||||
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="合并具有相同属性的对象">合并具有相同属性的对象</h3>
|
||||
<pre class="brush: js">const o1 = { a: 1, b: 1, c: 1 };
|
||||
<pre><code class="language-javascript">const o1 = { a: 1, b: 1, c: 1 };
|
||||
const o2 = { b: 2, c: 2 };
|
||||
const o3 = { c: 3 };
|
||||
|
||||
const obj = Object.assign({}, o1, o2, o3);
|
||||
console.log(obj); // { a: 1, b: 2, c: 3 }</pre>
|
||||
console.log(obj); // { a: 1, b: 2, c: 3 }</code></pre>
|
||||
<p>属性被后续参数中具有相同属性的其他对象覆盖。</p>
|
||||
<h3 id="Example:_Symbol_properties" name="Example:_Symbol_properties">拷贝 symbol 类型的属性</h3>
|
||||
<pre class="brush: js">const o1 = { a: 1 };
|
||||
<pre><code class="language-javascript">const o1 = { a: 1 };
|
||||
const o2 = { [Symbol('foo')]: 2 };
|
||||
|
||||
const obj = Object.assign({}, o1, o2);
|
||||
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
|
||||
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]</pre>
|
||||
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]</code></pre>
|
||||
<h3 id="Example:_Only_own_enumerable_properties" name="Example:_Only_own_enumerable_properties">继承属性和不可枚举属性是不能拷贝的</h3>
|
||||
<pre class="brush: js">const obj = Object.create({foo: 1}, { // foo 是个继承属性。
|
||||
<pre><code class="language-javascript">const obj = Object.create({foo: 1}, { // foo 是个继承属性。
|
||||
bar: {
|
||||
value: 2 // bar 是个不可枚举属性。
|
||||
},
|
||||
@@ -87,9 +87,9 @@ Object.getOwnPropertySymbols(obj); // [Symbol(foo)]</pre>
|
||||
|
||||
const copy = Object.assign({}, obj);
|
||||
console.log(copy); // { baz: 3 }
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Primitives" name="Example:_Primitives">原始类型会被包装为对象</h3>
|
||||
<pre class="brush: js">const v1 = "abc";
|
||||
<pre><code class="language-javascript">const v1 = "abc";
|
||||
const v2 = true;
|
||||
const v3 = 10;
|
||||
const v4 = Symbol("foo")
|
||||
@@ -97,9 +97,9 @@ const v4 = Symbol("foo")
|
||||
const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
|
||||
// 原始类型会被包装,null 和 undefined 会被忽略。
|
||||
// 注意,只有字符串的包装对象才可能有自身可枚举属性。
|
||||
console.log(obj); // { "0": "a", "1": "b", "2": "c" }</pre>
|
||||
console.log(obj); // { "0": "a", "1": "b", "2": "c" }</code></pre>
|
||||
<h3 id="Example:_Exceptions" name="Example:_Exceptions">异常会打断后续拷贝任务</h3>
|
||||
<pre class="brush: js">const target = Object.defineProperty({}, "foo", {
|
||||
<pre><code class="language-javascript">const target = Object.defineProperty({}, "foo", {
|
||||
value: 1,
|
||||
writable: false
|
||||
}); // target 的 foo 属性是个只读属性。
|
||||
@@ -113,9 +113,9 @@ console.log(target.foo2); // 3,说明第二个源对象的第一个属性也
|
||||
console.log(target.foo); // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。
|
||||
console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。
|
||||
console.log(target.baz); // undefined,第三个源对象更是不会被拷贝到的。
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Copy_accessors" name="Example:_Copy_accessors">拷贝访问器</h3>
|
||||
<pre class="brush: js">const obj = {
|
||||
<pre><code class="language-javascript">const obj = {
|
||||
foo: 1,
|
||||
get bar() {
|
||||
return 2;
|
||||
@@ -148,10 +148,10 @@ function completeAssign(target, ...sources) {
|
||||
copy = completeAssign({}, obj);
|
||||
console.log(copy);
|
||||
// { foo:1, get bar() { return 2 } }
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
|
||||
<p>此<a class="glossaryLink" href="/en-US/docs/Glossary/Polyfill" title="polyfill: A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.">polyfill</a>不支持 symbol 属性,因为ES5 中根本没有 symbol :</p>
|
||||
<pre class="brush: js">if (typeof Object.assign != 'function') {
|
||||
<pre><code class="language-javascript">if (typeof Object.assign != 'function') {
|
||||
// Must be writable: true, enumerable: false, configurable: true
|
||||
Object.defineProperty(Object, "assign", {
|
||||
value: function assign(target, varArgs) { // .length of function is 2
|
||||
@@ -179,7 +179,7 @@ console.log(copy);
|
||||
writable: true,
|
||||
configurable: true
|
||||
});
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="Specifications" name="Specifications">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user