首頁 > web前端 > js教程 > 主體

對JavaScript ES6的常用總結之數組、函數、物件的擴展

巴扎黑
發布: 2017-07-22 16:56:21
原創
1294 人瀏覽過

1.1. Array.from()

Array.from方法用於將兩類物件轉換為真正的陣列:類似陣列的物件(array -like object)和可遍歷(iterable)的物件(包括ES6新增的資料結構 SetMap)。

下面是一個類似陣列的對象,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
登入後複製

  

#參數變數是預設宣告的,所以不能用letconst再次聲明。

function foo(x = 5) {

  let x = 1;

 // error

  const x = 2; 

// error

}
登入後複製

  

#上面程式碼中,參數變數x是預設宣告的,在函數體中,不能用letconst再次聲明,否則會報錯。

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种方法可以遍历对象的属性。

1for...in

for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

2Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)。

3Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。

4Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性。

5Reflect.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方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性210,其次是字符串属性ba,最后是 Symbol 属性。

 

注释:对于Object.valuesES2017刚出来的函数,大多数浏览器不支持,暂时就不列出来了

以上是對JavaScript ES6的常用總結之數組、函數、物件的擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板