ES6 混合 ES5学习记录

基础

数组

let arr = [数据1，数据2，...数组n]

使用数组

数组名[索引]

数组长度

arr.length

操作数组

在这里插入图片描述
arr.push() 尾部添加一个,返回新长度
arr.unshift() 头部添加一个,返回新长度

arr.pop() 删除最后一个,并返回该元素的值
shift 删除第一个单元

数组的尾部有点像栈顶,头部像栈底
所以,push的时候,在尾部添加,pop的时候再尾部删除
shift,unshift操作的就是栈底的东西,也就是头部

数组进阶用法

map() 遍历

    <script>
        const arr = ['red', 'blue', 'pink']

        const newArr = arr.map((ele,index) => {
            console.log(ele);
            console.log(index);

            return ele;
        })

        console.log(newArr);
        
    </script>

map有返回值,forEach没有返回值
map里边的函数,ele,index不是必须要写的
但是只有一个参数的话,看作是element

join()
有点像java中的合并数组

    <script>
        const arr = ['red', 'blue', 'pink']

        let a = arr.join();
        console.log(a);


        let a1 = arr.join("");
        console.log(a1);

        let a2 = arr.join("|");
        console.log(a2);
        
    </script>

在这里插入图片描述
空则就是逗号分隔

forEach
加强版for

