JavaScript ES6新增和扩展---1

1.ES6 的新增声明变量

1.1 let

ES6中新增的用于声明变量的关键字

1.let声明的变量只在所处于的块级作用域有效

if (true) { 
  let a = 10;
}
console.log(a) // a is not defined

2.不存在变量提升

console.log(a); // a is not defined 
let a = 20; 

3.暂时性死区

var tmp = 123;
if (true) {
 tmp = 'abc';
 let tmp;
}

1.2 const

作用：声明常量，常量就是值（内存地址）不能变化的量。

1.具有块级作用域

if (true) {
 const a = 10; }
console.log(a) // a is not defined

2.声明常量时必须赋值

const PI; // Missing initializer in const declaration

3.常量赋值后，值不能修改

const声明基础数据类型：

const PI = 3.14;
PI = 100; // Assignment to constant variable.

 const声明复杂数据类型：

const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // Assignment to constant variable.

2. 函数参数 

函数参数的使用细节，能够提升函数应用的灵活度。

2.1 动态参数

需求：要求把每个传入的实参获取到并且求和

function getSum() {
  let sum = 0
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i]
  }
  console.log(sum)
 }
getSum(2, 3, 4)
getSum(1, 2, 3, 4, 2, 2, 3, 4)

使用：arguments
arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

总结：

1. arguments 是一个伪数组，只存在于函数中
2. arguments 的作用是动态获取函数的实参
3. 可以通过for循环依次得到传递过来的实参

3.2.2. 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
语法：

function getSum(a, b, ...arr) {
  console.log(arr)  // 使用的时候不需要写 ...
}

总结：

1. ... 是语法符号，置于最末函数形参之前，用于获取多余的实参
2. 借助 ... 获取的剩余实参，是个真数组

3.箭头函数

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

3.1 基础语法

1.ES6中新增的定义函数的方式。

() => {} 
const fn = () => {}

2.函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function sum(num1, num2) {
  return num1 + num2; 
}
const sum = (num1, num2) => num1 + num2;

3.如果形参只有一个，可以省略小括号

function fn (v) {
  return v; 
}
const fn = v => v;

4.如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值

// 普通函数
const fn1 = function(x, y){
  return x + y
}
console.log(fn1(1, 2)) // 3

// 箭头函数
const fn2 = (x, y) => x + y
console.log(fn2(1, 2)) // 3

3.2 箭头函数参数

1. 普通函数有arguments 动态参数
2. 箭头函数没有 arguments 动态参数，但是有 剩余参数 ..args

const getSum = (...arr) => {
  let sum = 0
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
  return sum
}
const result = getSum(2, 3, 4)
console.log(result) // 9

3.3 箭头函数this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

const fn = () => {
  console.log(this)  // window
}
fn()
// 对象方法箭头函数 this
const obj = {
  uname: '张三',
  sayHi: () => {
    console.log(this)  // this window
  }
}