【ES6】--es6新特性2

一、声明方式

1.1反引号的声明方式

1.声明的反引号``模板字符串

2.内容中可以直接出现换行符

3.可以直接进行变量的拼接

1.2对象的简化写法

es6允许在-大括号里面，直接写入变量和函数，作为对象的属性和方法

<script>
	let name ="小李";
    let change = function (){
        console.log("这里可以改变");
    }
    const school = {
        name, //name:name
        change,//change:change
        improve(){//improve:function(){}
            console.log("这是一个函数")
        }
    }
    console.log(school)
</script>

1.3箭头函数

不能用于构造函数，箭头函数没有prototype，没有自己的this指向，没有自己的argument，this指向会指向离他最近的那个作用域（普通函数的this，指向调用它的对象）

<script>
	//函数的声明
    //let fn = function (){
    //    
    //}
    let fn = (a,b)=>{
        return a+b;
    }
    //函数的调用
    console.log(fn(1,2));
</script>

区别：

1.this是静态的，this始终指向函数声明时在作用域下的this的值

2.不能作为构造函数实例化对象

3.不能使用arguments变量

4.箭头函数的简写

​ 1）省略小括号，当形参有且只有一个的时候

<script>
	let add = n => {//let add = (n) =>{}
        return n+n;
    }
    console.log(add(9));
</script>

​ 2）省略花括号的情况，当代码体只有一条语句的情况，此时return必须省略，而且语句的执行结果结束函数的返回值

<script>
	let add = n => n+n;
    console.log(add(9));
</script>

1.4实践 点击改变颜色

<style>
    .box{
        width:200px;
        height:200px;
        background:#58a;
    }
</style>
<div class="box"></div>
<script>
	//需求。点击div两秒之后变成粉色
    let box = document.querySelector(".box");
    box.addEventListener("click",function(){
        //保存this的值
        let that = this;
        //定时器的内容
        //setTimeout(function(){
            //修改this的背景颜色
            //that,style.background ="pink";
       // },2000);
        setTimeout(()=>{
            this.style.background ="pink";
        },2000)
    })
    
    
    //需求2 从数组中返回偶数的元素
    const arr = [1,6,9,10,100,25];
    //const result = arr.filter(function (item){
    // if(ietm %2==0){
    //		return true;
    //}else{
    //		return false;
    //}
    //})
    const result = arr.filter(item=>item%2==0);
    console.log(result);
</script>

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

1.5es6允许给函数参数赋初始值

1.形参初始值，具有默认值的参数，一般位置要靠后

2.默认值与解构赋值相结合

1.6es6的扩展运算符

…扩展运算符能将数组转化为逗号分割的参数序列

<script>
	const tfboys = ["易烊千玺","王源","王俊凯"];
    
    //声明一个函数
    function chunwan(){
        console.log(arguments);
    }
    chunwan(...tfboys);
    //结果："易烊千玺","王源","王俊凯"
</script>

应用：

​ 1.数组的合并

<script>
	//1.数组的合并
    const a = [1,2,3];
    const b = [4,5,6];
    //const add = a.concat(b);//concat(a,b)
    const add = [...a,...b];
    console.log(add)
</script>

​ 2.数组的克隆（浅拷贝）

<script>
	const a =[1,2,3];
    const b = [...a];//[1,2,3]
</script>

​ 3.将伪数组转化为真正的数组

<div></div>
<div></div>
<div></div>
<script>
	const divs = document.querySelectorAll("div");
    const divArr = [...divs];
    console.log(divArr)
</script>

1.7数据类型

symbol数据类型，表示独一无二的值

<script>
	//创建1
    let  s = Symbol();
    //创建2，这是一个对象
    let s2 = Symbol.for();
    //这种括号中都可以写入字符串的内容
    
    //不能与其他数据进行运算
</script>

创建对象属性

<script>
	//扩展某个函数的属性和方法，不确定该对象是否可以使用该对象
    let game ={.....};
    //可以借助symbol来完成
    
    //声明一个对象
    let methods ={
        up:Symbol(),
        dowm:Symbol()
    };
    game[methods.up]=function(){
        console.log("可以改变上升")
    }
    game[methods.down]=function(){
        console.log("可以改变下降");
    }
    console.log(game)
    
    //另一种方法
    let youxi = {
        name:"狼人杀",
        [Symbol("say")]:function(){
            console.log("可以发言")
        }
        //添加描述性的内容say
    }
</script>

1.8迭代器

Iterator接口，为各种不同的数据结构提供统一的访问机制，任何数据只要部署Iteror接口，就可以完成遍历操作

1.9生成器

其实就是一个特殊的函数，异步编程，纯回调函数 node fs ajax

<script>
	//生成器其实就是一个特殊的函数
    //异步编程 纯回调函数
    //yield函数代码的分隔符
    function * gen(){
        console.log("hello generator");
        yield '这是一个分隔符';
        //next上一个yield参数的返回结果
    }
    let iterator = gen();
    //不能直接调用打印函数，需要调用其中的next方法进行打印
    iterator.next();
</script>

异步编程

<script>
	//异步编程 文件操作、网络操作（ajax、request）数据库操作
    //1s后控制台输出111  2s后输出222 3s后出书333
    
</script>