被遍历的数组.forEach(function(当前数组元素，当前元素索引号){
	//函数体
}）

element必须写,index可选

filter
array.filter(function(element, index, arr), thisValue)
除了element是必须,其他都是可选

  1. index索引
  2. arr当前数组
  3. thisValue 传this给回调函数,因为作用域不同

filter函数就是遍历加筛选,然后返回一个数组

sort

arr.sort((a,b) => {
return a - b;
)

a - b 就是降序
b - a 就是升序

reduce
累加
数组名.reduce(function(上一次值，当前值){ },起始值)
有初始值,就加上初始值

这里的当前值,就是当前数组的元素
from
Array().from()
把伪数组转成真数组

块级作用域和函数作用域

{} 花括号里边就是块级作用域
一般为了块级作用域里边的数据不和外边的干扰,里边的变量用let

函数作用域
函数里边的作用域

let const var

前两个是ES6
const 是常量,必须初始化,不能再被赋值
但是引用变量里的值可以修改,毕竟引用变量实际上是地址

let 声明于块级作用域的变量,和var相比有更小的的作用域范围,只在块级作用域里边有效,不会提升到函数作用域

    <script>
        if(true) {
            let i = 0;
        }

        console.log(i);    
    </script>

在这里插入图片描述

var是ES5
var 现在一般不使用,毛病多
可以先使用再声明,且可以重复声明

    <script>
        var i;
        console.log(i);
        i = 10;

        var j = 1;
        var j = 2;
        console.log(j);
    </script>

var声明的变量有点像全局变量,所以在块级作用域里边的时候,会被提升到外部函数作用域

    <script>
        if(true) {
            var i = 0;
        }

        console.log(i);    
    </script>

在这里插入图片描述

模版字符串

``
有点类似于php中的字符串,可以写变量,写表达式,写多行字符串

        const name = 'jjking';
        const msg = `Hello,${name}`;

        const a = 10;
        const b = 5;

        const msg1 = `${a + b}`;

        const msg2 = `
            hhell
                ddd
        `

        console.log(msg);
        console.log(msg1);
        console.log(msg2);

在这里插入图片描述

注意事项

  1. 要输出 `反引号 得用 \
  2. 换行会被保留 直接写 \n
  3. 可以嵌套模版字符串
  4. 兼容性可能不好,要兼容低版本浏览器,用插件

箭头函数

ES6引入

(argument1, argument2, ...) => {
  // 函数体
}

有点像java里边的lambda

返回的如果是一个对象,得加一个括号

    <script>
        const fun = () => ({name:'jjking'});
        console.log(fun());
    </script>

特点

  1. 没有this,继承父级作用域的this
  2. 没有arguments对象
  3. 没有Constructor,无法new fun()
  4. 没有prototype

箭头函数和普通函数的转换

  • 只有一个参数,可以省略括号
  • 只有一行的话,可以省略return,和{}

类似于java中的lambda

this指向

全局作用域的this
严格模式下,this是undefined
非严格,浏览器是window,node.js是global对象

一般函数this
指向的是自己

箭头函数的this
指向的父类的作用域

不适合箭头函数的场景

  • 构造函数
  • 需要this获取自身对象
  • 需要使用arguments

解构赋值

数组的解构赋值

按照索引位置进行赋值

// 基本用法
const [a, b, c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3

// 使用默认值
const [x, y, z = 0] = [4, 5];
console.log(x); // 输出: 4
console.log(y); // 输出: 5
console.log(z); // 输出: 0（默认值）

把右边的值,一个一个赋值给左边,左边的可以有默认值

函数的解构赋值

按照属性名字进行赋值

// 基本用法
const {name, age} = {name: "Alice", age: 20};
console.log(name); // 输出: "Alice"
console.log(age); // 输出: 20

// 使用别名
const {name: personName, age: personAge} = {name: "Bob", age: 25};
console.log(personName); // 输出: "Bob"
console.log(personAge); // 输出: 25

// 使用默认值
const {firstName = "Unknown", lastName = "Unknown"} = {firstName: "Charlie"};
console.log(firstName); // 输出: "Charlie"
console.log(lastName); // 输出: "Unknown"（默认值）

注意

  • 对于已经声明的变量进行解构赋值,必须在圆括号里边进行
let x, y;

// 错误的写法：解析为代码块
{x, y} = {x: 1, y: 2};

// 正确的写法：圆括号中进行解构赋值
({x, y} = {x: 1, y: 2});

console.log(x,y); // 输出: 1 2

js会把{} 看做是代码块,所以会有歧义

其他的解构赋值

字符串

const [a, b, c] = 'abc';
console.log(a); // 输出: 'a'
console.log(b); // 输出: 'b'
console.log(c); // 输出: 'c'

数值和布尔值的解构赋值：会先将数值和布尔值转换为对应的包装对象类型（Number、Boolean），然后再进行解构赋值。

const {toString: numToString} = 123;
console.log(numToString === Number.prototype.toString); // 输出: true

const {valueOf: boolValueOf} = true;
console.log(boolValueOf === Boolean.prototype.valueOf); // 输出: true

undefined 和 null 的解构赋值：在解构赋值时，如果源值是 undefined 或者 null，则会使用默认值

const [x = 0, y] = [undefined, 2];
console.log(x); // 输出: 0（默认值）
console.log(y); // 输出: 2

const {z = 'default'} = {z: null};
console.log(z); // 输出: null（原始值）

模块化

概念

按照一定规则拆分成多个文件，这种编码方式是模块化编程

拆分出来的文件，是隔离的，所以模块中的数据是私有的，如果外边想知道的话，export暴露出去

为什么需要模块化
全局污染问题
依赖混乱问题
数据安全问题

模块化规范

CommonJS 服务端
AMD
CMD
ES6 模块化 浏览器端

导入导出概念

在这里插入图片描述
导出,就是公开一些接口
导入,就是导入别人公开的接口

CommonJS

index.js

const school = require('./school.js')
console.log(school);

school.js

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'


function getTel() {
    return '010-3333'
}

function getCities() {
    return ['北京','上海']
}

此时运行index.js 输出为空
在这里插入图片描述

原因是,在school.js中,他有一个对象也就是{},我们没有给他加入东西进去

使用exports

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'


function getTel() {
    return '010-3333'
}

function getCities() {
    return ['北京','上海']
}

exports.name = name;
exports.slogan = slogan;
exports.getTel = getTel;

index.js运行在这里插入图片描述

两种方式

module.exports = value
exports.name = value

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'


function getTel() {
    return '010-3333'
}

function getCities() {
    return ['北京','上海']
}

// exports.name = name;
// exports.slogan = slogan;
// exports.getTel = getTel;

module.exports = {name,slogan,getTel}

注意:
每个模块的内部 this,exports,module.exports 在初始化的时候,都指向的是同一个空对象在这里插入图片描述
无论如何修改导出对象,最终导出的都是module.exports的值

不能使用exports = value的形式导出数据,这就是赋值
可以用module.exports = xxx

导入

我们在student.js,school.js 暴露

school.js

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'
function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}
module.exports = {name,slogan,getTel}

student.js

const name = 'jjking'
const motto = '相信明天会更好'
function getTel() {
    return '13816666666'
}
function getHobby() {
    return ['抽烟','喝酒']
}
module.exports = {name,motto,getTel}

index.js

const {name,slogan,getTel} = require('./school.js')
const {name,motto,getTel} = require('./student.js')
console.log(name);

我们在导入的时候,可以用解构赋值但是如果这里的导入可能会有重名问题
为了解决重名,我们另外取名字

const {name,slogan,getTel} = require('./school.js')
const {name:stuName,motto,getTel:stuGetTel} = require('./student.js')
console.log(name);
扩展理解

在这里插入图片描述
意思是,实际上,在js中,他已经包了一层函数给我们,函数的参数是exports,require,module…
所以数据是隔离的

浏览器端运行

Node.js默认支持CommonJS,但是浏览器不行

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>

    <script src="./index.js"></script>
  </body>
</html>

const {name,slogan,getTel} = require('./school.js')
const {name:stuName,motto,getTel:stuGetTel} = require('./student.js')

console.log(name);

运行的话,会报错
在这里插入图片描述
所以我们需要安装一个依赖

在这里插入图片描述

ES6 模块化

服务器端,浏览器端都适配

初步体验

school.js

export const name = 'shanggui'
export const slogan = '然天下没有南徐的技术'
export function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}

index.js

import * as school from './school.js'
console.log(school);

index.html

<!DOCTYPE html>
<html lang="">
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

这里必须type写成module,不然用不了import
在这里插入图片描述

Node.js运行

在js包下,写一个配置
package.json

{
    "type": "module"
}

运行index.js
在这里插入图片描述

导出

分别导出

export const name = 'shanggui'
export const slogan = '然天下没有南徐的技术'
export function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}

统一导出

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'
function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}
export {name,slogan,getTel}

注意,这里导出的不是对象,只是类似对象的东西

默认导出

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'
function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}
export default {name,slogan,getTel}

在这里插入图片描述
这里导出的是对象,且他会在对象上写一个default,里边使我们要导出的对象

导入

导入全部

import * as school from './school.js'

命名导入 适用于分别导出,统一导出

school.js

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'
function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}
export {name,slogan,getTel}

index.js

import {name as schoolName,slogan,getTel} from './school.js'
console.log(school);

命名导入,我们可以取别名

默认导入
对于默认导出,我们用默认导入的话,我们可以直接用一个变量来接

school.js

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'
function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}
export default {name,slogan,getTel}

index.js

import school from './school.js'
console.log(school);

这样是最快的

默认导入和命名导入混合
两个是可以一起用的

school.js

const name = 'shanggui'
const slogan = '然天下没有南徐的技术'
function getTel() {
    return '010-3333'
}
function getCities() {
    return ['北京','上海']
}
export {name,slogan}
export default {getTel}

index.js

import getTel,{name,slogan} from './school.js'
console.log(getTel);
console.log(name);
console.log(slogan);

在这里插入图片描述

动态导入
index.js

const btn = document.getElementById("btn")
btn.onclick = async () => {
    const stu = await import('./student.js');
    console.log(stu);
}

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <button id="btn">点击</button>
    <script type="module" src="./index.js"></script>
  </body>
</html>

动态不知道体现在哪,但在就是我们可以使用import当函数

数据引用问题

在这里插入图片描述

es6中,我们import出来的东西是一个常量,但是index.js(左边) 的sum和右边导出的sum是公用一个空间的,恰巧此时右边的sum是let,我们可以修改他的值

所以,我们在index.js中,修改了sum的值,也就会修改我们自己import的num,最后会变成3

总结来看,es6中,我们导出的东西,能用const就用const,不要用let

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

编写php项目所需环境

编写php项目所需环境

需要编写php项目&#xff0c;需要看到编写的代码展现的效果&#xff0c;这里我选择用xampp来展现 准备工作&#xff1a; https://learncodingfast.com/how-to-install-xampp-and-brackets/#Installing_and_Running_XAMPP xampp下载地址&#xff1a;https://www.apachefriends.…
阅读更多...
吉林大学机器学习复习

吉林大学机器学习复习

第一章、绪论&#xff1a; 相关概念&#xff1a; 训练集&#xff1b;评估函数&#xff08;目标函数、代价函数&#xff09;&#xff1b;梯度下降&#xff1b;机器学习算法的分类 机器学习是什么&#xff1a;寻找一个函数&#xff08;模型&#xff09;。 机器学习的基本流程&…
阅读更多...
解决MAC装win系统投屏失败问题（AMD显卡）

解决MAC装win系统投屏失败问题（AMD显卡）

一、问题描述 电脑接上HDMI线后&#xff0c;电脑上能显示有外部显示器接入&#xff0c;但是外接显示器无投屏画面 二、已测试的方法 1 更改电脑分辨&#xff0c;结果无效 2 删除BootCamp&#xff0c;结果无效 3更新电脑系统&#xff0c;结果无效 4 在设备管理器中&#…
阅读更多...
数据结构 ——哈希表

数据结构 ——哈希表

数据结构 ——哈希表 1、哈希表的概念 概念参考 算法数据结构基础——哈希表&#xff08;Hash Table&#xff09; 2、代码实现 下面是用数组实现哈希结构&#xff0c;开放地址法解决冲突的简单哈希表操作 #include <stdio.h> #include <stdlib.h> #include <s…
阅读更多...
OpenCV实验篇：识别图片颜色并绘制轮廓

OpenCV实验篇：识别图片颜色并绘制轮廓

第三篇&#xff1a;识别图片颜色并绘制轮廓 1. 实验原理 颜色识别的原理&#xff1a; 颜色在图像处理中通常使用 HSV 空间来表示。 HSV 空间是基于人类视觉系统的一种颜色模型&#xff0c;其中&#xff1a; H&#xff08;Hue&#xff09;&#xff1a;色调&#xff0c;表示颜色…
阅读更多...
SpringBoot【八】mybatis-plus条件构造器使用手册！

SpringBoot【八】mybatis-plus条件构造器使用手册！

一、前言&#x1f525; 环境说明&#xff1a;Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 经过上一期的mybatis-plus 入门教学&#xff0c;想必大家对它不是非常陌生了吧&#xff0c;这期呢&#xff0c;我主要是围绕以下几点展开&#xff0c;重点给大家介绍 里…
阅读更多...
【java常用集合】java

【java常用集合】java

第1关&#xff1a;初识Collection 第2关&#xff1a;集合遍历方法 第3关&#xff1a;Set接口 第4关&#xff1a;Map接口 第5关&#xff1a;泛型 第6关&#xff1a;知识回顾
阅读更多...
论文概览 |《Sustainable Cities and Society》2024.12 Vol.116

论文概览 |《Sustainable Cities and Society》2024.12 Vol.116

本次给大家整理的是《Sustainable Cities and Society》杂志2024年12月第116期的论文的题目和摘要&#xff0c;一共包括52篇SCI论文&#xff01; 论文1 Enhancing road traffic flow in sustainable cities through transformer models: Advancements and challenges 通过变压…
阅读更多...
AI开发 - 用GPT写一个GPT应用的真实案例

AI开发 - 用GPT写一个GPT应用的真实案例

就在昨天&#xff0c;我的同事推荐给我了一个第三方的公共大模型API&#xff0c;这个API集合了国际上上几乎所有知名的大模型&#xff0c;只需要很少的费用&#xff0c;就可以接入到这些大模型中并使用它们。成本之低&#xff0c;令人乍舌&#xff01;包括我们现在无法试用的 G…
阅读更多...
怎样使用Eclipse创建Maven的Java WEB 项目

怎样使用Eclipse创建Maven的Java WEB 项目

文章目录 1、第一种方式&#xff08;选择 archetype 方式&#xff09; 1.1、第一步&#xff1a;创建项目1.2、第二步&#xff1a;配置jre1.3、第三步&#xff1a;配置tomcat1.4、第四步&#xff1a;设置为WEB3.11.5、第五步&#xff1a;配置Maven的编译级别 1.5.1、第一种方法…
阅读更多...
【密码学】ZUC祖冲之算法

【密码学】ZUC祖冲之算法

一、ZUC算法简介 ZUC算法&#xff08;祖冲之算法&#xff09;是中国自主研发的一种流密码算法&#xff0c;2011年被3GPP批准成为4G国际标准&#xff0c;主要用于无线通信的加密和完整性保护。ZUC算法在逻辑上采用三层结构设计&#xff0c;包括线性反馈移位寄存器&#xff08;L…
阅读更多...
Kaggler日志--Day5

Kaggler日志--Day5

进度24/12/15 昨日复盘 Intermediate Mechine Learning之类型变量 读两篇讲解如何提问的文章&#xff0c;在提问区里发起一次提问 实战&#xff1a;自己从头到尾首先Housing Prices Competition for Kaggle Learn Users并成功提交 Intermediate Mechine Learning之管道&#…
阅读更多...
每天五分钟深度学习pytorch:基于AlexNet模型完成手写字体识别

每天五分钟深度学习pytorch:基于AlexNet模型完成手写字体识别

本文重点 前面我们学习了LeNet的搭建，本文我们学习AlexNet网络模型的搭建，然后使用它跑一遍手写字体识别的项目 AlexNet 在2012年ImageNet竞赛中以超过第二名10.9个百分点的绝对优势一举夺冠，从此深度学习重新火热起来，我们来看一下它的网络结构，它比LeNet更深，同时第…
阅读更多...
【学习笔记】桌面浏览器的视口

【学习笔记】桌面浏览器的视口

概念&#xff1a;设备像素和CSS像素 设备像素&#xff1a;设备物理屏幕的像素分辨率&#xff0c;使用screen.width/height获取 这里有四个像素100%缩放&#xff0c;CSS像素完全覆盖设备像素 缩小后&#xff0c;CSS像素开始缩小&#xff0c;意味着一个设备像素覆盖多个CSS像素…
阅读更多...
分享两个爬虫练习网站+一个python游戏网站

分享两个爬虫练习网站+一个python游戏网站

目录 第一个网站第二个Python游戏网站 第一个网站 网站一 第二个 网站二 Python游戏网站 网站三
阅读更多...
基于小程序实现地图定位、轨迹绘制、地图标点、快捷导航、唤醒导航APP、开箱即用

基于小程序实现地图定位、轨迹绘制、地图标点、快捷导航、唤醒导航APP、开箱即用

目录 前言研究背景与意义研究目标与内容研究方法与技术路线小程序地图组件介绍定位技术与原理轨迹绘制技术地图标注与标记功能地图定位与轨迹绘制功能实现定位功能设计与实现获取用户当前位置总结说明代码块前言 研究背景与意义 地图定位和轨迹追踪作为智能手机中常见的功能之…
阅读更多...
微信小程序中 Echarts 的巧妙运用

微信小程序中 Echarts 的巧妙运用

一、引入 Echarts 的准备工作 在微信小程序中引入 Echarts 需要进行一系列的准备工作。首先&#xff0c;我们可以从 echarts 官网或 GitHub 上下载 echarts-for-weixin 项目。找到其中的 ec-canvas 文件夹&#xff0c;这个文件夹将是我们引入到微信小程序项目中的关键部分。 …
阅读更多...
论文阅读笔记：OminiControl: Minimal and Universal Control for Diffusion Transformer

论文阅读笔记：OminiControl: Minimal and Universal Control for Diffusion Transformer

论文阅读笔记&#xff1a;OminiControl: Minimal and Universal Control for Diffusion Transformer 1 背景1.1 问题1.2 提出的方法 2 创新点3 方法4 模块4.1 预备知识4.2 OminiControl4.2.1 利用已有的结构4.2.2 统一序列处理4.2.3 位置感知token交互4.2.4 可控调节强度 4.3 S…
阅读更多...
时序论文30｜NIPS24一篇对时间戳深入研究的文章

时序论文30｜NIPS24一篇对时间戳深入研究的文章

论文标题&#xff1a;Frequency Adaptive Normalization For Non-stationary Time Series Forecasting 论文链接&#xff1a;https://arxiv.org/pdf/2409.18696 代码链接&#xff1a;https://github.com/ForestsKing/GLAFF 前言 这篇论文提出了一个新框架GLAFF&#xff0c;…
阅读更多...
图像处理 - 车道线检测：智能驾驶的“眼睛”

图像处理 - 车道线检测：智能驾驶的“眼睛”

引言 在智能驾驶技术飞速发展的今天&#xff0c;车道线检测作为一项基础而关键的技术&#xff0c;扮演着车辆“眼睛”的角色。它不仅关系到车辆的导航和定位&#xff0c;还直接影响到自动驾驶系统的安全性和可靠性。本文将带你深入了解车道线检测技术的原理、方法以及在实际应用…
阅读更多...
最新文章

Copyright @ 2022~2023