ES6 let const 解构赋值 箭头函数 内置扩展方法 Set数据结构

最新推荐文章于 2023-01-20 11:38:55 发布
最新推荐文章于 2023-01-20 11:38:55 发布
阅读量231 收藏 1
点赞数
文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38232003/article/details/107545132
版权

ES6

定义

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

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

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

基本语法

let 关键字

1、let关键字就是用来声明变量的
使用let关键字声明的变量具有块级作用域
在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
防止循环变量变成全局变量

2、使用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;
		}
经典面试题

var
函数中没有i， var 没有块级作用域，所以只有去查找全局作用域，此时i已经为2。
在这里插入图片描述

		let arr = [];
		for (var i = 0; i < 2; i++) {
			arr[i] = function () {
				console.log(i);
			}
		}
		arr[0]();  // 2
		arr[1]();  // 2

let
每次循环都会产生一个块级作用域，每个块级作用域的值都是不同的。函数没有定义i，所以向上查找到块级作用域。
在这里插入图片描述

		let arr = [];
		for (let i = 0; i < 2; i++) {
			arr[i] = function () {
				console.log(i);
			}
		}
		arr[0]();  // 0
		arr[1]();  // 1

const关键字

使用const关键字声明的常量具有块级作用域
使用const关键字声明的常量必须赋初始值
不存在变量提升
常量声明后值（内存地址）不可更改，但可改变复杂数据类型的属性的值。

		// 使用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);

var let const 三者区别

在这里插入图片描述

  • 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
  • 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
  • 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

解构赋值

1. 数组结构

数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
如果解构不成功，变量的值为undefined

		// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
		let ary = [1,2,3];
		let [a, b, c, d, e] = ary;
		console.log(a)  //1
		console.log(b)  //2
		console.log(c)  //3
		console.log(d)  //undefined
		console.log(e)  //undefined
2. 对象解构

对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量

1. 变量名必须与对象的属性一致

		// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
		let person = {name: 'lisi', age: 30, sex: '男'};
		// let { name, age, sex } = person;
		// console.log(name)
		// console.log(age)
		// console.log(sex)

2. 通过以下方法可以自定义变量名

		let {name: myName} = person;
		console.log(myName)

箭头函数

箭头函数是用来简化函数定义语法的
() => { }，通常使用一个变量去接收

  1. 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
  2. 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
  3. 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
		// 箭头函数是用来简化函数定义语法的
		// const fn = () => {
		// 	console.log(123)
		// }
		// fn();
		// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
		// const sum = (n1, n2) => n1 + n2;	 
		// const result = sum(10, 20);
		// console.log(result)
		// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
		// const fn = v => {
		// 	alert(v);
		// }
		// fn(20)
箭头函数中的 this

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

  • 箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
  • 箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题
		const obj = { name: '张三'} 
		 function fn () { 
		     console.log(this);//this 指向 是obj对象
		     return () => { 
		         console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
		     } 
		 } 
		 const resFn = fn.call(obj); 
		 resFn();
箭头函数面试题

箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域。

		var age = 100;
		var obj = {
			age: 20,
			say: () => {
				alert(this.age)
			}
		}
		obj.say();   // 100

剩余参数 …

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数

剩余参数和函数配合使用
		function sum (first, ...args) {
		     console.log(first); // 10
		     console.log(args); // [20, 30] 
		 }
		 sum(10, 20, 30)
剩余参数和解构配合使用
		let students = ['wangwu', 'zhangsan', 'lisi'];
		let [s1, ...s2] = students; 
		console.log(s1);  // 'wangwu' 
		console.log(s2);  // ['zhangsan', 'lisi']

内置对象扩展

Array 的扩展方法

扩展运算符（展开语法）
  1. 扩展运算符可以将数组拆分成以逗号分隔的参数序列
  2. 扩展运算符应用于数组合并 ( 原始方法 concat() ）
  3. 利用扩展运算符将伪数组转换为真正的数组（伪数组不能使用数组下的方法push、forEach等）
		// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
		// let ary = ["a", "b", "c"];
		// ...ary // "a", "b", "c"
		// console.log(...ary)
		// console.log("a", "b", "c")
		
		// 扩展运算符应用于数组合并
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];
		// // ...ary1 // 1, 2, 3
		// // ...ary1 // 4, 5, 6
		// let ary3 = [...ary1, ...ary2];
		// console.log(ary3)

		// 合并数组的第二种方法
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];
		// ary1.push(...ary2);
		// console.log(ary1)
		// let arr3 = arr1.concat(arr2); 
		
		// 利用扩展运算符将伪数组转换为真正的数组
		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs)
		var ary = [...oDivs];
		ary.push('a');
		console.log(ary);
构造函数方法：Array.from()

