【JavaScript知识点】预解析、作用域、数据类型、数组常用方法、字符串常用方法

JS知识点

      • 1.预解析
      • 2.作用域:一个变量可以生效的范围,这个变量的使用范围就是作用域
      • 3.作用域访问规则
      • 4.我们的存储空间分成两种栈和堆
      • 5.数据类型分为基本数据类型和复杂数据类型
      • 6.冒泡排序和选择排序
      • 7.数组常用方法
      • 8.字符串常用方法
      • 9.json 是一种轻量级的数据交换格式,把字符串转换成公用的模式
      • 10.ES6 中引入了**模板字符串**,让我们告别了使用大量'' 和 +来连接字符串了写法。
      • 11.数字常用方法
      • 12.将日期字符串格式化成指定内容

1.预解析

因为是在所有代码执行之前进行解释,需要解释的内容有两个:

  • 声明式函数
    • 在内存中先声明有一个变量名是函数名,并且这个名字代表的内容是一个函数
  • var 关键字
    • 在内存中先声明有一个变量名

2.作用域:一个变量可以生效的范围,这个变量的使用范围就是作用域

  • 局部作用域

    • 局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域
    • 在局部作用域中定义的变量只能在这个局部作用域内部使用
    • JS 中只有函数能生成一个局部作用域,别的都不行
    • 每一个函数,都是一个局部作用域
  • 全局作用域

    • 全局作用域是最大的作用域
    • 在全局作用域中定义的变量可以在任何地方使用
    • 页面打开的时候,浏览器会自动给我们生成一个全局作用域 window
    • 这个作用域会一直存在,直到页面关闭就销毁了

3.作用域访问规则

  • 首先,在自己的作用域内部查找,如果有,就直接拿来使用
  • 作用域的查找机制只能是向上找,不能向下找

4.我们的存储空间分成两种栈和堆

  • 栈: 主要存储基本数据类型的内容
  • 堆: 主要存储复杂数据类型的内容
  • 复杂数据类型是地址之间的比较
  var obj = { name: 'Jack' }var obj2 = { name: 'Jack' }console.log(obj == obj2) // false
  • 因为我们创建了两个对象,那么就会在 堆空间 里面开辟两个存储空间存储数据(两个地址)
  • 虽然存储的内容是一样的,那么也是两个存储空间,两个地址
  • 复杂数据类型之间就是地址的比较,所以 objobj2 两个变量的地址不一样
  • 所以我们得到的就是 false

5.数据类型分为基本数据类型和复杂数据类型

  • 基本数据类型: number / string / boolean / undefined / null
  • 复杂数据类型: object / function / array

