ESMAScript6(1)-阿里云开发者社区

一:变量与字符串

a:let

let是ES6中新增关键字。

它的作用类似于var，用来声明变量，但是所声明的变量，只在let命令所在的代码块内有效。

1. if(true){

2. var a =1;

3. let b =2;

4. }

5. document.write(a);

6. document.write(b); // 报错：ReferenceError:b is not defined

b:const

const 声明的是常量，一旦声明，值将是不可变的。

1.  const PI =3.1415;

2.  PI // 3.1415

3.

4.  PI =3;

5.  PI // 3.1415

6.

7.  const PI =3.1;

8.  PI // 3.1415

const 也具有块级作用域

1.  if(true){

2.    const max =5;

3.  }

4.  document.write(max);  // ReferenceError 常量MAX在此处不可得

const 不能变量提升（必须先声明后使用）

1.  if(true){

2.    document.write(MAX);// ReferenceError

3.    const MAX =5;

4.  }

const 不可重复声明

1.  var message ="Hello!";

2.  let age =25;

3.

4.  // 以下两行都会报错

5.  const message ="Goodbye!";

6.  const age =30;

const 指令指向变量所在的地址，所以对该变量进行属性设置是可行的（未改变变量地址），如果想完全不可变化（包括属性），那么可以使用冻结。

1.  const C1 ={};

2.  C1.a =1;

3.  document.write(C1.a);// 1

4.  C1 ={};  // 报错  重新赋值，地址改变

5.

6.  //冻结对象，此时前面用不用const都是一个效果

7.  const C2 =Object.freeze({});

8.  C2.a =1;//Error,对象不可扩展

9.  document.write(C2.a);:const

c:是否包字符串的三种字符串

　　传统上，JavaScript只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

1. var str="Hello world!";

3. str.startsWith("Hello")// true

4. str.endsWith("!")// true

5. str.includes("o")// true

这三个方法都支持第二个参数，表示开始搜索的位置。

1. var str="Hello world!";

3. str.startsWith("world",6)// true

4. str.endsWith("Hello",5)// true

5. str.includes("Hello",6)// false

上面代码表示，使用第二个参数n时，endsWith 的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

d:repeat()原字符串重复

repeat()返回一个新字符串，表示将原字符串重复n次。

1.  var str ="x";

2.  str.repeat(3)// "xxx"

3.

4.  var str1 ="hello";

5.  str1.repeat(2)// "hellohello"

e:``模版字符串

模板字符串提供了3个有意思的特性。

模板字符中，支持字符串插值：

1.  let first ='hubwiz';

2.  let last='汇智网';

1.  document.write(`Hello ${first} ${last}!`);

3.  // Hello hubwiz 汇智网!

模板字符串可以包含多行：

1.  let multiLine =`

2.      This is

3.      a string

4.      with multiple

5.      lines`;

6.      document.write(multiLine);

二:数值

a:值是否无穷,NaN

ES6在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法，用来检查Infinite和NaN这两个特殊值。

Number.isFinite()用来检查一个数值是否非无穷（infinity）。

1.  Number.isFinite(15);// true

2.  Number.isFinite(0.8);// true

3.  Number.isFinite(NaN);// false

4.  Number.isFinite(Infinity);// false

5.  Number.isFinite(-Infinity);// false

6.  Number.isFinite("foo");// false

7.  Number.isFinite("15");// false

8.  Number.isFinite(true);// false

Number.isNaN()用来检查一个值是否为NaN。

1.  Number.isNaN(NaN);// true

2.  Number.isNaN(15);// false

3.  Number.isNaN("15");// false

4.  Number.isNaN(true);// false

b:值是否整数

Number.isInteger()用来判断一个值是否为整数。需要注意的是，在JavaScript内部，整数和浮点数是同样的储存方法，所以3和3.0被视为同一个值。

1.  Number.isInteger(25)// true

2.  Number.isInteger(25.0)// true

3.  Number.isInteger(25.1)// false

4.  Number.isInteger("15")// false

5.  Number.isInteger(true)// false

c:Math对象

Math对象新增的方法，都是静态方法，只能在Math对象上调用。

Math.trunc()：去除一个数的小数部分，返回整数部分。

1.  Math.trunc(4.1)// 4

2.  Math.trunc(-4.1)// -4

注意：对于空值和无法截取整数的值，返回NaN。

Math.sign()：判断一个数到底是正数、负数、还是零。

返回五种值：参数为正数，返回+1；参数为负数，返回-1；参数为0，返回0；参数为-0，返回-0;其他值，返回NaN。

1.  Math.sign(-5)// -1

