ES6-函数

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

//这样的书写更加简洁
let name = '尚硅谷';
let change = function(){
    console.log('我们可以改变你!!');
}

const school = {
    name,
    change,
    improve(){
        console.log("我们可以提高你的技能");
    }
}

console.log(school);

函数参数默认值

//ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        // function add(a,c=10,b) {
        //     return a + b + c;
        // }
        // let result = add(1,2);
        // console.log(result);

        //2. 与解构赋值结合
        function connect({host="127.0.0.1", username,password, port}){
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            host: 'atguigu.com',
            username: 'root',
            password: 'root',
            port: 3306
        })

rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

// ES5 获取实参的方式
// function date(){
//     console.log(arguments);
// }
// date('白芷','阿娇','思慧');

// rest 参数
// function date(...args){
//     console.log(args);// filter some every map 
// }
// date('阿娇','柏芝','思慧');

// rest 参数必须要放到参数最后
// function fn(a,b,...args){
//     console.log(a);
//     console.log(b);
//     console.log(args);
// }
// fn(1,2,3,4,5,6);

箭头函数

箭头函数的注意点:

1. 如果形参只有一个，则小括号可以省略
2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
3. 箭头函数 this 指向声明时所在作用域下 this 的值
4. 箭头函数不能作为构造函数实例化
5. 不能使用 arguments

// ES6 允许使用「箭头」（=>）定义函数。
//声明一个函数
// let fn = function(){

// }
// let fn = (a,b) => {
//     return a + b;
// }
//调用函数
// let result = fn(1, 2);
// console.log(result);


//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName(){
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}

//设置 window 对象的 name 属性
window.name = '尚硅谷';
const school = {
    name: "ATGUIGU"
}

//直接调用
// getName();
// getName2();

//call 方法调用
// getName.call(school);
// getName2.call(school);

//2. 不能作为构造实例化对象
// let Person = (name, age) => {
//     this.name = name;
//     this.age = age;
// }
// let me = new Person('xiao',30);
// console.log(me);

//3. 不能使用 arguments 变量
// let fn = () => {
//     console.log(arguments);
// }
// fn(1,2,3);

//4. 箭头函数的简写
//1) 省略小括号, 当形参有且只有一个的时候
// let add = n => {
//     return n + n;
// }
// console.log(add(9));
//2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
// 而且语句的执行结果就是函数的返回值
let pow = n => n * n;
    
console.log(pow(8));


//需求-1  点击 div 2s 后颜色变成『粉色』
//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener("click", function(){
//保存 this 的值
// let _this = this;
//定时器
setTimeout(() => {
    //修改背景颜色 this
    // console.log(this);
    // _this.style.background = 'pink';
    this.style.background = 'pink';
}, 2000);
});

//需求-2  从数组中返回偶数的元素
const arr = [1,6,9,10,100,25];
// const result = arr.filter(function(item){
//     if(item % 2 === 0){
//         return true;
//     }else{
//         return false;
//     }
// });

const result = arr.filter(item => item % 2 === 0);

console.log(result);

// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法