第六章 ES6-易微帮

6.1 简介

ES6(ECMAScript6.0)：是通过ECMA-262标准化的脚本程序语言，是JavaScript语言的下一代标准。 2015.6月发布。 ECMAScript是浏览器脚本语言的规范，而各种js语言就是这种规范的具体实现，如：javascript.

6.2 变量的声明

6.2.1 使用let声明参数

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>
       {
        var x = 100;
        let y = 200;
       }
       console.log('--var-->>',x)
       console.log('--let-->>',y)
    </script> 
</body>
</html>

在这里插入图片描述

说明：x可以跨域访问，y不可以跨域访问

1.2.2 let声明的变量不可以多次赋值和使用

在这里插入图片描述

6.2.3 变量提升

 <script>
       {
         console.log(i);
         var i = 10;

         console.log(n);
         let b = 20;
       }      
    </script>

在这里插入图片描述

可以看到var声明的变量可以提升，let不可以

6.2.4 使用const声明变量

不可以修改

<script>
       {
           const i = 10;
           i = 20;
       }      
    </script>

在这里插入图片描述

6.2.5 创建函数

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
    //编写一个函数    
        const show=()=>{
            alert('函数');
        }      
    </script> 
    <button onclick="show()">按钮</button>
</body>
</html>

6.3 结构表达式

6.3.1 数组结构

 <script>   
       //数组结构
       let arr = [1,2,3];  
       let [a,b,c] = arr;
       //输出
       console.log(a,b,c)
    </script>

在这里插入图片描述

6.3.2 对象结构

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
       //对象结构
       const person = {
        name:'leo',
        sex:'boy',
        age:11,
        books:['java','mysql','hadoop']
       }
       const {name,sex,age,books} = person;
       //输出属性的数据
       console.log(name,sex,age,books) ;
    </script> 
</body>
</html>

在这里插入图片描述

属性可以使用别名称

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
       //对象结构
       const person = {
        name:'leo',
        sex:'boy',
        age:11,
        books:['java','mysql','hadoop']
       }
       const {name:username,sex:xb,age:nl,books:ts} = person;
       //输出属性别名的数据
       console.log(username,xb,nl,ts) ;
    </script> 
</body>
</html>

在这里插入图片描述

6.4 字符串扩展

