ECMAScript

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量110 收藏
点赞数
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62230186/article/details/125414360
版权
本文深入讲解了JavaScript ES6中的新特性，包括let和const的局部作用域与不可重复声明，解构赋值在数组和对象中的应用，字符串的trim、repeat等方法，数组的includes、fill、set去重及filter去重，函数的默认参数、扩展参数和不定参数，以及箭头函数的使用。此外，还介绍了类与继承的概念，并通过实例展示了类小游戏的实现。
摘要由CSDN通过智能技术生成

变量声明

let
  • 局部作用域（在一对{}启用）
  • 不能变量提升
  • 在一个作用域里不能重复声明
const
  • 局部作用域（在一对{}启用）
  • 不能变量提升
  • 在一个作用域里不能重复声明
  • 变量名建议大写
  • 声明必须赋值
  • 值类型不允许修改

解构

  • 把数组,对象,解构为单独的变量（…rest剩余值）
var arr = [1,2,3,4,5,6,7,8];
var [a,b,...rest] = arr;
console.log(a,b,rest);
			
var [a,,,b=10] = [1,2,3,4];
console.log(a,b);
  • 效果图
    在这里插入图片描述
    在这里插入图片描述

对象解构

  • 和数组解构一致;…rest剩余,没有顺序
var obj = {name:"mumu",age:"18",eye:2,leg:8};
var {age,name,eye,leg=2,...rest} = obj;
console.log(name,age,leg,rest);
  • 效果图
    在这里插入图片描述

对象简写

  • 如果对的键名与值一致,可以省略,函数可以省略function关键字
 var age = 18;
 var name = "mumu";
 var obj = {name:name,age:age,say:function(){ alert(this.name+this.age)}}
 var obj2 = {name,age,say(){ alert(this.name+this.age)}} // 简写
  • 效果图
    在这里插入图片描述

字符串相关方法

  • 01 遍历字符串
var str = 'yue𠮷口'；
for(var i =0;i<str.length;i++){
	console.log(str[i])
}
 for(let s of str){
	console.log(s)
}

在这里插入图片描述

  • 02 trim 移除空格(trimLeft trimRight)
var str = '     我爱我的祖国    ';
console.log(str);
console.log(str.trim())

在这里插入图片描述

  • 03 repeat重复
console.log("我爱你\n".repeat(100))

在这里插入图片描述

  • 04 查找是否包含 indexOf lastIndexOf 找到返回下标,找不到返回-1 includes是否包含 返回true或false
var str = "台湾是中国的一个省份";
alert(str.includes("福建"))

在这里插入图片描述

  • 05 检测:startsWith 以…开头 endsWith 以…结尾
var str = "我特别喜欢和你做朋友"
alert(str.startsWith('你'));

在这里插入图片描述

  • 06 填充: padStart(位数,填充字符串) padEnd()
var str = '1';
console.log(str.padStart(3,'0'))
console.log(str.padEnd(10,'0'))

在这里插入图片描述

  • 07 字符串模板（``）,用${ }定义js,可以随意换行,可以随意使用符号
var s = '花轿';
var str = `那天,他坐上${s.length<3?'八抬大轿':'奔驰加长版'},'"微笑"'
			
			着就看不见了`;
console.log(str);

在这里插入图片描述

数组

  • 01 includes 检查
let arr = [5,"喜欢","吃肉"];
alert(arr.includes(6))

在这里插入图片描述

  • 02 fill 填充
var arr =[]; 
// 设置长度
arr.length = 5;
// 填充数组
arr.fill("填充内容",0,5); 
// 输出
console.log(arr)

在这里插入图片描述

  • 03 set 去重
var arr = [1,2,3,1,2,3,2,1,1];
// 使用set去重
// 定义一个不重复的列表
var s = new Set(arr);
 // 把set转换为数组
var arr2 = Array.from(s);
// 输出
console.log(arr2);
// 在数组里面展开一个set
var arr3 = [...new Set(arr)];
console.log(arr3);

在这里插入图片描述

  • 04 filter 去重
// filter 去重的原理:indexOf下标与当前下标对比
var arr2 = arr.filter(function(item,index){
	// return true保留,return false移除
	// indexOf 得到下标等于index当前下标 保留
	if(arr.indexOf(item)==index){
		return true;
	}else{
		return false;
	}
})
console.log(arr2)

在这里插入图片描述

函数参数

  • 01 默认参数 函数的默认参数
function say(color = '黑'){
	alert('没有你的世界是'+color+'色的');
}
say();
say('五彩');

在这里插入图片描述
在这里插入图片描述

  • 02 扩展参数(执行) 函数的拓展实参(调用)
function metting(a1,a2,a3){
	console.log(`今天来参加,中共中央政治局常委会的有,${a1},${a2},${a3}同志`);
}
var arr = ["小丁","大段","成龙","小小曾"];
// 在函数调用的时候把数组传入拓展
metting(...arr)
// metting.apply(null,arr);

