一、数组的扩展,ES6在数组扩展了一些API,以实现更多的功能

1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示

var a = { '0':1,'1':1,length:2 };
var arr = Array.from(a);
console.log(arr)
Array [ 1, 1 ]
---------------ES5的实现-----------
var arr = [].slice.call(a);
console.log(arr)
Array [ 1, 1 ]
function fun(){ var arr = Array.from(arguments); console.log(arr); }
fun(2,3,4);
Array [ 2, 3, 4 ]

如果参数是真正的数组,则直接返回一个一样的新数组,参数也可是一个实现了Iterator接口的数据结构,如set,如下所示

var a = new Set([3,4]);
var arr = Array.from(a);
console.log(arr);
Array [ 3, 4 ]

Array.from还支持第二个参数,是一个用来处理每一个元素的函数,然后将处理后的元素放回数组,如下所示

var a = new Set([3,4]);
var arr = Array.from(a,x => x+1 );
console.log(arr);
Array [ 4, 5 ]

因此可以利用该方法做一些方便的操作,如下所示

var arr = Array.from({length:3},()=>'a');//生成一个有3个元素的数组,并初始化

2.Array.of:该方法可以将一组数转换成数组,且总是返回以参数为数值的数组,这个可以避免Array构造函数带来的歧义,如下所示

var arr = Array.of(1,2,3), arr1 = Array.of(1);
console.log(arr);
Array [ 1, 2, 3 ]
console.log(arr1);
Array [ 1 ]
var arr2 = Array(3), arr3 = Array(1,2);
console.log(arr2);
Array [ <3 个空的存储位置> ] //这里的空位就是没有值,也不是undefined
console.log(arr3);
Array [ 1, 2 ]

3.数组实例方法find,用于找出数组中第一个符合条件的元素,没有找到则返回undefined,参数为函数 ,如下所示

var arr = [1,10,9,88];
console.log(arr.find(x=>x>10));
88
console.log(arr.find(x=>x<1));
undefined

这里还有个findIndex的实例方法,找出匹配元素所在的位置,未找到就返回-1,如下所示

console.log(arr.findIndex(x=>x>50));
3
console.log(arr.findIndex(x=>x>100));
-1

并且这两个方法都可遍历到NaN,如下所示

var arr = [NaN,1];
console.log(arr.findIndex(x=>Object.is(NaN,x)));
0

4.fill实例方法,使用给定值填充数组,并会覆盖以前的值,如下所示

console.log(new Array(1,3,4).fill('a'));
Array [ "a", "a", "a" ]
--------------- 也可以指定开始位置和结束位置 --------------
console.log(new Array(2,5,8,11).fill('a',1,2));
Array [ 2, "a", 8, 11 ]

5.返回遍历器的实例方法keys,entries,keys得到键的遍历器,entries是得到键值的遍历器,如下所示

var arr = [1,2,5,7,11,15];
for( let i of arr.keys()){console.log(i);};
0
1
2
3
4
5
for(let [k,v] of arr.entries() ){ console.log(k+':'+v); }
0:1
1:2
2:5
3:7
4:11
5:15

二、函数的扩展

1.函数参数允许默认值,在ES6以前实现默认值通常是先判断某个参数是否为undefined,然后赋值为默认值。如下所示

var func = function(x=0,y=7){ return x+y; }
console.log(func())
7
console.log(func(1,2))
3
var fun1 = function(x,y){ x = x||0; y=y||7; return x+y; } //ES6以前的写法实现默认值
console.log(fun1())
7
console.log(fun1(1))
8

在使用默认值的时候,如果默认参数不是位于尾部,则该默认参数不能被跳过,如下所示

var fun2 = function(x=1,y){ return x+y; }
console.log(fun2())
NaN
console.log(fun2(,2))
SyntaxError: expected expression, got ','
console.log(fun2(null,2))
2
console.log(fun2(undefined,2))
3

使用了默认参数的函数的length属性的值将不准确,且不包涵rest参数,如下所示

var fun3 = function(a=0,b=1){ return a-b; }
console.log(fun3.length);
0

rest参数:形式为"...变量"的参数,接收函数剩余参数,搭配的变量为一个数组,rest参数后面不能再有参数,用法如下所示

