JavaScript学习小记(1)基本数据结构(数组,字符串)

一个寒假确实过的很快,这个寒假除了调包调参突然心血来潮想学一下前端,学习过程比较平滑,我是自己找的技术文档+写代码实践来学习的,教程视频虽然详细,但是真的一点都看不动。

目录

  • JS如何定义变量的
    • 老旧的var
    • let定义是推荐使用的。
  • JS中的数组
    • concat方法会返回一个连接后的新数组,不会改变原数组
    • 遍历数组的一些方法:
    • 查找元素的一些方法:
    • 在数组中查找
    • 对数组每个元素操作,返回一个新数组,map操作
    • 数组和字符串之间的转化
    • splice方法非常好用,既可以删除元素也可以填充修改
    • 对比数组是否相等时,请使用(===)而不是(==)
    • Reduce方法(函数操作应用到每个数组的元素上)
  • JS 中的字符串
    • 访问
    • 查找
    • 切片
    • Unicode(charCodeAt()和toString())

JS如何定义变量的

老旧的var

在一些比较古早的教材中,定义js变量通常使用的是var。虽然是大家经常写的做法,但是不推荐这么做因为他又两点坏处

  • var 关键字只有函数作用域全局作用域
if (true) {var flag = False;
}
console.log(flag); // 这个时候显示的是False,意味着这个变量在循环过后依旧存在
  • 关于var存在变量提升的问题
a = 0
var a 
console.log(a) // 0

声明的语句可以视为自动提升到文档的顶部

  • var关键字可以重新定义不报错

let定义是推荐使用的。

JS中的数组

常用的方法有

let a = [2, 3, 4 ,5]let size_a = a.length // 是数组的一个属性a.unshift(['a','b'])console.log(`a数组的长度为${size_a}`)
console.log(`a 数组经过 unshift 后变成了a: ${a}`)//a 数组经过 unshift 后变成了a: a,b,2,3,4,5a.shift()
console.log(`a 数组经过一次shift操作的变化a: ${a}`)//a 数组经过一次shift操作的变化a: 2,3,4,5
// 这会除掉一次性unshift加入头部的元素a.concat(['concat']) // concat 操作会返回一个新数组所以这里
console.log(`进行concat 操作后的 a: ${a}`) // 进行concat 操作后的 a: 2,3,4,5let new_a = a.concat(['concat']) 
console.log(`返回的新数组为${new_a}`) // 返回的新数组为2,3,4,5,concatconsole.log(`查找元素2 : ${a.indexOf(2)}`) // 查找对应的索引let b = a.slice(1,3)
console.log(`b 截取的子串为 ${b}`) // [ , ) 方式截取的子串let c = []for (let i = 0 ; i < 10 ; i++){c[i] = i
}console.log(`数组c是:${c}`)
console.log(`转置后的数组c是${c.reverse()}`)
console.log(`排序后的转置数组c ${c.reverse().sort()}`)console.log(`在0-3这个位置删除掉元素然后添加4个字母,删除掉的元素为${c.splice(0,4,'a','b','c',)}`)
//在0-3这个位置删除掉元素然后添加4个字母,删除掉的元素为0,1,2,3
console.log(c) // 这个操作会直接影响数组c,而不是返回新的数组
//[
//  'a', 'b', 'c', 4, 5,
//  6,   7,   8,   9
//]console.log(`将数组c的所有元素使用一个符号连接 ":" ${c.join(':')}`)
//将数组c的所有元素使用一个符号连接 ":" a:b:c:4:5:6:7:8:9

concat方法会返回一个连接后的新数组,不会改变原数组

遍历数组的一些方法:

  • arr.forEach(function(value,index,arr){ …do something})
  • for(let i = 0 ; i < arr.lenght; i++){}
  • for(let i of arr){}

查找元素的一些方法:

  • indexOf()
  • lastIndexof()
    以上两种办法接受,(value,from)从from开始查询,找到了value就返回索引,找不到返回-1
    还有另外一种只检查是否涵盖
  • includes()
    用法一样,返回的真假

在数组中查找

let users = [{id: 1, name: "John"},{id: 2, name: "Pete"},{id: 3, name: "Mary"}
];let user = users.find(item => item.id == 1);//返回值
let user1 = user.findIndex(item => item.id ==1);//返回索引
let user2 =  user.findLastIndex();//同上alert(user.name); // John

对数组每个元素操作,返回一个新数组,map操作