在这里插入图片描述

  • 03 不定参(定义) 函数的不定参数(定义的时候)
function add(...list){
	// 把参数list列表累计相加弹出
	// alert(list,reduce((a,b)=>a+b))
	// arguments,关键字,指函数的参数列表,Array.from把类似数组的元素转换为数组
	var re = Array.from(arguments).reduce((a,b)=>a+b);
	alert(re);
}
add(15,20,30)

在这里插入图片描述

箭头函数

  • 01 箭头函数就是函数的简写形式
// 箭头左边是参数
// 箭头右边是返回值,也是函数要执行的代码
var fun = function(str){return "love"+str;}
var fun1 = str=> "love"+str;
  • 02 参数:0个或多个用()包裹
// 例1
var fun = function(a,b){alert(a+b)}
var fun2 = (a,b)=>alert(a+b)
// 例2
var fun = function(){alert("我爱ES6")}
var fun2 = ()=>alert("我爱ES6")
  • 03 返回值
// 如果返回的是一个对象,那么用括号包裹
var fun = function(){return {name:"mumu",age:18}}
var fun2 = ()=>({name:"mumu",age:18})
console.log(fun2());
  • 04 执行语句:如果执行有多行,返回语句如果用return 执行语句要用{}包裹
var fun = function(str){
	if(str.includes("俄罗斯")){
		return "沙皇大帝"
	}else{
		return "金帐汗国"
	}
}
// 
var fun2 = str=>{
	if(str.includes("俄罗斯")){
		return "沙皇大帝"
	}else{
		return "金帐汗国"
	}
}
alert(fun2('puting'))
  • 05 箭头函数的this指向上一层作用域的this
  • 06 箭头函数不能new 当构造函数

class类

类就是function 构造函数的语法糖(简写) 本质上还是函数typeof class
class类小游戏

class Box{
	// 初始化实例(构造函数)
	constructor(life=1,x=0,y=0){
		// 生命力
		this.life = life;
		// 墙的x与y值
		this.x = x;
		this.y = y;
		// 创建一个节点
		var dom = document.createElement("div");
		// 插入节点
		document.body.appendChild(dom);
		// 指定实例的dom
		this.dom = dom;
		// 更新dom
		this.updateDom();
		// 给dom添加点击事件
		this.dom.addEventListener("click",()=>{
			// 箭头函数,this指向上一层作用域this(Box实例)
			// 让生命值--
			this.life--;
			// 如果生命值小于等于0,让dom从页面删除
			if(this.life <= 0){this.dom.remove(); }
			// 更新dom
		this.updateDom();
	})
	}
	updateDom(){
					// 根据生命值的不一样,赋值给它不同的颜色
		if(this.life<3){
			this.color="#c83a0b";
		}else if(this.life<=5){
			this.color="#791810";
		}else{
			this.color="#e3e3e3";
		}
		// 修改dom的样式:宽;高;背景色;位置;左;顶
		this.dom.style.width = "100px";
		this.dom.style.height = "100px";
		this.dom.style.backgroundColor = this.color;
		this.dom.style.position="absolute";
		this.dom.style.left = this.x+"px";
		this.dom.style.top = this.y+"px";
	}
}
// Box是类:b1,b2,b3类的实例
var b1 = new Box();
// 当实例的时候会先执行constructor创建一个实例对象,也会执行updateDom更新dom
var b2 = new Box(10,100,0);
var b3  = new Box(4,200,0);
// 创建一个新的MBox 可以移动box 继承Box
// 自动移动(从上掉下来)
// 继承Box
class MBox extends Box{
	constructor(life=1,x=0,y=0){
		// super调用父构造函数的方法
		super(life,x,y);
		// 停止动画
		this.id = null;
		// 自动向下移动
		this.autoMoveDown();
	}
	autoMoveDown(){
		this.id = setInterval(()=>{
			// 更改y值
			this.y+=2;
			// 更新dom(继承Box)
			this.updateDom();
		if(this.y>window.innerHeight){
				// 如果操作了窗口的高,移除
				this.dom.remove();
				// 停止间隔调用
				clearInterval(this.id);
			}
		},16)
	}
}
// 实例化MBox
var b4 = new MBox(4,300,0)
var b5 = new MBox(10,400,-200)
var b6 = new MBox(2,500,-300)
var b7 = new MBox(3,600,-400)

效果图展示
在这里插入图片描述

