【前端】--- ES6上篇(带你深入了解ES6语法)

前言:ECMAScript是 JavaScript 的标准化版本,由 ECMA 国际组织制定。ECMAScript 定义了 JavaScript 的语法、类型、语句、关键字、保留字等。

ES6 是 ECMAScript 的第个版本,于 2015 年发布,引入了许多重要的新特性,使 JavaScript 更加现代化。

目录

变量声明: 

let声明: 

var声明:

const声明:

解构(数组,对象,字符串):

数组解构:

对象解构:

字符串解构:

对象扩展:

数组扩展:

 字符串扩展:


变量声明: 

作用域有块作用域,函数作用域,全局作用域,其中全局作用域>函数作用域>块作用域

let和var的区别  (ES6使用let更加严谨): 

let声明: 

使用 let 声明的变量仅在其定义的块(用 { } 包围的代码块)内有效。这意味着变量在块外不可访问。

{let x = 10;console.log(x); // 输出 10
}
console.log(x); // ReferenceError: x is not defined
var声明:

使用 var 声明的变量的作用范围是整个函数体。如果在函数外部声明,变量将是全局的。

function myFunction() {var x = 10; // 函数作用域console.log(x); // 输出 10
}
myFunction();
console.log(x); // ReferenceError: x is not defined
const声明:

     const:声明常量的 特点和语法 与let相同的。能改变的是变量,常量不能够改变

      1.常量不允许修改值。

      2.常量必须赋初始值。

      3.const与let相同 同样有块作用域(没有预解析,变量提升

      4.const定义的引用类型值内容可以修改。

   const PI = 3.1415926;// PI=3.14; //报错,1.常量不允许修改值// const numA; //2.常量必须赋初始值。// numA= 10;const obj = { a: 1 };console.log(obj);obj.a = 20; // 不报错,没有修改到内存地址obj = { b: 1 };// 报错,修改内存地址了。console.log(obj);//如果存储的是一个数值,存的就是一个值//如果存储的是一个对象,存的就是一个内存地址

解构(数组,对象,字符串):

数组解构:

    解构: 左边一种结构,右边一种结构,左右一一对应

    1.完全解构

    2.不完全解构(部分解构)

    3.忽略方式解构

    4.嵌套解构

    5.剩余运算符方式解构Ig

    6.解构默认值

    7.使用场景

    场景1:使用解构方式实现两数交换

    场景2:使用函数返回值

 1.完全解构:

      //1.完全解构let a, b;[a, b] = [1, 2];console.log(a, b);

 2.不完全解构(部分解构)

      //2.不完全解构(部分解构)let [a] = [1, 2, 3];console.log(a);let [b, c] = [1];console.log(b, c);//如果解构不成功,变量值就默认等于undefined

  3.忽略方式解构

      //3.忽略方式解构let [, , a] = [1, 2, 3];console.log(a);

4.嵌套解构

      //4.嵌套解构let [a, b, [c]] = ["a", "b", ["c"]];console.log(a, b, c);

5.剩余运算符方式解构

      //5,剩余运算符方式解构let [a, ...b] = [1, 2, 3, 4, 5, 6, 7];console.log(a, b);//a只取第一个,剩下的都赋值给b

6.解构默认值

      //6.解构默认值let [a, b = 100] = [90];console.log(a, b);//如果设置了默认值,当没有第二个参数值时就取默认值180

场景1:使用解构方式实现两数交换

      let a = 10;b = 20;[a, b] = [b, a];console.log(a, b);

场景2:使用函数返回值

      //使用场景二:使用函数返回值function fu() {return [1, 2, 3]}let res = fu()console.log(res[0], res[1], res[2])let [a, b, c] = fu()console.log(a, b, c)
对象解构:

    数组解构和对象解构的不同:

    数组解构是按照顺序一一解构

    对象解构与顺序无关,根据属性名和变量名进行比较

    1.完全解构

    2. 部分解构

    3.解构之后重命名

    4.剩余运算符对象解构 - 浅指贝

    5。对象默认值

    6.使用场景: 场景1: 函数返回值

    1.完全解构

      //1.完全解构let obj = {name: 'zhangsna',age: 20}let { age, name } = obj;console.log(name, age);

    2. 部分解构

      //2.部分解构let obj = { name: 'zhangsan', age: 20 };let { age } = obj;console.log(age);let { address, name } = obj;console.l0g(address, name);//如果没有匹配到则变量undefined

    3.解构之后重命名

      //3.解构之后重命名(匹配的属性名:变最名let obj = { name: 'zhangsan', age: 20 };let { name: myname, age: myage } = obj;console.log(myname, myage);

    4.剩余运算符对象解构 - 浅指贝

      //4。剩余运算符对象解构-浅拷贝...let obj = { name: 'zhangsan', age: 20, address: '大河区' };let { name, ...rest } = obj;console.log(name, rest);

    5.对象默认值

      //5。对象默认值let obj = { name: 'zhangsan', age: 20, address: '天河区' };let { name, img = 'aaa.png' } = obj;console.log(name, img);

    6.使用场景: 场景1: 函数返回值

      //场景1:函数返回值function fn() {return {name: 'zhangsan', age: 20, address: '天河区'}}let res = fn();//之前不解构方式console.log(res.name, res.age, res.address);//解构方式let { name, age, address } = res;console.log(name, agP, address);
字符串解构:

字符串解构很简单,就是将字符解构出来赋给变量

    let str = 'ababa'let [a, b, c, d] = strconsole.log(a, b, c, d) //a b a blet { length } = strconsole.log(length)//5

对象扩展:

    对象扩展

    1.属性和方法的简洁表达方式

    2.属性如果对象属性名和接收的变量名相同可以直接用变量名作为性名方法 方法名(){)

    3.0bject.assign()用于对象合井

    4.0bject.is()方法 比较两个值是否严格相等

    5.遍历对象的方法(键,值,键值对) 以及将对像转为map对象的方法

1.属性和方法的简洁表达方式,键值对的命名和方法的命名

const name = "xiaoming";let vue = {name,//等同于name:xiaomingdata() {console.log("我是data-fn")}//等同于// data:function(){//   console.log("我是data-fn"))// }}

2.动态属性名:在对象字面量中,使用方括号 [ ] 语法可以动态地计算属性名。这意味着你可以通过表达式来生成属性名。动态方法名:在对象字面量中,方法名同样可以使用动态计算的方式。

//2.表达式方式的属性名和方法名let obj = {['my' + 'name']: 'zhangsan',["say" + "Hi"]() {console.log("sayHi...")}}let nameobj = {}console.log(obj);obj.sayHi();//后面写项目时,对象的属性可能是动态添加进去。并需要动态获取出来let nameobj{};let arr = ["zhangsan", "lisi", "wangwu"];//{"zhangsan1":"zhangsan","lisi2":"lisi"}for (let i = 0; i < arr.length; i++) {console.log(arr[i]);nameobj[arr[i] + (i + 1)] = arr[i];}console.log(nameobj);// lisi2: "lisi"// wangwu3: "wangwu"// zhangsan1: "zhangsan"for (let i = 0; i < arr.length; i++) {console.log(nameobj[arr[i] + (i + 1)])// zhangsan// lisi// wangwu};

  3.0bject.assign()用于对象合井

    //1.0bect.assign()用于对象合并//注意点:如果不希望更改源对象,第一个参数可以给一个}//合井时如果存在相同属性,后面对象的会覆盖前面对象属性值let a = { name: 'zhangsan', width: 100 };let b = { age: 20, width: 200 };let ret = Object.assign({}, a, b);console.log(ret);console.log(a, b);

 4.0bject.is()方法 比较两个值是否严格相等

    //2.0bject.is()方法   比较两个值是否严格相等console.log(1 == 1);//trueconsole.l0g("1" == 1);//trueconsole.log("1" === 1);//falseconsole.log(object.is(1, 1)); //trueconsole.log(object.is("1", 1));//falseconsole.log(Object.is({}, {}))//false

 5.遍历对象的方法(键,值,键值对) 以及将对像转为map对象的方法

    let obj = {name: '11',age: 22}//遍历值console.log(Object.values(obj))//遍历键值对console.log(Object.entries(obj))//遍历键console.log(Object.keys(obj))//将对象转换成maplet map = new Map(Object.entries(obj))console.log(map)

数组扩展:

    1.扩展运算符...

    解构。数组合并

    2.find(callback) 查找,找出第一个符合条件的数组成员

    3.findIndex(callback)

    4.Array.of()

    5.Array.from(obj)将对象转换为真正的数组

    6.数组includes()方法

    7.at()方法通过下标访问数组

    1.扩展运算符...      解构。数组合并

      //1。扩展运算符...let arr1 = ["a", "b", "c"]// let arr2 = arr1.concat();let arr2 = [...arrl]arr1.push("d")console.log(arr1, arr2);let arr3 = ["x", "y", "z"];let arr4 = [...arr1, ...arr3];console.log(arr4);

    2.find(callback) 查找,找出第一个符合条件的数组成员

      // 2.find(callback) 查找,找出第一个符合条件的数组成员let arr1 = [1, 2, 3, 4, 5, 6];let result = arrl.find(function (item) {return item > 3; 1})console.log("result", result);

    3.findIndex(callback)

      //3.findIndex(callback)查找。找出第一个符合条件的数组成员对应的索引let arr1 = [1, 2, 3, 4, 5, 6];let result = arr1.findIndex(function (item) {return item > 3;})console.log("result2", result);

    4.Array.of()

      //4.Array.of()将一组值转换为数组 (了解)console.log(Array.of(1, 2, 3))console.log(Array.of(99))let arr = Array(5)console.log(arr);//[empty]*5

    5.Array.from(obj)将对象转换为真正的数组

      //5.Array.from(obj[,fn])将对象转换成真正的数组//获取到的dom对象集合并不是真正数组//arguments 也不是真正数组//转换条件:需要是可遍历的对象,需要有索引以及length属性function fn() {console.log("arguments:", arguments);//arguments.forEach(function()())//报供arguments.forEach is not a functionArray.from(arguments).forEach(function (item) {console.log(item);})}fn("zhangsan", "lisi")console.log(["zhangsan"])let obj = { 0: "zhangsan", 1: "lisi", length: 2 }console.log(Array.from(obj));

  6.数组includes()方法 

    //数组的includes方法let arr = [1, 2, 34, 5, 33]console.log(arr.includes(33))

 7.at()方法通过下标访问数组

    let arr = [12, 3, 3, 2, 56, 5]//正数  与之前数组访问下标相同//负数  从后往前进行查找console.log(arr.at(1))console.log(arr.at(-1))//5

 字符串扩展:

    字符串新增的方法

    1.includes()  判断是否包含 返回true /false

    2.startswith() 判断字符串是否是在原字符串的头部 返回true / false

     3.endsWith()判断字符串是否是在原字符串的结尾返回true  / false

    4.repeat() 将字符串重复n次 返回重复后的新字符事

    5.padStart() padEnd() 字符串填充

    6.字符替换 replace() 和 replaceAll()

    7.优化代码的兼容性所以将trimleft()更新了trimstart() trimright()更新了trimend()

 

    1.includes()  判断是否包含 返回true /false

      let str = "hello world"console.log(str.includes(h));//trueconsole.log(str.includes(yy));//false

    2.startswith() 判断字符串是否是在原字符串的头部 返回true / false

      let str = "hello world"console.log(str.startsWith(h));//trueconsole.log(str.startswith(e));//false

     3.endsWith()判断字符串是否是在原字符串的结尾返回true  / false

      let str = "hello world"console.log(str.endsWith('world'));//trueconsole.log(str.endsWith('hello'));//false

    4.repeat() 将字符串重复n次 返回重复后的新字符事

      let str = "hello world"console.log(str.repeat(3));//hello worldhello worldhello world

5.padStart() padEnd() 字符串填充

      let str = 'addsfsaf'//str.padstart(目标长度,[,填充字符串])let s = str.padStart(10)let s1 = str.padStart(10, '2')console.log(s1)  //22addsfsaflet str = 'addsfsaf'//str.padstart(目标长度,[,填充字符串])let s = str.padEnd(10)let s1 = str.padEnd(10, '2')console.log(s1) //addsfsaf22

6.字符替换 replace() 和 replaceAll()

      //替换所有let s = "aflsdjflsefel"console.log(s.replaceAll('s', 'a'))//替换第一个let s = "aflsdjflsefel"console.log(s.replace('s', 'a'))

到这里就结束了,感谢大家的观看╮( ̄▽ ̄")╭

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/57532.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++:模板的特化与分离编译

之前我们在介绍模板的时候仅仅是简单的介绍了模板的用法&#xff0c;本篇文章我们来详细的介绍下模板中比较重要的几个点。 一&#xff0c;非类型模板参数 我们之前的c中&#xff0c;会将经常使用的而又确保在我们程序的运行过程中值不会改变的值进行#define&#xff1a; #d…

初入编程之路,启航代码海

#1024程序员节|征文# 前言 今天又是1024程序员节了&#xff0c;第一次听说这个节日是在我在23年刚刚上大一的时候听学长他们说的&#xff0c;如今已经是24年了&#xff0c;虽然只学习了一年的编程但我已经了解到了这条路上的不易。希望能够在这条路上面一路坚持下去&#xff0…

力扣_斐波那契数列

本题目本质和爬楼梯是一样的&#xff0c;主要运用的是递归来解题。 class Solution:my_dict {}def fib(self, n: int) -> int:if self.my_dict.get(n) is not None: # 先判断有没有计算过这个值return self.my_dict.get(n)tempResult 0if n > 2:tempResult self.fib…

075_基于springboot的万里学院摄影社团管理系统

目录 系统展示 开发背景 代码实现 项目案例 获取源码 博主介绍&#xff1a;CodeMentor毕业设计领航者、全网关注者30W群落&#xff0c;InfoQ特邀专栏作家、技术博客领航者、InfoQ新星培育计划导师、Web开发领域杰出贡献者&#xff0c;博客领航之星、开发者头条/腾讯云/AW…

MySql中使用findInSet和collection实践

FIND_IN_SET 需求如下&#xff1a;有张用户表&#xff0c;表里有个字段叫school&#xff0c;意为这个用户上过哪些学校&#xff0c;数据库里存的就是字符串类型&#xff0c;存的值类似"2,5,12"&#xff0c;要求就是查询出上过id为2的学校有哪些用户 解决方法&#x…

【JAVA毕设】基于JAVA的酒店管理系统

一、项目介绍 本系统前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router实现动态路由&#xff0c;Ajax实现前后端通信&#xff0c;Element-plus组件库使页面快速成型。后端部分&#xff1a;采用SpringBoot作为开发框架&#xff0c;同时集成MyBatis、Redis、…

qt生成uuid,转成int。ai回答亲测可以

// 生成一个随机的UUID QUuid uuid QUuid::createUuid(); // 将UUID转换为字符串 QString uuidStr uuid.toString(QUuid::WithoutBraces);// 计算MD5哈希值 QByteArray hash QCryptographicHash::hash(uuidStr.toUtf8(), QCryptographicHash::Md5);// 提取前8个字节并转换为…

云曦10月13日awd复现

一、防御 1、改用户密码 passwd <user> 2、改数据库密码 进入数据库 mysql -uroot -proot 改密码 update mysql.user set passwordpassword(新密码) where userroot; 查看用户信息密码 select host,user,password from mysql.user; 改配置文件&#xff0c;将密码改为自己…

电脑技巧:Rufus——最佳USB启动盘制作工具指南

目录 一、功能强大&#xff0c;兼容性广泛 二、界面友好&#xff0c;操作简便 三、快速高效&#xff0c;高度可定制 四、安全可靠&#xff0c;社区活跃 在日常的电脑使用中&#xff0c;无论是为了安装操作系统、修复系统故障还是进行其他需要可引导媒体的任务&#xff0c;拥…

使用 Python结合随机User-Agent与代理池进行网络请求

1. 引言 在爬虫开发过程中&#xff0c;为了模拟真实的用户行为&#xff0c;避免被目标网站识别并封锁&#xff0c;通常需要使用随机的User-Agent以及代理IP来发送网络请求。本文将介绍如何通过Python实现这一功能&#xff0c;包括设置随机User-Agent、读取代理列表&#xff0c…

web网页

HTML代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>wyy</title><!-- 引…

VSCODE c++不能自动补全的问题

最近安装了vscode&#xff0c;配置了C/C扩展&#xff0c;也按照网上说的配置了头文件路径 我发现有部分头文件是没办法解析的&#xff0c;只要包含这些头文件中的一个或者多个&#xff0c;就没有代码高亮和代码自动补全了&#xff0c;确定路径配置是没问题的&#xff0c;因为鼠…

Linux笔记之文件查找和搜索命令which,find,locate,whereis总结

Linux笔记之文件查找和搜索命令which,find,locate,whereis总结 code review! 文章目录 Linux笔记之文件查找和搜索命令which,find,locate,whereis总结1.对比2.whereis 和 which 命令区别3.locate 和 find 命令区别 1.对比 命令功能说明备注which常用于查找可直接执行的命令。…

基于ssm的萌宠商城管理系统【附源码】

基于ssm的萌宠宜家商城系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2 系统概要设计 4.3 系统功能结构设计 4.4 数据库设计 4.4.1 数据库E-R图设计 4.4.2 数据库表结构设计 5 系统实现 5.1 管理员功能介绍 …

【C++中的lambda表达式】

不需要借口&#xff0c;爱淡了就放手....................................................................................................... 文章目录 前言 一、【lambda表达式介绍】 1、【lamda表达式的概念】 2、【lamda表达式的语法】 二、【lambda表达式的使用】…

CAS简介

#1024程序员节&#xff5c;征文# CAS是什么&#xff1f; CAS&#xff08;Compare And Swap&#xff09;&#xff0c;即比较与交换&#xff0c;是一种乐观锁的实现方式&#xff0c;用于在不使用锁的情况下实现多线程之间的变量同步。 CAS操作包含三个操作数&#xff1a;内存位…

Stability.AI 发布 SD3.5 模型,能否逆袭击败 FLUX?如何在ComfyUI中的使用SD3.5?

就在前天&#xff0c;Stability AI 正式发布了 Stable Diffusion 3.5版本&#xff0c;包括 3 款强大的模型&#xff1a; Stable Diffusion 3.5 Large&#xff1a;拥有 80 亿参数&#xff0c;提供卓越的图像质量和精确的提示词响应&#xff0c;非常适合在 1 兆像素分辨率下的专…

鸿蒙开发:走进stateStyles多态样式

前言 一个组件&#xff0c;多种状态下&#xff0c;我们如何实现呢&#xff1f;举一个很简单的案例&#xff0c;一个按钮&#xff0c;默认状态下是黑色背景&#xff0c;点击后是红色&#xff0c;手指放开后还原黑色。 我们自然而然的就会想到利用手势的按下和抬起&#xff0c;…

美课+, 一个公司老项目,一段程序猿的技术回忆

前言 "美课"项目从2018年3月26号开始启动到2018年6月8号结束,总计两个月多的时间,项目的时间节点比较紧张.虽然最后没有上线很遗憾,但是,不管是在流程和项目上,对自己都是一次不错的尝试.下面我就对这次项目做一下iOS端的整体总结. #### 技术难点 *** 在iOS端,我感到…

鸿蒙应用开发:数据持久化

最近在搞公司项目用到了鸿蒙端的数据持久化&#xff0c;特来跟大家分享一下。 在鸿蒙开发中&#xff0c;可以使用以下几个包来实现数据的持久化处理&#xff1a; Data Ability 通过数据能力组件&#xff0c;开发者可以实现复杂的数据操作&#xff0c;包括增、删、改、查等功…