ES6新语法快速入门学习教程1--基础知识

1.let

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

if(true){
   var a = 1;
   let b = 2;
 }
 // document.write(a)
 // document.write(b);  // 报错：ReferenceError: b is not defined

2.const

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

const PI = 3.1415;
console.log(PI);
PI = 3;
console.log(PI);

2.2const 也具有块级作用域

if (true) {
  const max = 5;
}
document.write(max);  // ReferenceError 常量MAX在此处不可得

2.3 const 不可重复声明

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

3.是否包含字符串三种新方法

3.1传统上，JavaScript只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。
3.1 includes()：返回布尔值，表示是否找到了参数字符串。
3.2 startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
3.3 endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var str = "Hello world!";
str.startsWith("Hello") // true
str.endsWith("!") // true
str.includes("o") // true

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

var str = "Hello world!";
str.startsWith("world", 6) // true
str.endsWith("Hello", 5) // true
str.includes("Hello", 6) // false

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

4.repeat()原字符串重复

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

var str = "x";
document.write(str.repeat(3)) // "xxx"
var str1 = "hello";
document.write(str1.repeat(2)) // "hellohello"

5.模板字符串

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

let first = '我叫xxx';
let last = '我是搬砖工';
document.write(`Hello ${first} ${last}!`);   //注意引号

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

let multiLine = `
    This is
    a string
    with multiple
    lines`;
document.write(multiLine);

6.Array.from()

6.1 Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-likeobject）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
下面是一个类似数组的对象，Array.from将它转为真正的数组。

 let arrayLike = {
     '0': 'a',
     '1': 'b',
     '2': 'c',
     length: 3
 };
// ES5的写法    这句话相当于Array.prototype.slice.call(arrayLike)
//目的是将arrayLike对象的数组提出来转化为数组，arrayLike本身并不是数组而是对象
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
console.log(arr1);
 // ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
console.log(arr2);

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

let array = [0,1,2,3,4];
let arrNew = Array.from(array, x => x * x);
console.log(arrNew);
// 等同于
let arrNew1 = Array.from(array).map(x => x * x);
console.log(arrNew1);

7.Array.of()

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

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

8.数组实例的find()和findIndex()

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

let array = [1, 4, -5, 10,-9].find((n) => n < 0);
document.write("array:", array);
//上面代码找出数组中第一个小于0的成员。

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

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

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

let index = [1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
document.write(index);  // 2

9.fill()填充数组 (了解)

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

let arr = ['a', 'b', 'c'].fill(7)
document.write(arr);  // [7, 7, 7]
console.log(arr);
let newArr = new Array(3).fill(7)
// document.write(newArr);  // [7, 7, 7]

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。 fill()还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

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

10.entries() keys() values() -ES6提供三个新的方法

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

for (let index of ['a', 'b'].keys()) {
    document.write(index); console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
    document.write(elem);console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
    document.write(index, elem); console.log(index, elem);
}
// 0 "a"
// 1 "b"