352 ES6语法：let与const，字符串新方法，对象简写，函数默认参数（备胎），箭头函数

let与const

ES6中提供了两个声明变量的关键字：const和let

let的使用

ES6 新增了let命令，用来声明变量。它的用法类似于var。

let声明的变量只有在当前作用域有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

不存在变量提升

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

不允许重复声明

let a = 10;
let a = 1;//报错 Identifier 'a' has already been declared

// let  const 定义变量 关键字
// var 定义变量 


// var num = 100;

// // function num() {
// //     console.log('你好');
// // }
// function num() {
//     console.log('你好');
// }

// console.log(num);



// 1000行代码
// console.log(num);


// var num = 100;

// // 1000行代码 
// console.log(num);


// let定义变量   
// 特点：
// 1- 变量不会提升(先定义后使用)
// 2- 变量不能重复定义 
// 3- let const定义的变量都是块级作用域  {}


// 变量不会提升
// console.log(num);

// let num = 100;
// console.log(num);

// 变量不能重复定义 

// let num = '呵呵';
// function num  () {}


// let 定义的变量都是块级作用域
// var 之前： 全局作用域  函数作用域 
// {}就是一个块 
let num = 10;
if (num > 5) {
    // var test = '测试数据';
    let test = '测试数据1';
    console.log(test);    
}
// console.log(test);

// let练习题
// for循环 用定时器每秒钟输出一个i的值
// for (var i = 0; i < 10; i++) {
//     (function (i) {
//         setTimeout(function () {
//             console.log(i);
//         }, i*1000)
//     })(i);
// }
// var i = 0; //全局的i
// for (; i < 10; i++) {
//     setTimeout(function () {
//         console.log(i);        
//     }, i * 1000);
// }



for (let i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log(i);        
    }, i * 1000);
}

// 伪代码
for (var i = 0; i < 10; i++)
{ 
    let i = 0;
    setTimeout(function () {
        console.log(i);        
    }, i * 1000);
}

{ 
    let i = 1;
    setTimeout(function () {
        console.log(i);        
    }, i * 1000);
}

{ 
    let i = 2;
    setTimeout(function () {
        console.log(i);        
    }, i * 1000);
}
{ 
    let i = 3;
    setTimeout(function () {
        console.log(i);        
    }, i * 1000);
}
// 。。。。

const的使用

const声明一个只读的常量。常量：值不可以改变的量

const声明的量不可以改变

const PI = 3.1415;
PI = 3; //报错

const声明的变量必须赋值

const num;

如果const声明了一个对象，仅仅保证地址不变

const obj = {name:'zs'};
obj.age = 18;//正确
obj = {};//报错

其他用法和let一样

1. 只能在当前代码块中使用
2. 不会提升
3. 不能重复

let与const的使用场景

1. 如果声明的变量不需要改变，那么使用const
2. 如果声明的变量需要改变，那么用let
3. 学了const和let之后，尽量别用var

ES6语法 - 字符串新方法

  1. startsWith()  是否以谁开头  布尔类型
  2. endsWith()   是否以谁结尾
  3. includes()     是否包含

let str = "abcdef"
console.log(str.startsWith('ab'));  // true
console.log(str.startsWith('bb'));  // false
console.log(str.endsWith('ef'));    // true
console.log(str.endsWith('ff'));    // false
console.log(str.includes('ab'));    // true
console.log(str.includes('bc'));    // true

ES6语法- 对象简写

1- 在对象中，如果属性名和变量名相同的话，可以省略一个
2- 在对象中，方法也可以简写，不写function

    let name = 'zs'
    let age = 18 

    // 在对象中，如果属性名和变量名相同的话，可以省略一个
    // 在对象中，方法也可以简写

    let obj = {
      name: name,
      age: age
    }

    let obj = {
      gender: '男',
      name,
      age
    }
    
    // 在对象中的方法可以简写
    // 不写function
    let obj = {
      // say: function () {}
      say(n1) {
        console.log(n1)
      },
      goodBye() {
        console.log('byebye')
      }
    }
    
	//调用
    obj.say(1)
    obj.goodBye()

ES6语法-函数默认参数（备胎）

 es6的函数允许直接传递默认参数
 当调用函数未传递参数时会使用默认参数

// 函数在定义同时可以设置默认参数
// function add(n1, n2) {
//     n1 = n1 || 0;
//     n2 = n2 || 0;
//     console.log(n1+n2);    
// }

// 用户不传参数是 取默认值进行运算
function add(n1 = 0, n2 = 0) {
    console.log(n1 + n2);
    
}

add(); // 0
add(1); // 1
add(1, 2); // 3

