ES6中的新特性

本人最近学习es6一些方法,难免有些手痒,想着能不能将这些方法总结下,如下

1、数组的扩展

1)首先什么是伪数组

无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们,例如:函数的argument参数,调用getElementsByTagName,document.childNodes等等

2、函数扩展

document.querySelectorAll(‘元素‘) 相当于 document.getElementsByTagName(‘元素‘) 一样

合并数组

// 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‘ ]

字符串

es6默认都是属于严格模式下,“...”为扩展运算符

let str = ‘x\uD83D\uDE80y‘;
str.split(‘‘).reverse().join(‘‘)
// ‘y\uDE80\uD83Dx‘
[...str].reverse().join(‘‘)
// ‘y\uD83D\uDE80x‘

name属性

函数的name属性,返回该函数的函数名。

function fn() {}
fn.name // "fn"

  

箭头函数

// 嵌套的箭头函数function insert(value) {
  return {into: function (array) {
    return {after: function (afterValue) {
      array.splice(array.indexOf(afterValue) + 1, 0, value);
      return array;
    }};
  }};
}
insert(2).into([1, 3]).after(1); //[1, 2, 3]

// 使用箭头函数
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
  array.splice(array.indexOf(afterValue) + 1, 0, value);
  return array;
}})});
insert(2).into([1, 3]).after(1); //[1, 2, 3]

现在问题来了,什么是链式调用?

解答:其实,上面的代码可以说是一种链式调用,使用面向对象写,里面写几个方法,就像如下代码一样,

var Lianshi = function(){ }
Lianshi.prototype = {
       css:function(){
             console.log("设置css样式");
              return this;
       },
       show:function(){
               console.log("将元素显示");
               return this;
       },
       hide:function(){
              console.log("将元素隐藏");
       }
  };
var lianshi = new Lianshi();
lianshi.css().css().show().hide();

箭头函数注意的四点:

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

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

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

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

绑定this

箭头函数可以绑定this,显示绑定this的写法(call、apply、bing),call、apply的作用就是能够改变this的指向

递归函数

// 斐波拉切数列 也是递归的一种  传的值过大,容易造成堆栈溢出 内存泄漏
function Fibonacci (n) {
  if ( n <= 1 ) {return 1};

  return Fibonacci(n - 1) + Fibonacci(n - 2);
}

Fibonacci(10); // 89
// 尾调递归  function factorial(n, total = 1) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5) // 120

只要在严格模式下,才能使尾调递归函数优化,(由于递归就是使用栈太多,造成溢出,想要优化,就只能减少栈的使用,故使用循环来进行递归)

额外说点:造成内存泄漏的原因:1)使用了递归; 2)使用了小数点,如:0.0000000001;

// 优化尾调递归函数
function trampoline(f) {
  while (f && f instanceof Function) {
    f = f();
  }
  return f;
}
function sum(x, y) {
  if (y > 0) {
    return sum.bind(null, x + 1, y - 1);
  } else {
    return x;
  }
}
trampoline(sum(1, 100000))
// 100001
// 使用蹦床函数也可以优化尾调函数
function tco(f) {
  var value;
  var active = false;
  var accumulated = [];

  return function accumulator() {
    accumulated.push(arguments);
    if (!active) {
      active = true;
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift());
      }
      active = false;
      return value;
    }
  };
}

var sum = tco(function(x, y) {
  if (y > 0) {
    return sum(x + 1, y - 1)
  }
  else {
    return x
  }
});

sum(1, 100000)
// 100001

原理:tco函数是尾递归优化的实现,它的奥妙就在于状态变量active。默认情况下,这个变量是不激活的。一旦进入尾递归优化的过程,这个变量就激活了。然后,每一轮递归sum返回的都是undefined,所以就避免了递归执行;而accumulated数组存放每一轮sum执行的参数,总是有值的,这就保证了accumulator函数内部的while循环总是会执行。这样就很巧妙地将“递归”改成了“循环”,而后一轮的参数会取代前一轮的参数,保证了调用栈只有一层。

递归函数是典型的闭包,因为

时间: 2024-08-05 03:19:33

ES6中的新特性的相关文章

ASP.NET 5与MVC 6中的新特性

