ES6必须知道的六大新特性

ES6

ES6新特性-let&const

  • 使用const表示常量(声明之后不允许改变,一旦声明必须初始化,否则会报错)

//ES6 常量 不能修改
	const b=2;
	b=3;//Uncaught TypeError: Assignment to constant variable.
	console.log(b);
  • 使用var声明的变量往往会越域,而let声明的变量有严格的局部作用域

// ES6
        // var声明的变量往往会越域
        // let声明的变量有严格的局部作用域
        {
            var a=1;
            let c=3;
        }
        console.log(a);
        console.log(c);//Uncaught ReferenceError: c is not defined
  • let只可以声明一次,var可以声明多次

//var可以声明多次,let只可以声明一次
        var a=1
        var a=3
        let b=2
        let b=4
        console.log(a)
        console.log(b)//Uncaught SyntaxError: Identifier 'b' has already been declared
  • let不会变量提升,变量提升的意思是可以先使用变量,再声明

// var会变量提升
// let不会变量提升
        console.log(a)
        var a =1
        console.log(b)
        let b =2

image-20210930190340438

ES6新特性-解构&字符串

  • 数组的解构:

//数据的解构
        let arr=[1,2,3];
        let a=arr[0];
        let b=arr[1];
        let c=arr[2];
        console.info(a,b,c);

//ES6:数组的解构表达式
        let[aa,bb,cc]=arr;
        console.info(aa,bb,cc);
  • 对象的解构:

let person={
            name:'徐庶',
            age:11,
            hobbies:['唱歌','跳舞']
        }
        let name=person.name;
        console.info(name)

//ES6:对象的解构表达式
        let{name,age,hobbies}=person;
        console.info(name,age,hobbies);

image-20210930193138819

  • 字符串模板:直接将html放在``中

let html="
"+"你好"+"
"
; //ES6:字符串模板 let esHtml=``; console.info(esHtml);
  • 字符串扩展:

//字符串扩展
let str="hello.vue";
console.log(str.startsWith("hello"))//true
console.log(str.endsWith(".vue"))//true
console.log(str.includes("e"))//true
console.log(str.includes("hello"))//true
  • 字符串插入变量和表达式,变量名可以写在 , {}, ,{}中可以放入js表达式

 let person={
            name:'徐庶',
            age:11,
            hobbies:['唱歌','跳舞']
        }

        let{name,age,hobbies}=person;

        function fun(){
            return "这是一个函数"
        }
        //ES6:字符串插入变量和表达式,变量名写在${},${}中可以放入js表达式
        console.info(`名字是${name},年龄是${age},爱好是${hobbies},这个函数的返回值是${fun()}`);

ES6新特性-函数优化

  • 函数参数默认值:直接括号内设置默认值

//1.函数的参数默认值 ES之前
        function add(a){
            if(!a){
                a=1;
            }
            console.log(a);
        }
        add();

//ES6:函数的参数默认值
        function add(a=1){
            console.info(a);
        }
        add();
  • 可变长度参数:在括号内的参数前添加…

//2.可变长度参数 ES之前
        function add(a){
            console.info(a);
        }
        add([1,2]);

//ES6:可变长度参数
        function add(...a){
            console.log(a);
        }
        add(1,2,3);

  • 参数解构

//ES6:参数解构
let nums={
            a:1,
            b:2
        }
        function add({a,b}){
            console.log(a+b);
        }
        add(nums);
  • 箭头函数:单行的时候更简洁,不需要return,多行的时候需要。

//箭头函数 lambda =>   ES6之前
        function add(a,b){
             return a+b;
        }
        console.info(add(1,2));

//ES6:箭头函数
        let add=(a,b)=>{
            let c=a+b
            console.log(c);
        }
        add(2,2);

ES6新特征-对象优化

  • 对象的内置函数

    • keys()显示对象的属性
    • values()显示属性的值
    • entries()显示对象的属性和值
    • 对象合并函数assign()
      • 说明:第一个参数是需要合并的对象 其他参数会合并到第一个参数上面(如果有相同的后来者居上)