ES6语法-箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

基本使用

var fn = function(x, y) {
    console.log(x + y);
}

相当于
//语法： (参数列表) => {函数体}
var fn = (x, y) => {
    console.log(x + y);
}

// =>  箭头函数  在定义函数时 使用  箭头进行定义
// 箭头函数 就是一个函数表达式  
// let 变量名 = function (参数) {函数体}
// 箭头函数定义： 
// let 变量名 = (参数) => {函数体}

// let add = function (n1, n2) {
//     console.log(n1 + n2);
// }

// let add1 = (n1, n2) => {
//     console.log(n1 + n2);
// }


// add1(100, 50);

//big 接受一个参数， 返回这参数2倍

let big = (n1) => {
    return n1 * 2;
}

console.log(big(50));

参数详解

如果没有参数列表，使用()表示参数列表

var sum = () => {
    console.log('哈哈')
};
// 等同于：
var sum = function() {    
    console.log('哈哈')
};

如果只有一个参数，可以省略()

// 等同于：
var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

如果有多个参数，需要使用()把参数列表括起来

var sum = function(n1, n2) {    
    console.log('哈哈')
};

var sum = (n1, n2) => {
    console.log('哈哈')
};

let add = function (n1, n2) {
    console.log(n1 + n2);    
}

let big = function (n1) {
    console.log(n1 *2 );    
}


let add1 = (n1, n2) => {
    console.log(n1 + n2);    
}

let big = n1 => {
    console.log(n1 * 2);
}

let big = n1 => console.log(n1 * 2);

返回值详解

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来

var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

如果函数体只有一行一句，并且需要返回这个值，那么可以省略{}和return

var fn = function(n1, n2) {
    return n1 + n2;
}

var fn = (n1, n2) => n1 + n2;

// let add = function (n1, n2) {
//     return n1 + n2;    
// }

// let big = function (n1) {
//     console.log(n1 * 2); 
//     return n1 * 2;
// }

// let big2 = function (n1) {    
//     return n1 * 2;
// }


// let add = (n1, n2) => {
//     return n1 + n2;
// }

let add = (n1, n2) => n1 + n2;

let big = n1 => {
    console.log(n1 * 2);
    return n1 * 2;
}

let big2 = n1 => n1 * 2;

// console.log(big2(100));


let test = () => {
    console.log(this); // {}
}

test();

箭头函数练习

有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组

// let arr = [11, 22, 33, 44, 55]; 
//把数组所有的元素放大1倍 
// arr = arr.map(function (v, i, arr) {
//     return v * 2;
// })
// arr = arr.map(function (v) {
//     return v * 2;
// })

// arr = arr.map( (v) => {
//     return v * 2;
// })

// arr = arr.map(v => v * 2);
// console.log(arr);


// 2-有一个数组，[57,88,99,100,33,77],请保留60分以上的成绩，返回一个新的数组
let score = [57, 88, 99, 100, 33, 77];
// let r = score.filter(function (v) {
//     return v > 60;
// });
let r = score.filter(v => v > 60);
// console.log(r);

// 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
let arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10];

// arr = arr.sort(function (a, b) {
//     return a - b;  // 如果 返回大于 0  会互换位置， 否则不就不换位置 
// })

arr = arr.sort((a, b) => b - a);

// console.log(arr);

// 有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
let str = ['a', 'ccc', 'bb', 'dddd'];
// str = str.sort(function (a, b) {
//     return a.length - b.length;
// })

str = str.sort((a, b) => a.length - b.length);
console.log(str);

箭头函数的注意点

箭头函数内部没有this，因此箭头函数内部的this指向了外部的this【最近的外部的this】。
箭头函数不能作为构造函数，因为箭头函数没有this。

【定义一个对象，定时器打招呼】

PS：箭头函数刚开始用，肯定会有点不习惯，但是任何东西都有一个习惯的过程，慢慢接受就好，多用，多练

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <div></div>
    </div>
    <script>
        //   function say () {
        //       console.log(this);
        //   }
        //   say();

        //   let hi = () => {
        //       console.log(this);          
        //   }
        //   hi();


        var obj = {
                name: '哈哈',
                age: 18,
                // say: function () {
                //     console.log(this.name);
                //     console.log(this);
                //     var that = this;
                //     setTimeout(function () {
                //         console.log(this);
                //         console.log(that.age);
                //     }, 1000);
                // }, 
                hi: function() {
                    // this --> obj
                    setTimeout(() => {
                        console.log(this); // obj对象
                        console.log(this.age); // 18
                    }, 1000);
                }
            }
            // obj.say();
        obj.hi();
    </script>
</body>

</html>