1 let和const的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
// es5中声明变量 使用的var
var a;
console.log(a);
// 变量提升
a= 10;
// var a;
// a = 10;
console.log(a);
*/
// var a;
/*
// 1.因为变量提升 导致 var声明的变量属于全局作用域 2.var声明的变量存在覆盖现象
console.log(a);
{
var a = 20;
var a = 30
}
console.log(a);
*/
/*
var i;
for(i = 0; i < 10;i++){
}
console.log(i);
*/
/*
var a = [];
// let 声明的变量属于局部作用域
for(let i = 0; i < 20; i++){
a[i] = function() {
console.log(i);
}
};
a[10]();
*/
// console.log(a);
/*
{
let a = 30;
let a = 40;
// Identifier 'a' has already been declared
}
*/
// console.log(a);
// 1.const声明的常量,常量一旦声明不可修改 2.局部作用域
{
const pai = 3.145926;
// pai = 20;
}
console.log(pai);
</script>
</body>
</html>
2 模块字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
/*
// es5的语法
let name = 'alex';
let age = 29;
var desc = name+'是个大sb,今年'+age+'了,鸡汤非常多';
console.log(desc);
*/
// es6模板字符串
let name = 'alex';
let age = 29;
var desc = '${name}是个大sb,今年${age}了,鸡汤非常多的点点滴滴';
console.log(desc);
var imgSrc = './1.jpg';
$(function() {
$('ul').append(,<li>
<a href="javascript:void(0);">
<img src=${imgSrc} alt="">
</a>
</li>,)
});
</script>
</body>
</html>
3 es6的箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
普通函数
function add(a,b) {
return a+b;
};
alert(add(1,2));
*/
/*
// 函数对象
var add = function (a,b) {
return a+b;
};
alert(add(3,4))
*/
/*
var add = (a,b)=>{
return a+b;
};
alert(add(3,7))
*/
/*
var person = {
name:"alex",
age: 20,
fav:function () {
console.log('喜欢AV');
// this指的是当前的对象
console.log(this.age);
}
};
person.fav();
*/
/*
var person = {
name:"alex",
age: 20,
fav: () => {
// this的指向发生了改变,指向了定义person的父级对象 window
console.log('喜欢AV');
console.log(this);
}
};
person.fav();
*/
/*
var person = {
name:"alex",
age: 20,
fav: function () {
console.log('喜欢AV');
// this指的是当前的对象
console.log(this);
console.log(arguments[0]) #可以获取到传入进来的值
}
};
person.fav('哈哈哈');
*/
var person = {
name:"alex",
age: 20,
fav: (content) =>{
// this的指向发生了改变,指向了定义person的父级对象 window
console.log('喜欢AV');
// this指的是当前的对象
console.log(this);
// console.log(arguments) #不能获取到传入进来的参数值了
}
};
person.fav('哈哈哈');
</script>
</body>
</html>
4 对象的创建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 字面量方式创建对象
/*
var person = {
name:"alex",
age: 20,
fav:function () {
console.log('喜欢AV');
// this指的是当前的对象
console.log(this.age);
}
};
person.fav();
*/
// es6中对象的单体模式
var person = {
name:"alex",
age: 20,
fav(){
console.log(this);
console.log(arguments);
}
};
person.fav();
</script>
</body>
</html>
5.类的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
alert(this.name);
};
// 使用new关机字来创建对象
var p = new Person('alex',19);
p.showName()
*/
// es6中创建对象的方式 使用class
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
alert(this.name)
}
};
var p2 = new Person('张三',20);
p2.showName();
</script>
</body>
</html>
