欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6 数组扩展

程序员文章站 2022-04-23 21:08:14
结合扩展运算符使用 function foo(a,b,c){ console.log(a,b,c); } foo(...[1,2,3]);//将数组展开,一一对应 用法: const arr=["cyy",18,["html","css"]]; function info(name,age,hobb ......

结合扩展运算符使用

function foo(a,b,c){
    console.log(a,b,c);
}
foo(...[1,2,3]);//将数组展开,一一对应

ES6 数组扩展

 

 

用法:

const arr=["cyy",18,["html","css"]];
function info(name,age,hobby){
    console.log(`我叫${ name },我今年${ age }岁,我喜欢${ hobby.join("和") }`);
}
info(arr[0],arr[1],arr[2]);
//使用扩展运算符
info(...arr);
//使用apply达到类似效果
//1、第一个是对象,如果使用apply方法的函数中有this使用,可以指定对象,改变this的指向
//2、第二个参数是数组
info.apply(null,arr);

ES6 数组扩展

 

 

//math.max() 求最大值
const arr=[1,11,35,3];
//扩展运算符展开数组
console.log(math.max(...arr));
//apply展开数组
//方法.apply(this,数组)
console.log(math.max.apply(null,arr));

ES6 数组扩展

 

 

使用扩展运算符合并数组

const arr1=[1,2];
const arr2=[3,4];

//合并数组
const narr1=[11,22,...arr1];
//合并数组2
const narr11=[...arr1,...arr2];
//复制数组
const narr2=[...arr1];
//复制数组2
const [...narr3]=arr1;

ES6 数组扩展

 

 

生成器函数

function 关键字与函数名之间有一个星号

es6 没有规定,function 关键字与函数名之间的星号,写在哪个位置

ES6 数组扩展

 

 

函数体内部使用 yield 表达式,定义不同的内部状态

function *g(){
    console.log(1);
    yield "first";
    console.log(2);
    yield "second"; 
}
const arr=[...g()];

ES6 数组扩展

 

 

next 方法,使得指针移向下一个状态。每次调用 next 方法,内部指针就从函数头部或
上一次停下来的地方开始执行,直到遇到下一个 yield 表达式(或 return 语句)为止

yield 表达式就是暂停标志

function *g(){
    console.log(1);
    yield "first";
    console.log(2);
    yield "second"; 
}
const gg=g();
gg.next();//1
settimeout(function(){
    gg.next();//2
},1000);

ES6 数组扩展

 

 

es6提供新的数据结构set

会去除重复数据

let set=new set([1,2,3,44,1,2]);
console.log(set);
console.log([...set]);//去重之后转回数组

ES6 数组扩展

 

 

随机产生十个整数,放入数组中,对这个数组进行降序排序,并将这个数组的最大值和最小值

//创建一个空数组,用来接收后面的十个整数
let arr=[];
//在0~100之间的随机整数中,获取十个整数,放入创建的数组中
for(let i=0;i<10;i++){
    let num=math.floor(math.random()*101);
    arr.push(num);
}
//对数组进行降序排序
arr.sort(function(a,b){
    return b-a;
})
//使用扩展运算符结合math.min()与math.max()获取到这个数组的最大值和最小值
let max=math.max(...arr);
let min=math.min(...arr);

console.log(arr);
console.log(max);
console.log(min);

ES6 数组扩展

 

 

新的方法

array.from 类数组转数组

//类数组
const obj={
    0:"10",
    1:"20",
    2:"30",
    length:2//限制数组长度
}
console.log(array.from(obj));//(2) ["10", "20"]

//第二个参数是回调,可以对每一项进行操作
console.log(array.from(obj,item=>item*2));//(2) [20, 40]

//扩展运算符方式,类数组转数组
console.log([...obj]);//(2) ["10", "20"]

//以前的方式,类数组转数组
console.log(array.prototype.slice.call(obj));//(2) ["10", "20"]

//以前的方式,类数组转数组2
console.log([].slice.call(obj));//(2) ["10", "20"]

 

array.of() 把传入的数据转为数组

console.log(array.of(1,2,3,4));

ES6 数组扩展

 

 

使用fill填充数组

//fill通常用来设置数组的默认值
let arr=new array(10);
let arr2=new array(10).fill(0);
//如果数组原来有值,会被fill中填充的值覆盖掉
let arr3=[1,2,3].fill(0);
//fill可以指定范围,参数1是用来填充的值,参数2是填充开始位置,参数3是填充结束位置(不包括)
let arr4=new array(10).fill(0,0,3);

ES6 数组扩展

 

 

array.includes() 检测数组中是否包含某一项

let arr=[1,2,3,4];
console.log(arr.includes(1));//true
console.log(arr.includes(5));//false

 

keys  values  entries

let arr=[1,2,3,4];
console.log(arr.keys());

ES6 数组扩展

 

 这个输出代表是一个迭代器接口,可以通过for of遍历输出

let arr=[1,2,3,4];
console.log(arr.keys());

//循环输出键名
for(let i of arr.keys()){
    console.log(i);
}
//循环输出键值
for(let i of arr.values()){
    console.log(i);
}
//循环输出键名和键值
for(let [k,v] of arr.entries()){
    console.log(k,v);
}

ES6 数组扩展

 

 

find 根据给定的条件(回调形式)遍历数组,结果为true时则返回该值(返回后不再继续遍历)

findindex 根据给定的条件(回调形式)遍历数组,结果为true时则返回该值对应的下标(返回后不再继续遍历)

回调中可以获取到三个参数,分别是值、下标、数组

//find
const arr=[1,3,5,22,66].find(function(value,index,arr){
    console.log(value,index,arr);

    return value%2===0;//返回偶数
});
console.log(arr);

//改造为箭头函数
const arr2=[1,3,5,22,66].find((value,index,arr)=>value%2===0);//返回偶数
console.log(arr2);

console.log("---------------------------");

//find
const arr3=[1,3,5,22,66].findindex(function(value,index,arr){
    console.log(value,index,arr);

    return value%2===0;//返回偶数
});
console.log(arr3);

//改造为箭头函数
const arr4=[1,3,5,22,66].findindex((value,index,arr)=>value%2===0);//返回偶数
console.log(arr4);

ES6 数组扩展

 

 

indexof不能判断数组中是不是有nan,但是可以用findindex来判断

// indexof不能判断是否含有nan
const res=[1,3,5,nan,66].indexof(nan);
console.log(res);//-1

//findindex可以判断是否含有nan
const res2=[1,3,5,nan,66].findindex((value,index,arr)=>number.isnan(value));
console.log(res2);

ES6 数组扩展

 

 

ES6 数组扩展

 

 

输出结果是:[undefined, undefined, undefined, undefined]

类数组对象的属性名必须为数值型或字符串型的数字,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组

2、该类数组对象的属性名必须为数值型或字符串型的数字

该类数组对象的属性名可以加引号,也可以不加引号

上一篇: 鸡贼

下一篇: 这个名字,很社会