将伪数组或可遍历对象转换为真正的数组

		//定义一个集合
		let arrayLike = {
		    '0': 'a',
		    '1': 'b',
		    '2': 'c',
		    length: 3
		}; 
		//转成数组
		let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

		 let arrayLike = { 
		     "0": 1,
		     "1": 2,
		     "length": 2
		 }
		 let newAry = Array.from(arrayLike, item => item *2)//[2,4]

注意：如果是对象，那么属性需要写对应的索引

实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

		let ary = [{
		     id: 1,
		     name: '张三'
		 }, { 
		     id: 2,
		     name: '李四'
		 }]; 
		 let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个
实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

		let ary = [1, 5, 10, 15];
		let index = ary.findIndex((value, index) => value > 9); 
		console.log(index); // 2
实例方法：includes()

判断某个数组是否包含给定的值，返回布尔值。

		[1, 2, 3].includes(2) // true 
		[1, 2, 3].includes(4) // false

String 的扩展方法

模板字符串

ES6新增的创建字符串的方式，使用反引号定义

let name = `zhangsan`;
模板字符串中可以解析变量 ${ }
let name = '张三'; 
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan
模板字符串中可以换行
 let result = { 
     name: 'zhangsan', 
     age: 20,
     sex: '男' 
 } 
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;
在模板字符串中可以调用函数
const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${sayHello()} 哈哈哈哈`;
 console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
实例方法：startsWith() 和 endsWith()
  • startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
  • endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
let str = 'Hello world!';
str.startsWith('Hello') // true 
str.endsWith('!')       // true
实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串

'x'.repeat(3)      // "xxx" 
'hello'.repeat(2)  // "hellohello"

Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构
set.size Set长度

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}
实例方法
  • add(value)：添加某个值，返回 Set 结构本身
  • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
  • has(value)：返回一个布尔值，表示该值是否为 Set 的成员
  • clear()：清除所有成员，没有返回值
 const s = new Set();
 s.add(1).add(2).add(3); // 向 set 结构中添加值 
 s.delete(2)             // 删除 set 结构中的2值   
 s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear()               // 清除 set 结构中的所有值
 //注意：删除的是元素的值，不是代表的索引
遍历

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

s.forEach(value => console.log(value))
sharp_wu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6 常用功能总结（箭头函数、let/const、解构赋值、模板字符串、Promise对象等）
LUOandHUANG的博客
10-11 1086
let关键字 作用：与var类似，用于声明一个变量 与var不同：let所声明的变量，在块级作用域内有效，也就是只在它所在的代码块有效 { let a = 100; var b = 10; } console.log(a); //undefined console.log(b); //10 不能重复声明 不能在相同作用域内重复声明同一个变量 // 报错 function func()...
小王的学习笔记（六）——var、let、const、解构
小王的博客
11-10 190
let——为js新增块级作用域 let声明的变量只在当前代码块内有效 存在暂时性死区（避免变量的全局污染） 不存在变量提升 不允许重复声明 const const 声明一个只读的常量，不允许重新赋值 声明的同时必须初始化 不存在变量提升 只在当前代码块内有效 存在暂时性死区 var let const的区别 var全局声明变量，let，const声明的变量只在let，const所在代码块内有效。 var存在变量提升，即变量可以在声明之前使用，值为undefined，let声明的变量必须在声明后才可以使用，
数组 字符串的解构赋值 以及const命令
weixin_30900589的博客
07-22 116
// ES6允许按照一定模式 从数组和对象中提取值 对变量进行赋值 这就是解构 let [a,b,c] = [1,2,3]//模式匹配 let [foo,[[bar],baz]] = [1,[[2],3]] foo//1 bar//2 baz//3 let [head,...tail] = [1,2,3,4]; head/...
ES6学习笔记之const和let，变量的解构
wjswangjinsheng的博客
03-07 254
一、const和let 1 const const用来定义常量，所谓的常量就是值一旦给定后就不变，一次定义终身不变的量 const a = 10; a = 20; 上面的a就是一个常量，若给a重新赋值，你会发现报错了 注意：const通常会定义两种东西： l 定义函数 l 定义一些特殊的字符串和常数 常量名一般都是全大写，如果由多个单词组成，用下划线隔开，暗示这个是常量 2 let let用...
何时使用 成员操作符.与箭头操作符->
tahelin的专栏
07-02 1086
记录一下，目前自己也搞不清楚 C++ Primer
ES6解构赋值的功能与用途实例分析
10-19
ES6解构赋值是JavaScript中一种强大的语法特性，它允许开发者从数组或对象中方便地提取值，并将其赋值给一组变量。这种赋值方式极大地提高了代码的可读性和简洁性。以下是关于ES6解构赋值功能和用途的详细解释，以及...
JavaScript中 ES6变量的结构赋值
10-18
JavaScript中的ES6（ECMAScript 2015）引入了许多新特性，其中结构赋值是一种强大而便捷的语法糖，极大地提高了代码的可读性和效率。本文将深入讲解JavaScript中ES6变量的结构赋值及其应用。 1. **交换变量的值** ...
ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解
12-02
在ES6中，Set和Map是两种新的数据结构，它们为JavaScript开发提供了更高效和灵活的数据管理方式。本文将深入探讨这两个数据结构以及它们与其他数据结构之间的转换操作。 首先，Set是一个只包含唯一值的数据结构，它...
浅谈JavaScript中ES6新增的Set和Map结构以及Array.from方法
01-08
Set 和 Map 是 JavaScript 中 ES6 引入的两种新的数据结构，它们提供了更高效和便捷的方式来处理数据。本文将深入探讨这两个数据结构及其相关的 `Array.from` 方法。 首先，让我们来详细了解一下 Set 结构。Set ...
ES6解构赋值实例详解
01-19
本文实例讲述了ES6解构赋值。分享给大家供大家参考，具体如下： 基本用法 let [x, y, ...z] = ['a'] //a, undefined, [] 1.等号右边如果不是数组，将会报错（不是可遍历结构） 2.解构赋值 var, let, const命令声明...
es6箭头函数基本使用方法
最新发布
qq_73599840的博客
01-20 110
总结es6箭头函数基本使用方法
11【JS – ES6】 变量 ； const 常量 ； var, let and const的区别； 解构赋值； 箭头函数；剩余参数；扩展运算符；构造函数方法；常用实例方法；模板字符串；字符串方法
嘿嘿_哈哈的博客
09-28 305
11【JS – ES6】 变量 ; const 常量 ; var, let and const的区别; 解构赋值; 箭头函数；剩余参数；扩展运算符；构造函数方法；常用实例方法；模板字符串；字符串方法；set数据结构 JS 本身令人不满意的地方。变量提升的比可预测性，语法过于松散，实现相同的功能，不同的人会写出不同的代码 1，变量 let - 1）, 具有块级作用域 { 大括号}产生的作用域 - 2）, 防止循环变量变成全局变量 ...
es6箭头函数
m0_62962469的博客
05-09 318
es6中新增的定义函数的方式： () => {} const fn = () => {} 函数体中只有一句代码，且代码的执行结果就是返回值，就可以省略大括号与return。 function fn(num1, num2) { return num1 + num2 } //它就等效于底下的代码 const fn = (num1, num2) => num1 + num2 如果形参只有一个，就可以省略小括号。 const
第四课：ES6新语法：箭头函数（2021/4/21）
weixin_41033048的博客
04-21 138
一、箭头函数是用来简化函数定义语法的 () =>{} const fn = () =>{} // 在箭头函数中 如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值 函数体大括号可以省略 const sum = (n1,n2) =>{ return n1 + n2; } // 可以简化为： const sum = (n1,n2) => n1 + n2; // 如果形参只有一个，可以省略小括号 function fn(v){ return .
ES6:箭头函数的特点及this问题
weixin_46682277的博客
07-16 300
箭头函数是用来简化函数定义语法的： // 如下就是一个箭头函数 const fn = () => { console.log(123); } fn(); 1.在箭头函数中，如果{}函数体只有一句代码，且代码的执行结果就是函数的返回值，函数体大括号{}可以省略不写。 const fn = (x,y) => { return x+y; } console.log(fn(1,3)); // 4
ES6：箭头函数
Sfh的博客
08-23 187
ES6中新增的定义函数的方式 (箭头函数是用来简化函数定义语法的) () => { } const fn = () => { } 1、在箭头函数中，函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号 const sum = (num1,num2) => num1+num2; const result = sum(10,20); console.log(result); 2、如果形参只有一个，可以省略小括号 function fn(v){ retu
ES6知识点--let&const&解构解析
yanhhhhhh的博客
03-01 473
目录ES6let&const特性let经典面试题constes5定义常量const定义常量解构赋值ES6中数组方法forEachforEach&&breake&&continuesomeeverymapfilterreduce累加累乘结合Math.max()求最大值去重findfindIndexfor in???for ofarr.values()arr.keys()arr.entries() ES6 let&const特性 不属于顶层对象window 不
ES6 新增语法与内置对象扩展
鲁毅的博客
07-27 626
1. 什么是 ES6 ES 全称 ECMAScript，它是由 ECMA 国际化标准组织制定的一项脚本语言的标准化规范。 2. 为什么使用 ES6 每一次新标准的诞生，都意味着语言的完善、功能的加强。JavaScript 语言本身有一些令人不满意的地方： 变量提升特性增加了程序运行时的不可预测性。 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。 3. ES6 新增语法 3.1 let ES6 中新增了用于声明变量的关键字 3.1.1 let 声明的变量只在所处的块级有效 if (true
let和const总结
a3060858469的博客
06-16 197
只在命令行所在的代码块中有效，使用let声明的变量在域解析的时候不会被提升 严格模式 'use strict' let定义变量没有变量的提升(没有预解释) console.log(a);//undefined 只声明未定义 var a=1; console.log(a); //1 console.log(a); a is not defined let a=1; console...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值