雨落辰潇-文档站

Appearance

数组新增特性 ​

扩展运算符 ​

js
扩展运算符 func(...[11,12,12]) === func(11,12,12)
脱衣服

① 把数组拆分为逗号分隔的参数序列 ​

js
1. 用数组作为实参，给有多个形参的函数传参
2. 拷贝数组
3. 合并数组
4. 也可以将可遍历对象拆分为逗号分隔的参数序列，可以实现将伪数组转为纯数组
js
// 将数组转为逗号分隔的参数序列;把数组中的每一个元素都拿出来，作为变量参数。
const nums = [1000,2000,3000,4000];
function func(n1,n2,n3,n4) {
}
func(nums);
func(...nums);   // 相当于 func(1000,2000,3000,4000)
func(...['刘姥姥', '司马姥姥', '欧阳姥姥']);   // 相当于 func('刘姥姥', '司马姥姥', '欧阳姥姥')

// 2 使用扩展运算符 复制数组
const arr01 = [100,200,300,400,500];
//const arr02 = arr01;      // arr01将地址传递给arr02，两个变量指向同一个数组
const arr02 = [...arr01];   // 使用[]创建新数组，将arr01转为参数序列放在新数组中

// 3 合并数组
const arr03 = [...nums, ...arr01, '刘姥姥'];

// 4. 也可以将可遍历对象（伪数组）转为逗号分隔的参数序列
// 将可遍历对象转为纯数组
const liBoxs = document.querySelectorAll('.news li');
const arr04 = [...liBoxs];
const arr05 = [...'Hello World'];

② 把多个值合并到一个数组中（把参数序列变为数组） ​

js
1. rest 参数
2. 解构赋值中应用
js
 // 1 rest 参数
function func(...args) {
    console.log(args);  // [100,200,300,400,500]
}
func(100,200,300,400,500);
console.log('');


// 2 解构赋值中的应用 
const [a1,a2,...a3] = ['刘姥姥','马姥姥', '司马姥姥', '欧阳姥姥', '爱新觉罗姥姥'];
console.log(a1);  // 刘姥姥
console.log(a2);  // 马姥姥
console.log(a3);  // ['司马姥姥', '欧阳姥姥', '爱新觉罗姥姥']

Array 构造函数本身新增的属性方法 ​

js
Array.of()			创建新的数组，参数作为数组中的元素，参数数量不固定。
Array.of(12)		参数仅仅传一个数字，这个数字被当做元素，而不是长度，与New Array()类似。
Array.from()		将可遍历对象或伪数组转为纯数组
let arr = [...伪数组] 可将伪数组转为纯数组
js
// 创建数组
const arr01 = Array.of(100,200,300,400,'欧阳姥姥', [1,2,3], '司马姥姥');
const arr02 = Array.of(12);
const arr03 = new Array(12);
console.log(arr01);	// [100,200,300,400,'欧阳姥姥', [1,2,3], '司马姥姥']
console.log(arr02);	// [12]
console.log(arr03);	// [,,,,,,,,,,,]长度12
console.log('');


// 将伪数组转为纯数组
const liBoxs = document.querySelectorAll('.news li');

const arr03 = Array.from(liBoxs); // [li,li,li,li,li]
const arr04 = Array.from('He');
console.log(arr03); // [li,li,li,li,li]
console.log(arr04);	// ['H','e']

Array 的实例新增的属性方法 ​

ES5（旧方法）：

js
修改器方法：
push()			在数组的后面添加元素，返回添加元素后数组的长度
unshift()		在数组的前面添加元素，返回添加元素后数组的长度
pop()			删除最后一个元素，返回被删除的元素
shift()			删除第一元素，返回被删除的元素
splice()		新增或删除，替换数组指定位置，指定数量元素（索引和长度），和元素，返回值是数组中被操作的元素
sort()			数组排序，返回排好序的数组
reverse()		翻转数组，返回翻转好的数组

访问器方法：
concat()		将多个数组连接成一个，返回连接好的数组，参数是数组，可以是任意个
slice()			截取数组中一部分返回新数组，指定开始位置和结束位置
join()			将数组中所有的元素合并成一个字符串并返回，参数指定分隔符，默认是逗号

参数是(回调函数,[指定])	   
				可以只写回调函数，若没有指定参数，会从数组本身的第一个元素获取数据。
				若回调函数return true，满足条件，返回值，回调函数中的参数都是
                item index array形式	func(item,index,array)[每一个元素][索引][数组本身]
				
