前端 ECMAScript
ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准， 2015 年 6 月正式发布。
00-let声明变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a=1;
let b=2;
}
console.log(a);
console.log(b);
let n=1;
let n=2; //error let只能定义一次，error： n has already defined
</script>
</body>
</html>
01-定义常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//定义常量
const PI = "3.14";
PI =3; //error：const定义后不可改变.
const MY; //error: 必须赋值
</script>
</body>
</html>
02-解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a=1,b=2,c=3;
console.log(a,b,c);
//es6
let[x,y,z] = [1,2,3];
console.log(x,y,z);
</script>
</body>
</html>
03-对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let user = {name:'Helen',age:18}
let name1=user.name;
let age1 = user.age;
console.log(name1,age1);
//ES6
let {name,age} = user;
console.log(name,age);
</script>
</body>
</html>
04-模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = 'Jack';
let age = 99;
let info = `My name is ${name},
My age is ${age+1}`
console.log(info);
</script>
</body>
</html>
05-声明对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//传统方式
const name = 'lucy'
const age = 88
const user1 = {name:name,age:age}
console.log(user1)
//ES6
const user2 = {name,age}
console.log(user2);
</script>
</body>
</html>
06-对象拓展运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//复制对象
let person={name:'lucy',age:19}
let sb={...person}
console.log(sb)
//对象的合并
let age={age:15}
let name={name: 'DaMing'}
let person2={...age,...name}
console.log(person2)
</script>
</body>
</html>
07-箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//传统方式定义函数
var f1 = function(a){
return a+3;
}
console.log(f1(3))
//es6使用箭头函数 语法： 参数=>函数体
var f2 = (a) => a
console.log(f2(4))
var f3 = function(m,n){
return m+n
}
//es6
var f4 = (m,n) => m+n
console.log(f4(4,5))
</script>
</body>
</html>
扫一扫
962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