差点忘了提一句,MVC 6中默认的渲染引擎Razor也将得到更新,以支持C# 6中的新语法.而Razor中的新特性还不只这一点. 在某些情况下,直接在Web页面中嵌入某些JSON数据的方式可能比向服务端发起一次额外请求的方法更合适.在之前的版本中,实现这一点需要编写一些繁琐的映射代码,然后用某种JSON转换器对数据对象进行序列化,并将结果通过view model进行暴露.而在MVC 6中,以上所有的样板代码都可以简化为一句“@Json.Serialize(Model)”. 在实现图片缓存时,同样

Odoo 的库存管理与OpenERP之前的版本有了很大的不同,解读Odoo新的WMS模块中的新特性

原文来自:http://shine-it.net/index.php/topic,16409.0.html 库存移动(Stock Move)新玩法Odoo的库存移动不仅仅是存货在两个“存货地点”之间的移动的基本概念了,他们可以被“串联”在一起,可以用来生成或改变其对应的拣货单(Picking).链式库存移动被广泛应用在各类库存操作中比如:多步收货或多步发货操作,多仓库间的配.补货操作等:而不仅限于之前OpenERP中MTO供货类型产品的发货等待对应供应商收货这样的链式库存移动的应用场景了.我们会

ArcGIS API For Javascript新版本3.11中的新特性

ArcGIS API For Javascript新版本3.11中的新特性: 更简短的引用URL:如果你正在将用以前的版本的程序更新到新版本的话,这是很重要的. To update your code for version 3.11 references, replace the following URLs accordingly: /3.10/js/dojo/ should now read /3.11/ (note the dropped "/js/dojo") 将你的源码更新

(数据科学学习手札73)盘点pandas 1.0.0中的新特性

本文对应脚本及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 毫无疑问pandas已经成为基于Python的数据分析领域最重要的包,而就在最近,pandas终于迎来了1.0.0版本,对于pandas来说这是一次更新是里程碑式的,删除了很多旧版本中臃肿的功能,新增了一些崭新的特性,更加专注于高效实用的数据分析,本文就将针对pandas 1.0.0在笔者眼中比较重要的特性进行介绍,对于想要完整彻底了解新版

ES6语法的新特性

ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也是使用最多的最新的javaScript语言标准.要查看ES6的支持情况请点此. 在2009年ES5问世以后,javaScript的标准就一直没有更新.从那时起ES标准委员会就已经开始筹划新的ES标准,在2015年发布了ES6.ES6是ECMAScript 的第6个版本. 经过持续几年的磨砺,它已成为

iOS9中开发新特性

iOS9开发中版本的新特性 1. 默认支持https 2. http 需要在plist文件中单独配置,才能在程序中使用http 在Info.plist 中添加 NSAppTransportSecurity类型 Dictionary. 在NSAppTransportSecurity 中添加 NSAllowsArbitraryLoads类型Boolean,值设置为YES. 3. iPad 中可以实现分屏功能. 4. 3D Touch 5. AppThinning,可以给安装包瘦身 如果有不足的地方,

CSS3中的新特性

一.CSS3新属性 1.CSS3边框 边框添加了三种特性,圆角边框border-radius,盒阴影box-shadow,图片边框border-image. 圆角边框border-radius语法:border-radius: 1-4 length|% / 1-4 length|%;默认值:0;. 解释:符号"/"前后分别表示长半轴与短半轴的长度,x轴为长半轴.每个半径的四个值的顺序是:左上角,右上角,右下角,左下角.如果省略左下角,与右上角是相同的.如果省略右下角,与左上角是相同的.

Swift 3 中的新特性

原文:What's New in Swift 3? 作者:Ben Morrow 译者:kmyhy Swift 3 将在下半年退出,对于 Swift 程序员来说,它带来了许多改变. 如果你没有密切关注 Swift Evolution 项目,那么在将代码迁移到 Swift 3 时,你可能不知道它到底有什么改变,以及它会对你的代码带来什么影响.那么你可能需要读一下这篇文章了. 通过本文,我将重点介绍 Swift 3 中的重大改变,这些改变对你的代码有深刻影响.让我们开始吧! 开始 目前,Swift 3

关于ES6的一些新特性的学习

一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2."变量提升"(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) ES6新增:块级作用域变量 1.let定义块级作用域变量 1.没有变量的提升,必须先声明后使用 2.let声明的变量,不能与前面的let,var,conset声明的变量重名 { { //console.log(a)//报错 必须先声明再使用 let a = 10;//只在当前大括号可以使用