var fun4 = (...arg) => arg.sort((a,b) => a<b);
console.log(fun4(8,87,1));
Array [ 87, 8, 1 ]
//在rest参数还有参数便会报错
var fun5 = (...arg,x) => arg.sort((a,b) => a<b);
SyntaxError: expected closing parenthesis, got ','
//函数的length会忽略rest参数
console.log(fun4.length)
0

扩展运算符(...),类似rest参数的逆运算,将一个数组转换成逗号分开的参数列表,用法如下所示

var fun5 = (...arg) => [...arg];
console.log(fun5(1,19));
Array [ 1, 19 ]
//也可以用来取代apply在某些地方的应用
console.log(Math.max.apply(null,[1,98,7]));
98
console.log(Math.max(...[1,98,7]));
98

2.箭头函数

箭头函数是ES6新增的语法,允许使用箭头=>定义函数,如下所示

var fun = a=>a+1;
console.log(fun(8));
9
----------------------
var fun1 = (a,b) => a*b;
console.log(fun1(2,8));
16

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,即便使用call,apply也不能改变。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

(function(){return (()=>console.log(this.a)).call({a:2})}).call({a:1})
1

嵌套的箭头函数,如下所示

const pipefun = (...funs) => initVal => funs.reduce((f1,f2) => f2(f1),initVal );
var testfun = pipefun(a=>a+1,b=>b+1);
testfun(10);
12

ES6中还明确规定在实现ES6代码时必须使用尾递归优化,尾递归优化就是在递归的尾部调用自身(尾调用就是在函数的最后一步调用另一个函数,且没有任何其他的操作),这样做到好处是不易造成栈溢出,如下所示

function fibonacci(n){
return n<=1?n:fibonacci(n-1)+fibonacci(n-2);
}
console.log(fibonacci(30));
832040
//在这里参数给到100就会栈溢出,如果改成尾递归,则可解决这个问题
function fibonacci(n,acc1,acc2){
return n<=1?acc1:fibonacci(n-1,acc2,acc1+acc2);
}
console.log(fibonacci(30,1,1));
832040
console.log(fibonacci(100,1,1));
354224848179262000000

三、对象的扩展

1.属性和方法可以简写,可以直接使用变量和函数作为对象的属性和方法,如下所示

var x = 1,
y = 2;
var obj = {
x,
y,
show(){
console.log(this.x,this.y);
}
};
console.log(obj.x,obj.y)
1 2
obj.show()
1 2

简洁写法的属性名总是字符串,所示不会出现关键字报错,如下所示

var obj1 = {
//这里相当于'new':function(){console.log("new");}
new(){
console.log("new");
}
};
obj1.new()
new

在ES6以前访问对象的属性或者方法有两种方式,一是使用点(.)操作符,另一种是使用中括号["propertyName"],如下所示

var o = {x:1};
console.log(o.x);
1
console.log(o["x"]);
1

但是在定义对象的属性或方法是只能使用属性名:的方式,在ES6中则可以使用中括号来定义,如下所示

var name = 'hehe';
var obj2 = {
[name]:"hello"
}
console.log(obj2[name]);
hello

2.Object.is该方法可以用来判断两个值是否一样,可以判断NaN与NaN,-0和+0,采用的是等值算法,如下所示

console.log(+0===-0,NaN===NaN,"hello"==="hello",{x:1}==={x:1});
console.log(Object.is(NaN,NaN));
console.log(Object.is(+0,-0));
console.log(Object.is({x:1},{x:1}));
true false true false
true
false
false

3.Object.assign用来合并对象,采用的是浅复制且存在同名属性后者会覆盖前者,如下所示

var o = {x:1},
o1 = {y:2},
o2 = {y:3,x:2};
console.log(Object.assign(o,o1,o2));
var o3 = {z:4,fun:()=>console.log("hello")};
Object.assign(o,o3);
o.fun();
o3.fun = null;
o.fun();
Object { x: 2, y: 3 }
hello

如果只给出一个参数且是对象,则直接返回这个对象,不是对象便会先转换成对象,如不能转换成对象则报错,如下所示

onsole.log(Object.assign(2));
console.log(Object.assign(undefined));
console.log(Object.assign(null));
Number { 2 }
TypeError: can't convert undefined to object

