ES6學習筆記(六)函式與物件
一、函式
1.引數的預設值
在ES6之前,不能直接為函式的引數指定預設值,只能採用變通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);
}
ES6允許為函式的引數設定預設值,即直接寫在引數定義的後面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
可以與解構賦值預設值結合使用
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined
一個需要注意的地方是,如果引數預設值是一個變數,則該變數所處的作用域,與其他變數的作用域規則是一樣的,即先是當前函式的作用域,然後才是全域性作用域。
var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2 ) // 2
上面程式碼中,引數y的預設值等於x。呼叫時,由於函式作用域內部的變數x已經生成,所以y等於引數x,而不是全域性變數x。
如果呼叫時,函式作用域內部的變數x沒有生成,結果就會不一樣。
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f() // 1
上面程式碼中,函式呼叫時,y的預設值變數x尚未在函式內部生成,所以x指向全域性變數。如果去掉let x = 1;
全域性變數x不存在,就會報錯。
另一個例子:
let foo = 'outer';
function bar(func = x => foo) {
let foo = 'inner';
console.log(func()); // outer
}
bar();
上面程式碼中,函式bar的引數func的預設值是一個匿名函式,返回值為變數foo。這個匿名函式宣告時,bar函式的作用域還沒有形成,所以匿名函式裡面的foo指向外層作用域的foo,輸出outer。
注意:
(1)在函式體中,不能用let或const再次宣告形參,否則會報錯。
(2)通常情況下,定義了預設值的引數,應該是函式的尾引數。因為這樣比較容易看出來,到底省略了哪些引數。
(3)指定了預設值以後,函式的length屬性,將返回沒有指定預設值的引數個數。
應用:
利用引數預設值,可以指定某一個引數不得省略,如果省略就丟擲一個錯誤。
function throwIfMissing() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
}
foo()
// Error: Missing parameter
上面程式碼的foo函式,如果呼叫的時候沒有引數,就會呼叫預設值throwIfMissing函式,從而丟擲一個錯誤。
從上面程式碼還可以看到,引數mustBeProvided的預設值等於throwIfMissing函式的執行結果(即函式名之後有一對圓括號),這表明引數的預設值不是在定義時執行,而是在執行時執行(即如果引數已經賦值,預設值中的函式就不會執行),這與python語言不一樣。
另外,可以將引數預設值設為undefined,表明這個引數是可以省略的。
function foo(optional = undefined) { ··· }
2 . rest引數
rest引數搭配的變數是一個數組,該變數將多餘的引數放入陣列中
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
上面程式碼的add函式是一個求和函式,利用rest引數,可以向該函式傳入任意數目的引數。
rest引數中的變數代表一個數組,所以陣列特有的方法都可以用於這個變數。下面是一個利用rest引數改寫陣列push方法的例子。
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)
注意,rest引數之後不能再有其他引數(即只能是最後一個引數),否則會報錯。(同擴充套件運算子)
// 報錯
function f(a, ...b, c) {
// ...
}
3.擴充套件運算子
擴充套件運算子(spread)是三個點(…)。將一個數組轉為用逗號分隔的引數序列。(比較:rest(形參多餘),擴充套件(實參展開))
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
該運算子主要用於函式呼叫。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42
上面程式碼中,array.push(…items)和add(…numbers)這兩行,都是函式的呼叫,它們的都使用了擴充套件運算子。該運算子將一個數組,變為引數序列。
由於擴充套件運算子可以展開陣列,所以不再需要apply方法,將陣列轉為函式的引數了。
Math.max.apply(null, [14, 3, 77]);// ES5
Math.max(...[14, 3, 77]); // ES6
// 等同於
Math.max(14, 3, 77);
另一個例子是通過push函式,將一個數組新增到另一個數組的尾部。
// ES5的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
注意:如果將擴充套件運算子用於陣列賦值,只能放在引數的最後一位,否則會報錯。
擴充套件運算子應用:
(1)合併陣列
[1, 2].concat(more) // ES5
[1, 2, ...more] // ES6
(2)與解構賦值結合
a = list[0], rest = list.slice(1);// ES5
[a, ...rest] = list;// ES6
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
(3)函式的返回值
JavaScript的函式只能返回一個值,如果需要返回多個值,只能返回陣列或物件。擴充套件運算子提供瞭解決這個問題的一種變通方法。
var dateFields = readDateFields(database);
var d = new Date(...dateFields);
(4)字串轉陣列
擴充套件運算子還可以將字串轉為真正的陣列。能夠正確識別32位的Unicode字元。
[...'hello']
// [ "h", "e", "l", "l", "o" ]
正確返回字串長度的函式,可以像下面這樣寫。
function length(str) {
return [...str].length;
}
length('x\uD83D\uDE80y') // 3
(5)實現了Iterator介面的物件
任何Iterator介面的物件,都可以用擴充套件運算子轉為真正的陣列。
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
querySelectorAll方法返回的是一個nodeList物件。它不是陣列,而是一個類似陣列的物件。這時,擴充套件運算子可以將其轉為真正的陣列,原因就在於NodeList物件實現了Iterator介面。
(6)Map和Set結構,Generator函式
擴充套件運算子內部呼叫的是資料結構的Iterator介面,因此只要具有Iterator介面的物件,都可以使用擴充套件運算子,比如Map結構。
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
4.name屬性
函式的name屬性,返回該函式的函式名。
function foo() {}
foo.name // "foo"
這個屬性早就被瀏覽器廣泛支援,ES6對這個屬性的行為做出了一些修改。如果將一個匿名函式賦值給一個變數,ES5的name屬性,會返回空字串,而ES6的name屬性會返回實際的函式名。
var func1 = function () {};
// ES5
func1.name // ""
// ES6
func1.name // "func1"
注意:
Function建構函式返回的函式例項,name屬性的值為“anonymous”。(new Function).name // "anonymous"
5、箭頭函式
ES6允許使用“箭頭”(=>)定義函式。
var f = () => 5;
// 等同於
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
return num1 + num2;
}; //如果箭頭函式的程式碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return語句返回。
由於大括號被解釋為程式碼塊,所以如果箭頭函式直接返回一個物件,必須在物件外面加上括號。
var getTempItem = id => ({ id: id, name: "Temp" });
箭頭函式的一個用處是簡化回撥函式。
// 正常函式寫法
[1,2,3].map(function (x) {
return x * x;
});
// 箭頭函式寫法
[1,2,3].map(x => x * x);
// 正常函式寫法
var result = values.sort(function (a, b) {
return a - b;
});
// 箭頭函式寫法
var result = values.sort((a, b) => a - b);
注意:
(1)函式體內的this物件,就是定義時所在的物件
,而不是使用時所在的物件。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
上面程式碼中,setTimeout的引數是一個箭頭函式,這個箭頭函式的定義生效是在foo函式生成時,而它的真正執行要等到100毫秒後。如果是普通函式,執行時this應該指向全域性物件window,這時應該輸出21。但是,箭頭函式導致this總是指向函式定義生效時所在的物件(本例是{id: 42}),所以輸出的是42。
箭頭函式可以讓setTimeout裡面的this,繫結定義時所在的作用域,而不是指向執行時所在的作用域。
箭頭函式裡面根本沒有自己的this,而是引用外層的this。
(2)不可以當作建構函式,也就是說,不可以使用new命令,否則會丟擲一個錯誤。
(3)不可以使用arguments物件,該物件在函式體內不存在。如果要用,可以用Rest引數代替。
(4)不可以使用yield命令,因此箭頭函式不能用作Generator函式。
(5)箭頭函式內部,還可以再使用箭頭函式。
二、物件
1.屬性與方法的簡潔寫法
屬性簡寫:
ES6允許直接寫入變數和函式,作為物件的屬性和方法。這樣的書寫更加簡潔。
ES6在物件之中,只寫屬性名,不寫屬性值。這時,屬性值等於屬性名所代表的變數。
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}
// 等同於
var baz = {foo: foo};
方法簡寫:
var o = {
method() {
return "Hello!";
}
};
// 等同於
var o = {
method: function() {
return "Hello!";
}
};
注意,簡潔寫法的屬性名總是字串
2.屬性名錶達式
ES6允許字面量定義物件時,用表示式作為物件的屬性名,即把表示式放在方括號內。
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};
表示式還可以用於定義方法名。
let obj = {
['h'+'ello']() {
return 'hi';
}
};
obj.hello() // hi
注意,屬性名錶達式與簡潔表示法,不能同時使用,會報錯。
3.物件方法的name屬性
物件方法也是函式,因此也有name屬性。
var person = {
sayName() {
console.log(this.name);
},
get firstName() {
return "Nicholas";
}
};
//如果使用了取值函式,則會在方法名前加上get。如果是存值函式,方法名的前面會加上set。
person.sayName.name // "sayName"
person.firstName.name // "get firstName"
有兩種特殊情況:
bind方法創造的函式,name屬性返回“bound”加上原函式的名字;
Function建構函式創造的函式,name屬性返回“anonymous”。
(new Function()).name // "anonymous"
var doSomething = function() {
// ...
};
doSomething.bind().name // "bound doSomething"
4.判斷相等 Object.is()
ES5比較兩個值是否相等,只有兩個運算子:相等運算子(==)和嚴格相等運算子(===)。它們都有缺點,前者會自動轉換資料型別,後者的NaN不等於自身,以及+0等於-0。JavaScript缺乏一種運算,在所有環境中,只要兩個值是一樣的,它們就應該相等。
ES6提出“Same-value equality”(同值相等)演算法,用來解決這個問題。Object.is就是部署這個演算法的新方法。它用來比較兩個值是否嚴格相等,與嚴格比較運算子(===)的行為基本一致。
Object.is('foo', 'foo')
// true
Object.is({}, {})
// false
不同之處只有兩個:一是+0不等於-0,二是NaN等於自身。
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
ES5可以通過下面的程式碼,部署Object.is。
Object.defineProperty(Object, 'is', {
value: function(x, y) {
if (x === y) {
// 針對+0 不等於 -0的情況
return x !== 0 || 1 / x === 1 / y;
}
// 針對NaN的情況
return x !== x && y !== y;
},
configurable: true,
enumerable: false,
writable: true
});
5.Object.assign( )物件合併
Object.assign方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。Object.assign方法的第一個引數是目標物件,後面的引數都是源物件。
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
var obj = {a: 1};
Object.assign(obj) === obj // true
注意:
(1)如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。
(2)由於undefined和null無法轉成物件,所以如果只有它們作為引數,就會報錯。
(3)如果該引數不是物件,則會先轉成物件,然後返回。如果無法轉成物件,就會跳過。這意味著,如果undefined和null不在首引數,就不會報錯。
(4)除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。
//案例1:
var v1 = 'abc';
var v2 = true;
var v3 = 10;
var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
//案例2:
Object(true) // {[[PrimitiveValue]]: true}
Object(10) // {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
布林值、數值、字串分別轉成對應的包裝物件,可以看到它們的原始值都在包裝物件的內部屬性[[PrimitiveValue]]上面,這個屬性是不會被Object.assign拷貝的。只有字串的包裝物件,會產生可列舉的實義屬性,那些屬性則會被拷貝。
(5) Object.assign拷貝的屬性是有限制的,只拷貝源物件的自身屬性(不拷貝繼承屬性),也不拷貝不可列舉的屬性(enumerable: false)。
(6)Object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
上面程式碼中,源物件obj1的a屬性的值是一個物件,Object.assign拷貝得到的是這個物件的引用。這個物件的任何變化,都會反映到目標物件上面。
(7)Object.assign可以用來處理陣列,但是會把陣列視為物件。
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
上面程式碼中,Object.assign把陣列視為屬性名為0、1、2的物件,因此目標陣列的0號屬性4覆蓋了原陣列的0號屬性1。
應用:
(1)為物件新增屬性
class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
上面方法通過Object.assign方法,將x屬性和y屬性新增到Point類的物件例項。
(2)為物件新增方法
Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
···
},
anotherMethod() {
···
}
});
// 等同於下面的寫法
SomeClass.prototype.someMethod = function (arg1, arg2) {
···
};
SomeClass.prototype.anotherMethod = function () {
···
};
(3)克隆物件
function clone(origin) {
return Object.assign({}, origin);
}
上面程式碼將原始物件拷貝到一個空物件,就得到了原始物件的克隆。
不過,採用這種方法克隆,只能克隆原始物件自身的值,不能克隆它繼承的值。如果想要保持繼承鏈,可以採用下面的程式碼。
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
(4)合併多個物件:將多個物件合併到某個物件。
const merge =
(target, ...sources) => Object.assign(target, ...sources);
如果希望合併後返回一個新物件,可以改寫上面函式,對一個空物件合併。
const merge =
(...sources) => Object.assign({}, ...sources);
(5)為屬性指定預設值
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
}
6.屬性的可列舉性enumerable
物件的每個屬性都有一個描述物件(Descriptor),用來控制該屬性的行為。Object.getOwnPropertyDescriptor方法可以獲取該屬性的描述物件。
let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
// value: 123,
// writable: true,
// enumerable: true,
// configurable: true
// }
描述物件的enumerable屬性,稱為”可列舉性“,如果該屬性為false,就表示某些操作會忽略當前屬性。
ES5有三個操作會忽略enumerable為false的屬性:
for…in迴圈:只遍歷物件自身的和繼承的可列舉的屬性(只有此返回繼承的屬性)
Object.keys():返回物件自身的所有可列舉的屬性的鍵名
JSON.stringify():只序列化物件自身的可列舉的屬性
ES6新增了一個操作Object.assign(),會忽略enumerable為false的屬性,只拷貝物件自身的可列舉的屬性。
實際上,引入enumerable的最初目的,就是讓某些屬性可以規避掉for…in操作。比如,物件原型的toString方法,以及陣列的length屬性,就通過這種手段,不會被for…in遍歷到。
Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false
Object.getOwnPropertyDescriptor([], 'length').enumerable
// false
上面程式碼中,toString和length屬性的enumerable都是false,因此for…in不會遍歷到這兩個繼承自原型的屬性。總的來說,操作中引入繼承的屬性會讓問題複雜化,大多數時候,我們只關心物件自身的屬性。所以,儘量不要用for…in迴圈,而用Object.keys()代替。
7.物件遍歷Object.values()、Object.entries()
ES5引入了Object.keys方法,返回一個數組,成員是引數物件自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名。
var obj = { foo: "bar", baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
ES7有一個提案,引入了跟Object.keys配套的Object.values和Object.entries。
(1)Object.values(obj)鍵值方法返回一個數組,成員是引數物件自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值。
var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]
屬性名為數值的屬性,是按照數值從小到大遍歷的,因此返回的順序是b、c、a。
var obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]
Object.values只返回物件自身的可遍歷屬性。
Object.values會過濾屬性名為Symbol值的屬性。
如果Object.values方法的引數是一個字串,會返回各個字元組成的一個數組。
Object.values('foo')
// ['f', 'o', 'o']
上面程式碼中,字串會先轉成一個類似陣列的物件。字串的每個字元,就是該物件的一個屬性。因此,Object.values返回每個屬性的鍵值,就是各個字元組成的一個數組。
如果引數不是物件,Object.values會先將其轉為物件。由於數值和布林值的包裝物件,都不會為例項新增非繼承的屬性。所以,Object.values會返回空陣列。
Object.values(42) // []
Object.values(true) // []
(2)Object.entries(obj)鍵值對陣列
Object.entries方法返回一個數組,成員是引數物件自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對陣列。
var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
除了返回值不一樣,該方法的行為與Object.values基本一致。
應用:
Object.entries的基本用途是遍歷物件的屬性。
let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
// "one": 1
// "two": 2
Object.entries另一個應用,將物件轉為真正的Map結構。
var obj = { foo: 'bar', baz: 42 };
var map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }
自己實現Object.entries方法:
// Generator函式的版本
function* entries(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
}
// 非Generator函式的版本
function entries(obj) {
let arr = [];
for (let key of Object.keys(obj)) {
arr.push([key, obj[key]]);
}
return arr;
}
8.原型相關setPrototypeOf、getPrototypeOf()
(1)__proto__
屬性
(2)Object.setPrototypeOf方法的作用與proto相同,用來設定一個物件的prototype物件。它是ES6正式推薦的設定原型物件的方法。
格式:Object.setPrototypeOf(object, prototype)
用法:var o = Object.setPrototypeOf({}, null);
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40
上面程式碼將proto物件設為obj物件的原型,所以從obj物件可以讀取proto物件的屬性。
(3)Object.getPrototypeOf()
該方法與setPrototypeOf方法配套,用於讀取一個物件的prototype物件。
格式:Object.getPrototypeOf(obj);
function Rectangle() {
}
var rec = new Rectangle();
Object.getPrototypeOf(rec) === Rectangle.prototype
// true
Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false
10.物件的解構賦值和擴充套件運算子
(1)Rest解構賦值
物件的Rest解構賦值用於從一個物件取值,相當於將所有可遍歷的、但尚未被讀取的屬性,分配到指定的物件上面。所有的鍵和它們的值,都會拷貝到新物件上面。
由於Rest解構賦值要求等號右邊是一個物件,所以如果等號右邊是undefined或null,就會報錯,因為它們無法轉為物件。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
注意:Rest解構賦值必須是最後一個引數,否則會報錯。
Rest解構賦值拷貝的是這個值的引用
Rest解構賦值不會拷貝繼承自原型物件的屬性。
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let o3 = { ...o2 };
o3 // { b: 2 }
(2)擴充套件運算子(…)用於取出引數物件的所有可遍歷屬性,拷貝到當前物件之中。可以用於合併兩個物件。
let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }
這等同於使用Object.assign方法。
let aClone = { ...a };
// 等同於
let aClone = Object.assign({}, a);
注意:
擴充套件運算子內部的同名屬性會被覆蓋掉。如果把自定義屬性放在擴充套件運算子前面,就變成了設定新物件的預設屬性值。
如果擴充套件運算子的引數是null或undefined,這個兩個值會被忽略,不會報錯。
11.多項所有屬性的描述物件Object.getOwnPropertyDescriptors()
ES5有一個Object.getOwnPropertyDescriptor方法,返回某個物件屬性的描述物件(descriptor)。
var obj = { p: 'a' };
Object.getOwnPropertyDescriptor(obj, 'p')
// Object { value: "a",
// writable: true,
// enumerable: true,
// configurable: true
// }
ES7有一個提案,提出了Object.getOwnPropertyDescriptors方法,返回指定物件所有自身屬性(非繼承屬性)的描述物件。
const obj = {
foo: 123,
get bar() { return 'abc' }
};
Object.getOwnPropertyDescriptors(obj)
// { foo:
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar:
// { get: [Function: bar],
// set: undefined,
// enumerable: true,
// configurable: true } }
Object.getOwnPropertyDescriptors方法返回一個物件,所有原物件的屬性名都是該物件的屬性名,對應的屬性值就是該屬性的描述物件。