ES6的基础入门

最新推荐文章于 2024-04-02 00:45:00 发布
最新推荐文章于 2024-04-02 00:45:00 发布
阅读量382 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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>

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

hyj32
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6基础入门
m0_71102677的博客
05-24 187
console.log(b); //Uncaught ReferenceError: b is not defined 上面代码在代码块之中，分别用var和let声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。 因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景，所以需要块级作用域。下面场景中，内层变量可能会覆盖外层变量。 var tmp = new Date(); fun
ES6的基础知识
qq_46065861的博客
09-14 279
es6的书籍：书籍 我的原文 一、简介 1.ECMAScript和JavaScript的关系 同人不同名字。 ES6涵盖了ES2015、ES2016、ES2017等等 二、块级作用域 可以理解为一个{}，凡是有{}就有块级作用域 ES6中存在块级作用域，ES5没有 1.let的特点 变量提升声明提前，赋值并未提前 1.let和const均不存在变量提升，var声明的变量存在变量提升(let和const前面的区域叫做暂存性死区) 2.使用let和const声明的变量不再属于window,不能通过wi
ES6扩展运算符(...)
wushen的博客
08-15 339
1 含义 扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符主要用于函数调用。 function push(ar
es6 语法专栏
望京十三兄的博客
04-14 210
ES6字符串扩展方法,三个方法都支持第二个参数，表示开始搜索的位置; let str = 'Hello world!'; console.log(str.includes('o')) // true ----表示是否找到了参数字符串;类似ES5 indexOf() console.log(str.startsWith('Hello')) // true ----表示参数字符串是否在原字符串的头部; console.log(str.endsWith('!')) // true ----表示参数...
关于es6新语法使用的总结
Daylighte的博客
12-02 279
1.关于splice（index，1，{...item,name:this.inputModel}），该方法将当前值替换 // 编辑目录，移出鼠标,将当然数据替换为新数据，原始的数组也进行替换 inputSub (index, item) { const rootLi = $('.menu .firstlevel').find(`li[data=${index}]`) ...
ES6 常见的数组遍历方法
qq_36702286的博客
09-29 3282
es6 vue js
es6常用操作
我的E家
02-07 401
一、数组操作1、字符串与数组转换 //作用：逗号分隔的字符串----&gt;数组 strToArray(str){ return str instanceof Array ? str : str.split(',').map(id =&gt; parseInt(id)); }, //作用：数...
python endswith函数_python startswith和endswith
weixin_39702639的博客
11-26 192
startswith判断文本是否以某个或某几个字符开始;endswith判断文本是否以某个或某几个字符结束;text = 'Happy National Day!'print text.startswith('A') # Falseprint text.startswith('H') # Trueprint text.startswith('Hap') # Truepri...
ES6知识点二
weixin_43725034的博客
10-18 86
1.变量/常量声明 let 声明变量 const 声明常量 特性 . 变量声明不会被提升，即在变量声明之前无法使用该变量 . 具有局部作用域，即let声明的变量只能在对应代码块中使用 . 不允许重复声明。 . const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改。 2.解构（模式匹配） 介绍:ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值。 数组解构(重点) ...
ES6相关知识（5）函数新特性--箭头函数
m0_62903673的博客
06-16 247
1. 函数参数默认值，注意：具有默认值的参数要写到后边。 2. args参数是一个纯数组对象，可以替代类数组argumens, 3. 箭头函数，若执行多行语句需要加上花括号
ES6中...三个点的用法
AAA的博客
11-30 628
直接上代码： <script> //1. 先定义一个obj对象 var obj = { a:1, b:2 } //2. 在定义一个obj2对象,使用ES6新特性... //把obj的每一组key，value值都展开放入obj2中 var obj2 = { c:3, ...obj, d
EAS Web：js 判断字符串中是否包含某个字符串
wimpykids的博客
10-12 347
String对象的方法 方法一: indexOf() (推荐) var str = "123"; console.log(str.indexOf("3") != -1 ); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 方法二: search() var str = "123"; console.log(str.search("3") != -1 ); // true search...
ES6新语法之字符串新增方法：startswith() ，endswith()，trim() 方法
weixin_45819386的博客
04-18 3469
系列文章目录 文章目录系列文章目录前言1.startwith（）方法2.endwith（）方法3.trim（）方法输出结果为： ![在这里插入图片描述](https://img-blog.csdnimg.cn/7c747955729a4ffab4aa4038b433f8c4.png)总结 前言 随着ES6的到来，我们JavaScript语法新增了许多语法，今天就来分享一篇关于字符串新增方法的知识； 1.startwith（）方法 作用：startsWith() 方法用于检测字符串是否以指定的前缀开始。
ES6 字符串方法：startsWith，repeat，includes，normalize，padStart，endsWith，模板字符串
最新发布
大剑师兰特的GIS世界
04-02 955
ES6 为 JavaScript 的字符串类型引入了一些新的方法，以增强对字符串的处理能力。startsWith，repeat，includes，normalize，padStart，endsWith，模板字符串
ES6 字符串的 startsWith() 和 endsWith() 方法
qq_45560350的博客
09-07 336
该方法用于检索字符串是否以指定的子字符串开头，是则返回true，否则返回false。该方法用于检索字符串是否以指定的子字符串结尾，是则返回true，否则返回false。格式：string.startsWith( str, idx )格式：string.endsWith( str, idx )
ES6 深入理解 startsWith和endsWith
超逸の学习技术博客
03-01 2075
写在开头 本文将带你深入理解ES6中对字符串操作的startsWith和endsWith函数 后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！ 推荐阅读：来自 菜鸟 的 前端实习面经 大厂 春招实习生 ES 6专栏 -> 传送门 如果想更多了解ES6，请参考之前写过的一些文章： ES6 一文弄懂 var let const 三剑客区别 吊打面试题 ES...
js ES6判断字符串是否以某个字符串开头或者结尾startsWith、endsWith
misschengispink的博客
02-29 1127
startsWith：startsWith方法用于检查字符串是否以指定的字符串开头。endsWith：endsWith方法用于检查字符串是否以指定的字符串结尾。总结：startsWith和endsWith方法是在JavaScript中用于检查字符串开头和结尾的便捷方法，能够提高字符串处理的效率和可靠性。注意事项：在使用startsWith和endsWith方法时要注意区分大小写，避免出现意外的匹配结果。另外，需要注意处理特殊字符和空字符串的情况。
（一）Python 文件操作
m0_74380478的博客
11-28 525
本文关于文件夹及文件内容相关操作，包括访问、创建、修改、添加，以及压缩文件的处理。
确定一个字符串是否包含在另一个字符串中
weixin_34311757的博客
01-12 480
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。 includes()：返回布尔值，表示是否找到了参数字符串。 startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 let s = 'Hello worl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值