6.冒泡排序和选择排序

  for (var j = 0; j < arr.length-1; j++) {for (var i = 0; i < arr.length-j-1; i++) {// 判断,如果数组中的当前一个比后一个大,那么两个交换一下位置if (arr[i] > arr[i + 1]) {var tmp = arr[i]arr[i] = arr[i + 1]arr[i + 1] = tmp}}}选择排序for (var j = 0; j < arr.length - 1; j++) {var minIndex = jfor (var i = j + 1; i < arr.length; i++) {if (arr[i] < arr[minIndex]) {minIndex = i}}if (minIndex !== j) {var tmp = arr[minIndex]arr[minIndex] = arr[j]arr[j] = tmp}}

7.数组常用方法

  1. push-是用来在数组的末尾追加一个元素

var arr = [1, 2, 3]
var res=arr.push(4)//会改变原始数组
console.log(arr) // [1, 2, 3, 4]
console.log(res) //4

  1. pop-是用来删除数组末尾的一个元素

var arr = [1, 2, 3]
var res=arr.pop()//会改变原始数组
console.log(arr) // [1, 2]
console.loh(res)

  1. unshift-是在数组的最前面添加一个元素

var arr = [1, 2, 3]
arr.unshift(4)//会改变原始数组
console.log(arr) // [4, 1, 2, 3]

  1. shift-是删除数组最前面的一个元素

var arr = [1, 2, 3]
arr.shift()//会改变原始数组
console.log(arr) // [2, 3]

  1. splice(从哪一个索引位置开始,截取多少个,替换的新元素)-是截取数组中的某些内容,按照数组的索引来截取

var arr = [1, 2, 3, 4, 5]
arr.splice(1, 2)//会改变原始数组
console.log(arr) // [1, 4, 5]

  1. reverse-是用来反转数组使用的

var arr = [1, 2, 3]
arr.reverse()
console.log(arr) // [3, 2, 1]

  1. sort-是用来给数组排序的

var arr = [2, 3, 1]
arr.sort()//会改变原始数组
console.log(arr) // [1, 2, 3]

  1. concat-是把多个数组进行拼接

var arr = [1, 2, 3]
var newArr = arr.concat([4, 5, 6])//不会改变原始数组
console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3, 4, 5, 6]

  1. join-是把数组里面的每一项内容链接起来,变成一个字符串

var arr = [1, 2, 3]
var str = arr.join(‘-’) //不会改变原始数组
console.log(arr) // [1, 2, 3]
console.log(str) // 1-2-3

  1. indexOf-用来找到数组中某一项的索引

var arr = [1, 2, 3, 4, 5]
var index = arr.indexOf(3)
console.log(index) // 3 的下标为 2
如果你要找的内容在数组中没有,那么就会返回 -1

  1. forEach-是用来遍历数组的

var arr = [1, 2, 3]
arr.forEach(function (item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
console.log('数组的第 ’ + index + ’ 项的值是 ’ + item + ‘,原始数组是’, arr)
})
数组的长度是多少,这个函数就会执行多少回

  1. map-和 forEach 类似,只不过可以对数组中的每一项进行操作,返回一个新的数组

var arr = [1, 2, 3]
// 使用 map 遍历数组
var newArr = arr.map(function (item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item + 10
})
console.log(newArr) // [11, 12, 13]

  1. filter-把原始数组中满足条件的筛选出来,组成一个新的数组返回

var arr = [1, 2, 3]
var newArr = arr.filter(function (item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item > 1
})
console.log(newArr) // [2, 3]

  1. reduce-叠加

var arr=[1,2,3,4,5]
var arr2=arr.reduce(function(prev,item){
return prev+item//prev 是上一次的 return 值
},0)//初始值为 0
console.log(arr2)

8.字符串常用方法

  1. charAt:返回索引对应的字符

var str = “Jack”;
var index = str.charAt(2);
console.log(index); // c

  1. charCodeAt:就是返回对应索引位置的 unicode 编码

var str = “Jack”;
var index = str.charCodeAt(0);
console.log(index); // 74

  1. toUpperCase() toLowerCase()转换大小写

var str = hello;
var upper = str.toUpperCase();
console.log(upper); // HELLO
var lower = upper.toLowerCase();
console.log(lower); // hello

  1. substr(开始索引,长度) substring(开始索引,结束索引) slice(开始索引,结束索引)
  2. replace 替换(正则表达式):替换某个字符 str.replace(“a”,“*”)
  3. split 分割:str.split(“|”)
  4. indexOf(lastIndexOf 从后面查)查找字符的下标

var str = “Jack”;
var index = str.indexOf(“J”);
console.log(index); // 0

  1. concat 连接字符串
  2. trim 去掉首尾空格

9.json 是一种轻量级的数据交换格式,把字符串转换成公用的模式

  • JSON 和 JS 对象互转
  1. 要实现从 JSON 字符串转换为 JS 对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
  1. 要实现从 JS 对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

10.ES6 中引入了模板字符串,让我们告别了使用大量’’ 和 +来连接字符串了写法。

  1. 要创造一个模板字符串,只需要使用反引号``将字符串包起来,模板字符串中的变量用${变量名}替代即可
var a = 'o,';var b = 'd!'
console.log (`Hell${a}worl${b}`);
  1. 多行字符串:在模板字符串内,换行和空格是会保存并展示出来的
   var a = 'o,';var b = 'd!'console.log(`Hell${a}worl${b}`);
  1. 调用函数
   function string(){return "Hello!";}console.log(`${string()} world!`);

11.数字常用方法

  • Math.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数
  • Math.round() 是将一个小数 四舍五入 变成一个整数
  • Math.abs() 是返回一个数字的 绝对值
  • Math.ceil() 是将一个小数 向上取整 得到的整数
  • Math.floor() 是将一个小数 向下取整 的到的整数
  • Math.max() 得到的是你传入的几个数字之中 最大 的那个数字
  • Math.min() 得到的是你传入的几个数字之中 最小 的那个数字
  • Math.PI 得到的是 π 的值,也就是 3.1415936...

12.将日期字符串格式化成指定内容

  • getFullYear() 方式是得到指定字符串中的哪一年
  • getMonth() 方法是得到指定字符串中的哪一个月份
  • getDate() 方法是得到指定字符串中的哪一天
  • getHours() 方法是得到指定字符串中的哪小时
  • getMinutes() 方法是得到指定字符串中的哪分钟
  • getSeconds() 方法是得到指定字符串中的哪秒钟
  • getDay() 方法是得到指定字符串当前日期是一周中的第几天(周日是 0,周六是 6)
  • getTime() 方法是得到执行时间到 格林威治时间 的毫秒数(时间戳

来源:千锋kerwin前端JS视频

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

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

相关文章

计算机网络——物理层(数据交换方式)

计算机网络——数据交换方式 提高数据交换方式的必要性电路交换电路交换原理电路交换的阶段建立阶段通信阶段和连接拆除阶段 电路交换的优缺点报文交换什么是报文报文交换的阶段报文交换的优缺点 分组交换分组交换的阶段分组交换的优缺点 数据交换方式的选择数据报方式数据报方…

使用vue3 开发H5 ,需要注意的部分点

以下内容为使用vue3 开发H5 中碰到的几个点&#xff0c;个人愚见。不定期进行补充。 框架端 1. 安装 vite插件 vitejs/plugin-legacy 。 npm add -D vitejs/plugin-legacy使用&#xff1a; 在vite.config.js 中引入 import legacy from vitejs/plugin-legacy; export defau…

相机拍照与摄影学基础

1.相机拍照 相机可能形状和大小不同&#xff0c;但基本功能相同&#xff0c;包括快门速度、光圈和感光度&#xff0c;这些是摄影的通用概念。即使是一次性相机也是基于这三个理念工作的。不同类型相机在这三个概念上的唯一区别是你可以控制这些功能的程度。这三个参数被称为相…

Redis在缓存方面的应用有哪些?如何避免缓存击穿、缓存雪崩等问题?Redis如何实现分布式锁?有哪些注意事项?

Redis在缓存方面的应用有哪些&#xff1f;如何避免缓存击穿、缓存雪崩等问题&#xff1f; Redis在缓存方面的应用广泛且多样&#xff0c;包括但不限于以下几个方面&#xff1a; 页面缓存&#xff1a;Redis可以将Web页面的内容片段&#xff0c;包括HTML、CSS和图片等静态数据&a…

【ESP32接入国产大模型之MiniMax】

1. MiniMax 讲解视频&#xff1a; ESP32接入语言大模型之MiniMax MM智能助理是一款由MiniMax自研的&#xff0c;没有调用其他产品的接口的大型语言模型。MiniMax是一家中国科技公司&#xff0c;一直致力于进行大模型相关的研究。 随着人工智能技术的不断发展&#xff0c;自然语…

基于opencv的图像处理系统的设计与实现

概要 随着计算机技术的飞速发展&#xff0c;图像技术在各领域的研究和应用日渐深入和广泛。opencv是近年来推出的开源、免费的计算机视觉库,利用其所包含的函数可以很方便地实现数字图像处理。本文旨在对opencv进行一个快速全面简介,通过介绍图像处理的相关函数&#xff0c;使读…

安卓UI面试题 56-60

56. 简述IntentService原理分析 ? HandlerThread其实就是为了我们在 子线程中减少自己创建Looper以及运转Looper而出现的, 那么这次的IntentService其实封装的更巧妙,使用 HandlerThread的时候我们还需要创建Handler对象出来, 但是使用IntentService连Handler对象也不用我们…

前端小白的学习之路(HTML5 二)

提示&#xff1a;<svg>与<canvas> 目录 目录 一、svg标签 1.简介 2.常用属性 3.标签 4.使用示例 二、canvas标签 1.简介 2.常用属性与方法 3.使用示例 1)绘制基础图案 2)绘制组合图案(一个爱心) 3)做一幅动图 三、svg与canvas的区别 一、svg标签 1.简…

Kubernetes kafka系列 | k8s部署kafka+zookeepe集群(可外部通信)

直通车 zookeeper搭建 请参考yaml kafka.yaml --- apiVersion: v1 kind: Service metadata:name: kafka-hslabels:app: kafka spec:ports:- port: 9092targetPort: 9092name: serverclusterIP: Noneselector:app: kafka --- apiVersion: v1 kind: Service metadata:name: ka…

(一)、机器人时间同步方案分析

1、是否有必要进行时间同步 目前的自动驾驶系统包括 感知、定位、决策规划、控制 等模块&#xff0c;这些模块的正常运行需要依靠各种不同类型的传感器数据的准确 融合。尤其是激光雷达与相机这两种传感器在感、知定位模块中起着至关重要的作用。机械式旋转扫描激光雷达本身较低…

web canvas系列——快速入门上手绘制二维空间点、线、面

文章目录 ⭐前言⭐基本用法&#x1f496;设置一个 canvas 2D 上下文&#x1f496;绘制矩形常用方法属性&#x1f496;绘制一个红蓝交替的矩形 &#x1f496;绘制路径常用方法属性&#x1f496;画一个点&#x1f496;画一条线&#x1f496;画一个三角形面&#x1f496;画一个笑脸…

Map集合遍历键找值方式

1.4 Map集合遍历键找值方式 键找值方式&#xff1a;即通过元素中的键&#xff0c;获取键所对应的值 分析步骤&#xff1a; 获取Map中所有的键&#xff0c;由于键是唯一的&#xff0c;所以返回一个Set集合存储所有的键。方法提示:keyset()遍历键的Set集合&#xff0c;得到每一…

【leetcode热题】 两数之和 II - 输入有序数组

给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#xff0c;则 1 < index1 < index2 < numbers…

Rust 程序设计语言学习——所有权

这一节主要来学习 Rust 语言的其他特性&#xff0c;所有权、引用与借用、Slice 类型。 1 所有权 Rust 的核心功能&#xff08;之一&#xff09;是所有权&#xff08;ownership&#xff09;。虽然该功能很容易解释&#xff0c;但它对语言的其他部分有着深刻的影响。 所有程序…

Jenkins: 搭建Jenkins服务,调通Webhook链路

实现 jenkins docker 自动化发布 1 &#xff09;jenkins 下载 地址&#xff1a;https://www.jenkins.io/download/选择合适的版本&#xff0c;比如 mac 上 $ brew install jenkins-lts建议使用 docker 搭建&#xff0c;下面用 mac上整体流程演示 2 &#xff09;jenkins 管理…

代码分支管理

代码分支管理规范 一、分支管理要求 分支管理 • 将代码提交到适当的分支,遵循分支管理策略。 • 随时可以切换到线上稳定版本代码,确保可以快速回滚到稳定版本。 • 同时进行多个版本的开发工作,确保分支清晰,避免混淆。提交记录的可读性 • 提交描述准确,具有可检索性,…

Explain 关键字

优质博文&#xff1a;IT-BLOG-CN explain关键字可以模拟优化器执行 SQL 查询语句&#xff0c;从而知道 MySQL 是如何处理 SQL 语句的。分析查询语句或表结构的性能瓶颈。执行语句&#xff1a;explain SQL语句。表头信息如下&#xff1a; 一、ID 参数 select 查询的序列号&…

MySQL实现事务隔离的秘诀之锁

在MySQL中&#xff0c;有多种锁类型&#xff0c;我们先了解三种概念的锁&#xff0c;以便对接下来的内容有更好理解。 表级锁&#xff08;Table Lock&#xff09;&#xff1a;对整个表加锁&#xff0c;其他事务无法修改或读取该表的数据&#xff0c;但可以对其他表进行操作。页…

【数据结构和算法初阶(C语言)】二叉树铺垫--栈帧的创建与销毁--细节全解

前言&#xff1a; 学习这么久以来&#xff0c;可能有很多疑问&#xff1a;局部变量怎么创建的&#xff1f;为什么局部变量的值是随机的&#xff1f;函数是怎么传参的&#xff1f;传参的顺序是怎么样的&#xff1f;形参和实参是什么样的关系&#xff1f;函数调用是怎么做的&…

由浅到深认识C语言(11):结构体

该文章Github地址&#xff1a;https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.csdn…