而且该方法拷贝不了不可枚举的属性

 

 

  

 

  

ES6 - Note3:数组、对象与函数的扩展的更多相关文章

  1. ES6新特性3:函数的扩展

    本文摘自ECMAScript6入门,转载请注明出处. 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') ...

  2. js-用于检测类数组对象的函数

    //判定o是否是一个类数组对象 //字符串和函数有length属性,但是它们 //可以用typeof检测将其排除.在客户端JavaScript中,DOM文本节点 //也有length属性,需要用额外判 ...

  3. 数组去重----es6&amp;es5&amp;数组对象去重

    es6方法: 普通数组: 1.使用Array.from(new Set(arr)); /* * @param oldArr 带有重复项的旧数组 * @param newArr 去除重复项之后的新数组 ...

  4. ES6系列_7之箭头函数和扩展

    1.默认值 在ES6中给我们增加了默认值的操作相关代码如下: function add(a,b=1){ return a+b; } console.log(add(1)); 可以看到现在只需要传递一个 ...

  5. Js 数组对象排序

    1.定义函数 /** * 数组对象排序函数 * @param {any} name 排序字段 * @param {any} order 升.降(这里事true.false记得处理下) */ var b ...

  6. ES6...扩展运算符(数组或类数组对象)

    数组和类数组对象定义 数组:[] 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象. 数组使用 let foo_arr = [ ...

  7. ES6 入门系列 - 函数的扩展

    1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...

  8. ES6入门之函数的扩展

    函数js原有的: 属性:arguments[].caller(调用该函数的引用,注意与callee分别开,callee指的是调用函数本身经常在递归中出现).length(形参个数).prototype ...

  9. ES6 函数的扩展2

    8.2 rest参数 ES6引入rest参数(形式为"-变量名"),用于获取函数的多余参数,这样就不需要使用arguments对象了. arguments对象并没有数组的方法,re ...

随机推荐

  1. web service 学习

    是什么? 是一种远程调用技术,这种技术提供一些接口,这些接口实现让客户端和服务端进行通信和数据交换,并且让通信和交换与平台和开发语言无关.也可以说是提供了许多函数.客户端调用服务端的函数. 远程调用: ...

  2. POJ 1860(spfa)

    http://poj.org/problem?id=1860 题意:汇率转换,与之前的2240有点类似,不同的是那个题它去换钱的时候,是不需要手续费的,这个题是需要手续费的,这是个很大的不同. 思路: ...

  3. JavaSE知识结构

  4. object-c面向对象2

    我们知道在c#中有访问私有成员变量的get  和set方法.这个目的是用来公开实力对象的私有变量.我看了下ios的访问修饰符.也就是private,public,protected.这些基本上都和c# ...

  5. Leetcode: Flatten Nested List Iterator

    Given a nested list of integers, implement an iterator to flatten it. Each element is either an inte ...

  6. win7win8远程桌面提示凭证不工作问题

    今天在远程桌面win7的服务器时,突然发现win8.1系统总是无法连接成功,提示“你的凭证不工作”,但可以连接windows server 2008的服务器,找了其他人用win7的连接也是出现这个问题 ...

  7. PuTTY DSA签名远程缓冲区溢出漏洞(CVE-2013-4207)

    漏洞版本: Simon Tatham PuTTY 0.52 - 0.63 漏洞描述: BUGTRAQ ID: 61649 CVE(CAN) ID: CVE-2013-4207 PuTTY是Window ...

  8. 译:7.使用Spring MVC服务Web内容

    本指南向您介绍了使用Spring创建“hello world”网站的过程.阅读原文:Serving Web Content with Spring MVC 1. 你将会构建什么? 您将构建一个具有静态 ...

  9. Java导包后在测试类中执行正确但在Servlet中执行错误报ClassNotFoundException或者ClassDefNotFoundException解决办法

    将原来导的包remove from build path,并复制到Web-root下的lib目录中,再add to build path,

  10. JavaScript学习笔记(三)——对象

    第四章 理解对象 1 说明 对象的状态:属性,行为:方法: 对象定义放在花括号内: 用冒号分隔属性名和属性值: 用逗号分隔属性名和属性值对,包括方法: 最后一个属性值后面不加逗号: 属性名可以是任何字 ...