js数据类型之数组类型一

最新推荐文章于 2023-01-18 12:03:05 发布

机灵的小飞机

最新推荐文章于 2023-01-18 12:03:05 发布

阅读量1.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42354407/article/details/105748496

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

数组类型是js中较为重要的一种类型。学好js的数组类型以及常用方法，就能很好的处理工作上的业务逻辑。

数组是多个变量值的集合，数组是Array对象的实例，所以可以像对象一样调用方法。

创建数组

对象方式创建数组

console.log(new Array(1,'cht','hw'));

使用字面量创建数组(常用也是推荐的做法)

const array = [ 1,'cht','hw'];//[ 1, 'cht', 'hw' ]

多维数组定义

const array = [ ['cht'], ['hw'] ];
console.log(array[1][0]); // hw

数组是引用类型可以使用 const声明，并修改它的值

const array = [1,'cht','hw'];
array.push(5);
console.log(array); // [1,'cht','hw',5];

使用原型的 length 属性可以获取数组元素数量

 let arr = [1,'cht','hw'];
 console.log(arr.length); // 3

数组可以设置任何值

let arr = [1,'cht','hw'];
let arr[3] = 5;
console.log(arr.length); // 3
// 数组可以设置任何值，包括空元素

设置多个空元素的数组

 let arr = new Array(3);
 console.log(arr.length);// 3
 console.log(arr); // [ <3 empty items> ]

Array.of
使用 Array.of 与 new Array 不同是设置一个参数时候不会创建空元素数组

let arr = Array.of(3);
console.log(arr); // [3]

 arr = Array.of(1,2,3);
 console.log(arr);// [1,2,3]

类型检测

检测变量是否为数组类型

let arr = [ 1,'cht','hw'];
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(9)); // false

类型转换

我们可以将数组转换成字符串也可以将其他类型转换成数组。

字符串
大部分数据类型都可以使用.toString() 函数转换为字符串。

console.log(([1,2,3]).toString()); // 1,2,3

也可以使用函数 String 转换为字符串。

console.log(String([1,2,3]));

使用 join 连接为字符串，join(’,’) 以xxx分割

console.log([1,2,3].join(','));

Array.from
使用 Array.from 可将类数组转换成数组，类数组指的是：包含 length 属性或可迭代的对象。

第一个参数为要转换的数据，第二个参数为回调函数

let str = 'cht';
console.log(Array.from(str)); //["c", "h", "t"]

为对象设置 length 属性后也可以转化成数组，但是下标为数值或 数值字符串

let obj =  {
	0 : 'cht' , 
	'1' : 'hw' , 
	length:2
}
console.log(Array.from(obj)); // ['cht','hw']

DOM元素转换为数组后来使用数组函数，第二个参事是回调函数。

<body>
	<button>按钮1</button>
	<button>按钮1</button>
</body>
<script>
	let btns =document.querySelectorAll('button');
	Array.from(btns , (item) => {
	item.style.background = 'green';
})
</script>

扩展运算符 … （对数组的操作）

使用扩展运算符将 NodeList 转换为数组操作

<style>
	.hide {
	display : none;
}
<style>
<body>
	<div>第一个div</div>
	<div>第二个div</div>
</body>
<script>
	let oDivs = document.querySelectorAll('div');
	[...oDivs].map((div) {
		div.addEventListener('click', function(){ 
				this.classList.toggle('hide');
		});
});
</script>

利用扩展运算符进行合并数组

let a = [1,2,3,4,5];
let b = ['a','b','c', ...a];
console.log(b); // ['a','b','c', 1,2,3,4,5]

函数的参数可以使用扩展运算符

使用扩展运算符可以替代 arguments 来就收任意数量的参数

function test(...args) {
	console.log(args);
}
test(1,2,3,4,5);  // [1,2,3,4,5]

也可以接收部分参数

function test(name, ...args) {
	console.log(name, args);
}
test('cht',1,2,3,4);

解构赋值

解构赋值是一种更简洁的赋值特性，可以理解为一个数据结构
基本使用

// 数组的使用
let [name,url] = ['cht', 'hw'];
console.log(name); // cht

结构赋值数组

function test(){
	return ['cht' , 'hw'] ; 
}
let [a ,b ] = test();
console.log(a); // cht

解构时候用一个变量接收剩余参数

let [a, ...b] = [1,2,3,4,5,6,7];
console.log(b); // 2,3,4,5,6,7

字符串的解构

const [...a] = 'hello';
console.log(a);

简洁定义
只赋值部分变量

let [,name] = [1,'cht'];
console.log(name);  // cht

为变量设置默认值

let [name , age = 15] = ['cht'];
console.log(name,age);

函数参数
数组参数的使用

function test([a,b]) {
	console.log(a,b);
}
test(['cht' , 'hw']);

元素的管理

向数组追加元素

let arr = [1,2,3];
arr[arr.length] = 'cht';
console.log(arr); // [1,2,3,'cht']

扩展运算符
使用扩展运算符批量添加元素

let arr = [1,2,3,4,5];
let  b = ['cht'];
b.push(...arr);
console.log(b) ; // ['cht' , 1,2,3,4,5]
// 往b中添加数组arr

push
从末尾压入元素，直接改变原数组，返回值为数组元素数量

let arr =[1,2,3,4,5];
console.log(arr.push('cht')) ; // 返回数组的长度 6  
console.log(arr); // [1,2,3,4,5,'cht']

