JavaScript高级第五天学习总结—— ES6的新增语法、ES6 的内置对象扩展

最新推荐文章于 2022-07-12 18:55:14 发布
最新推荐文章于 2022-07-12 18:55:14 发布
阅读量239 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52819925/article/details/119850789
版权

ES6

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

在这里插入图片描述

ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。

为什么使用 ES6？

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

  • 变量提升特性增加了程序运行时的不可预测性
  • 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

ES6 的新增语法

let

ES6中新增了用于声明变量的关键字

let声明的变量只在所处于的块级有效

if (true) {
    // 大括号可以形成块级作用域
     let a = 10;
 }
console.log(a) //报错: a is not defined

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

好处 : 可以防止循环变量变成全局变量 : (使用var就不会报错)

for (let i = 0; i < 2; i++) {
   }
console.log(i);//报错: i is not defined

不存在变量提升

console.log(a); // a is not defined 
let a = 20;

暂时性死区

利用let声明的变量会绑定在这个块级作用域，不会受外界的影响

 var tmp = 123;
 if (true) {
    //因为在此块级作用域中，使用了let声明了tmp变量，那么tmp会与此块级作用域进行绑定，形成死区，不受外界影响（无法访问外部的tmp）
     tmp = 'abc';//这里会报错，变量未声明，不能赋值
     let tmp; 
 }

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用let关键字声明变量</title>
</head>
<body>
	<script type="text/javascript">
		/*
			let关键字就是用来声明变量的

			使用let关键字声明的变量具有块级作用域

			在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

			防止循环变量变成全局变量

			使用let关键字声明的变量没有变量提升

			使用let关键字声明的变量具有暂时性死区特性

		*/
		
		/* --------let关键字就是用来声明变量的-------- */
		// let a = 10;
		// console.log(a);
		
		/* --------使用let关键字声明的变量具有块级作用域-------- */
		// if (true) {
     
		// 	let b = 20;
		// 	console.log(b)
		// 	if (true) {
     
		// 		let c = 30;
		// 	}
		// 	console.log(c);
		// }
		// console.log(b)
		
		/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */

		// if (true) {
     
		// 	let num = 100;
		// 	var abc = 200;
		// }
		// console.log(abc);
		// console.log(num)


		/* -------防止循环变量变成全局变量--------- */
		// for (let i = 0; i < 2; i++) {}
		// console.log(i);
		

		/*-----使用let关键字声明的变量没有变量提升------*/
		// console.log(a);
		// let a = 100;
		

		/* -------使用let关键字声明的变量具有暂时性死区特性------- */
		var num = 10
		if (true) {
     
			console.log(num);
			let num = 20;
		}
	</script>
</body>
</html>

经典面试题

面试题1：此题没有用到let
var arr = [];
 for (var i = 0; i < 2; i++) {
   
     arr[i] = function () {
   
         console.log(i); 
     }
 }
 arr[0](); //2
 arr[1](); //2

在这里插入图片描述

经典面试题图解：此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值。

面试题2：此题用到let关键字
 let arr = [];
 for (let i = 0; i < 2; i++) {
   
     arr[i] = function () {
   
         console.log(i); 
     }
 }
 arr[0]();//0
 arr[1]();//1

在这里插入图片描述

经典面试题图解：

  • 此题的关键点在于每次循环都会产生一个块级作用域，
  • 每个块级作用域中的变量都是不同的，
  • 函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.

小结

  • let关键字就是用来声明变量的
  • 使用let关键字声明的变量具有块级作用域
  • 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
  • 防止循环变量变成全局变量
    • 循环中的i，使用var声明的话是全局变量，但是这样不合理，而使用let就是局部变量
  • 使用let关键字声明的变量没有变量提升
  • 使用let关键字声明的变量具有暂时性死区特性
    • 死区：不受外界影响

const

作用：声明常量，常量就是值（内存地址）不能变化的量

常量：常态的量，值是常态的量，值无法改变

const：constant常量

具有块级作用域

 if (true) {
    
     const a = 10;
 }
