【前端】必学知识ES6 1小时学会

1.ES6概述

2.let和const的认识

3.let、const、var的区别

4.模板字符串

5.函数默认参数

6.箭头函数【重点】

​编辑7.对象初始化简写以及案例分析 【重点】

8.对象解构

8.对象传播操作符

9.对象传播操作符案例分析

​编辑 10.数组Map

11.数组Reduce 

12.NodeJS小结

1.ES6概述

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

2.let和const的认识

以前都是用var定义常量和变量 

现在使用let定义变量 const定义常量更好的区分

3.let、const、var的区别

这里应该打印0 1 2 3 4 5但是直接打印5了 这是var的一个问题 变量穿透 因为var定义可以是变量也

可以是常量 所以它作为常量来说 这里就穿透了

使用let 定义变量 就不会造成穿透问题

同时我们的常量都是不可以修改的 const可以直接定义常量 不允许修改 

修改常量直接报错

// 在实际开发和生产中,如果是小程序,uniapp或者脚手架中,可以大胆使用let和const

// 在web开发中,建议还是var,有些浏览器不支持ES6

小结:

        1.let和const主要解决 变量穿透 和 常量修改问题

 

4.模板字符串

相比较传统的字符串拼接 ES6的 `${}`更加简洁好用

5.函数默认参数

6.箭头函数【重点】

7.对象初始化简写以及案例分析 【重点】

对象简写案例

8.对象解构

8.对象传播操作符

    <script>// 对象传播操作符 ...var person={name:'taohy',address:'suzhou',link:'csdn',phone:15250,go(){console.log('开始上课了....')}}//解构出来var {name,address,...person2} = person;console.info(name);console.info(address);console.info(person2);</script>

9.对象传播操作符案例分析

<script>// java 后台 // 数据格式 var userPage ={page:10,users:[{},{}],pageNo:1,pageSize:10,total:100}// 异步请求// $.post('/user/search',function(res){})var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};var {users,...userPage2} = userPage;console.log(users);console.log(userPage2);
</script>

 10.数组Map

    <script>let arr = [1,2,3,4,5,6,7];// 需求,对数组中每个数 乘以2// 传统做法let arrNew = [];for(let i = 0; i < arr.length; i++){arrNew.push(arr[i] * 2);}console.info(arrNew);// ES6 Map 自带循环功能 并且会把处理的值回填到对应的位置// var arrNew2 = arr.map(function (ele) {//     return ele * 2; // 必须return// })// 省略var arrNew2 = arr.map(ele => ele * 2);console.info(arrNew2);// map 处理对象的数据 // 实现对象年龄加1var users = [{age:10,name:'小绿'},{age:12,name:'小红'}];//    var usersNew= users.map(function (ele) {//         ele.age = ele.age + 1;//         return ele;//     })// 简写var usersNew = users.map(ele => {ele.age = ele.age + 1;ele.check = true;return ele;});console.info(usersNew);</script>

 

11.数组Reduce 

    <script>let arr = [1,2,3,4];// a=1 b=2 a+b;a=3 b=3 a+b; let result = arr.reduce((a,b) => {return a + b;})console.info(result);// 全部相加 10</script>

12.NodeJS小结

ES6 js新建文件中,在node中可以直接使用

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

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

相关文章

ComfyUI搭建使用教程

ComfyUI 是一个基于节点流程式的stable diffusion AI 绘图工具WebUI&#xff0c; 你可以把它想象成集成了stable diffusion功能的substance designer&#xff0c; 通过将stable diffusion的流程拆分成节点&#xff0c;实现了更加精准的工作流定制和完善的可复现性。但节点式的工…

labelImg

labelImg 在anaconda虚拟环境中安装labelImg 进入conda虚拟环境DL2中 输入命令&#xff1a; pip install PyQt5 pip install pyqt5-tools pip install lxml pip install labelimg PyQt5:是用于创建GUI应用程序的跨平台工具包&#xff0c;它将Python与Qt库融为一体 Lxml&#…