let result = arr.map(function(item, index, array) {// 返回新值而不是当前元素
})

数组和字符串之间的转化

let a = [1,1,2,3,2,34,45]
let b = a.join(",") // 1,1,2,3,2,34,45
console.log(b)
let c = b.split(",")
console.log(c) // [ '1',  '1', '2', '3',  '2', '34', '45' ]

splice方法非常好用,既可以删除元素也可以填充修改

arr.splice(start[, deleteCount, elem1, …, elemN])

对比数组是否相等时,请使用(=)而不是(

因为 == 对比的是两个变量引用的是同一个对象才会相等,他也会存在类型转换

0 = []  // true 因为空[]被转化为0

Reduce方法(函数操作应用到每个数组的元素上)

let value = arr.reduce(function(accumulator, item, index, array) {// accumulator为上一次函数的返回值,initial为初始值
}, [initial]);

JS 中的字符串

JS中创建好的字符串变量是不可以直接通过索引修改的,必须用新的变量存储

访问

使用方括号的数字索引来。

查找

使用string.indexOf(character)来查找

切片

  • 使用slice(start,end) # [ )区间
  • 使用substring(start,end) # 同上
  • 使用substr(start,length)

Unicode(charCodeAt()和toString())

所有的字符串都使用 UTF-16 编码
String 的 charCodeAt() 方法返回一个整数,表示给定索引处的 UTF-16 码元,其值介于 0 和 65535 之间。
toString()方法返回一个表示该对象的字符串

function Dog(name) {this.name = name;
}const dog1 = new Dog('Gabby');
let dog2 = Dog('agg');//没有使用new创建实例,无意义Dog.prototype.toString = function dogToString() {return `${this.name}`;
};console.log(dog1.toString());

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

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

相关文章

174基于matlab的雷达数字信号处理

基于matlab的雷达数字信号处理。该程序具备对雷达目标回波的处理能力&#xff0c;能够从噪声中将目标检测出来&#xff0c;并提取目标的距离、速度、角度信息。有相应的试验文档。程序已调通&#xff0c;可直接运行。 174 雷达数字信号处理 目标检测出来 (xiaohongshu.com)

赵本山指着李琳(桂琴):这个琴你买不起,小沈阳:那得多少钱哪?

赵本山指着李琳&#xff08;桂琴&#xff09;&#xff1a;这个琴你买不起&#xff0c;小沈阳&#xff1a;那得多少钱哪&#xff1f; --小品《同桌的你》&#xff08;中2&#xff09;的台词 赵本山&#xff1a;照全家福的家长没回来你跟谁照呢 小沈阳&#xff1a;哎哪算你一个呗…

国产替代MATLAB的征途

国产替代MATLAB的征途 The Journey of Domestic Alternatives to MATLAB 在科技的浪潮中&#xff0c;软件成为了推动进步的重要工具。MATLAB&#xff0c;这一工程和科学计算的巨擘&#xff0c;因其强大的数值分析、矩阵运算能力和丰富的应用工具箱&#xff0c;在全球学术界和工…

5 buuctf解题

命令执行 [BJDCTF2020]EasySearch1 打开题目 尝试弱口令&#xff0c;发现没有用 扫描一下后台&#xff0c;最后用御剑扫描到了index.php.swp 访问一下得到源码 源码如下 <?phpob_start();function get_hash(){$chars ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstu…

抖音视频批量下载工具|视频内容提取软件

这 款基于C#开发的抖音视频下载工具提供了多项实用功能&#xff0c;让用户可以方便快捷地获取抖音平台上的视频内容。 轻松下载抖音视频&#xff0c;尽在这款专业工具&#xff01; 无论您是想要批量提取抖音视频&#xff0c;还是只需下载单个视频&#xff0c;这款基于C#开发的…

【管理咨询宝藏资料26】某城投集团对标案例分析报告

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏资料26】某城投集团对标案例分析报告 【关键词】战略规划、对标研究、管理咨询 【文件核心观点】 - 市场化城开企业&#xff0c;打造城市综合运…

如何在 VM 虚拟机中安装 Windows XP 操作系统保姆级教程(附链接)

一、VMware Workstation 虚拟机 没有安装 VM 虚拟机的参考以下文章进行安装&#xff1a; VM 虚拟机安装教程https://eclecticism.blog.csdn.net/article/details/135713915 二、Windows XP 镜像 点击链接下载镜像 下载链接https://pan.baidu.com/s/1sk5pU8PoTJ1dOxMpGCUfc…

