對JavaScript ES6的常用總結之數組、函數、物件的擴展
- 巴扎黑原創
- 2017-07-22 16:56:211323瀏覽
1.1. Array.from()
Array.from方法用於將兩類物件轉換為真正的陣列：類似陣列的物件（array -like object）和可遍歷（iterable）的物件（包括ES6新增的資料結構 Set和Map）。
下面是一個類似陣列的對象，Array.from將它轉為真正的陣列。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3};
// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from([1, 2, 3])
// [1, 2, 3]
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
Array.from還可以接受第二個參數，作用類似於陣列的map方法，用來對每個元素進行處理，將處理後的值放入傳回的陣列。
Array.from(arrayLike, x => x * x); // 等同于Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
#1.2. Array.of()
Array.of方法用於將一組值，轉換為數組。
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
1.3. 陣列實例的entries()，keys ()和values()
ES6提供三個新的方法——entries()，keys()和values()－用於遍歷陣列。它們都傳回一個遍歷器對象，可以用for...of迴圈進行遍歷，唯一的差別是keys()是對鍵名的遍歷、values( )是對鍵值的遍歷，entries()是對鍵值對的遍歷。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"// 1 "b"
1.4. 函數參數的預設值
ES6 允許為函數的參數設定預設值，即直接寫在參數定義的後面。
function log(x, y = 'World') {
console.log(x, y);}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
#參數變數是預設宣告的，所以不能用let或const再次聲明。
function foo(x = 5) {
let x = 1;
// error
const x = 2;
// error
}
#上面程式碼中，參數變數x是預設宣告的，在函數體中，不能用let或const再次聲明，否則會報錯。
1.5. 擴充運算子的應用
（1）合併陣列
擴充運算子提供了陣列合併的新寫法。
// ES5[1, 2].concat(more) // ES6[1, 2, ...more] var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e']; // ES5的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
1.6. 箭頭函數
ES6 允許使用「箭頭」（=>）定義函數。
var f = v => v;
#上面的箭頭函數等同於：
var f = function(v) {
return v;
};
#範例
##
$(function() {
var a=()=>{
const [a, b, c, d, e] = 'hello';
console.log(a++b++c++d++e);
}
a();//不带参数
//h__e__l__l__o
var b=(name,password)=>{
console.log("用户名："+name+",密码："+password);
}
b("张三","123456");//带参数
//用户名：张三,密码：123456
}); 1.7. 物件的擴充
1.8.屬性的簡潔表示法
ES6允許直接寫入變數和函數，作為物件的屬性和方法。這樣的書寫更簡潔。
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}
// 等同于var baz = {foo: foo};
上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。
1.9. 属性的遍历
ES6 一共有5种方法可以遍历对象的属性。
（1）for...in
for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
（2）Object.keys(obj)
Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）。
（3）Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）。
（4）Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性。
（5）Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管属性名是 Symbol 或字符串，也不管是否可枚举。
以上的5种方法遍历对象的属性，都遵守同样的属性遍历的次序规则。
首先遍历所有属性名为数值的属性，按照数字排序。
其次遍历所有属性名为字符串的属性，按照生成时间排序。
最后遍历所有属性名为 Symbol 值的属性，按照生成时间排序。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]
上面代码中，Reflect.ownKeys方法返回一个数组，包含了参数对象的所有属性。这个数组的属性次序是这样的，首先是数值属性2和10，其次是字符串属性b和a，最后是 Symbol 属性。
注释：对于Object.values等ES2017刚出来的函数，大多数浏览器不支持，暂时就不列出来了
以上是對JavaScript ES6的常用總結之數組、函數、物件的擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章！