ES6知识点(一)

2016-10-29 wilsonIs 更多博文 » 博客 » GitHub »

原文链接 https://wilsonis.github.io/blog/posts/es6_1
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


一. ES6的历史:

  • 1996年,Netscape提交javascript给ECMA组织
  • 1997年,发布ECMAScript 1.0版
  • 1998年,发布ECMAScript 2.0版
  • 1999年,发布ECMAScript 3.0版(得到巨大的成功)
  • 2000年,ECMAScript 4.0版因版本太激进而没有通过
  • 2007年,ECMAScript 4.0版草案发布
  • 2008年,中止ECMAScript 4.0的开发,发布ECMAScript 3.1版本
  • 2009年,ECMAScript 5.0版发布
  • 2011年6月,ECMAScript 5.1版发布,且成为ISO国际标准
  • 2013年12月,ECMAScript 6草案发布
  • 2015年6月,ECMAScript 6正式通过(由于滚动性的升级,正式命名ES2015)
  • 2015年6月,发布ES2016,往后则为ES2017,ES6成为泛指ES 5.1版本之后的下一代标准。 # 二. Babel转码器 # Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。 # 三. let和const #
    • ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
  • let实际上为JavaScript新增了块级作用域。
  • 块级作用域的出现,实际上使得获得广泛应用的立即执行匿名函数(IIFE)不再必要了。
  • const声明一个只读的常量。一旦声明,常量的值就不能改变。
  • const的作用域与let命令相同:只在声明所在的块级作用域内有效。

ES6一共有6种声明变量的方法。包括var function let const import class。

为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

四.字符串扩展

  1. 字符串新增方法

    • codePointAt():处理4个字节的字符,而charCodeAt则只能处理两个字节的字符,这是二者的不同。
    • String.fromCodePoint():能处理大于0xFFFF的字符,而String.fromCharCode方法则不能。
    • for...of:遍历器接口,可以和for...in进行对比。
    • at():不同于charAt,at方法可以识别大于0xFFFF的字符。
    • includes(),startsWith(),endsWith():在indexOf的基础上新增的3个方法,分别的作用是查找某个字符串、判断字符串是否在头部和判断字符串是否在尾部。第二个参数,均为搜索的索引位置。
    • repeat():返回新字符串,表示将原字符串重复n次。
    • padStart(),padEnd():字符串补全长度的功能。分别用于头部补全和尾部补全。如:

      'x'.padStart(5, 'ab') // 'ababx'
      
      'x'.padStart(4, 'ab') // 'abax'
      
      'x'.padEnd(5, 'ab') // 'xabab'
      
      'x'.padEnd(4, 'ab') // 'xaba'
      
  2. 模板字符串

模板字符串是增强版的字符串,用反引号(`)标识,可以用来定义多行字符串,且能在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模板字符串的功能:

  • 可以嵌入变量
  • 可以嵌入表达式
  • 可以调用函数
  • 能多层嵌套
  • 模板字符串的大括号内部,就是执行的js代码
  • 通过模板字符串可以生成模板
  • String.raw方法

String.raw方法是处理模板字符串的基本方法,它会将模板字符串中的所有变量替换,并进行转义。

五、数组的扩展

  1. Array.from()

Array.from用于将类似数组的对象以及可遍历(也叫可迭代)的对象(如nodelist,querylist等)转为真正的数组。如:

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3 //必须有length属性
    };

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

以及将nodelist或arguments对象转为真正的数组:

// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
  console.log(p);
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

扩展运算符(...)也可以将某些数据结构转为数组。扩展运算符背后调用的是遍历器接口(Symbol.iterator)。

// arguments对象
function foo() {
  var args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]
  1. Array.of()

Array.of是将一组值,转换为数组,它总是返回参数值组成的数组。

  1. 数组实例的find()和findIndex()方法

find方法的参数是一个回调函数,用于找出第一个符合条件的数组成员。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex方法则是返回第一个符合条件的数组成员的位置,如果都不符合条件,则返回-1。类似于字符串中的indexOf方法。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2
  1. 数组实例的entries(),keys()和values()方法

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. 数组实例的includes()方法

等同于字符串的includes()方法,此处略去。

  1. 数组空位的处理

一个数组中,如果某个索引没有任何值,则代表一个数组的空位,返回的是undefined。ES5对空位的处理,已经很不一致了,大多数情况下会忽略空位。

  • forEach(), filter(), every() 和some()都会跳过空位。
  • map()会跳过空位,但会保留这个值
  • join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。

ES6则明确将空位转为undefined。新增方法如Array.from,...运算符,copyWithin,fill,for...of等都将数组的空位当做undefined来处理,而不会忽略跳过。