对JavaScript ES6的常用总结之数组、函数、对象的扩展
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的常用总结之数组、函数、对象的扩展的详细内容,更多请关注其它相关文章!
上一篇: Mysql-索引排序行的详解
下一篇: 总结五大JavaScript优化原则
推荐阅读
-
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
-
前端笔记之ES678&Webpack&Babel(中)对象|字符串|数组的扩展&函数新特性&类
-
JavaScript手写数组的常用函数总结
-
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
-
javascript Array数组对象的扩展函数代码_javascript技巧
-
ES6对象的扩展及新增方法的内容总结(附示例)
-
JavaScript程序中Array数组对象的扩展函数实例
-
对JavaScript ES6的常用总结之数组、函数、对象的扩展
-
javascript Array数组对象的扩展函数代码_javascript技巧
-
ES6对象的扩展及新增方法的内容总结(附示例)