console.log(a) // a is not defined

声明常量时必须赋值

const PI; // Missing initializer in const declaration，声明常量时丢失初始化

常量赋值后，值不能修改 （栈中存储的内容无法修改）

  • 如果是简单数据类型，则不允许修改值。
  • 如果是复杂数据类型，不能改变地址，只能改变内部的值
const PI = 3.14;
PI = 100; // Assignment to constant variable. //给常量重新指定值

const ary = [100, 200];
ary[0] = 'a';//复杂数据类型内部的值，是可以改变的
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // Assignment to constant variable.//但是复杂数据类型变量本身无法改变

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用const关键字声明常量</title>
</head>
<body>
	<script type="text/javascript">
		// 使用const关键字声明的常量具有块级作用域
		// if (true) {
     
		// 	const a = 10;
		// 	if (true) {
     
		// 		const a = 20;
		// 		console.log(a);
		// 	}
		// 	console.log(a);
		// }
		// console.log(a);
		
		// 使用const关键字声明的常量必须赋初始值
		// const PI = 3.14;
		
		// 常量声明后值不可更改 
		const PI = 3.14;
		// PI = 100;
		const ary = [100, 200];
		ary[0] = 123;
		ary = [1, 2]
		console.log(ary);
	</script>
</body>
</html>

小结

  • 具有块级作用域

  • 声明常量时必须赋值

  • const声明的变量是一个常量

  • 既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更

