数组
... 扩展运算符 将一个数组的元素一个一个提出来
console.log(...[1,2,3]); //1 2 3 //合并数组 var a=[1,2]; var b=[3,4]; console.log([...a,...b]);//[1, 2, 3, 4]
Array.from方法用于将类似数组的对象和可遍历的对象转为真正的数组
// NodeList对象 转 数组
var li=document.querySelectorAll("li");
var arr=Array.from(li);
//var arr=[...li]; 也能转数组
console.log(arr);//[li, li, li, li, li, li, li]
var i=0;
arr.forEach(function(el,index,arr){
console.log(el);
el.innerText=i++;
})
页面中的效果 每一个li都改变
Array.of基本上可以用来替代Array()或new Array();
var arr1=new Array(1,2); //[1, 2] Array 参数的个数不同 会有不一样的结果 var arr2=new Array(3); //[,,] 只有一个参数时表示 这个数组有几个元素 var arr3=Array.of(1,2); //[1,2] Array.of 行为非常统一 var arr4=Array.of(3); //[3]
fill方法使用给定值，填充一个数组。
//用0去填充整个数组 console.log([1,2,3,4].fill(0));//[0, 0, 0, 0] //可接受三个参数 第一关是要填充的内容 第2个 从那开始 第三个到那结束 包括头部包括尾 console.log([1,2,3,4].fill(0,1,3));// [1, 0, 0, 4]
ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。
var arr=["a","b","c","d","e"]; //返回一个可遍历的看不懂的对象 // 把可遍历对象转数组 然后就看懂了 console.log([...arr.keys()]);// [0, 1, 2, 3, 4] console.log([...arr.values()]);//["a", "b", "c", "d", "e"] console.log([...arr.entries()]);// [[0, "a"],[1, "b"], [2, "c"],[3, "d"], [4, "e"]]
arr.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似
// includes 字符串中也有这样的方法
var arr=["a","b","c","d","e"];
console.log(arr.includes("a")); //true
console.log(arr.includes("k")); //false
//一般判断 数组有没有某个值 有个缺点
console.log(arr.indexOf("a")); //返回0 不是-1就是有这个元素
console.log([NaN].indexOf(NaN)); //返回-1 因为 NaN 不等于 NaN
arr.flat()用于将嵌套的数组“拉平”，多维数组变一维
//拉平的时候都是按顺序来的 var arr=[1,[2,[3,4],5],6]; console.log(arr.flat());//[1, 2,[3,4] 5, 6]; console.log(arr.flat(1));//[1, 2,[3,4] 5, 6]; //默认（参数是一）拉平一层 二维变一维 三维变二维 console.log(arr.flat(Infinity)) //[1, 2, 3, 4, 5, 6] flat的参数是 infinity 无论多少层都拉平 Infinity 属性用于存放表示正无穷大的数值。
一些注意的点
var arr=new Array(5); console.log(arr); //[,,,,] 元素为空 空不是undefined 空位是没有任何值， undefined 是一个值 //forEach(), filter(), reduce(), every() 和some()都会跳过空位。
forEach(), filter(), reduce(), every() some() map()
var arr=[1,2,3,4,5,6,7];
//current 当前元素
//index 当前元素的下标 可选
//ar 当前数组
//forEach 让每一个元素都去过一遍函数
//对自己的元素没有什么影响 只是把自己元素的信息展示一下
arr.forEach(function(current,index,ar){
console.log(current); //1/2/3/4/5/6/7
current=current+1;
});
console.log(arr); //[1, 2, 3, 4, 5, 6, 7] 还是原来的值
// filter() 方法创建一个新的数组 不改变原数组
//返回满足条件的元素
var arr=[1,2,3,4,5,6,7];
var nn=arr.filter(function(current,index,ar){
//每一个元素都会执行一遍{}的内容
//如果这个元素在{} return true 那么就返回这个元素
if(current>4){
return true;
}
})
console.log(nn); //[5, 6, 7]
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]
// every() 返回 boolean
//如果所有的元素都满足条件就返回 true 就是 与的关系
var arr=[1,2,3,4,5,6,7];
var nn=arr.every(function(current,index,ar){
//每一个元素都会执行一遍{}的内容
//只要有一个元素在{}中返回 false 就返回false
if(current<10){
return true;
}
})
console.log(nn); //true
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]
// some() 返回 boolean 不会改变原数组
//只要有一个元素都满足条件就返回 true 就是 或的关系
var arr=[1,2,3,4,5,6,7];
var nn=arr.some(function(current,index,ar){
//每一个元素都会执行一遍{}的内容
//只要有一个元素在{}中返回 true 就返回true
if(current>6){
return true;
}
})
console.log(nn); //true
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]
// map() 方法返回一个新数组 不会改变元素
//跟 foreach的区别 :: {}中不会return 不会返回新数组
// foreach 只是把信息拿出来 给别的人用
// map() 自己会return一份信息 生成一个新的数组
var arr=[1,2,3,4,5,6,7];
var nn=arr.map(function(current,index,ar){
//每一个元素都会执行一遍{}的内容
return current=current+1;
//如果不return nn 等于 [undefined, undefined, undefined, undefined, undefined, undefined, undefined]
})
console.log(nn); //[2, 3, 4, 5, 6, 7, 8]
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]