ES6新语法

最新推荐文章于 2023-12-25 09:10:06 发布
最新推荐文章于 2023-12-25 09:10:06 发布
阅读量292 收藏 3
点赞数 5
文章标签： es6 javascript 前端 html5
passerby
本文链接：https://blog.csdn.net/H20031011/article/details/130523148
版权
文章详细介绍了JavaScriptES6中的let命令，包括其块级作用域、不提前声明和不可重复声明的特性。接着讨论了const常量声明以及其值不可变的规则。此外，还阐述了解构赋值的概念，分别展示了数组和对象解构的用法。最后，提到了字符串的新方法如includes,startsWith,endsWith,repeat,padStart和padEnd，以及字符串模板的使用，使得字符串操作更加便捷。
摘要由CSDN通过智能技术生成

1.let

1.1 let命令的作用域只局限于当前代码

<script>
	{
		let a =10;
		var b = 1;
	}
	console.log(a); // error
	console.log(b);
</script>

1.2 let 声明的变量作用域不会被提前 

console.log(a); // 输出undefined
var a = 10;
console.log(b); // error
let b = 1;

1.3 在相同作用域下，不能声明相同的变量

// 报错
function func(){
	let a= 0;
	var a = 0;
}
// 报错
function func(){
	let a = 1;
	let a = 2;
}
// 报错
function func(arg){
	let arg = 0;
}
// 不报错
function func(arg){
	{
		let arg = 2;
	}
}

1.2 let 声明的变量作用域不会被提前

console.log(a); // 输出undefined
var a = 10;
console.log(b); // error
let b = 1;

1.3 在相同作用域下，不能声明相同的变量

// 报错
function func(){
	let a= 0;
	var a = 0;
}
// 报错
function func(){
	let a = 1;
	let a = 2;
}
// 报错
function func(arg){
	let arg = 0;
}
// 不报错
function func(arg){
	{
		let arg = 2;
	}
}

1.4 for 循环中let的父子作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
<script>
    var btns = document.querySelectorAll('button');
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function(){
            console.log('这是第'+ i +'个按钮');
        }
    }
</script>
</html>

2、const

const表示声明一个常量。他和let的特点一样，主要区别是常量。

   1. const变量在声明时需要赋值。

   2.声明后变量的指针地址不能变，但是指向的数据结构内容可以改变。对于简单数据类型就是值       不能变。对于对象类型则是指指针不能变。

3、解构

3.1 什么是解构

        解构赋值可以理理解为赋值操作的语法糖，它是针对数组或者对象进⾏行行模式匹配，然后对其中的变量进行赋值。代码书写上⾔简意赅，语义明确，也方便了对象数据的读取操作。

解构不同的数据类型，解构的语法会略有不同。数组解构用的是[]，对象解构用的是{}

但是解构的默认值，和别名语法是一样的。

3.2 数组解构

    {
        let a,b,c; // 声明
        [a,b,c] = [1,2,3]; // 解构赋值，数据的解构使用[],
        console.log(a,b,c) // 1 2 3
    }
    {
        let [a,b,c] = [1,2,3]; // 声明并解构赋值
        console.log(a,b,c) // 1 2 3
    }
    {
        let [a,,b] = [1,2,3] // 赋值是按照位置顺序指定的，使用,占位符
        console.log(a,b) // 1 3
    }
    {
        let [a,b=2,c=3,d] = [1,22] // 给b设置一个默认值，默认值会被赋值操作覆盖
        console.log(a,b,c) // 1 22 3
    }
    {
        let [a,...other] = [1,2,3]; // 数组分割
        console.log(a,other) // 1 [2 3]
    }

3.3 对象解构

{
    let a,b;
    ({a,b} = {a:1,b:2}); // 对象解构使用的{}
    console.log(a,b);
}
{
    let {a,b} = {b:2,a:1}; // 对象中赋值的对应关系使用的是键值，和顺序无关
    console.log(a,b);
}
{
    let {a:num1,b:num2} ={a:1,b:2} // 当对象中的键值和变量名称不一致的时候，可以使用别名
    console.log(num1,num2);
}
{
    function func() {
        return {
            schoolname: '学校名称',
            classlist: [{
                    classname: '班级1',
                    count: 10
                },
                {
                    classname: '班级2',
                    count: 11
                }
            ]
        }
    }
    // 解构复杂数据类型
    let {
        schoolname: myschoolname,
        classlist: [{
            classname: myclassname1
        }, {
            classname: myclassname2
        }]
    } = func();
    console.log(myschoolname, myclassname1, myclassname2);
}