最低0.47元/天 解锁文章
李穩钰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2802
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
JavaScript ES6新增语法相关个人总结（三）
Scorpio_sky的博客
01-23 124
目录Promise基础- 基本语法- then方法- 链式调用- catch方法Set（集合）- Set相关应用Map数据结构 Promise基础 - 基本语法 代码例： // 实例化Promise对象 const p = new Promise(function(resolve, reject){ setTimeout(function(){ let data = '请求成功的数据' // 请求成功，调用resolve resolve(data) // let err = '请求失败'
let关键字金典面试题
VirGilZhong的博客
09-03 244
1.调用for循环赋值数组中的函数结果(使用var 声明变量i) <script> var arr= []; for(var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } //因为是把函数赋值给数组，所以可以用小括号直接调用。 //var声明的不是块级作用域，所以可以打印，且不满足for循环时，i=2，故arr[0]()、arr[1]()打印的值是2 arr[0](); arr[1](
es6
weixin_44336981的博客
03-01 273
ES就ECMAScript，ECMA标准化组织发布的一项脚本语言标准化规范 ES6是一个泛指，泛指ES2015及其之后的版本 一、let关键字是用来定义变量的 let定义的变量有块级作用域，而用var定义的变量是木有块级作用域，块级作用域就是一对花括号 if (true) { var a = 10 } console.log(a) // 10 if (true) { let a = 10 }...
es6---新增语法&内置对象拓展
寻常的博客
09-24 104
一、新增语法 解构赋值 ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。 数组解构 let [a, b, c] = [1, 2, 3]; console.log(a); //1 console.log(b); //2 console.log(c); //3 解构不成功，变量值为undefined let [x] = []; console.log(x); //und
数组遍历的方法
weixin_48181168的博客
09-07 1426
1. for 循环 let arr = [1, 2, 3] for(let i = 0; i < arr.length; i++){ console.log(arr[i]) } 2. forEach 方法 const arr1 = [1, 2, 3, 4, 5]; //声明数组 arr1.forEach(function(item) { console.log(item) //item为每一项，不是每一项的索引（切记） }) //使用箭头函数 arr1.forEa
JavaScript——ES6新增对象方法
qq_52748669的博客
07-12 835
JavaScript——ES6新增对象方法
es6-ES6概念&新增语法&内置对象拓展1
08-03
es6-ES6概念&新增语法&内置对象拓展1
前端javaScript es6语法学习 demo
12-25
js es6语法学习 包括 Map,promise,rest参数,对象扩展,集合set,箭头的使用,解构,扩展运算符,生成器,数值扩展.
ES6基本语法及新增语法
08-20
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
JavaScript ES6中的简写语法总结与使用技巧
10-17
我们在看编写的JS ES6代码时经常会看到许多简写的语法,本篇文章就为大家一一介绍JavaScript ES6可以简写的语法
JS--常见面试题
小白小白从不日别的博客
08-28 3034
整理和列举了一些初级JS的比较高频的面试题 a.var和let、const的区别： var是ES5语法，let、const是ES6的语法；var有变量提升 var a = 100; console.log(a); //100 // 变量提升 console.log(b); //undefined var b = 150; console.log(c); let c = 200; var和let是变量，可修改；const是常量，不可修改 let、const有块级作用域，var没有 .
javascriptES6 -let 经典面试题
weixin_44638167的博客
10-05 315
面试题1: var arr=[]; for (var i=0;i<2;i++){ arr[i]=function(){ console.log(i); } } arr[0](); arr[1](); 在上面的代码中可以看出 arr[0]()和arr[1]()可以看成console.log(i); 那么代码就变成了 var arr=[];
JavaScript高级第一天学习总结—— 面向对象、ES6 中的类和对象、类的继承、案例：面向对象版tab 栏切换
weixin_52819925的博客
08-21 2198
面向对象编程介绍 两大编程思想 面向过程 面向对象 面向过程编程 POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 总结：按照步骤编程 （函数和变量） 面向对象编程 OOP (Object Oriented Programming) 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 总结：将需求分析出一个一个的对象，然后在分析出对象中的属性和方法，最
JavaScript第五天学习总结—— 对象、创建对象的三种方式、遍历对象
weixin_52819925的博客
08-04 723
对象的相关概念 什么是对象？ 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CxMlEWd1-1628091491881)(C:\Users\26036\Desktop\images\图片3.png)]
JavaScript高级第三天学习总结—— 函数的定义和调用、this、严格模式、高阶函数、闭包、递归
weixin_52819925的博客
08-21 507
函数的定义和调用 函数的定义方式 方式1： 函数声明方式 function关键字 (命名函数) function fn(){} 方式2： 函数表达式(匿名函数) var fn = function(){} 方式3： new Function() （函数也是对象，所以可以new） var fn = new Function('参数1','参数2'..., '函数体') var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2);
JavaScript高级第二天学习总结—— 构造函数和原型、继承、ES5中新增方法
weixin_52819925的博客
08-21 444
构造函数和原型 对象的三种创建方式 1.利用 对象字面量 方式创建对象 var obj = {}; 2.利用new Object()关键字 创建对象 var obj = new Object(); 3.自定义构造函数方式创建对象 function Person(name，age){ this.name = name; this.age = age; } var obj = new Person('zs'，12); 示例代码: <!DOCTYPE html> <html lan
JavaScript第三天学习总结—— 三角形、九九乘法表
weixin_52819925的博客
08-04 441
for循环案例 求1-100之间所有数的平均值 // 1. 求1-100之间所有数的平均值 需要一个 sum 和的变量 还需要一个平均值 average 变量 var sum = 0; var average = 0; for (var i = 1; i <= 100; i++) { sum = sum + i; } average = sum / 100; console.log(average); 求1-100之间所有偶数和奇数的和 // 2. 求1-100之间所有偶数和奇数的
JavaScript高级第四天学习总结—— 正则表达式、正则表达式在JavaScript中的使用、正则表达式中的特殊字符、正则表达式中的替换
weixin_52819925的博客
08-22 367
正则表达式概述 正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式 在JavaScript中，正则表达式也是对象 正则表通常被用来检索、替换那些符合某个模式（规则）的文本， 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。 此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。 其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则
es6新增语法有那些
最新发布
02-06
ES6（ECMAScript 2015）是JavaScript的一个重要版本，引入了许多新的语法和特性。以下是ES6新增的一些主要语法： 1. let和const关键字：用于声明块级作用域的变量。let声明的变量可以被重新赋值，而const声明的变量...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值