ES6的基础入门

最新推荐文章于 2024-09-10 19:43:43 发布

hyj32

最新推荐文章于 2024-09-10 19:43:43 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/hyj32/article/details/115914283

版权

简介：
ES6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6的新特性：
1.let和const命令
2.es6的模板字符串
3.增强函数
4.扩展的字符串、对象、数组功能
5.解构赋值
6.Symbol
7.Map和Set
8.迭代器和生成器
9.Promise对象
10.Proxy对象
11.async用法
12.class类
13.模块化实现
为什么要学习ES6：
1.ES5语言的先天性不足，比如变量提升、内置对象的方法不灵活、模块化实现不完善等等。
2.为了后面vue、尤其是react框架做好准备。
3.目前大部分公司的项目都是使用ES6.
一、let和const
1.let不存在变量提升，var存在变量提升；即使用var定义的变量可以在之前进行调用和输出，而使用let定义的变量无法在定义之前调用。

<!DOCTYPE html>
<html>
<body>
<script>
console.log(a);
var a=10;
console.log(b);
let b=20;
</script>
</body>
</html>

运行结果：
在这里插入图片描述
2.let和const只在代码块中有意义，var是全局变量。

<!DOCTYPE html>
<html>
<body>
<script>
{
 let a=10;
 var b=20;
 console.log(a);
}
console.log(a);
console.log(b);
</script>

</body>

</html>

运行结果：
在这里插入图片描述

<!DOCTYPE html>
<html>
<body>
<script>
{
 let a=10;
 var b=20;
 console.log(a);
}
// console.log(a);
console.log(b);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
3.无法重复声明

<!DOCTYPE html>
<html>
<body>
<script>
var a=10;
var a=20;
console.log(a);
// {
// let b=10;
// let b=20;
// console.log(b);
// }
</script>

</body>

</html>

运行结果：
在这里插入图片描述
我们可以看到，如果同时定义两个相同的var变量，第一个的值会被第二var的值所覆盖。

<!DOCTYPE html>
<html>
<body>
<script>
{
let b=10;
let b=20;
console.log(b);
}
</script>

</body>

</html>

运行结果：
在这里插入图片描述
如果同时定义两个相同的let变量，系统会报错。
4.const常量需要在定义时赋值

<script>
const x;
x=40;
</script>

运行结果：
在这里插入图片描述
5.const一旦被声明定义就无法进行修改

<!DOCTYPE html>
<html>
<body>
<script>

const x=40;
x=20;
console.log(x);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
6.let不会污染全局变量

<!DOCTYPE html>
<html>
<body>
<script>
console.log(window.RegExp);   
var RegExp=10;
console.log(RegExp);
console.log(window.RegExp);
</script>

</body>

</html>

运行结果：
在这里插入图片描述

<!DOCTYPE html>
<html>
<body>
<script>
console.log(window.RegExp);   
// var RegExp=10;
// console.log(RegExp);
let RegExp=10
console.log(RegExp);
console.log(window.RegExp);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
二、字符串
1.字符串新提供的startsWith方法，判断字符串是否以…开头

<!DOCTYPE html>
<html>
<body>
<script>
let url="https://www.baidu.com/";
if(url.startsWith("http:")==true){
    console.log("普通网址");
}else if(url.startsWith("https:")==true){
   console.log("保密网址");
}else{
  console.log("请输入正确网址");
}

</script>

</body>

</html>

运行结果:
在这里插入图片描述
2.字符串新提供的endsWith方法，判断字符串是否以.xx结尾

<!DOCTYPE html>
<html>
<body>
<script>
let str=["test.html","test.txt","test.java","text.pgn"];
let str1=str.map(function(item){
 
  if(item.endsWith(".html")==true){
    return "这是一个网页文件";
  }else if(item.endsWith(".txt")==true){
    return "这是一个文本文件";
  }else if(item.endsWith(".java")==true){
    return "这是一个java文件";
  }else if(item.endsWith(".pgn")==true){
    return "这是一个pgn图片";
  }else{
    return "无法辨别文件类型";
  }

}
);
console.log(str1);

</script>

</body>

</html>

运行结果：
在这里插入图片描述

这里面用到了一个关于数组的Map函数，这个函数在我们对数组进行操作时会给予巨大的帮助。Map的主要作用是映射。
3.字符串模板
字符串模板主要的作用是用来进行字符串的拼接，而且非常的简单和易懂。

<!DOCTYPE html>
<html>
<body>
<script>
let str="abcd";
let str1=`${str}efg`;
console.log(str1);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
使用字符串模板进行拼接是用的是Tab键上面的``这个符号而不是单引号，然后把需要拼接的字符串放入到${}中，就可以了。
三、函数
箭头函数：
ES6标准中添加了一个新的函数，叫做箭头函数，箭头函数和普通的函数在JavaScript中并没有很大的区别。它主要是简化了函数的一些步骤，使得代码看起来更加的简洁，没有this指向，箭头函数内部this值只能通过查找作用域链来确定，一旦使用箭头函数那么当前就不存在作用域链。
在箭头函数中主要有两个简化的地方：
1.如果函数只有一个参数那么参数的括号可以进行省略;
2.如果函数体中只有一个return，那么花括号可以进行省略；

<script>
let show=function(item){
   return item*2;
}
alert(show(10));
</script>

结果：
在这里插入图片描述
使用箭头函数：

<script>
 let show=item=>item*2
</script>

运行结果:
在这里插入图片描述

说明：我们首先定义了一个let变量show用来接收function函数，function函数拥有一个参数，主要的操作是将传进来的参数进行乘2并返回。最后我们通过对show进行调用和传参可以返回传入参数的2倍值。
注意：
1.只用箭头函数函数内部没有arguments。
2.箭头函数不能使用new关键字来实例化对象。
函数参数:
一般在定义函数时都会把参数定义好，但是如果在调用时实参传输不正确会导致程序的错误，但是在ES6中不会。
例子：

