//ES6 常量 不能修改
const b=2;
b=3;//Uncaught TypeError: Assignment to constant variable.
console.log(b);
// ES6
// var声明的变量往往会越域
// let声明的变量有严格的局部作用域
{
var a=1;
let c=3;
}
console.log(a);
console.log(c);//Uncaught ReferenceError: c is not defined
//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
// var会变量提升
// let不会变量提升
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[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);
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
let person={
name:'徐庶',
age:11,
hobbies:['唱歌','跳舞']
}
let{name,age,hobbies}=person;
function fun(){
return "这是一个函数"
}
//ES6:字符串插入变量和表达式,变量名写在${},${}中可以放入js表达式
console.info(`名字是${name},年龄是${age},爱好是${hobbies},这个函数的返回值是${fun()}`);
//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);
//箭头函数 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);
// 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);
//使用函数简化,但是还是嵌套的方式
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)
}
})
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('服务器异常')
});
export
命令用于规定模块的对外接口,如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。其中export不仅仅只能导出对象,一切JS变量都可以导出import
命令永固导入模块<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>
export let User
)export {User,girl}
)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. 导出默认组件