语法高亮,滚动条美化,设置页面调整

This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions

View File

@@ -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>