2.  Math.sign(5)// +1

3.  Math.sign(0)// +0

4.  Math.sign(-0)// -0

5.  Math.sign('hubwiz');// NaN

Math.cbrt：计算一个数的立方根。

1.  Math.cbrt(-1);// -1

2.  Math.cbrt(0);  // 0

3.  Math.cbrt(2);  // 1.2599210498948732

Math.fround：返回一个数的单精度浮点数形式。

1.  Math.fround(0);     // 0

2.  Math.fround(1.337);// 1.3370000123977661

3.  Math.fround(NaN);   // NaN

Math.hypot：返回所有参数的平方和的平方根。

1.  Math.hypot(3,4);        // 5

2.  Math.hypot(3,4,5);     // 7.0710678118654755

3.  Math.hypot();            // 0

4.  Math.hypot(NaN);         // NaN

5.  Math.hypot(3,4,'foo');// NaN

6.  Math.hypot(3,4,'5');   // 7.0710678118654755

7.  Math.hypot(-3);          // 3

如果参数不是数值，Math.hypot方法会将其转为数值。只要有一个参数无法转为数值，就会返回NaN。

三:数组

a:将两类对象转为真正的数组

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

一个转换类数组对象到数组的一个示例：

1.  let list = document.querySelectorAll('ul.fancy li');

2.

3.  Array.from(list).forEach(function(li){

4.    document.write(li);

5.  });

上面代码中，querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。

任何有length属性的对象，都可以通过Array.from方法转为数组。

1.  let array =Array.from({0:"a",1:"b",2:"c", length:3});

2.  document.write(array);    // [ "a", "b" , "c" ]

Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理。

1.  let array =[0,1,2,3,4];

2.  let arrNew =Array.from(array, x => x * x);

3.  console.log(arrNew);

4.  // 等同于

5.  let arrNew =Array.from(array).map(x => x * x);

下面的例子将数组中布尔值为false的成员转为0。

1.  Array.from([1,,2,,3],(n)=> n ||0)

2.  // [1, 0, 2, 0, 3]

Array.from()的一个应用是，将字符串转为数组，然后返回字符串的长度。这样可以避免JavaScript将大于\uFFFF的Unicode字符，算作两个字符的bug。

1.  function countSymbols(string){

2.    returnArray.from(string).length;

3.  }

b:将值转为数组

Array.of方法用于将一组值，转换为数组。

1.  Array.of(3,11,8)// [3,11,8]

2.  Array.of(3)// [3]

3.  Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

1.  Array()// []

2.  Array(3)// [undefined, undefined, undefined]

3.  Array(3,11,8)// [3, 11, 8]

上面代码说明，只有当参数个数不少于2个，Array()才会返回由参数组成的新数组。

C：找出第一个符合条件的数组成员和位置

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

1.  let array =[1,4,-5,10].find((n)=> n <0);

2.  document.write("array:", array);

上面代码找出数组中第一个小于0的成员。

1.  let array =[1,5,10,15].find(function(value, index, arr){

2.    return value >9;

3.  })

4.  document.write(array);  // 10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

　　数组实例的findIndex方法，用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

1.  let index =[1,5,10,15].findIndex(function(value, index, arr){

2.    return value >9;

3.  })

4.  document.write(index);  // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

另外，这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。

1.  [NaN].indexOf(NaN)

2.  // -1

3.

4.  [NaN].findIndex(y =>Object.is(NaN, y))

5.  // 0

上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

d：fill()填充数组

fill()使用给定值，填充一个数组。

1.  let arr =['a','b','c'].fill(7)

2.  document.write(arr);  // [7, 7, 7]

3.

4.  let newArr =newArray(3).fill(7)

5.  document.write(newArr);  // [7, 7, 7]

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

fill()还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

1.  let newArr =['a','b','c'].fill(7,1,2)

2.  document.write(newArr);   // ['a', 7, 'c']

e：三个新方法

ES6提供三个新的方法：

entries()
keys()
values()

用于遍历数组。它们都返回一个遍历器，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

1. for(let index of ['a','b'].keys()){

2. document.write(index);

3. }

4. // 0

5. // 1

7. for(let elem of ['a','b'].values()){

8. document.write(elem);

9. }

10.// 'a'

11.// 'b'

12.

13.for(let [index, elem] of ['a','b'].entries()){

14. document.write(index, elem);

15.}

16.// 0 "a"

17.// 1 "b"

本文转自沉迷学习中 51CTO博客，原文链接：http://blog.51cto.com/12907581/1977856，如需转载请自行联系原作者

ESMAScript6(1)

热门文章

最新文章

相关电子书