ES6语法
1. 变量的声明和赋值
1.1 变量声明let和const
let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。
<script>
// alert(iNum01); // undefined
// 声明变量
var iNum01 = 12;
// 通过let声明变量，声明的变量没有预解析，即不能在它的前面调用这个变量
let iNum02 = 24;
iNum02 = 25;
// alert(iNum02);
// 通过const声明变量，声明的变量没有预解析，并且不能够修改
const iNum03 = 26;
// iNum03 = 25; // 修改这个变量会报错
alert(iNum03);
</script>
1.2 扩展运算符(…)
扩展运算符（…），它用于把一个数组转化为用逗号分隔的参数序列，它常用在不定参数个数时的函数调用，数组合并等情形。
<script>
var aList01 = [1, 2, 3];
// var aList02 = aList01; // 这是一个引用的关系，aList02是aList01的引用
var aList02 = [...aList01]; // 如果不用扩展运算符，那么只能使用for循环往空数组里放数据完成拷贝
aList01.push(4);
// alert(aList01);
// alert(aList02);
function fnAdd(a, b, c){
var rs = a + b + c;
alert(rs);
}
// fnAdd(1, 2, 3);
// fnAdd(aList02); // 这样不行
fnAdd(...aList02);
</script>
1.3 解构赋值
ES6 允许我们按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
1、数组的解构赋值
const arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a, b, c); // 1 2 3
2、对象的解构赋值
const obj = { name: 'tom',address:'beijing', age: '100'}
let {name, age} = obj // 变量名称必须和对象的key同名
console.log(name, age); //tom 100
注意：数组的解构赋值用的是[]，对象的解析赋值用的是{}
2. 函数相关
箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
function fnAdd(a, b){
var rs = a+b;
return rs;
}
*/
// 通过匿名函数赋值的形式来定义
/*
let fnAdd = function(a, b){
let rs = a+b;
return rs;
};
*/
// 将匿名函数改成箭头
let fnAdd = (a, b)=>{
let rs = a+b;
return rs;
};
// alert(fnAdd(1, 2));
/*
let fnMyalert = function(a){
alert(a);
}
*/
let fnMyalert = a=>{
alert(a);
};
// fnMyalert('hello');
/*
let fnAdd2 = function(a, b){
return a+b;
}
*/
let fnAdd2 = (a, b)=>a+b;
// alert(fnAdd2(1, 2));
/*
let fnObj = function(a, b){
return {'iNum01':a, 'iNum02':b};
};
*/
// 返回一个对象要多在返回值外面加一个小括号
let fnObj = (a, b)=>({'iNum01':a, 'iNum02':b});
// console.log(fnObj(10, 5));
var oPerson = {
name:'alin',
age:18,
showname:function(){
/*
setTimeout(function(){
alert('我的名字是： '+ this.name); // this指向错乱，指向的是setTimeout中的对象window
}, 2000);
*/
setTimeout(()=>{
alert('我的名字是： '+ this.name); // this指向错乱，指向的是setTimeout中的对象window
}, 2000);
}
};
oPerson.showname();
</script>
</head>
<body>
</body>
</html>
3. 模块及面向对象
3.1 模块导入import和导出export
javascript之前是没有模块的功能的，之前做js模块化开发，是用的一些js库来模拟实现的，在ES6中加入了模块的功能，一个js文件就是一个模块，js文件中需要先导出(export)后，才能被其他js文件导入(import)
- 首先要在服务器环境下
- script标签下加上
type="module"
<script type="module">
// 导入模块里面的变量和函数
import {iNum01, fnAdd} from './js/mod01.js';
// 使用默认导入方式导入模块里面的对象
import oAlin from './js/mod01.js';
// 使用模块里面的变量和函数
alert(iNum01);
fnAdd(10, 5);
// 使用模块里面的对象
alert(oAlin.name);
</script>
js/mod01.js
let iNum01 = 12;
let fnAdd = (a, b)=>{
alert(a + b);
};
let oPerson = {"name":"alin", "age":18};
export {iNum01, fnAdd};
export default oPerson;
3.2 对象的简写
<script>
let name = 'alin';
let age = 21;
/*
var oPerson = {
name:name,
age:age,
showname:function(){
alert("我的名字是："+this.name);
},
showage:function(){
alert("我的年龄是："+this.age);
}
};
*/
var oPerson = {
name,
age,
showname(){
alert("我的名字是："+this.name);
},
showage(){
alert("我的年龄是："+this.age);
}
};
alert(oPerson.name);
oPerson.showage();
</script>
3.3 类的定义与类的继承
<script>
// 定义一个类
class Person{
// 定义构造函数，初始化属性
constructor(name, age){
this.name = name;
this.age = age;
}
// 定义方法
showname(){
alert('我的名字是：'+this.name);
}
showage(){
alert('我的年龄是：'+this.age);
}
}
let oPer = new Person('alin', 21);
oPer.showname();
oPer.showage();
class Student extends Person{
constructor(name, age, school){
super(name, age);
this.school = school;
}
// 定义方法
showname(){
alert('重写后的 我的名字是：'+this.name);
}
showschool(){
alert('我的学校是：'+this.school);
}
}
let oStu = new Student('alin', 21, 'tyut');
oStu.showname();
oStu.showage();
oStu.showschool();
</script>
4. 异步请求数据
当使用两个ajax请求时，因为是异步的所以不知道哪个先结束哪个后结束，所以需要两个ajax配合使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// ajax嵌套的写法来合并不同ajax请求得到的数据
$.ajax({
url:'js/data01.json',
type:'get',
dataType:'json'
/*
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时！');
}
*/
}).done(function(dat){
$.ajax({
url:'js/data02.json',
type:'get',
dataType:'json'
}).done(function(dat2){
alert(dat.name+' | '+dat2.name);
}).fail(function(){
alert('服务器超时！');
});
}).fail(function(){
alert('服务器超时！');
});
// 使用promise对象
// 实例化一个promise对象
var pro01 = new Promise(function(resolve, reject){
$.ajax({
url:'js/data01.json',
type:'get',
dataType:'json'
}).done(function(dat){
resolve(dat);
}).fail(function(err){
reject(err);
});
});
var pro02 = new Promise(function(resolve, reject){
$.ajax({
url:'js/data02.json',
type:'get',
dataType:'json'
}).done(function(dat2){
resolve(dat2);
}).fail(function(err){
reject(err);
});
});
/*
// 使用单个promise对象
pro01.then(function(dat){
alert(dat.name);
}).catch(function(){
alert('服务器超时！');
});
*/
// 使用多个promise对象
Promise.all([pro01, pro02]).then(function(dat){
// console.log(dat);
alert(dat[0].age+' | '+dat[1].age);
}).catch(function(){
alert('服务器超时！');
});
</script>
</head>
<body>
</body>
</html>
5. 数组操作方法
数组新增map方法，用来遍历数组
<script>
var aList = ['a', 'b', 'c', 'd'];
// 使用数组的map方法来循环数组， 第一个参数是数组的成员值，第二个参数是成员的索引值
aList.map(function(item, index){
alert('第'+(index+1)+'个成员是：'+item);
});
</script>
扫一扫
1572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
