A common summary of JavaScript ES6 extensions to arrays, functions, and objects

1.1. Array.from()

The Array.from method is used to convert two types of objects into real arrays: array-like objects (array -like object) and traversable (iterable) objects (including ES6new data structures Set and Map).

The following is an array-like object, Array.fromconverts it to a real array.

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 can also accept a second parameter, which has a similar effect The map method of an array is used to process each element and put the processed value into the returned array.

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 method is used Convert a set of values ​​into an array.

Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3]

Array.of(3).length // 1

　

1.3. entries(),keys of array instance ()andvalues()

##ES6

provides three new methods——entries(), keys() and values() - are used to iterate over the array. They all return a traverser object, which can be traversed using a for...of loop. The only difference is that keys() is a traversal of key names, values( ) is a traversal of key-value pairs, entries() is a traversal of key-value pairs.

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.

Default values ​​of function parameters

ES6

Allow default values ​​to be set for function parameters, that is, written directly after the parameter definition.

function log(x, y = 'World') {

  console.log(x, y);}

log('Hello') // Hello World

log('Hello', 'China') // Hello China

log('Hello', '') // Hello

　

Parameter variables are declared by default, so you cannot use let or const Again.

function foo(x = 5) {

  let x = 1;

 // error

  const x = 2; 

// error

}

　

In the above code, the parameter variable x is declared by default and cannot be used in the function body let or const declare again, otherwise an error will be reported.

1.5.

Application of spread operator

（1）Merge Array

The spread operator provides a new way of writing array combinations.

// 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.

Arrow function

ES6

allowed "arrow"(=>) defines the function.

var f = v => v;

The above arrow function is equivalent to:

var f = function(v) {

return v;

};

Example

$(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.

Extension of object##1.8.

Concise representation of attributesES6

Allows variables and functions to be written directly as properties and methods of objects. This kind of writing is more concise.

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刚出来的函数，大多数浏览器不支持，暂时就不列出来了

The above is the detailed content of A common summary of JavaScript ES6 extensions to arrays, functions, and objects. For more information, please follow other related articles on the PHP Chinese website!