<script>
   function show(a,b,c,...numb){
    console.log("a的值为："+a);
     console.log("b的值为："+b);
     console.log("c的值为："+c);
     console.log("numb的值为："+numb);
}
   show(1,2,3,4,5,6,88,99);
</script>

我们可以看到show的函数参数中有…numb这个函数的扩展，也就是说我不知道你会传入几个参数，但是我只需要a，b，c这几个参数就行了，剩下的全部放到…numb中。
运行结果:
在这里插入图片描述
从图中我们可以看出除了1，2，3被赋值到a，b，c中，剩下的参数都被放到…numb中去了。
四、map和set
set：表示一个无重复值的有序列表
首先我们先定义一个空的set集合，查看一下里面有什么属性：

<!DOCTYPE html>
<html>
<body>
<script>
let str=new Set();
console.log(str);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
add方法：添加元素到集合中

<!DOCTYPE html>
<html>
<body>
<script>
let str=new Set();
str.add(2);
console.log(str);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
我们可以添加任何的元素到集合中，数组、字符串、类等等。

<!DOCTYPE html>
<html>
<body>
<script>
let str=new Set();
str.add(2);
str.add("4");
console.log(str);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
虽然set显示的4是一个数字类型的，但是我们可以从Entries中看到4实际上是个字符串。
set集合是一个无重复的集合，如果添加的元素在set集合中本身含有，那么该元素就不会被添加到集合中

<!DOCTYPE html>
<html>
<body>
<script>
let str=new Set();
str.add(2);
str.add("4");
console.log(str);
str.add(4);
str.add("4");
console.log(str);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
set的删除和清除：

<!DOCTYPE html>
<html>
<body>
<script>
let str=new Set();
str.add(2);
str.add("4");
console.log(str);
str.add(4);
str.add("4");
console.log(str);
str.delete(4);
console.log(str);
str.clear();
console.log(str);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
set的校验某个值是否存在于集合中：

<!DOCTYPE html>
<html>
<body>
<script>
let str=new Set();
str.add(2);
str.add("4");
console.log(str);
str.add(4);
str.add("4");
console.log(str);
console.log(str.has(4));
str.delete(4);
console.log(str);
str.clear();
console.log(str);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
**将set转换成数组：**通过扩展运算符进行操作。
Map：Map类型是键值对的有序列表，键和值是任意类型。
首先我们可以先定义一个Map并输出。

<!DOCTYPE html>
<html>
<body>
<script>
let map =new Map();
console.log(map);
</script>

</body>

</html>

运行结果：
在这里插入图片描述
我们可以发现，Map其实和Set几乎差不多，
我们现在Map中添加几个元素：

<!DOCTYPE html>
<html>
<body>
<script>
let map =new Map();
console.log(map);
map.set("name","张三");
</script>

</body>

</html>

运行结果：
在这里插入图片描述
获取map中的值：

<!DOCTYPE html>
<html>
<body>
<script>
let map =new Map();
console.log(map);
map.set("name","张三");
map.set("age",18);
console.log(map.get("name"));
</script>

</body>

</html>

运行结果：
在这里插入图片描述
map的删除：

<!DOCTYPE html>
<html>
<body>
<script>
let map =new Map();
console.log(map);
map.set("name","张三");
map.set("age",18);
map.delete("name");
console.log(map.get("name"));
console.log(map.get("age"));
</script>

</body>

</html>

运行结果：
在这里插入图片描述
Map的校验：

<!DOCTYPE html>
<html>
<body>
<script>
let map =new Map();
console.log(map);
map.set("name","张三");
map.set("age",18);
map.delete("name");
console.log(map.get("name"));
console.log(map.get("age"));
console.log(map.has("age"));
console.log(map.has("name"));
</script>

</body>

</html>

运行结果：
在这里插入图片描述
Map的清除：

<!DOCTYPE html>
<html>
<body>
<script>
let map =new Map();
console.log(map);
map.set("name","张三");
map.set("age",18);
map.delete("name");
console.log(map.get("name"));
console.log(map.get("age"));
console.log(map.has("age"));
console.log(map.has("name"));
map.clear();
console.log(map);
</script>

</body>

</html>

在这里插入图片描述
数组
数组中含有多种的方法：
1.from()：
from（）将伪数组转换成真正的数组。

在这里插入代码片

Map（映射）：就是数组中的每一个元素都可以对应出一个元素。
例1：`

<script>
let arr=[1,2,3];
let arr2=arr.map(function(item){
  return item*2;
});
alert(arr2);
//可以使用箭头函数使得代码更加简洁
/*
  let arr=[1,2,3];
  let arr2=arr.map(item=>item*2);
  alert(arr2);
*/
</script>

运行结果:
在这里插入图片描述
例2：

<script>
 let eax=[66,78,55,74,31,99,88];
 let eax1=eax.map(function(item){
   if(item>=60){
    return "及格";
}else{
    return "不及格";
}
});
alert(eax1);
</script>

运行结果：
在这里插入图片描述
我们可以看到function的函数体中是一个if语句，也就是一个boolean值的判断，那么我们可以将以上的代码简化一下。

<script>
 let eax=[66,78,55,74,31,99,88];
 let eax1=eax.map(function(item){
 return item>=60?"及格":"不及格";
});
alert(eax1);
</script>

我们还可以将上门的代码利用箭头函数再一次的简化代码。

<script>
 let eax=[66,78,55,74,31,99,88];
 let eax1=eax.map(item=>item>=60?"及格":"不及格");
alert(eax1);
</script>

运行结果：
在这里插入图片描述