ES6

const常量

// ES6 常量 不能修改,修改报错let.html:15 Uncaught TypeError: Assignment to constant variable.

const b=2;
b=3; 
console.info(b);

let声明的变量

//var声明的变量往往会越域
//let声明的变量有严格的局部作用域,超出范围报错：let.html:26 Uncaught ReferenceError: c is not defined
{
   var a=1;
   let c=3;
}
console.info(a); 
console.info(c);

//var可以声明多次,let只可以声明一次,声明多次报错：Uncaught SyntaxError: Identifier 'b' has already been declared
var a=1
var a=3
let b=2
let b=4
console.log(a)
console.log(b)

//var会变量提升(变量提升：指先用再声明)
//let不会变量提升，如果变量提升报错：let&const.html:33 Uncaught ReferenceError: b is not defined at let&const.html:33    
console.log(a)
var a=1
console.log(b)
let b=2

解构

// 数组的解构
let arr=[1,2,3];

let a=arr[0];
let b=arr[1];
let c=arr[2];
console.info(a,b,c)

// ES6： 数组的解构表达式
let[d,e,f]=arr;
console.info(d,e,f)

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

// let name=person.name;
// console.info(name);

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

字符串

多行字符串：
let html="<div>"+
            "<a>你好</a>"+
         "</div>";
// es6:字符串模板
let esHtml=`<div>
                <a>你好</a>
            </div>`;
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

字符串表达式：
let person={
    name:'徐庶',
    age:11,
    hobbies:['唱歌','跳舞']
}


let{name,age,hobbies}=person;


function fun(){
return "这是一个函数"
}

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

函数优化

// 1. 函数的参数默认值  ES6之前：
function add(a){
    if(!a){ // a == null 或 a = undefined
        a=1; // 默认值
    }
    console.info(a);
}
add();


// ES6: 函数的参数默认值
function add(a=1){  // a == null 或 a = undefined
    console.info(a);
}
add(2);

// 2. 可变长度参数 ES6之前：
function add(a){
    console.info(a);
}

add([1,2]);

//  ES6:可变长度参数
function add(...a){
    console.info(a);
}

add(1,2,3);

// ES6: 参数解构
let nums={
    a:1,
    b:2
}

function add({a,b}){
    console.info(a+b);
}

add(nums);

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

console.info(add(1,2))

// ES6: 箭头函数
let add=(a,b) => {
   let c= a+b

   console.info(c)
};
add(2,2)

对象优化

// 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:1,b:2,c:3}

对象声明：
let name="徐庶";
let age=11;

// ES6之前
let person={
name:name,
age:age
}

// ES6: 对象声明属性的简写 ：  如果属性名和引用的变量名是相同的就可以省略赋值，它会自动调用相同名字的变量
let person={
name,
age
} 
console.info(person)

// 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};

promise异步编排

ES6之前

function myAjax(url, callback) {
    $.ajax({
        url: url,
        success: function (result) {
            callback(result);
        }
    });
}


用户名是否存在
$.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)
    }
})

// ES6：promise 异步编排
new Promise((resolve, reject) => {
    // 1. 请求用户名是否存在
    $.ajax({
        url: "http://localhost:8811/user/existUsername",
        success: function (result) {
            resolve(result);  // 调用resolve 就会执行 then方法
        },
        error: function (err) {
            reject(err);    // 调用reject 就会执行 catch方法
        }
    })
})
// 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('服务器异常')
    });

模块化：

User.js

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. 导出默认组件

html:引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>
</head>
<body>
    
</body> 
<script type="module">
// import 语法
// import 组件名 from js文件路径
// 组件名 : {需要导入的组件}  多个用逗号分隔，  用过组件有很多可以写成* ，就不需要{} ,但是还需要使用as取别名
// 非默认组件一定要用大括号    ，默认组件不能写在大括号里面
// import {girl} from './js/user.js'
// import * as Person from './js/user.js'
import xxx,{girl} from './js/user.js'

console.info("---"+Object.keys(xxx));
console.info("----"+girl);

</script>

</html>

posted @ 2022-06-13 21:56 VNone 阅读(30) 评论(0) 收藏举报

刷新页面返回顶部

VNone

ES6

公告