ES6一

最新推荐文章于 2024-09-20 21:52:54 发布
最新推荐文章于 2024-09-20 21:52:54 发布
阅读量259 收藏
点赞数
分类专栏： es6 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rayshaan/article/details/110512514
版权

2020.12.3 上午4:00

ES6

es6==>基本概念、let、const、模板字符串、解构赋值、数组的扩展

01.基本概念

es6 指的是ECMAScript扩展
ES6 的第一个版本，在 2015 年 6 月发布，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等

02.let

let块级作用域:{就是代码块}向上寻找距离该变量最近的开始的函数的{，作用范围就是该{}之内

{
	let a=10;
	console.log(a);//10
}
console.log(a);//报错 a is not defined

//let不能重复声明
let m=100;
let m=1;
// 报错 'm' has already been declared  已经声明过

//没有变量提升的概念
console.log(k);//报错 不能在声明之前使用
let k=10;

let特点总结(区别于var):
1.块级作用域
2.不能重复声明
3.没有变量提升的概念

暂时性死区:在一个代码块内，如果有某个变量，会绑定该区域，不再受外界的影响，let没有变量提升的概念

//let声明变量之前，不能使用
let m=100;
{	
	//暂时性死区,m已经绑定该块级作用域，不受外界的影响,如果在声明前使用就会报错
	console.log(m); //报错
	let m=10;
	console.log(m);//10
}
console.log(m);//100

易错情况

let a=10;
var a=10;
//报错  重复声明

let a=10;
{
	var a=10;
}
//直接写{}不会限制var创建的变量,只有函数的{}可以限制
//报错 重复声明

var a=10;
{
	let a=10;
}
//let绑定在{},不受外界的影响
//不会报错 

let a=10;
(function add(){	
	var a=10;	
})();
//var a=10的作用域限制在自调用函数内,不会影响外界
//不会报错

03.let的应用

<body>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>

	<script>
		var btns=document.getElementsByTagName('button');
		// let将i的作用域限制在for的{}中
		for(let i=0;i<btns.length;i++){
			btns[i].onclick=function(){
				btns[i].style.background='lime';
			}
		}
	</script>
</body>

2020.12.4

04.const

const声明的是常量，值是不可以改变的(不能重新赋值)，其余语法和let一样

const a=5000;
a=100;
//报错 常量不能重新赋值

console.log(a);
const a=100;
//报错 a声明之前不能使用

const a=100;
const a=200;
//报错 重复声明

const特点总结:
1.不能重新赋值
2.块级作用域
3.不能重复声明
4.没有变量提升的概念

//针对对象的用法

const stu={
	name:'zs'
}
//stu是对象，在内存中以地址的形式存在，修改了数据但是地址没变
stu.name='ls';//不会报错

//重新赋值会报错(地址改变)
stu={
	name:'ls'
}

05.模板字符串

模板字符串 在变量和常量拼接的时候使用   整个字符串使用`${变量}`

标签模板 ``可以跟在一个函数后面，该函数将被调用来处理这个模板字符串。这被称为模板标签功能

function fn(x){
	console.log(x);
}
//解析函数参数的时候，会把参数解析成一个数组形式(传很多参数也只会处理成一个)
//会将1和23解析成数组，[1,23]然后赋给x
fn`1,23`;

在这里插入图片描述

//模板字符串作为函数参数参数存在。会执行函数,自动解析参数  把所有常量拼接成一个数组。变量依次拼接到数组后面
function fn(x,y){
	console.log(arguments);
};
var m=10;
var n=100;
fn`hello${m}zsh${n}m${m+n}n`;

//等价于
fn(['hello','zsh','m','n'],m,n,m+n);

输出:
在这里插入图片描述

06.解构赋值

解构：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为解构

//数组的解构,按照数组顺序依次赋值
let [a,b,c]=[10,100,'h'];

//等价于
let a=10;
let b=100;
let c='h';

//如果变量多余，相当于声明不赋值。如果数据多余，对变量没有影响

//变量多余
let [a,b,c,d]=[10,100,'h'];
console.log(a,b,c,d);//10,100,'h',undefined

//数据多余
let [a,b,c,d]=[10,100,'h',12,3,4,5,5];
console.log(a,b,c,d);//10,100,'h',12

交换变量的值：

let m=12;
let n='my';
[n,m]=[m,n];
console.log(m,n);//my,12

对象的解构赋值

对象的解构赋值 使用的是{}
对象的解构与数组的解构有一个重要的不同，数组的元素是按次序排列的
数组解构中，变量的值由所处的位置决定。对象的属性没有次序，变量必须与属性同名才可以，才可以取到正确的值。

var stu={
	name:'za',
	age:112
};
//hobby相当于声明了没赋值
let {name,age,hobby}={stu};
console.log(name,age.hobby);//za,112,undefined

字符串的解构赋值

按照字符串的顺序依次赋值

let [x,y,z]='hello';
console.log(x,y,z);//h,e,l

类数组的对象的解构赋值

类似数组的对象都有一个length属性，可以对该属性进行解构赋值。

let {length:len}='zsh';
console.log(len);//3

函数的解构赋值

函数的解构赋值类似于数组的解构解构

function add([a,b]){
	console.log(a+b);
}
add([3,4]);//7
//字符串拼接，相当于把字符串3赋给了a,字符串4赋给了b
add('34');//34

07.数组的扩展

es6中创建数组的新方式

var arr=new Array(10);
console.log(arr);//创建一个length为10的数组

//es6中创建数组的新方式
arr=Array.of(10);
console.log(arr);//创建一个length为1,值为10的数组

Array.of()对new Array()的扩展 。不论输入什么，都代表的是数组元素。

类数组

判断a否是类数组 a instanceof Array

var btns=document.getElementsByTagName('button');
console.log(btns instanceof Array);//false

//forEach只能遍历数组,不能遍历类数组
btns.forEach(function(item,index,arr){
	console.log(arr);
});
//报错 btns.forEach is not a function

//通过es6中的Array.from()将类数组转为为数组
btns=Array.from(btns);
btns.forEach(function(item,index,arr){
	console.log(arr);
});

Array.from()将类数组转为为数组

var stu={//类数组
	0:'a',
	1:'b',
	2:'c',
	length:3
}
stu=Array.from(stu);//将stu转为数组
stu.forEach(function(item,index,arr){
	console.log(item);//a,b,c
});

类数组 一定要严格按照格式来写 属性名是0 1 2 并且一定要有length。如果转化为了数组，最终的长度是length的值

find和findIndex

数组.find(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的值
从左到右寻找 如果找不到结果是undefined

var score=[98,60,45,56];
var m=score.find(function(n){
	return n<60;
});
console.log(m);//45

数组.findIndex(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的下标。从左到右寻找 如果找不到结果是-1。

var score=[98,60,45,56];
var x=score.findIndex(function(n){
	return n<80;
});
console.log(x);//1
11adaacc
关注
专栏目录
es6 阮一峰
02-07
《ES6 阮一峰》是一本详细解读ECMAScript 6（也称为ES2015）标准的中文指南，由知名前端开发者阮一峰编写。这本书以PDF格式提供，适合读者在线阅读或下载后离线学习，并且允许在文档上做笔记，为学习过程提供了便利...
es6笔记es6笔记es6笔记
04-03
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，引入了许多新特性，其中面向对象编程的改进是其一大亮点。本文将深入探讨ES6中的面向对象编程，包括类和对象、类继承以及面向对象的实践案例。 1. ...
最近会一直更新一些ES6基础，picke 你需要的吧！
AnlanJion的博客
06-12 341
 清醒一下，写篇博客吧！今天给大家介绍一下Promise     promise的作用：  解决异步处理同步：{        优点：代码编写简单        缺点:  用户体验差，性能低，卡页面}   3. 异步{        优点：用户体验好，性能高，不卡页面        缺点：代码编写复杂}    案例：    一次请求多个异步处理ajax:{                     ...
ES6 1
qq_40187274的博客
10-21 102
ES6 严格模式 let和const 箭头函数 五级标题 六级标题
ES6箭头函数
weixin_44530344的博客
08-11 601
我们来学习一下es6的箭头函数。(只有一个形参的时候)可以省略。{}可以省略，当只有一句代码或者只有返回值的时候，省略return。没有arguments。箭头函数没有this，箭头函数this是父级作用域的。
ES6 数组
CH_CHENG的博客
04-24 351
数组创建 Array.of() 将参数中的所有值构建成数组元素形成数组，当参数为空时返回一个空数组。如下图 注意：参数值可以为不同类型 Array.from(arrayLike[, mapFn[, thisArg]]) 将类数组对象或可迭代对象转化为数组并且返回。如果由空位则会用undefined表示，如下图 参数详解 arrayLike 想要转换的类数组对象或可迭代对象。 mapFn...
es6部分面试题
zml3427179572的博客
06-16 1491
ES6在String原型上新增了includes()方法，用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰), 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串。).此外还新增了copyWithin(), includes(), fill(),flat()等方法，可方便的用于字符串的查找，补全,转换等。
ES6中的函数
syy的博客
11-11 1284
ES6函数
ES6 (一）——ES6 简介及环境搭建
m0_62701594的博客
08-13 1356
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
es6 模块化语法
m0_48884170的博客
04-29 874
ES6 模块化规范是官方推出的，浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需额外学习 AMD、CMD 或 CommonJS 等模块化规范ES6 模块化规范中定义：每个 js 文件都是一个独立的模块导入其它模块成员使用 `import` 关键字向外共享模块成员使用 `export` 关键字。
ES6 filter
sun_qqq的博客
05-11 996
es6 filter
es6的generator
口袋的天空的博客
03-16 665
generator函数是es6引入的，主要用于异步编程generator最大特点是交出函数的执行权（即暂停执行，通过yield实现该功能）
ES6_es6_
09-30
**ES6（ECMAScript 2015）**是JavaScript语言的一个重要更新版本，引入了许多新特性，极大地提升了开发效率和代码质量。本总结将详细介绍ES6的关键知识点。 1. **变量声明与作用域** - **let 和 const**：替代了...
es6-string-html：es6多行字符串中的突出显示代码
02-05
如果这个项目可以帮助您减少开发时间，可以给我一杯咖啡:) 例 用法 只需在字符串之前插入注释/ * html * /或html （或sql而不是html）（有关可能的值，请参见“要求”部分），或从命令菜单中选择Insert es6-string-h
将阮一峰老师的《ES6入门教程》的源码拷贝本地运行和发布
最新发布
沐爸的博客
09-20 578
我是全网第一个这么干的吗？！
vite配置将es6打包成es5
前端小菜鸟也有人起的博客
09-20 204
vite配置将es6打包成es5
es6（1）
BHDDGT的博客
09-11 839
es6简介，Babel转码器，let和const，变量的解构赋值，字符串的扩展
es6 和 commonJS 模块管理的区别
Flying_Fish_roe的博客
09-20 580
ES6 模块和 CommonJS 模块各有其优点和适用场景。CommonJS 适合服务器端开发，具有运行时加载、动态引入和单例缓存的特点。ES6 模块则更加现代化，支持静态分析、异步加载和浏览器原生支持，在前端开发中展现出显著的优势。在开发过程中，选择哪个模块系统应根据项目的需求和运行环境来决定。如果是在浏览器中开发现代化的前端应用，ES6 模块是最佳选择；而如果是构建基于 Node.js 的后端应用，CommonJS 依然是主流。
es6一维数组转二维数组
06-03
可以使用ES6中的`Array.from()`方法和`Array.slice()`方法将一维数组转换为二维数组。具体实现如下： ```javascript const arr1 = [1, 2, 3, 4, 5, 6]; const row = 2; const col = 3; const arr2 = Array.from({ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值