ES6数组新加 Buff
欢迎关注本人公众号《迈向大前端》,里面有15本前端相关的电子书,送给在前端路上迷茫的同学们!
本章篇幅很长,分开来发,这一小篇主要讲ES6数组的Array.of()和Array.from()与传统写法的对比,下一篇是ES6新增的方法和类数组,
创建数组新方法
先来说说ES6之前创建数组遗留的痛点问题,比如说我想创建一个数组,里面包含一个10,应该怎么写呢?用数组字面量和构造函数试试:
//数组字面量式
var arr = [10];
console.log(arr); //10
console.log(arr.length); //1
var arr3 = [];
arr3[0] = 10;
console.log(arr3); //[10]
//构造函数式
var arr1 = new Array(10);
console.log(arr1); //(10)[empty*10]
console.log(arr1.length); //10
var arr2 = new Array(10,20);
console.log(arr2); //[10,20]
console.log(arr2.length); //2
console.log(arr2[0]); //10
console.log(arr2[1]); //20
看到了吗?构造函数式是没法创建单个包含有数值的数组的,这里的10代表的数组的长度为10,而不是arr[0]是10,所以在ES6之前只能通过数组字面量来创建,针对这个问题ES6 推出了Array.of() ,来规避这种怪异行为
Array.of()
Array.of()与Array构造函数的工作机制类似,它不存在特例,无论有几个参数,参数什么类型,统统不管,统一把参数作为数组的项来处理。来看看如何使用:
var arr = Array.of(10);
console.log(arr); //[10]
console.log(arr.length); //1
console.log(arr[0]) //10
var arr1 = Array.of(10,'xiaomage',[1,2,3],{'a':1,'b':2});
console.log(arr1); //[10, "xiaomage", Array(3), {…}]
这样就很舒服了。
当我们想着给一个函数传入Array构造函数来创建数组时,是无法达到行为统一的,原因就是 new Array(10)
不是我们想要的效果,但是使用Array.of()就可以解决这个问题。
//ES5的Array
function createArray(creator, value){
let arr = creator(value);
return arr;
};
var newArr = createArray(Array,10);
console.log(newArr); //(10)[empty*10]
//ES6的Array.of
function createArray_1(creator, value){
let arr = creator(value);
return arr;
}
var newArr1 = createArray_1(Array.of,10);
console.log(newArr1); //(1)[10]
在ES6之前,当我们遇到一个类数组转成数组的时候又得写一堆代码来实现,先简单说说什么是类数组,
什么是类数组,简单记住三点就行,
第一,它是对象,不是数组,只是看着像数组;
第二,一定含有length属性,没有length属性的是对象而不是类数组 ;
第三,其他属性(索引)不能是负数。
比如: var a = {'1':'aa','2':'bb','4':'cc',length:3};
,我们常见的类数组有函数的参数arguments。
function func(){
console.log(arguments);
};
func(1,2,3);
那么如何把类数组转换成数组,还是以函数的arguments为例,看看写法:
function func(){
//第一种写法
var arr = [];
for(var i=0;i<arguments.length;i++){
arr.push(arguments[i]);
};
console.log(arr); //[10, "xiaoma", "javascript"]
//第二种写法
var arr1= Array.prototype.slice.call(arguments);
console.log(arr1); //[10, "xiaoma", "javascript"]
};
func(10,'xiaoma','javascript');
虽然转化还是比较简单的,也得写好几行代码,ES6的Array.from()出来之后可谓是一步到位,简单明了。
Array.from()
Array.from()的语法是Array.from(arrayLike[, mapFn[, thisArg]])。接受三个参数:
第一个:可迭代的对象或者数组;
第二个:映射函数(接受两个参数,数组的每一项和索引),可选;
第三个:执行映射函数时的this对象,可选;
返回值:处理后的数组。
function func(){
console.log(Array.from(arguments)); //[1, 2, 3, "Array.from", Array(3), {…}]
};
func(1,2,3,"Array.from",[4,5,6],{'a':1});
下面在看看有映射函数的情况,
function func(){
var arr = Array.from(arguments,(item ,index)=>{
if(Number.isInteger(item)){
return item*10+100;
}else{
return item;
}
});
console.log(arr); //[110, 120, 130, "Array.from", Array(3), {…}]
};
func(1,2,3,"Array.from",[4,5,6],{'a':1});
分析一下,拿到数组后再进行了一次map操作,返回想要的值,拆开来看,等价于:Array.from(obj).map(mapFn, thisArg);
function func(){
var arr = Array.from(arguments).map((item ,index)=>{
if(Number.isInteger(item)){
return item*10+100;
}else{
return item;
}
});
console.log(arr); //[110, 120, 130, "Array.from", Array(3), {…}]
};
func(1,2,3,"Array.from",[4,5,6],{'a':1});
如果映射函数处理对象,那么第三个参数this就派上用场了。
var obj = {
name:'xiao ma ge',
sayHello(value){
return value + this.name;
}
};
function func(){
return Array.from(arguments,obj.sayHello,obj)
}
var arr = func('hello ');
console.log(arr); //["hello xiao ma ge"]
用Array.from()能够将所有含有Symbol.iterator属性的可迭代对象转换为数组:
let obj1 = {
*[Symbol.iterator](){
yield 10;
yield 100;
yield 1000;
}
};
var arr = Array.from(obj1,(item,index)=>{
return item*10+1;
});
console.log(arr); //[101, 1001, 10001]
好了,这一部分基本上就说完了,欢迎关注本人公众号《迈向大前端》,里面有15本前端相关的电子书,送给在前端路上迷茫的同学们!,下面是我的公众号,扫码即可领取!
最新文章
- 灵活的JavaScript(一)
- 【转】8G内存下MySQL的优化详细方案
- ListView条目的侧拉删除
- lucene 查询的使用
- struts2类库下载
- Unity3D之Mecanim动画系统学习笔记(五):Animator Controller
- linux vi查找命令
- 兼容IE与firefox、chrome的css 线性渐变(linear-gradient)
- [转]numpy性能优化
- MyBatis面对Oracle数据库如何实现主键列自增长
- Android测试日志文件抓取与分析
- 使用缓存Memcache存储access_token
- Python_002_Python语言基础
- springboot配置server相关配置&;整合模板引擎Freemarker、thymeleaf&;thymeleaf基本用法&;thymeleaf 获取项目路径 contextPath 与取session中信息
- es6初级之解构----之一
- 【Android】开源项目汇总-备用
- Kafka配置SSL(云环境)
- 记一次Servlet中getAttribute的错误.
- vue 点击按钮 input框架获取焦点的方法
- .net 面试题总结