indexOf()		返回指定元素在数组第一次出现的位置，不存在返回-1
lastIndexOf()   返回指定元素在数组最后一次出现的位置，不存在返回-1
forEach()		遍历数组，在原数组直接读取或修改数据，没有返回值
filter()		返回由满足复合条件的元素组成的新数组，如果回调函数返回true，表示满足复合条件
map()			返回由回调函数的返回值组成的新数组，新数组长度与原数组一致
every()			只有每个回调函数都返回true，every方法才返回true，否则every方法返回true
some()			只有有一个回调函数返回true，some方法就返回true		
reduce()		用于累计运算，最后一次回调函数的返回值作为reduce方法的返回值
reduceRight()	reduce()从左到右遍历，reduceRight从右到左遍历
js
arr.reduce(pre,item) 传入两个参数(上一个的返回值pre,当前所在元素) ，返回一个新

ES6+（新方法）：

js
参数是(回调函数,[指定])	   
				可以只写回调函数，若没有指定参数，会从数组本身的第一个元素获取数据。
				若回调函数return true，满足条件，返回值，回调函数中的参数都是
                item index array形式	func(item,index,array)[每一个元素][索引][数组本身]
				回调函数都是同步执行的

find()				返回第一个满足条件的元素，参数是回调函数
findIndex()			返回第一个满足条件的元素的索引，参数是回调函数,找不到则返回 -1
fill()				使用固定的值替换到原来的元素值，修改器方法		
keys()				返回遍历器对象
values()			返回遍历器对象
entries()			返回遍历器对象
flat()				实现数组扁平化，参数用数字指定层级，可以用Infinity
flatMap()			先对数组map，再进行深度是1的flat，
includes()			判断是否包含指定的元素，参数是[''][位置开始]，默认是0,返回布尔值
at()				根据索引读取元素，可以使用负数，负数表示倒数第几个

数组对象的属性方法ES6

js
// 定义数组
const users = [
    {name: '刘备', age:15, address:'上海'},
    {name: '关羽', age:43, address:'苏州'},
    {name: '张飞', age:41, address:'无锡'},
    {name: '诸葛亮', age:45, address:'杭州'},
    {name: '向华强', age:36, address:'宁波'},
    {name: '曹操', age:54, address:'南京'}
];
/find(回调函数) 返回第一个满足条件的元素
// 查找第一个年龄大于等于45的元素
console.log(users.find(item => item.age >= 45));
// 查找第一个年龄大于等于45的元素的索引
console.log(users.findIndex(item => item.age >= 45));


/fill(回调函数) 使用固定的值替换到原来的元素值 数组的每个元素都被替换了
// 填充数组
console.log(users.fill());
console.log(users.fill(250));	//每个元素都是250的数组
console.log(users.fill(150, 1, 3));	//索引从1到3元素被替换了
console.log(Array(12).fill('OK'));	//12个"OK"的数组

/keys()	values() entries()
// 数组
const nums = [100,200,300,400,500];
console.log(nums.keys())	//返回遍历器（迭代器）对象
console.log(nums.values())	//返回遍历器（迭代器）对象
console.log(nums.entries())	//返回遍历器（迭代器）对象
console.log('');

/flat()				实现数组扁平化（多维数组转为一维数组），参数用数字指定层级，可以用Infinity
/flatMap()			先对数组map，再进行深度是1的flat，
includes()			判断是否包含指定的元素，返回布尔值
// 定义数组
const numList = [
    [1000, 2000, 3000],
    'hello',
    [
        [10,20,30],
        [
            'a', 
            'b', 
            ['A', 'B', 'C']
        ],
        '小乐'
    ],
    12313,
    [101,202,303]
];
console.log(numList.flat()); //降一维，默认值为1，
console.log(numList.flat(2));	// 降二维
console.log(numList.flat(Infinity)); // 降正无穷，直接降为一维数组。
console.log(numList.flatMap(item => item instanceof Array ? item : item+100));//对数组先进行map操作，然后进行flat层级为1的扁平化。


console.log(nums.includes(300));
console.log(nums.includes(300, 3)); // 是否包含300，从索引3开始
console.log('');

/at()				根据索引读取元素，可以使用负数，负数表示倒数第几个
// at
console.log(nums.at(1));
console.log(nums[1]);

console.log(nums.at(-1));   // 读取倒数第一个元素
console.log(nums.at(-3));   // 读取倒数第三个元素
console.log(nums[-1]);    // undefiend

​

Copyright © 2024 雨落辰潇