js中数组方法全解
ztj100 2024-11-25 00:38 12 浏览 0 评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log("---- concat方法讲解 ----")
/*
array.concat(value, ...)
方法的作用:
方法concat()将创建并返回一个新数组，这个数组是将所有参数都添加到array中生成的。它并不修改array。
如果要进行concat()操作的参数是一个数组，那么添加的是数组中的元素，而不是数组。
方法的参数:
要增加到array中的值，可以是任意多个。
方法的返回值:
一个新数组
底层实现业务逻辑:
1、创建一个新的数组,然后把当前数组的值放到新数组里面
2、判断arguments长度是否为0,如果为0,返回参数数组
3、如果arguments长度不为0,依次判断每个参数的是否为数组;
Array.isArray(argArr)
4、如果不是数组,直接向新数组的最后添加即可
newArr[newArr.length] = 值;
5、如果是数组,那么遍历数组,然后把每次遍历的值都放在数组的末尾
for(){
newArr[newArr.length] = 遍历的值;
}
function concat(){
var newArr = new Array();
// 把this数组的值给放到newArr
if(arguments.length != 0){
for(var i in arguments){
var v = arguments[i];
if(Array.isArray(v)){ //表示参数是一个数组
// 遍历v,然后
for(){
newArr[newArr.length] = 遍历的值;
}
}else{ //不是一个数组
newArr[newArr.length] = 值;
}
}
}
return newArr;
}
*/
// 定义一个数组
var arr1 = ["小明", "小红", "小黑"]; // JS数组可以存储任意类型
console.log(arr1.concat());
// 把参数追加到原数组末尾,不会修改原数组,生成一个新数组
// var newArr1 = arr1.concat(100, true, "Hello"); // concat并不修改原数组,而是生成了一个新数组。
var argArr = new Array(1, 2, 3); //参数数组
var obj = {
name: "zhangsan"
};
// 其实底层是使用关键字instanceof
// Array.isArray(argArr) 检测一个对象是否是数组
console.log("argArr是否是一个数组:" + Array.isArray(argArr)); // true
console.log("obj是否是一个数组:" + Array.isArray(obj)); // false
console.log("Hello是否是一个数组:" + Array.isArray("Hello")); // false
var newArr1 = arr1.concat(obj); // concat如果传递的是一个参数数组,那么会把参数数组里面的每一个元素都追加到原数组的末尾,不会作为整体存储
console.log("concat操作完毕之后,arr1数值的值:" + arr1);
console.log("concat操作完毕之后,返回值是一个新数组:" + newArr1);
console.log(newArr1)
console.log("---- join方法讲解 ----")
/*
array.join( )
array.join(separator)
方法的作用:
方法join()将把每个数组元素转换成一个字符串，然后把这些字符串连接起来，在两个元素之间插入指定的separator字符串。返回生成的字符串。
该方法简单来说,就是把数组转换为指定格式的字符串
方法的参数:
在返回的字符串中用于分隔数组元素的字符或字符串，它是可选的。如果省略了这个参数，用逗号作为分隔符。
方法的返回值:
拼接好的字符串
底层实现业务逻辑:
1、创建一个空字符串
2、判断arguments的长度,如果长度为0,则遍历this数组,使用,拼接字符串
3、如果长度不为0,则取arguments下标0的值进行拼串;
*/
// toString() String() 任意类型转换为字符串类型
var arr2 = [123, 456, 789];
var arr2Str = arr2.join("#"); //没有传递参数,那么使用逗号作为分隔符
console.log("join方法执行完毕,返回值类型:" + typeof arr2Str);
console.log(arr2Str);
console.log("---- pop方法讲解 ----")
/*
array.pop( )
方法的作用:
方法pop()将删除array的最后一个元素，把数组长度减1，并且返回它删除的元素的值。如果数组已经为空，则pop()不改变数组，返回undefined。
方法的返回值:
array的最后一个元素。
底层实现业务逻辑:
1、先判断当前数组的长度是否为0
2、如果为0,则什么都有不处理 return;
3、如果数组长度不为0,this.length = this.length - 1;
4、在修改数组长度之前,把arr[this.length-1]保存下来,然后反馈
*/
var arr3 = [];
var deleteEle = arr3.pop();
console.log("pop操作完毕之后,arr3:" + arr3);
console.log("返回值:" + deleteEle);
/*
学习方法:
1、方法的功能
2、方法的参数
3、方法的返回值
*/
console.log("---- push方法讲解 ----")
/*
array.push(value, ...)
方法push()将把它的参数顺次添加到array的尾部。它直接修改array,而不是创建——个新的数组。方法push()和方法pop()用数组提供先进后出栈的功能。
返回值：把指定的值添加到数组后的新长度。
参数：value, ... 要添加到array尾部的值，可以是一个或多个。
*/
var arr4 = [11, 22, 33, 44];
// var arr4Legth = arr4.push("小黑", "小白", 110);
arr4.push(["小黑", "小明"]);
console.log("push操作完毕之后,arr4的值:" + arr4)
console.log(arr4);
// console.log(arr4Legth);
console.log("---- reverse方法讲解 ----")
/*
array.reverse( )
描述:Array对象的方法reverse()将颠倒数组中元素的顺序。它在原数组上实现这一操作，即重排指定的array的元素，但并不创建新数组。如果对array有多个引用，那么通过所有引用都可以看到数组元素的新顺序。
*/
var arr5 = [11, 22, 33, 44, 55];
var x = arr5.reverse();
console.log("arr5调用reverse之后:" + arr5);
console.log(x); // 把反转之后的数组反馈
console.log("---- shift方法讲解 ----")
/*
array.shift( )
描述:方法shift()将把array的第—个元素移出数组，返回那个元素的值，并且将余下的所有元素前移一位，以填补数组头部的空缺。如果数组是空的，shift()将不进行任何操作，返回undefined。注意，该方法不创建新数组，而是直接修改原有的数组。
返回值:数组原来的第一个元素。
*/
var arr6 = [11, 22, 33, 44, 55];
var deleteEle = arr6.shift();
console.log("arr6调用shift之后:" + arr6);
console.log("删除的元素是:" + deleteEle);
console.log("---- unshift方法讲解 ----")
/*
array.unshift(value, ...)
描述:方法unshift()将把它的参数插入array的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组新的元素0，如果还有第二个参数，它将成为新的元素1，以此类推。注意，unshift()不创建新数组，而是直接修改原有的数组。
返回值:数组的新长度
参数:value, ... 要插入数组头部的一个或多个值。
*/
var arr7 = [11, 22, 33, 44, 55];
// var arr7Length = arr7.unshift("xx", "yy");
var arr7Length = arr7.unshift(["xx", "yy"]);
console.log("arr7调用unshift之后:" + arr7);
console.log("arr7调用unshift返回值:" + arr7Length);
console.log("---- slice方法讲解 ----")
/*
array.slice(start, end)
描述:方法slice()将返回数组的一部分，或者说是一个子数组。返回的数组包含从start 开始到end之间的所有元素，但是不包括end所指的元素。如果没有指定end，返回的数组包含从start开始到原数组结尾的所有元素。
返回值：一个新数组，包含从start到end(不包括该元素)指定的array元素。
参数
start 数组片段开始处的数组下标。如果是负数，它声明从数组尾部开始算起的位置。 也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。
end 数组片段结束处的后一个元素的数组下标。如果没有指定这个参数 包含从start开始到数组结束的所有元素。如果这个参数是负数， 从数组尾部开始算起的元素。
*/
var arr8 = ["xx", "yy", "zz", "kk", "jj"];
var sliceArr1 = arr8.slice(2); //从下标2开始,截取到数组的末尾,生成一个新数组 ["zz", "kk", "jj"]
console.log("从下标2开始截取,得到子数组:" + sliceArr1);
var sliceArr2 = arr8.slice(1, 4); // 从下标1开始,截取到下标4,但是不包含下标4 ["yy", "zz", "kk"]
console.log("从下标1开始,截取到下标4,得到子数组:" + sliceArr2)
var sliceArr3 = arr8.slice(-3); // 从倒数第三个,截取到末尾 ["zz", "kk", "jj"]
console.log("从倒数第三个截取到末尾,得到数组:" + sliceArr3)
var sliceArr4 = arr8.slice(-4, 3); // ["yy", "zz"]
console.log(sliceArr4);
console.log("---- splice方法讲解 ----")
/*
array.splice(start, deleteCount, value, ...)
方法作用: 可以实现数组元素的添加、删除、替换;
参数
start ：开始插入和(或)删除的数组元素的下标。
deleteCount ：从start开始，包括start所指的元素在内要删除的元素个数。这个参数是可选的，如果没有指定它，splice()将删除从start开始到原数组结尾的所有元素。
value, ... ：要插人数组的零个或多个值，从start所指的下标处开始插入。
*/
// splice实现数组元素的删除
// pop() 尾部删除 shift() 头部删除
var arr9 = ["xx", "yy", "zz", "kk", "jj"];
// arr9.splice(arr9.length - 1, 1); // 使用splice替代pop()
// arr9.splice(0, 1); // 使用splice替代shift()
// 如果是做数组头部或尾部元素的删除,那么还是推荐使用pop()和shift()
// 但是如果要一次性删除多个或任意位置的数组元素,那么就要使用splice()
// arr9.splice(1, 3);
// splice实现数组元素的添加
// push() 尾部添加 unshift() 头部添加
// arr9.splice(arr9.length, 0, 110); //使用splice替代push()
// arr9.splice(0, 0, 110); // 使用splice替代unshift()
// 如果是做数组头部或尾部元素的添加,那么还是推荐使用push()或unshift()
// 但是如果要添加到指定位置,那么就使用splice()
// arr9.splice(2, 0, 110, 119);
// splice实现数组元素的替换, 删除之后新增
// arr9.splice(1, 2, 110, 119)
console.log(arr9)
console.log("---- sort方法讲解 ----")
/*
array.sort( )
Array.sort( ) 对数组元素进行排序
array.sort( ) array.sort(orderfunc)
参数
orderfunc 用来指定按什么顺序进行排序的函数，可选。
返回值对数组的引用。注意，数组在原数组上进行排序，不制作副本。
描述
方法sort()将在原数组上对数组元素进行排序，即排序时不创建新的数组副本。如果调用方法sort()时没有使用参数，将按字母顺序(更为精确地说，是按照字符编码的顺序)对数组中的元素进行排序。要实现这一点，首先应把数组的元素都转换成字符串(如果有必要的话)，以便进行比较。
如果想按照别的顺序进行排序，就必须提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b
参数
orderfunc
用来指定按什么顺序进行排序的函数，可选。
*/
var arr10 = [1111, 4, 38, 9];
// arr10.sort(); //如果没有传递参数,那么把数组元素转换为字符串进行比较;
arr10.sort(function(a, b) {
// 如果排序函数的返回值是a - b;那么是升序排列！ 如果是b - a,则是降序排列
// return a - b;
return b - a;
});
console.log("sort没有传递参数进行排序:" + arr10);
console.log(typeof arr10.toLocaleString());
/*
1、JS数组中concat()和push()的区别?
2、JS数组中pop()、push()、shift()、unshift()的作用
3、如下代码的执行结果：
var arr8 = ["xx", "yy", "zz", "kk", "jj"];
var sliceArr4 = arr8.slice(-4, 3); // ["yy", "zz"]
4、JS数组中slice()和splice()的区别?
*/
// var arr = [11, 22, 33];
// var str = arr[0] + ""; // "11"
// for (var i = 1; i < arr.length; i++) {
// str += "#" + arr[i];
// }
// console.log(str);
var arrx = [1, 2, 7, 3, 4];
// function rv(arr) {
// var newArr = new Array();
// for (var i = 0; i < arr.length; i++) {
// newArr[i] = arr[arr.length - 1 - i];
// }
// return newArr;
// }
/*
0 3
1 2
*/
function rv(arr) {
for (var i = 0; i < arr.length / 2; i++) {
var temp = arr[i];
arr[i] = arr[arr.length - 1 - i];
arr[arr.length - 1 - i] = temp;
}
return arr;
}
console.log(rv(arrx));
</script>
</body>
</html>
相关推荐
- Vue 技术栈(全家桶)（vue technology）
-
Vue技术栈(全家桶)尚硅谷前端研究院第1章：Vue核心Vue简介官网英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/...
- vue 基础- nextTick 的使用场景（vue的nexttick这个方法有什么用）
-
前言《vue基础》系列是再次回炉vue记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）在开发时，是不是遇到过这样的场景，响应...
- vue3 组件初始化流程（vue组件初始化顺序）
-
学习完成响应式系统后，咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程，咋们先来创建基本的代码，跑跑流程（在app.vue中写入以下内容，来跑流程）...
- vue3优雅的设置element-plus的table自动滚动到底部
-
场景我是需要在table最后添加一行数据，然后把滚动条滚动到最后。查网上的解决方案都是读取html结构，暴力的去获取，虽能解决问题，但是不喜欢这种打补丁的解决方案，我想着官方应该有相关的定义，于是就去...
- Vue3为什么推荐使用ref而不是reactive
-
为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...
- 9、echarts 在 vue 中怎么引用?(必会)
-
首先我们初始化一个vue项目，执行vueinitwebpackechart,接着我们进入初始化的项目下。安装echarts，npminstallecharts-S//或...
- 无所不能，将 Vue 渲染到嵌入式液晶屏
-
该文章转载自公众号@前端时刻，https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言...
- vue-element-admin 增删改查(五)（vue-element-admin怎么用）
-
此篇幅比较长，涉及到的小知识点也比较多，一定要耐心看完，记住学东西没有耐心可不行！！！一、添加和修改注：添加和编辑用到了同一个组件，也就是此篇文章你能学会如何封装组件及引用组件；第二能学会async和...
- 最全的 Vue 面试题+详解答案（vue面试题知识点大全）
-
前言本文整理了...
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
-
今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。先上效果图这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus...
- 不来看看这些 VUE 的生命周期钩子函数?| 原力计划
-
作者|huangfuyk责编|王晓曼出品|CSDN博客VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块...
- Vue3.5正式上线，父传子props用法更丝滑简洁
-
前言Vue3.5在2024-09-03正式上线，目前在Vue官网显最新版本已经是Vue3.5，其中主要包含了几个小改动，我留意到日常最常用的改动就是props了，肯定是用Vue3的人必用的，所以针对性...
- Vue 3 生命周期完整指南（vue生命周期及使用）
-
Vue2和Vue3中的生命周期钩子的工作方式非常相似，我们仍然可以访问相同的钩子，也希望将它们能用于相同的场景。...
- 救命!这 10 个 Vue3 技巧藏太深了!性能翻倍 + 摸鱼神器全揭秘
-
前端打工人集合！是不是经常遇到这些崩溃瞬间：Vue3项目越写越卡，组件通信像走迷宫，复杂逻辑写得脑壳疼？别慌！作为在一线摸爬滚打多年的老前端，今天直接甩出10个超实用的Vue3实战技巧，手把...
- 怎么在 vue 中使用 form 清除校验状态?
-
在Vue中使用表单验证时，经常需要清除表单的校验状态。下面我将介绍一些方法来清除表单的校验状态。1.使用this.$refs...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Vue 技术栈(全家桶)（vue technology）
- vue 基础- nextTick 的使用场景（vue的nexttick这个方法有什么用）
- vue3 组件初始化流程（vue组件初始化顺序）
- vue3优雅的设置element-plus的table自动滚动到底部
- Vue3为什么推荐使用ref而不是reactive
- 9、echarts 在 vue 中怎么引用?(必会)
- 无所不能，将 Vue 渲染到嵌入式液晶屏
- vue-element-admin 增删改查(五)（vue-element-admin怎么用）
- 最全的 Vue 面试题+详解答案（vue面试题知识点大全）
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)