什么是LLC电路?

LLC电路是由2个电感和1个电容构成的谐振电路&#xff0c;故称之为LLC&#xff1b; LLC电路主要由三个元件组成&#xff1a;两个电感分别为变压器一次侧漏感(Lr)和励磁电感(Lm)&#xff0c;电容为变压器一次侧谐振电容(Cr)。这些元件构成了一个谐振回路&#xff0c;其中输入电感…

如何在AD的PCB板做矩形槽孔以及如何倒圆弧角

Altium Designer 22下载安装教程-CSDN博客 如何在AD上创建完整的项目-CSDN博客 开始前&#xff0c;请先安装后AD&#xff0c;并创建好项目。 目录 1. 如何在AD的PCB板做矩形槽孔 2. 如何在AD的PCB板倒圆弧角 1. 如何在AD的PCB板做矩形槽孔 首先&#xff0c;我们进入上面创…

【pandas数据处理】数据结构

数据结构 Series基于列表创建数据结构自定义元素的行标签基于字典创建数据结构 DataFrame对象基于列表创建数据结构设置参数来定义行列标签基于字典 Series 一维数组对象&#xff0c;不仅包含数据元素&#xff0c;还包含一组与数据元素对应的行标签。 基于列表创建数据结构 …

HTTP客户端警告:Going to buffer response body of large or unknown size

HTTP客户端警告&#xff1a;Going to buffer response body of large or unknown size 点关注不迷路&#xff0c;欢迎再访&#xff01; 精简博客内容&#xff0c;尽量已行业术语来分享。 努力做到对每一位认可自己的读者负责。 帮助别人的同时更是丰富自己的良机。 目录 HTTP客…

permission is only granted to system apps 权限错误提示处理

permission is only granted to system apps 消除清单文件中的权限Permission is only granted to system apps 错误 在manifest文件中我们注册一些权限&#xff0c;当我们用到某些权限是会有一个错误提示&#xff1a;Permission is only granted to system apps&#xff0c;该…

斐波那契数列数列系列问题详解

斐波那契数列数列是我们学习递归的入门问题&#xff0c;是一种非常经典的题型&#xff0c;也衍生出了一些更复杂的题型&#xff0c;这一节就让我们彻底理解斐波那契数列系列问题。 一、概念介绍 1、什么是斐波那契数列&#xff1f; 斐波那契数列&#xff08;Fibonacci sequenc…

Java飞翔的鸟游戏

一.准备工作 首先创建一个新的Java项目命名为“飞翔的鸟”&#xff0c;并在src中创建一个包命名为“com.qiku.bird"&#xff0c;在这个包内分别创建4个类命名为“Bird”、“BirdGame”、“Column”、“Ground”&#xff0c;并向需要的图片素材导入到包内。 二.代码呈现 …

Keil工程打开发现目标芯片无法选择解决方案

买了一个开发板&#xff0c;配套有一些底层驱动的例程&#xff0c;打开后发现目标芯片无法选择&#xff0c;对应的下载Flash FLM文件也无法选择。从提示框中可以知道所提供的例程是Keil4的例程&#xff0c;我电脑上安装的Keil版本是Keil版本&#xff0c;估计是这个原因导致工程…

【C++11并发】future库 笔记

简介 C11之前&#xff0c;主线程要想获取子线程的返回值&#xff0c;一般都是通过全局变量&#xff0c;或者类似机制。C11开始为我们提供了一组方法来获取子线程的返回值&#xff0c;并保证其原子性。 头文件 #include <future>std::promise 在promise中保存了一个值…

简单聊聊加密和加签的关系与区别

大家好&#xff0c;我是G探险者。 平时我们在项目上一定都听过加密和加签&#xff0c;加密可能都好理解&#xff0c;知道它是保障的数据的机密性&#xff0c;那加签是为了保障啥勒&#xff1f;它和加密有啥区别&#xff1f; 带着这个疑问&#xff0c;我们就来聊聊二者的区别。…