李花花12138
关注
ECMAScript详解
weixin_45479891的博客
06-03 855
ECMAScript（简称ES）是由ECMA国际（European Computer Manufacturers Association）通过ECMA-262标准化的脚本语言规范。它是JavaScript的基础，定义了JavaScript的核心语法和功能。本文将详细介绍ECMAScript的语法和使用教程，并附上简单案例。
ECMAScript 详解
2301_79262050的博客
05-24 458
ECMAScript 是由 ECMA 国际标准化组织制定的一种脚本语言标准，最初由 Netscape 开发的 JavaScript 演变而来。ECMAScript 是现代网页开发中不可或缺的一部分，为 JavaScript 提供了基础语言结构和功能。本文将详细介绍 ECMAScript 的发展历史、语言特性、版本演变及其在现代编程中的应用。
【一文读懂】ECMAScript
2403_86762465的博客
08-31 604
ECMAScript（通常简称为 ES）是一种脚本语言的标准规范，由欧洲计算机制造商协会（ECMA International）制定。JavaScript 是最著名的实现了 ECMAScript 规范的语言，广泛用于 Web 开发。ECMAScript 定义了语言的核心语法和特性，但不包括任何关于图形界面、网络请求等与平台相关的 API，这些通常是 JavaScript 运行时环境提供的额外功能，例如浏览器中的 DOM（文档对象模型）或 Node.js 中的文件系统模块。
ECMAScript标准简介
xpmhhh的博客
03-21 866
ES：脚本语言的规范，JS是ES的一种实现，ES新特性其实指的就是JavaScript的新特性。 为什么要学习新特性： 语法简洁，功能丰富 框架开发应用 前端开发职位要求 ECMA（European Computer Manufacturers Association）欧洲计算机制造商协会，这个组织目标是评估，开发和认可电信和计算机标准。后改名为ECMA国际。 ECMAScript：由ECMA国际通过ECMA-262标准化的脚本程序设计语言。 ES6：模块化，面向对象语法，Promise，箭头函
ECMAScript认识续
weixin_43591127的博客
01-12 128
该语言的核心 词法结构 类型，值，变量 表达式和运算符 语句 对象 数组 函数 类和模块 正则表达式 子集和扩展 服务端的ECMAScript （这个Javascript权威指南里面的，对比官方的文档确实是重点突出，比较通俗，但少了很多细节） 词法结构 编程语言的词法结构是一套基础性规则，用来描述如何使用这门语言来编写程序，作为语法的基础，它规定诸如变量名是什么样的，怎样写注解，以及程序语句之间如何分隔等规则。 字符集 用3.0或更高版本Unicode字符编码的一个字符序列来表示ECMAScript源文本
ECMAScript简介
m0_57715356的博客
05-28 547
随着ECMAScript标准的不断更新，JavaScript的功能和性能得到了极大的提升，使得JavaScript成为现代Web开发中不可或缺的一部分。
ECMAScript介绍
weixin_46123033的博客
05-27 314
ECMAScript定义了一套完整的语法规则，包括变量声明（如var、let、const）、解构赋值、模板字符串、对象简写语法、方法简写、参数默认值、扩展运算符、箭头函数、Promise等。ECMAScript（简称ES）是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。它被广泛认为是JavaScript和JScript等语言的基础和标准化规范。综上所述，ECMAScript是一种强大、灵活和易于使用的脚本语言，广泛应用于Web开发和服务器端开发等领域。
ECMAScript 6
weixin_45948376的博客
08-15 90
自学参考：http://es6.ruanyifeng.com/
Qt-Quick核心编程之ECMAScript初探，适合Qt初学者
05-12
### Qt Quick核心编程之ECMAScript初探 #### 一、ECMAScript与JavaScript的关系及在Qt中的应用 **ECMAScript**与**JavaScript**之间的关系一直是开发领域中容易混淆的概念之一。简单来说，ECMAScript是一种规范或...
ECMAScript 2020 语言规范（ECMA-262）
01-28
ECMAScript 2020，也被称为ES2020或ECMAScript 11，是ECMAScript规范的最新版本，旨在定义JavaScript编程语言的标准。ECMAScript是由Ecma国际标准化组织制定的一个标准，它对JavaScript进行规范化，确保在不同平台和...
ECMAScript中文最新(ECMA262)
12-30
ECMAScript2021中文最新,ECMAScript2021中文文档，第1-6章，持续更新，喜欢请star。git地址https://github.com/fangniyima/ECMAScript-notes
ECMAScript-notes:ECMAScript中文笔记
05-24
正值js红宝书第四版上市，出于兴趣我便从基础重新学习了这门语言，对于很多原理性的问题都不很了解，所以我觉得是有必要完整阅读一下ECMAScript文档的。对于大多数像我这样的初级javascript程序员（虽然我现在还不是...
es6模块中使用commonjs定义的库
automation13的博客
09-11 346
为commonjs规范定义的库，指定按es6规范解析js文件。index中如果想要使用。
JavaScript ES6特性（var let const、function&=＞、增强表达赋值、类与对象）
QQ418579986的博客
09-11 450
一、var、let、const1、var和let： 1、var变量可以在声明之前使用，值为undefined。let所声明的变量一定要在声明后使用，否则报错。 // var 的情况 console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log(bar); // 报错ReferenceError let bar = 2...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 914
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 664
【代码】【JavaScript】LeetCode：707设计链表。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 582
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值