文章目录
ES6新语法
1、let关键字
let关键字用来声明变量，新特性如下
特点
- 不允许重复声明
- 块儿级作用域
- 不存在变量提升
- 不影响作用域
应用场景
以后声明变量使用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>01-let关键字</title>
</head>
<body>
<script>
// 声明变量
let a ;
let b = 23 ;
let c,d,e;
let f = 233;
let g = 'abc',h = [] , i = {};
// 特性1：变量不能重复声明
// let hero = "关云长";
// let hero = "关羽";
//错误提示： Uncaught SyntaxError: Identifier 'hero' has already been declared
// 特性2：块儿级作用域（ES6之前是全局作用域，函数作用域）
if(true){
let boy = "jack" ;
}
// console.log(boy);
/**
* Uncaught ReferenceError: boy is not defined
* boy变量只能在块级作用域内有效果，否则未定义
*/
/**
* 特性3：不存在变量提升（在变量定义语句之前,
* 就可以访问到这个变量(undefined)）
*/
// console.log(singer);
/**
* 01-let关键字.html:34 Uncaught ReferenceError:
* Cannot access 'singer' before initialization
*/
let singer = "邓紫棋";
/**
* 特点4：不影响作用域链(当js编译器在寻找变量时，
* 先在最近的作用域（花括号）里找，如果找不到，则抄上一级作用域（花括号）里找，依次类推，
* 直到找到或者找不到为止。这就是作用域链。)
**/
{
let school = "阿里云";
function fn(){
console.log(school);
}
fn();
}
</script>
</body>
</html>
需求案例
点击div背景颜色变化
<!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>
<style>
.item{
border: 1px solid gray;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 获取div元素对象
let items = document.getElementsByClassName('item');
// 遍历绑定事件
for(let i = 0 ; i < items.length ; i++){
items[i].onclick = function(){
items[i].style.background='pink';
}
}
</script>
</body>
</html>
效果图
2、const常量声明
const关键字用来声明常量，const声明有以下特点
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块级作用域
对象属性修改和数组元素变化不会触发const错误
应用场景：声明对象类型使用const,非对象类型选择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>03-const关键字</title>
</head>
<body>
<script>
// 声明常量
const SCHOOL = "阿里云大学";
// 特性1：声明必须赋初始值
// const A ;
/**
* Uncaught SyntaxError: Missing initializer in const declaration
*/
// 特性2：一般常量使用大写
const a = 100 ;
// 特性3：常量值不能修改
// const SCHOOL = "华为云大学" ;
/**
* Uncaught SyntaxError: Identifier 'SCHOOL' has already been declared
*/
// 特性4：块级作用域
{
const SINGER = "GEM";
}
// console.log(SINGER);
/**
* 03-const关键字.html:33 Uncaught ReferenceError: SINGER is not defined
*/
// 特性5：对于数组和对象的元素修改，不算是常量的修改，不会报错
const ARRAY = ['刘备','关羽','马超'];
ARRAY.push("马夫人");
ARRAY.pop();
console.log(ARRAY);
const OBJ = {
prop1:"天魁星",
prop2:34
}
OBJ.prop1="地煞星";
console.log(OBJ);
/**
* {prop1: '地煞星', prop2: 34}
*/
</script>
</body>
</html>
3、变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这种操作叫做解构赋值
对于数组而言
let [hz,gy,zf,mc,zy] = ["黄忠","关羽","张飞","马超","赵云"];
对于对象而已
let {name , age , wifes , getSkills} = {
name:"韦小宝",
age:99,
wifes:7,
getSkills:function(){
console.log("吹牛逼");
}}
案例说明
<!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>04-解构赋值</title>
</head>
<body>
<script>
// 1、数组的解构
const FIVETIGERGENERAL = ["黄忠","关羽","张飞","马超","赵云"];
let [hz,gy,zf,mc,zy] = FIVETIGERGENERAL ;
console.log(hz);
console.log(gy);
console.log(zf);
console.log(mc);
console.log(zy);
/**
04-解构赋值.html:15 黄忠
04-解构赋值.html:15 关羽
04-解构赋值.html:16 张飞
04-解构赋值.html:17 马超
04-解构赋值.html:18 赵云
*/
// 2、对象的解构
// const WEIXIAOBAO = {
// name:"韦小宝",
// age:99,
// wifes:7,
// getSkills:function(){
// console.log("吹牛逼");
// }
// }
// let {name , age , wifes , getSkills} = WEIXIAOBAO;
// 简写后
let {name , age , wifes , getSkills} = {
name:"韦小宝",
age:99,
wifes:7,
getSkills:function(){
console.log("吹牛逼");
}}
getSkills();
</script>
</body>
</html>
4、模板字符串
模板字符串（template string）是增强版的字符串，使用反引号(`)符号，
- 字符串可以出现换行符
- 可以使用${xxx}形式输出变量
注意：当遇到字符串与变量拼接的情况使用模板字符串
案例说明
<!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>05-模板字符串</title>
</head>
<body>
<script>
// ES6引入的新的声明字符串的方式 反引号 ``
// 1、声明字符串
let str = `我也是一个字符串`;
console.log(str,typeof str) ;
// 2、字符串内可以直接出现换行符
let str2 = `
<span>第一行数据</span>
<span>第二行数据</span>
`;
let str3 = `
<h1>第一行数据</h1>
<h2>第二行数据</h2>
`;
document.write(str2,str3);
// 3、变量拼接
let favoriteActor = "韦小宝";
let out = `${favoriteActor}是最幸福的男主`;
document.write(out);
</script>
</body>
</html>
5、简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。
注意：对象简写形式简化了代码，所以以后用简写就对了
<!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>简化对象写法</title>
</head>
<body>
<script>
let name ="阿里云大学";
let change = function () {
console.log("我们可以改变世界的");
}
const school = {
name,
change,
improve(){
console.log("提高技能");
}
}
console.log(school);
</script>
</body>
</html>
效果图
6、箭头函数
ES6 允许使用「箭头」（=>）定义函数。
基本语法
let fn = (arg1 , arg2 , arg3) => {
return arg1 + arg2 + arg3 ;
}
注意点
- 如果形参只有一个，则小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值是该语句的执行结果
- 箭头函数this指向声明时所在作用域下this的值
- 箭头函数不能作为构造函数实例化
- 不能使用arguments
案例说明
<!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>08-箭头函数</title>
</head>
<body>
<script>
// 匿名函数形式
let fn1 = function(a, b) {
return a+ b;
}
// 调用输出结果
console.log(fn1(3,2));
// ES6箭头函数形式
let fn2 = (a,b) => {
return a + b;
}
console.log(fn2(3,2));
// 特性1：this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
// 创建时的this是谁，运行的时候就是谁
let name="avaos";
let age=18;
let person = {
name,
age,
toJson(){
console.log(this);
}
}
person.toJson();
/**
* 打印结果：
* {name: 'avaos', age: 18, toJson: ƒ}
*/
// 特性2：不能作为构造实例化对象
// 没有prototype、没有自己的this指向、不可以使用arguments、自然不可以new
let Person = (name , age ) => {
this.name = name ;
this.age = age ;
}
// let me = new Person("小明",88);
// console.log(me);
// Person is not a constructor
// 特性3：不能使用 arguments 变量
let fn3 = () => {
console.log(arguments);
}
// fn3();
// Uncaught ReferenceError: arguments is not defined
// 4、箭头函数简写
/**
* 1、当形参只有一个时候，省略小括号
* 2、代码块中只有一条语句时候，此时return必须省略，语句执行结果就是函数返回值
*/
let add = n => n*n;
console.log(add(33));
</script>
</body>
</html>
箭头函数的实践
<!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>09-箭头函数实践</title>
<style>
div{
width: 200px;
height: 200px;
background-color: #58a;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
/**
* 需求1：点击div，2s之后颜色变成粉色
**/
// 获取元素
let ad = document.getElementById("ad");
// 绑定事件
ad.addEventListener("click",function(){
// 保存this此时值
// let _this = this ;
// 定时器
setTimeout(() => {
// _this.style.background = "pink";
this.style.background = "pink";
},2000)
})
/**
* 需求2：从数组中返回偶数的元素
**/
// filter:返回满足过滤条件组成的新数组
const arr = [1,3,4,9,10];
const result = arr.filter(item => item % 2 === 0) ;
console.log(result);
// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
</script>
</body>
</html>
FAQ
问：箭头函数不能作为构造实例化对象
答：构造函数需要this这个对象，用于接收传来的参数，以及在构造函数最后将这个this return出去。箭头函数没有this，所以不能作为构造函数。
7、rest参数获取实参
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
<!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>10-rest获取实参</title>
</head>
<body>
<script>
// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
// ES5 获取实参的方式
// function date(){
// console.log(arguments,typeof arguments );
// }
// date('大郎','阿斗归来','思慧');
/**
* ['大郎', '阿斗归来', '思慧', callee: ƒ, Symbol(Symbol.iterator): ƒ] 'object'
*/
// rest 参数
let a={
a1:33,
a2:98
}
function date(...args){
// args 类数组
for(let i in args){
console.log(args[i]) ;
}
}
date('阿娇','柏芝','思慧');
// console.log(typeof a);
// rest 参数必须要放到参数最后
function fn(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
fn(1,2,3,4,5,6);
</script>
</body>
</html>
rest 参数非常适合不定个数参数函数的场景
8、spread 扩展运算符
扩展运算符（spread）是三个点（…），将一个数组||类数组||字符串转为用逗号分隔的序列。
<!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>11-spread扩展运算符</title>
</head>
<body>
<script>
/**
* 扩展运算符（spread）是三个点（…），
* 将一个数组||类数组||字符串转为用逗号分隔的序列。
*/
// 展开数组
let num1 = [1,2,3,4],num2 = [...num1,6];
console.log(num2);
// 数组的拷贝
let num3 = [...num2];
console.log(num3);
// 数组的合并
let num4 = ['a','b','c'];
let num5 = ['d','e','f'];
let num6 = [...num4,...num5];
console.log(num6);
</script>
</body>
</html>
9、Map
<!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>map基本操作</title>
</head>
<body>
<script>
// 声明map
let m = new Map();
// 添加元素
m.set('name',"阿里云");
m.set("change",function(){
console.log("英雄不问出处");
})
let key = {
school:'阿里云s'
};
m.set(key,['a','b','c']);
// size
// console.log(m.size);
// 删除,根据键删除
// m.delete("name");
// 获取map数据
// console.log(m.get(key));
// 清空
// m.clear();
// 遍历
for(let v of m){
console.log(v);
}
</script>
</body>
</html>
10、Class类
- class类作为对象的模板被引入，可以通过class关键字定义类
- class本质是function，同样可以看成一个块
- 可看出一个语法糖，让对象原型的写法更加清晰
class类声明
<!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>13-class声明</title>
</head>
<body>
<script>
// 声明类Hero
function Hero(calling,age){
this.calling = calling ;
this.age = age ;
}
// 添加方法
Hero.prototype.call = function() {
console.log("十八罗汉");
}
// 实例化对象
let Shuihu = new Hero("刘备",99);
Shuihu.call();
console.log(Shuihu);
/**
* Hero {calling: '刘备', age: 99}
*/
</script>
</body>
</html>
class的set,get操作
<!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>class的get,set操作</title>
</head>
<body>
<script>
class Hero{
get hero(){
return 'abc';
}
set hero(a){
console.log("英雄变化"+a);
}
}
// 实例化对象
let s = new Hero();
console.log(s.hero);
s.hero="kk";
console.log(s.hero);
</script>
</body>
</html>
11、数值扩展
<!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>16-数值扩展</title>
</head>
<body>
<script>
// 1、Number.isNaN 检测一个数值是否为NaN
console.log(Number.isNaN(3330));
// false
// 2、Number.parseInt/parseFloat字符串转换整数
console.log(Number.parseInt('3242lj'));
console.log(Number.parseFloat('32.42lj看看'));
// 3、Number.isInteger 判断一个数值是否为整数
console.log(Number.isInteger(5));
// true
console.log(Number.isInteger(-5));
// true
console.log(Number.isInteger(-5.23));
// false
// 4、Math.trunc 将数字的小数部分抹掉
console.log(Math.trunc(3.9));
console.log(Math.trunc(3.3));
// 5、Math.sign 判断一个数到底是正数，负数，零
console.log(Math.sign(3));
// 1
console.log(Math.sign(-3));
// -1
console.log(Math.sign(0));
// 0
</script>
</body>
</html>
1629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