根据区间创建新数组

	function rangeArray(begin, end) {
		const array = [];
		for(let i = begin ; i<end ; i++){
			arr.push(i);
		}
	return array;
}
var arr = rangeArray(1,5);
console.log(arr);

pop
从末尾删除一个元素，直接改变原数组，返回值为删除的元素

	let arr = [1,2,3,4,5];
	console.log(arr.pop());// 返回删除的元素 5 
	console.log(arr);//[1,2,3,4]

shift
删除数组最前面的一个元素

let arr = [1,2,3,4,5];
console.log(arr.shift());// 返回删除的元素 1
console.log(arr); // [2,3,4,5]

unshift
从数组前面添加元素

let arr = [1,2,3,4,5];
console.log(arr.unshift(0)); // 返回改变后的数组的长度 6
console.log(arr); // [0,1,2,3,4,5]

fill
使用 fill 填充数组元素

console.log(Array(4).fill('cht')); ["cht", "cht", "cht", "cht"]

指定填充位置

array.fill(value,start,end)
// value :填充的值
// start ：开始填充的位置
// end    ：停止填充的位置
console.log([1,2,3,4].fill('cht',1,2));//[1, "cht", 3, 4]

slice
使用 slice 方法从数组中截取部分元素组合成新数组（不改变原数组），不传第二个参数时截取到数组的最后元素。

let arr = [0,1,2,3,4,5,6];
console.log(arr.slice(1,3)); //截取下标从1开始到3结束(不包括下标3)[1,2]
console.log(arr); // [0,1,2,3,4,5,6];

不设置参数为获取所有元素[复制原来的数组]

let arr = [0,1,2,3,4,5,6];
console.log(arr.slice());//  [0,1,2,3,4,5,6];
console.log(arr);// [0,1,2,3,4,5,6];

splice
使用 splice 方法可以添加，删除，替换数组中的元素，会对原数组进行改变，返回值为删除的元素。

删除数组元素第一个参数为开始删除位置，第二个参数为删除的数量。

let arr =  [0,1,2,3,4,5,6];
console.log(arr.splice(1,3)) // 返回删除的元素 [1,2,3]
console.log(arr); //删除后原数组改变为 [0,4,5,6]

通过修改 length 删除最后一个元素

let arr = [1,2,3];
arr.length = arr.length-1;
console.log(arr); // [1,2]

通过指定第三个参数来设置在删除位置添加的元素

let arr = [0,1,2,3,4,5,6];
console.log(arr.splice(1,3,'cht')); // [1,2,3]
console.log(arr); //[0, "cht", 4, 5, 6]

向末尾添加元素

let arr = [0,1,2,3,4,5,6];
console.log(arr.splice(arr.length,0,'cht')); // 删除 [] 
console.log(arr); // [0,1,2,3,4,5,6,'cht']

向数组前添加元素

let arr = [0,1,2,3,4,5,6];
console.log(arr.splice(0,0,'cht')); // 删除 []
console.log(arr); // ['cht',0,1,2,3,4,5,6]

数组元素位置调整函数

       function move(arr , before , to) {
            if(before <0 || to >=arr.length) {
               console.error('错误');
                return;
            }
            const newArr = [...arr];
            let delItem = newArr.splice(before,1);
            newArr.splice(to,0 ,...delItem);
            return newArr;
        }
        const array = ['c' ,'h' , 't'];
        console.log(move(array,0,2);

清空数组

将数组值修改为 [] 可以清空数组，如果有多个引用时数组在内存中存在被其他变量引用。

   let user = [
            {name : 'cht'},
            {name : 'hw'}
        ]
        let us = user ;
     user = [];
     console.log(user); // []
     console.log(us);  // [  {name: "cht"},  {name: "hw"}]

将数组 length 设置为 0 也可以清空数组

let user = [ {name:'cht'},{name:'hw'}];
user.length = 0;
console.log(user); // []

使用 splice() 方法删除所有的数组

let arr = [1,2,3,4,5,6];
        console.log(arr.splice(0)) // 返回删除的元素[1,2,3,4,5,6]
        console.log(arr); // []

合并拆分

join
将数组连接成字符串

let arr = ['cht' , 'hw'];
console.log(arr.join(','));  //cht,hw

split
splite 方法用于将字符串分割成数组，和join相反。

let str = 'cht,hw';
console.log(str.split(',')); //["cht", "hw"]

concat
concat 方法用于连接两个或多个数组，元素是值类型的复制操作，如果是引用类型的还是指向同一个对象。

let arr1 = ['cht','hw'];
let arr2 = [1,2];
let arr3 = [3,4];
console.log(arr1.concat(arr2,arr3));// ["cht", "hw", 1, 2, 3, 4]

也可以使用扩展语法实现连接

 console.log([...arr1,...arr2,...arr3]);//["cht", "hw", 1, 2, 3, 4]

copyWithin
使用 copyWithin 从数组中复制一部分到通数组中的另外位置。
语法：

arr.copyWithin(target, start,end);
target : 必需，复制到指定目标索引位置。
start  : 可选，元素复制的起始位置。
end    ： 可选，停止复制的索引位置（默认为array.length）.如果为负值，表示倒数。

let arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.copyWithin(5,0,3));//[0, 1, 2, 3, 4, 0, 1, 2, 8, 9]

let arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.copyWithin(5,0));//[0, 1, 2, 3, 4, 0, 1, 2, 3, 4]

机灵的小飞机

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录