数组
... 扩展运算符 将一个数组的元素一个一个提出来
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]