332. 重新安排行程

332. 重新安排行程 题目链接&#xff1a;332. 重新安排行程 代码如下&#xff1a; //回溯 //参考&#xff1a;https://www.programmercarl.com/0332.%E9%87%8D%E6%96%B0%E5%AE%89%E6%8E%92%E8%A1%8C%E7%A8%8B.html#%E6%80%9D%E8%B7%AF class Solution { public:bool backtrac…

linux GPT格式分区丢失处理

因客户检修断电&#xff0c;来电后发现数据库恢复正常&#xff0c;但备份磁盘的分区丢失&#xff0c;如下图 [rootdb1 ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/mapper/LVMgroup-root 99G 9.7G 84G 11% / tmpfs …

python Matplotlib Tkinter-->grid 框架案例

环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pillow 10.1.0 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk import tkinter as tk from PIL import Image, ImageTkclass MyNavigatio…

windows10 编译ptlib

官方参考链接&#xff1a;http://wiki.opalvoip.org/index.php?nMain.BuildingPTLib 编译 安装openssl 1.x版本&#xff1a;https://slproweb.com/products/Win32OpenSSL.html安装并打开vs2022&#xff0c;选择git导入ptlib源码&#xff0c;链接&#xff1a;git://git.code.…

硬件描述语言 Chisel 入门教程

硬件描述语言 Chisel 入门教程 文章目录 硬件描述语言 Chisel 入门教程硬件描述语言 Chisel 入门教程目录Chisel简介安装Chisel环境 硬件描述语言 Chisel 入门教程基础语法定义数据类型定义模块实例化模块 构建 Chisel 项目模块定义与使用生成Verilog代码测试与验证 硬件描述语…

IO进程线程复习:进程线程

1.进程的创建 #include<myhead.h>int main(int argc, const char *argv[]) {printf("hello world\n");//父进程执行的内容int num520;//在父进程中定义的变量pid_t pidfork();//创建子进程if(pid>0){while(1){printf("我是父进程&#xff0c;num%d\n&…

曲线生成 | 图解B样条曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 控制点计算之插值2 控制点计算之近似3 仿真实现3.1 ROS C实现3.2 Python实现3.3 Matlab实现 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划(图搜索、采样法、智能算法等)&a…

Linux学习第二天(yum、vim工具)

yum 1、使用yum查看软件包 yum list | grep lrzsz 使用这段指令之后可以罗列出可以安装的软件包&#xff0c;这里罗列出的含lrzsz这个词的软件包&#xff0c;如&#xff1a; lrzsz.x86_64 0.12.20-36.el7 base 这里有几点需要…

ZYNQ Vivado更新硬件后SDK不更新问题解决办法

一、情况说明 软件版本 Vivado 2018.3 Vivado更新硬件导出后&#xff0c;按正常SDK会自动检测到hdf文件的变化跳出更新提示&#xff08;如下图所示&#xff09;。但是我的项目如果是复制的或者是长时间没打开的项目更新硬件配置导出后SDK无法自动更新。 二、解决办法 2.1 …

Java 项目怎么把字符串转为整数?

将字符串转换为整数是 Java 开发中常见的需求&#xff0c;尤其在处理用户输入或者文件读取时。Java 提供了多种方法来实现这一转换&#xff0c;下面将详细介绍这些方法&#xff0c;以及它们的适用场景、优缺点等。 1. 使用 Integer 类的 parseInt 方法 String str "123…

win10安装使用AxurePR9

背景&#xff1a;win10 安装、汉化 Axure Pr9 下载 安装包 链接&#xff1a;https://pan.baidu.com/s/1taMgh2zLbaFK7VTfUXTHdQ 提取码&#xff1a;kygo 安装 修改安装目录 打开是英文的 汉化 复制lang包到Axure安装包 再打开就是中文 问题 发布html后火狐无法打开 一、…

高精度运算模板

高精度运算模板 基础版 代码“借鉴”的文章&#xff1a;oi.wiki : 高精度 基础版 #include <iostream> #include <cstring> using namespace std; const int LEN 1e45; //根据实际情况调整&#xff0c;表示最高位 char s[LEN];//用于读取的字符串//初始化一个数…

Java实现LTTB抽样算法

package org.example;import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Comparator; import java.util.Date; import java.util.List;public class LttbUtils {/*** LTTB算法&#xff0c;用于优化抽样&…