4、字符串方法扩展

{
    let str = '123name321';
    console.log(str.includes('name')); // 判断是否包涵name
    console.log(str.startsWith('123')); // 判断是否以123开头
    console.log(str.startsWith('name',3)); // 判断从第4位开始，是否以name开头
    console.log(str.endsWith('321')); // 判断是否以321结尾
    console.log(str.endsWith('name',7)); // 判断第7位以前，是否以name结尾
    console.log(str.repeat(2)); // 重复字符串2次
    console.log(str.padStart(13,'abcd')) // 头部补全，补全到13位
    console.log(str.padEnd(13,'abcd')) // 尾部补全，补全到13位
}

5、字符串模板

      在之前的语法中，在字符串中拼接带变量的字符串会比较麻烦，所以引入了字符串模板。

{
    let name='youyou';
    let age=18;
    let str = `我叫${name},    今年${age}岁`; // 注意空格和回车会原样输出
    console.log(str)
}

天秤座的码农
关注
ES6新语法不要让语法阻挡前进的方向
01-05
ES6新语法：变量声明和作用域 在ES6中，引入了新的变量声明方式，包括let和const关键字，目的是为了解决传统的var关键字带来的问题。 1. 使用var关键字定义变量 在传统的JavaScript中，我们使用var关键字来...
普通html文档使用ES6模块
热门推荐
qq_43143404的博客
09-24 1万+
普通html文档使用ES6模块 在普通的html文档使用ES6模块配合webpack进行模块开发 在以前的前端技术发展中是没有模块的概念,早期的开发中,如果要实现模块化的使用,是要通过script标签引入才能使用,但是不可避免要想使用不同的标签内的变量或者封装好的插件,则需要将构造函数或者变量通过window来进行暴露,但是就用了弊端,如果多人开发,同时变量名冲突的情况下就很难解决 于是就用了co...
HTML——ES6 一些常用的新增属性
qq812457115的博客
09-28 1191
返回找到的那一项，不会改变数组，回调函数返回true表示找到了，找到后就会停止循环，找不到返回undefined。不会改变原数组，返回的结果是过滤后的新数组，回调函数中如果返回true表示这一项放到新数组中 （适用删除某项）返回找到的那一项，不会改变数组，回调函数返回true表示找到了，找到后就会停止循环，找不到返回 -1。将原有的数组映射成一个新的数组 返回是新数组，回调函数中的返回什么这一项就是什么 （适用更新）扁平化数组并返回新的数组，数值为多层的嵌套,默认是1。
【HTML5+CSS3+JavaScript(ES6)】HTML篇
为技术发烧而生
11-17 178
-- head是头标签 -->这是标题--1.body是体标签2.body是展示页面内容的-->--注释快捷键ctrl + /-->这是展示内容-新的这是一段代码
前端之ES6新特性
weixin_46372074的博客
07-03 1035
ECMA是一个致力于信息和通信系统标准化的行业协会。 let实例 2.const 声明常量 声明对象、数组类型使用 const，非对象类型声明选择 let 频繁使用对象方法、数组元素，就可以使用解构赋值形式。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 解构赋值。 适用于与this无关的回调,有关this的回调用匿名函数 call：调用一个对象的一个方法，用另一个对象替换当前对象。 1.改变dom的属性 2.筛选偶数 9.函数形参初始值 ES6 允许给函数参数设置默认值，当
html-es6前端
最新发布
hj286251的博客
12-25 37
/ ldh.__proto__.constructor.sex = "不男不女";// Star.prototype.constructor.sex = "女";// 3. 如果还没有找到就查找原型对象的原型（Object的原型对象）// let ldh = new Star("刘德华",18);// Object.prototype.sex = "男";// console.log('唱歌')console.log('唱歌');// Star.sex = "男";
原生HTML通过JS（ES6、JQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）
薛定谔的猫的博客
06-05 1773
一些项目有时候，因为需求不同，比如需要SEO或者项目很小，亦或者只需要做一个简单好管理的官网或者网站等等，在这种情况下，我们再去使用类似于vue和react等等这类型框架，就有一点大材小用，也有点费时间。但是，vue这类框架的组件化开发在体验上对开发者非常友好，那么我们如果通过使用原生的前端技术去实现组件化开发？
es6新语法.快速上手 搬运与掘金三心哥md
11-29
基础和常用的东西 适合新人快速上手
ES6核心语法
06-21
本课程4小时带你快速运用ES6的核心用法，其中包括: let和const命令、 箭头函数、解构、扩展的对象和数组、Symbol/Set/Map新数据类型、强大的迭代器和生成器、Promise和async解决 异步操作、class类 的使用以及ES6的...
ES6基本语法及新增语法
08-20
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
ES6核心语法整理笔记
05-16
主要总结了ES6的一些核心语法，整理成一个思维导图，能帮助快速复习回顾
HTML5、CSS3、ES6新特性总结
Vivien_CC的博客
09-13 600
HTML5 提供了一些新的表单输入类型和属性（例如日期选择、邮箱验证、自动完成等），以及表单验证 API，使得表单操作更加方便和强大，表单输入更加简洁和语义化。CSS3 引入了过渡（transition）和动画（animation）效果，使得在没有使用 JavaScript 的情况下，可以实现页面元素的平滑过渡和动态效果。
零基础前端Vue的小白学习路——初识HTML、CSS、JS、ES6技术
qq_36215279的博客
07-06 596
HTML5继承了HTML的部分特征，添加了许多心得语法特征，如语义特性，本地存储特性、设备兼容特性、连接特性、网页多媒体特性等。CSS3是CSS2的进阶，增加了许多新的属性，功能模块化划分，浏览器兼容性较CSS2差一点。在前辈为我指出的需要的技术学习路线中，HTML，CSS，JS是地基，Vue、Node.js则是更高阶的应用技术。早期前端主要是开发网页，在后续大前端技术的背景之下，更加生动形象、交互感更强的小程序、APP开发、数据可视化系统、服务器（客户端）程序也能由前端技术实现。二、前端涉及的主要技术。
es6 定义html,ES6-HTML DOM
weixin_33045057的博客
06-26 301
ES6-HTML DOM每个网页都驻留在浏览器窗口中，该窗口可以视为一个对象。文档对象表示该窗口中显示的HTML文档。文档对象具有引用其他对象的各种属性，这些属性允许访问和修改文档内容。文档内容的访问和修改方式称为文档对象模型或DOM 。对象按层次结构组织。此层次结构适用于Web文档中对象的组织。以下是一些重要对象的简单层次结构-存在几种DOM。以下各节详细说明了每个DOM，并描述了如何使用它们访...
HTML es6
2301_77161151的博客
10-15 96
/ const 声明一个只读变量(常量)，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。// const 声明一个只读的常量，一旦声明，常量的值就不能改变。// let 声明的变量只在 let。// 1.命令所在的代码块内有效。// 3.命令所在的代码块内有效。// 注：对象和数组修改值不会报错。// 1.声明必须赋初始值。// 2.标识符一般为大写。// 4.不影响作用域链。// 5.值不予许被修改。// 2.不能重复定义。// 4.不能重复定义。
如何在html中使用es6
az44yao的专栏
05-06 3583
html引用es6模块 https://blog.csdn.net/JsongNeu/article/details/89704847?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blo...
html下使用es6模块（module）
小乙先生的博客
07-24 5014
1、html引入js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="a
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
qq_44891434的博客
01-29 1万+
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs） 一. HTML 1. 盒子模型 是什么：每个元素被表示为一个矩形的盒子，有四个部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 两种盒模型的区别：标准盒模型内容大小就是content大小、而IE
用es6语法写ts导入html——面向对象实现点击div变随机色，刷新页面随机变色
阿牛哥的博客
08-16 1093
用es6语法写ts导入html——面向对象实现点击div变随机色，刷新页面随机变色
ES6新语法速成：模板字符串、默认参数等实用技巧
本文档介绍了ES6（ECMAScript 2015）新语法的基础和常用特性，旨在帮助IT新人快速掌握并上手。以下将详细讲解文档中提到的几个关键概念： 1. **模板字符串** (Template literals) - ES6引入了模板字符串，使用反...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值