// 1.对象的内置函数
     let person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]


         // 对象合并
         const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { a:4,c: 3 };

        // 参数说明 第一个参数是需要合并的对象   其他参数会合并到第一个参数上面
        // 如果有重复的属性, 会以后面的进行覆盖
        Object.assign(target, source1, source2);

        console.log(target);//{a:4,b:2,c:3}
  • 声明对象简写

    • 对象属性的简写:属性名和引用的变量名是相同的就可以省略赋值

      let name="徐庶";
      let age=11;
      
      // ES6之前
      let person={
           name:name,
           age:age
      }
      
      // ES6: 对象声明属性的简写 :  如果属性名和引用的变量名是相同的就可以省略赋值,它会自动调用相同名字的变量
      let person={
          name,
          age
      } 
      console.info(person)
      
    • 对象中函数的简写:使用箭头函数声明,如果要调用本对象的属性this会失效,需要使用对象.属性的方式

      // ES: 对象中函数的简写方式
      let person={
          name:"徐庶",
      // ES6之前
          eat: function(food){
              console.info(this.name+"吃了:"+food)
          },
      // ES6:通过箭头函数声明,   如果要调用本对象的属性this指向window, 需要使用对象.属性
          eat2: (food) => console.info(person.name+"吃了:"+food),
      //第三种方式,不写冒号
          eat3(food){
              console.info(this.name+"吃了:"+food)
          }
      }
      person.eat("米饭");
      person.eat2("海鲜");
      person.eat3("水果");
      
    • 对象扩展运算符:拷贝与合并(…)

      //对象的扩展运算符
          //1.拷贝对象(深拷贝)
          let person={name:"xushu",age:18,wife:{name:"杨迪"}};
          let person2={...person};
          console.info(person2);
      
          //2.合并对象
          const target = { a: 1 };
          const source1 = { b: 2 };
          const source2 = { c: 3 };
          let newObject={...target,... source1,...source2};
          console.info(newObject);
      