6.4.1 扩展的方法(函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
      //字符串参数
      let params = 'java.txt';
      console.log('前缀',params.startsWith('ja'));
      console.log('后缀',params.endsWith('ja'));
      console.log('包含',params.includes('va'));
    </script> 
</body>
</html>

在这里插入图片描述

6.4.2 字符串模板

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
    // 注意：飘号（反引号）
     let params = `
         <div>
           <span>hello</span>
        </div> ` ;
        //输出
        console.log(params);
    </script> 
</body>
</html>

6.4.3模板添加参数

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
    //参数
    const name = '小明';
    // 注意：飘号（反引号）
     let params = `
         <div>
           <span>hello:${name}</span>
        </div> ` ;
        //输出
        console.log(params);
    </script> 
</body>
</html>

在这里插入图片描述

6.4.4 调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
    //函数
    function fun_name(){
        return '这是一个函数';
    }
    // 注意：飘号（反引号）
     let params = `
         <div>
           <span>hello:${fun_name}</span>
        </div> ` ;
        //输出
        console.log(params);
    </script> 
</body>
</html>

在这里插入图片描述

6.5 函数-优化

6.5.1 函数的默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //函数
        function fun_name(i,n=1){//默认值
            return i+n;
        }  
        //调用
        var sum = fun_name(10);
        //输出
        console.log(sum)  
    </script> 
</body>
</html>

6.5.2 不定参数

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //函数
        function fun_name(...i){
            //判断
            if(i.length>0){
               //循环
               i.forEach(el=>console.log(el))
            }else{
                console.log('无数据：元素')
            }
        }  
        //调用
        var sum = fun_name(1,2,3,4,5);
    </script> 
</body>
</html>

6.5.3 匿名参数

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建函数
        var fun=params=>console.log('参数:',params);
        //调用
        fun(200);
    </script> 
</body>
</html>

6.5.4 如果函数有返回值

如果一行代码可以省略return关键字，但是，不能编写{}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建函数
        var fun=(par1,par2)=>par1+par2;
        //调用
        var sum = fun(200,300);
        console.log(sum)
    </script> 
</body>
</html>

如果使用了{},那么就必须添加return

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建函数
        var fun=(par1,par2)=>{
            //可以编写多行语句
            return par1+par2
        };
        //调用
        var sum = fun(200,300);
        console.log(sum)
    </script> 
</body>
</html>

6.5.5 传递对象

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建了对象
       const person={
            name:'小明',
            books:['java','hadoop','spark']
       }
       //编写函数
       const fun=(obj)=>console.log(obj.name);
       //调用函数
       fun(person);
    </script> 
</body>
</html>

6.5.6 使用结构化方式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建了对象
       const person={
            name:'小明',
            books:['java','hadoop','spark']
       }
       //编写函数
       const fun=({name})=>console.log(name);
       //调用函数
       fun(person);
    </script> 
</body>
</html>

6.6 对象的优化

6.6.1 对象中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建了对象
       const person={
            name:'小明',
            age:11,
            books:['java','hadoop','spark']
       }
      //输出
      console.log('获取key：',Object.keys(person))
      console.log('获取values：',Object.values(person))
      console.log('获取entries：',Object.entries(person))
    </script> 
</body>
</html>

在这里插入图片描述

6.6.2 合并对象

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建了对象
        const obj1 = {name:'leo'};
        const obj2 = {sex:'boy'};
        const obj3 = {age:11};
        //合并
        console.log(Object.assign(obj1,obj2,obj3));
    </script> 
</body>
</html>

在这里插入图片描述

6.6.3 对象的简写

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //创建了对象
        const name = 'leo';
        const sex = 'boy';

        //对象
        const person = {name,sex}
       //输出
       console.log(person);
    </script> 
</body>
</html>

在这里插入图片描述

6.6.4 函数属性的简写

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
        //对象
        let person = {
            name:'leo',
            demo:(par)=>console.log(person.name,'*****',par),
            demo1(par){console.log(this.name,'*****',par);}
        }
        //调用
        person.demo('hello');
        person.demo1('world');
    </script> 
</body>
</html>

在这里插入图片描述

6.7 数组的方法

6.7.1 map方法

修改数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
      //创建数组
      let arr = [1,2,3,4,5]；
      //每个元素都加2
      let res = arr.map(el=>el+2)；
      //输出
      console.log(res)；
    </script> 
</body>
</html>

在这里插入图片描述

6.7.2 redcue方法:统计

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
</head>
<body>   
    <script>   
      //创建数组
      let arr = [1,2,3,4,5]；
      //每个元素都加2
      let res = arr.reduce((x,y)=>x+y)；
      //输出
      console.log(res)；
    </script> 
</body>
</html>

6.7.3 promise读取远程的数据

演示的数据地址
http://jsonplaceholder.typicode.com/users
http://jsonplaceholder.typicode.com/todos

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>   
    <script>   
      let fun = new Promise((data,err)=>{
           $.ajax({
            url: 'http://jsonplaceholder.typicode.com/users/1',
            success:function(res){
                data(res);
            },
            error:function(e){
                err(e);
            }
           })
      });
      //调用
      fun.then((obj)=>console.log('获取的数据:',obj))
         .catch((err)=>console.log('异常信息:',err));
    </script> 
</body>
</html>

在这里插入图片描述

本文含有隐藏内容，请开通VIP 后查看

第六章 ES6

6.1 简介

6.2 变量的声明

6.2.1 使用let声明参数

1.2.2 let声明的变量不可以多次赋值和使用

6.2.3 变量提升

6.2.4 使用const声明变量

6.2.5 创建函数

6.3 结构表达式

6.3.1 数组结构

6.3.2 对象结构

6.4 字符串扩展

6.4.1 扩展的方法(函数)

6.4.2 字符串模板

6.4.3模板添加参数

6.4.4 调用函数

6.5 函数-优化

6.5.1 函数的默认值

6.5.2 不定参数

6.5.3 匿名参数

6.5.4 如果函数有返回值

6.5.5 传递对象

6.5.6 使用结构化方式

6.6 对象的优化

6.6.1 对象中的方法

6.6.2 合并对象

6.6.3 对象的简写

6.6.4 函数属性的简写

6.7 数组的方法

6.7.1 map方法

6.7.2 redcue方法:统计

6.7.3 promise读取远程的数据

网站公告

今日签到

热门文章

最新发布