第六章 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声明的变量不可以多次赋值和使用

第六章 ES6_第1张图片

6.2.3 变量提升

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

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

第六章 ES6_第2张图片

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

6.2.4 使用const声明变量

  • 不可以修改
<script>
       {
           const i = 10;
           i = 20;
       }      
    script> 

第六章 ES6_第3张图片

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>

第六章 ES6_第4张图片

  • 属性可以使用别名称
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>

第六章 ES6_第5张图片

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>

第六章 ES6_第6张图片

6.4.2 字符串模板

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

6.4.3模板添加参数

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

第六章 ES6_第7张图片

6.4.4 调用函数

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

第六章 ES6_第8张图片

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>

第六章 ES6_第9张图片

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>

第六章 ES6_第10张图片

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>

在这里插入图片描述

你可能感兴趣的:(前端开发,es6,javascript,前端)