ES6 中函数和String

1.String

1. 实现了遍历器接口使得字符串可以被for...of循环遍历。
2. 模板字符串

---

1.

names="ASDF"
for (const i of names) {
    console.log(i);
}
A
S
D
F

2.模板字符串：使用反引号所写的字符串，里面可以写js 表达式。

let name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);
let s=`In JavaScript '\n' is a line-feed.`
console.log(s);
//Hello Bob, how are you today?
//In JavaScript '
//' is a line-feed.

${} 里面实际上就是js的表达式，所以可以写值获取，也可以也函数调用，又或者a+b..。需要注意写法是反引号进行括起来！

3.判断是否具有指定字符串的方法 includes(), startsWith(), endsWith() 。

JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。

let s2 = 'Hello world!';

console.log(s2.startsWith("He")); // true
console.log(s2.startsWith("e",1));// true
console.log(s2.includes("w"));// true

startsWith(), endsWith() 的第二个参数是字符开始计算的位置。

2.ES6中对函数的改进

1.函数可以指定默认值。

但是需要注意的是一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域，但是这个作用域其实理解为只是在执行函数参数语句的时候存在。

参考： ES6 入门教程  

 let x=3
 function F(s=x){
     let s=3 // SyntaxError: Identifier 's' has already been declared
 }

上面的代码会报错是因为s 这个变量在参数里面已经有了，同一个变量let  不能连续在一个作用域里面声明两次。

let x=3
function F(s=x){
   let x=3
   console.log(s); // 3
}
F()

但是再次声明x 没有问题。

我认为这里并没有产生一个单独的作用域。如上面的let s=3 // SyntaxError: Identifier 's' has already been declared 。 说明参数和括号里面的始终在一个作用域。但是注意下面的例子！

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3

输出为3 , 等价写法：

{
    var x ;
    y=function() { x = 2; }
    {
        let x = 3;
        y();
        console.log(x);//3
    }
}

我个人认识这里是ES5 里面的 var 在函数作用域里面生效造成的。额，只能记住吧，有合理的解释请在下面评论。

2. rest 参数

代码：

function F(...values) {
    console.log(values); // [ 2, 5, 3, 'xxx' ]
}
  
F(2, 5, 3,"xxx")

function show(){
    console.log(arguments); // [Arguments] { '0': 'x' }
    console.log(Array.from(arguments) ); // [ 'x' ]
}
show('x',1,2)

ES5 里面函数的参数保存在一个类似数组的对象里面，可以通过Array对象把其数组的值取出来。而ES6采用了类似Java 里面的可变长度的参数列表。直接把不同类型的参数保存在数组里面。

3.箭头函数

目的：简写

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

注意：

箭头函数里面的this 是固定等于定义函数的外部对象。不同于函数本身，this是谁调用的自己就指向谁，而是固定的。如下：

var id = 21;
names="小李"
function foo() {
    var id=33
    setTimeout(() => {
      console.log('id:', this.id);// undefined
      console.log(this.names); // "小李"
    }, 100);
}

由于names 前面没有使let,var 所以会成为gloabalThis （浏览器里是Window对象）对象的属性。而我们在调用函数foo的时候，函数的调用者，函数内部的this就是gloabalThis对象。所以箭头函数的this等于外部函数的this,也就是globalThis 对象。

因为setTimeout 的这个函数本身就是globalThis这个对象的，所以看下面的例子：

var id = 21;
names="小李"
function foo() {
    var id=33
    setTimeout(() => {
      console.log('id:', this.id);// id: 15
      console.log(this.names); // JK
    }, 100);
}
foo.call({id:15,names:"JK"})

 这个时候就可以得出，箭头函数的this等于定于它的环境里面的this。

因此：

1:不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。

2:不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3:不可以使用yield命令，因此箭头函数不能用作 Generator 函数。