JS入门到精通详解（4）

最新推荐文章于 2024-07-26 11:48:42 发布
最新推荐文章于 2024-07-26 11:48:42 发布
阅读量255 收藏
点赞数
分类专栏： JS 文章标签： 前端 js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxpmoxi/article/details/128655346
版权

递归函数（了解）

自己调用自己的过程。

  1. 本质：循环

  1. 三要素：从哪里开始，到哪里结束、步长

建议在循环嵌套不确定层数时，使用递归函数。 
// 下面这个代码就是一个最简单的递归函数
// 在函数内部调用了自己，函数一执行，就调用自己一次，在调用再执行，循环往复，没有止尽
function fn() {
  fn()
}
fn()

练习

  1. 1 + 2 + 3 + …… + 100的和

  1. n!

  1. 斐波那契数列

  1. 输出10个Hello world

对象数据类型

创建对象数据类型

  1. 如何创建对象？

  • 字面量方式： {key: value,key: value}

  • 构造函数方式： new 构造函数名()

  1. 构造函数的语句：

function 构造函数名-大驼峰命名([参数]){
    //属性
    this.属性名 = 属性值;
    //方法
    this.方法名 = function(){
        //功能
    }
}

对象数据类型的操作（增删改查），两种语法

  1. 对象.属性 对象.方法()

  1. 对象['属性'] 对象'方法'

for in 循环遍历对象(出来的是一个一个的东西(属性))

for(循环变量 in 对象){
    语句组;
}
//注：循环变量不能赋值，循环变量不能赋值，循环变量不能赋值！

数组数据类型

什么是数组？ 存储一组或一系列数据的容器。

创建数组数据类型

  1. 字面量创建方式： [5] 开辟了一个空间，里面放着一个5

  1. 构造函数方式： new Array(5)里面开辟了五个空间，里面啥也没有

数组的length属性

  1. length : 表示数组的长度

数组的索引概念

下标：可以唯一标识一个数组空间的索引号。 (最小下标：0)(最大下标：长度 - 1)

for循环遍历数组

  1. 数组名[下标]

  1. 遍历数组：一个一个处理（循环）

不同数据类型的存储

堆和栈空间存储数据

  1. 基本数据类型的数据属于值传递

  1. 复合数据类型的数据属于引用传递（地址传递）

数组基本操作案例

冒泡排序

（相邻）的两个数进行比较，符合条件，交换位置。 
/*
    冒泡排序：核心-相邻的两个数进行比较，符合条件，交换位置。
    小到大
    从前到后
    9   6    6    4    2
    6   9    4    2    4
    15  4    2    6
    4   2    9
    2   15

    */
    //声明数组
    var arr = [9,6,15,4,2];