ES6新特性-promise异步编排

  • 使用ES之前的ajax请求方式:

    //使用函数简化,但是还是嵌套的方式
    function myAjax(url, callback){
            $.ajax({
                url: url, 
                success: function (result) {
                    callback(result);
                }
            });
        }
    myAjax("http://localhost:8811/user/existUsername",function(result){
            if(result.data){
                				   myAjax("http://localhost:8811/user/existPhone",function(result){
                    
                })
            }
        })
    
    //传统的ajax请求方式
        用户名是否存在   
        $.ajax({
            url: "http://localhost:8811/user/existUsername",
            success: function (result) {
                if (result.data) {
                    alert('用户名不存在!')
                    // 手机是否存在
                    $.ajax({
                        url: "http://localhost:8811/user/existPhone",
                        success: function (result) {
                            if (result.data) {
                                alert('手机不存在!')
                                // 注册用户
                                $.ajax({
                                url:"http://localhost:8811/user/registryUser",
                                    success: function (result) {
                                        if (result.data) {
                                            alert(result.message)
                                        }
                                    },
                                    error: function (err) {
                                        alert("异常" + err)
                                    }
                                })
                            } else {
                                // 手机号已存在
                                alert(result.message)
                            }
                        },
                        error: function (err) {
                            alert("异常" + err)
                        }
                    })
                } else {
                    // 用户名已存在
                    alert(result.message)
                }
            },
            error: function (err) {
                alert("异常" + err)
            }
        })
    
    
  • promise异步编排:

    • 当执行到resolve函数时,会调用.then()判断result
    • 当执行到reject函数时,会调用.catch()判断err
    new Promise((resolve, reject) => {
                // 1. 请求用户名是否存在
                $.ajax({
                    url: "http://localhost:8811/user/existUsername",
                    success: function (result) {
                        resolve(result);
                    },
                    error: function (err) {
                        reject(err);
                    }
                })
            })
            // 2.手机是否存在
            .then(result => {
                return new Promise((resolve, reject) => {
                    if (result.data) {
                        alert('用户名不存在!')
                        $.ajax({
                            url: "http://localhost:8811/user/existPhone",
                            success: function (result) {
                                resolve(result);
                            },
                            error: function (err) {
                                reject(err);
                            }
                        })
                    } else {
                        alert(result.message)
                    }
                })
    
            })
            .then(result => {
                return new Promise((resolve, reject) => {
                    if (result.data) {
                        alert('手机不存在!')
                        // 注册用户
                        $.ajax({
                            url: "http://localhost:8811/user/registryUser",
                            success: function (result) {
                                resolve(result);
                            },
                            error: function (err) {
                                alert("异常" + err)
                            }
                        })
                    } else {
                        // 手机号已存在
                        alert(result.message)
                    }
                });
            })
            .then(result => {
                if (result.data) {
                    alert(result.message)
                }
            })
            .catch(err => {
                alert('服务器异常')
            });
    
    //设置函数,简化请求
    
        function myAjax(url) {
            return new Promise((resolve, reject) => {
                // 1. 请求用户名是否存在
                $.ajax({
                    url,
                    success(result) {
                        resolve(result);
                    },
                    error(err) {
                        reject(err);
                    }
                })
            })
        }
    
        // 验证用户名不存在
        myAjax("http://localhost:8811/user/existUsername")
            .then(result => {
                if (result.data) {
                    alert('用户名不存在!');
                    return myAjax("http://localhost:8811/user/existPhone")
                } else {
                    alert(result.message)
                }
            })
            // 验证手机号是否存在
            .then(result => {
                if (result.data) {
                    alert('手机号不存在!');
                    return myAjax("http://localhost:8811/user/registryUser")
                } else {
                    alert(result.message)
                }
            })
            // 注册成功
            .then(result => {
                if (result.data) {
                    alert(result.message)
                }
            })
            .catch(err => {
                alert('服务器异常')
            });
    

ES6新特性-模块化

  • 什么是模块化

    • 模块化就是把代码进行拆分,方便重复利用。类似于java中的导包:要使用一个包,必须先导包。然而JS中并没有包的概念,取而代之的是模块。
    • 在ES6中每一个模块既是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的
    • 模块功能
      1. export命令用于规定模块的对外接口,如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。其中export不仅仅只能导出对象,一切JS变量都可以导出
      2. import命令永固导入模块
  • import语法:

    1. import 组件名 from ‘js文件路径’
    2. 组件名={需要导入的组件}需要多个时,用逗号隔开。当需要用的组件很多时,可直接写成*,就不要{},但是还需要使用as取别名
    3. 非默认组件一定要用大括号,默认组件不能写在大括号里面
    <script type="module">
    // import 语法
    // import 组件名 from js文件路径
    // 组件名 : {需要导入的组件}  多个用逗号分隔,  用过组件有很多可以写成* ,就不需要{} ,但是还需要使用as取别名
    // 非默认组件一定要用大括号    ,默认组件不能写在大括号里面
    import * as person form './js/user.js'
    import xxx,{girl} from './js/user.js'
    
    console.info("---"+Object.keys(xxx));
    console.info("----"+girl);
    
    </script>
    
  • 导出语法:

    • 对应三种import语法
      1. 直接写在组件上面(变量、对象、函数…)(export let User
      2. 写在底部(批量导出)(export {User,girl}
      3. 导出默认组件(export default)
export default {
    username:'徐庶',
    age:'18',
    print() {
        console.info(`姓名${this.username},年龄:${this.age}`)
    }
}

let girl ={
    realName:'迪丽热巴', 
    cup:'E'
}
 
export {girl}
// 需要导入 要先 导出 
// 导出 3:
//  1. 直接写在组件上面(变量、对象、函数....)
//export let User

//  2. 写在底部(批量导出)
// export {User,girl}

// 3. 导出默认组件

你可能感兴趣的:(前端,javascript,node.js,vue.js,es)