//轮数
function fnBubbleSortFromSmallToBig(arr){
    for(var i = 1;i < arr.length;i ++){
        //从数组中取元素---遍历
        for(var j = 0;j < arr.length - i;j ++){
            if(arr[j] > arr[j + 1]){
                var t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    return arr;
}
function fnBubbleSortFromBigToSmall(arr){
    for(var i = 1;i < arr.length;i ++){
        //从数组中取元素---遍历
        for(var j = 0;j < arr.length - i;j ++){
            if(arr[j] < arr[j + 1]){
                var t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    return arr;
}

选择排序

依次取一个元素 与 剩下所有元素 进行比较，符合条件，交换位置 。

数组常用方法

/*
    选择排序：核心-依次取一个元素与剩下所有的元素进行比较，符合条件，交换位置。
    小到大
    从前到后
    9   6    6    4    2
    6   9    4    2    4
    15  4    2    6
    4   2    9
    2   15

    */
function fnSelectFromSmallToBig(arr){  
    //遍历
    for(var i = 0;i < arr.length - 1;i ++){
        //遍历
        for(var j = i + 1;j < arr.length;j ++){
            if(arr[i] > arr[j]){
                var t = arr[i];
                arr[i] = arr[j];
                arr[j] = t;
            }
        }
    }
    return arr;
}

function fnSelectFromBigToSmall(arr){  
    //遍历
    for(var i = 0;i < arr.length - 1;i ++){
        //遍历
        for(var j = i + 1;j < arr.length;j ++){
            if(arr[i] < arr[j]){
                var t = arr[i];
                arr[i] = arr[j];
                arr[j] = t;
            }
        }
    }
    return arr;
}

数组常用方法(增删改排影响原数组)

增

  1. unshift(元素,元素,……) : 前增

  • 作用：在数组前面添加元素。

  • 返回值： 返回新增后数组的长度

  • 是否影响原数组： 是

//声明一个数组
var arr = [5,6,7,8,9];
//在前面新增一个元素
console.log(arr.unshift(true,[1,2,3],false)); //8
console.log(arr); //[true,[1,2,3],false,5,6,7,8,9]

  1. push(元素,元素,……) ：后增

  • 作用：在数组后面添加元素。

  • 返回值： 返回新增后数组的长度

  • 是否影响原数组： 是

//声明一个数组
    var arr = [5,6,7,8,9];
//在前面新增一个元素
console.log(arr.push(true,[1,2,3],false)); //8
console.log(arr); //[5,6,7,8,9,true,[1,2,3],false]

删

  1. shift() : 前删

  • 作用：删除数组中第1个元素

  • 返回值： 被删除的元素

  • 是否影响原数组： 是

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.shift()); //5
console.log(arr); //[6,7,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
// console.log(arr.shift()); //5
// console.log(arr); //[6,7,8,9]

//如何删除全部？
while(arr.length){ //0
    arr.shift();
}
console.log(arr);

  1. pop() : 后删

  • 作用：删除数组中最后一个元素

  • 返回值： 被删除的元素

  • 是否影响原数组： 是

 //声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.pop()); //9
console.log(arr); //[5, 6,7,8]

改

  1. splice(start,delLength,newEle,newEle,……)

start: 从哪个下标位置开始
delLenght: 删除几个元素
newEle : 新元素

  • 作用：在数组的任意位置进行增、删、改的操作。

  • 返回值： 被删除的元素数组

  • 是否影响原数组： 是

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.splice(1)); //[6, 7, 8, 9]
console.log(arr); //[5]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.splice(1,2)); //[6, 7]
console.log(arr); //[5,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.splice(1,2,true,[1,2],false)); //[6, 7]
console.log(arr); //[5,true,[1,2],false,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.splice(1,0,true,[1,2],false)); //[]
console.log(arr); //[5,true,[1,2],false,6,7,8,9]

截

  1. slice(start,end)

start : 从哪里开始（包含）
end : 到哪里结束（不包含）

  • 作用：截取数组中指定范围的元素。

  • 返回值： 被截取到的元素数组

  • 是否影响原数组： 否

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.slice(1)); //[6，7，8，9]
console.log(arr); //[5,6,7,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.slice(1,4)); //[6，7，8]
console.log(arr); //[5,6,7,8,9]

// //声明一个数组
// var arr = [5,6,7,8,9];
// console.log(arr.slice(4,1)); //[]
// console.log(arr); //[5,6,7,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.slice(-4,-1)); // [6, 7, 8]
console.log(arr); //[5,6,7,8,9]

拼

  1. concat(newEle,newEle,……)

  • 作用：将新元素拼接到指定数组的末尾。（如果新元素是一个数组，则去掉最外层的[]，将里面的内容进行拼接）

  • 返回值： 拼接后的新数组

  • 是否影响原数组： 否

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.concat(-4,[1,[2,3]],-1)); //[5, 6, 7, 8, 9, -4, 1, [2,3], -1]
console.log(arr); //[5,6,7,8,9]

复（面试题：至少写两种复制数组的方法）

function copyArr(arr){
    return arr.slice(0);
}
function copyArray(arr){
    return arr.concat();
}

function cloneArr(arr){
    var list = [];
    for(var i = 0,len = arr.length;i < len;i ++){
        list[i] = arr[i];
    }
    return list;
}

排

  1. reverse() : 逆序排

  • 作用：将数组元素逆序存放

  • 返回值： 逆序后的数组

  • 是否影响原数组： 是

var arr = [5,6,7,8,9];
console.log(arr.reverse()); //[9,8,7,6,5]
console.log(arr); //[9,8,7,6,5]

  1. sort() : 按编码排

  • 作用：将数组中的元素按字符编码从小到大排序

  • 返回值： 排序后的数组

  • 是否影响原数组： 是

sort(function(a,b){return a - b;}) : 按数字从小到大排序
sort(function(a,b){return b - a;}) : 按数字从大到小排序 
var arr = [3,2,10,1,100,20];
console.log(arr.sort()); //[1,10,100,2,20,3]
console.log(arr); //[1, 10, 100, 2, 20, 3]

转

  1. toString() : （面试题：不是数组的方法，是Object对象的方法，数组继承到的方法）

  • 数字.toString(2-36) : 将数字转为指定进制的字符串

var i = 10;
console.log(i.toString(2)); //1010
console.log(i.toString(8)); //12
console.log(i.toString(16)); //a

  • 数组.toString() : 将数组转为字符串

var arr = [1,2,3,4];
console.log(arr.toString()); //'1,2,3,4'
console.log(arr); //[1,2,3,4]

  1. join('连接符')

  • 作用：将数组转为以指定连接符连接成的字符串。

  • 返回值： 字符串

  • 是否影响原数组： 否

var arr = [1,2,3,4];
console.log(arr.join('+')); //'1+2+3+4'
console.log(arr); //[1,2,3,4]

ES5新增（都不会影响原数组）

  1. indexOf(元素,start): 查找元素在数组中第一次出现的下标位置，如果没有，则返回-1（逻辑是查找值，返回下标）

 var arr = [1,2,3,1,2,3,2,4,2,1];
console.log(arr.indexOf(2,2)); //4
console.log(arr.indexOf(5)); // -1

  1. lastIndexOf(元素,start) : 查找元素在数组中从右向左查找第一次出现的下标位置，如果没有找到，返回 -1

var arr = [1,2,3,1,2,3,2,4,2,1];
console.log(arr.indexOf(2,2)); //4
console.log(arr.indexOf(5)); // -1
console.log(arr.lastIndexOf(2)); //8
console.log(arr.lastIndexOf(2,2)); //1
console.log(arr.lastIndexOf(2,5)); //4

  1. forEach(function(value,index,array){}) : 遍历数组

  1. map(function(value,index,array){return ...}) : 遍历数组,返回数组

  1. some（类似或）(function(value,index,array){return ...}) : 检测数组中每一个元素，如果有一个元素的条件返回true，则直接退出循环，返回true; 如果所有元素都返回false时，最终返回false

  1. every（类似与）(function(value,index,array){return ...}) : 检测数组中每一个元素，如果有一个元素的条件返回false时，则直接退出循环，返回false。 如果所有元素都返回true时，最终返回true.

  1. filter(function(value,index,array){return ...}) : 过滤-条件，返回数组

  1. reduce(function(prev,next,index,array){return ...}) : 归并

var arr = [99,100,89,59,98];
var sum = arr.reduce(function(prev,next){
    console.log(prev,next);
    // prev = 99  next = 100
    //prev = 199 next = 89
    // prev = 288 next = 59
    //prev = 347  next = 98
    //prev = 455
    return prev + next;
})
alert(sum);

var sum = arr.reduce(function(prev,next){
    console.log(prev,next);
    // prev = 0  next = 99
    //prev = 99 next = 89
    return prev + next;
},0)
alert(sum);

9.find((value,index,array){return 条件}) : 找到满足条件的第一个元素返回来，如果没有满足条件的，则返回undefined

zxpmoxo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Windows C++ 应用软件开发从入门到精通详解
dvlinker的技术专栏
06-21 1万+
本文详细介绍一下Windows平台下用C++开发应用软件的诸多内容，以供大家借鉴或参考。
JS入门到精通详解（13）
zxpmoxo的博客
01-19 1163
面向对象基础
JS入门到精通详解（14）
zxpmoxo的博客
01-19 79
快速了解JS并掌握
TypeScript从入门到精通（详解）
热门推荐
weixin_46185369的博客
11-24 1万+
TypeScript 是什么 TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 // TypeScript 代码有明确的数据类型 let age1: number = 18 // JavaScript 代码
JS入门到精通详解（16）
zxpmoxo的博客
01-20 1610
快速了解JS并掌握
JS入门到精通详解（7）
zxpmoxo的博客
01-15 639
快速了解JS并掌握
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7308
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
【react从入门到精通】React JSX详解
全栈弄潮儿
05-01 1237
React JSX是一种在React中使用的JavaScript扩展语法，它允许我们使用类似HTML的语法来创建React元素和组件。使用JSX可以更方便地编写React应用程序，并使代码更易于阅读和理解。
爬虫从入门到精通(11) | JS逆向hook详解
不愿意透露姓名的网友
03-16 1万+
文章目录一、了解什么是hook?二、fiddler插件三、常见的hook代码总结1.Hook Cookie2.Hook Header3.Hook URL4.Hook JSON.stringify5.Hook JSON.parse6.Hook eval7.Hook Function 一、了解什么是hook? 在 JS 逆向中，我们通常把替换原函数的过程都称为 Hook。一般使用Object.defineProperty()来进行hook。那么我们了解一下该方法的使用。 Object.definePrope.
vue从入门到精通
Pwsifeng的博客
05-03 1万+
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化（封装的是页面） 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商
java从入门到精通知识详解
01-23
本知识详解将涵盖从入门到精通的多个关键点，帮助读者深入理解和掌握Java的精髓。 首先，我们要了解基础概念。Java是一种面向对象的、跨平台的编程语言，由Sun Microsystems（现为Oracle Corporation的一部分）于...
Nginx入门到精通搭建高可用集群负载均衡
08-14
- **静态资源服务器**：高效地处理静态内容（如图片、CSS、JavaScript），比其他应用服务器（如 Tomcat）更快。 - **反向代理**：隐藏真实服务器，提供安全防护，同时实现负载分发。 - **限流与熔断**：结合 Lua ...
详解React服务端渲染从入门到精通
10-17
浏览器接收到这个HTML后，先显示页面内容，接着加载客户端JavaScript，完成事件绑定和状态管理，使页面具备交互性。这种方式结合了服务端渲染的快速加载和客户端渲染的交互优势。 在实现React服务端渲染时，需要...
vue 入门到精通.txt
04-20
根据提供的文件信息，“Vue 入门到精通”这一主题涵盖了从初学者到高级阶段的Vue.js框架学习内容。虽然提供的链接似乎是外部资源而非文本内容，我们依然可以根据标题、描述及部分可见信息来构建一系列与Vue.js相关的...
nginx入门到精通
12-07
**Nginx 入门到精通** Nginx 是一款高性能、轻量级的网络服务器，广泛应用于Web服务器和反向代理服务器。它的主要特点包括高并发处理能力、低内存占用以及灵活的配置机制，使其成为众多企业和开发者的选择。本教程...
网站基本布局CSS
m0_46608027的博客
07-24 808
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 790
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 261
【代码】TS如何处理js模块的类型？
Spring Cloud微服务项目统一封装数据响应体
最新发布
洛*璃的博客
07-26 453
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
JavaScript算术运算符详解：从入门到精通
"这篇教程详细介绍了JavaScript中的算术运算符，包括双目和单目运算符，以及JavaScript语言的特点和与Java的区别。...了解并熟练掌握JavaScript的算术运算符和其他特性，对于成为一名精通JavaScript的开发者至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值