[今天七夕,我一点都不羡慕,真的]javascript你不一定知道的进阶(干货)实用技巧.

首先说明一下：我这里不举最基础的例子，各位大佬已经讲烂了,比如这位
还有这位,我只讲述最实用最常用的例子,你拷贝完,就能用的例子

本文章参照做过的业务,实打实的进阶讲述,你能用他们干什么,项目中应该怎么运用?这个就要各位往看下了.

数组对象判断是否存在指定值

const list = [
	  { name: '头部导航', backward: false },
	  { name: '轮播', backward: true },
	  { name: '页脚', backward: false },
];

    const someBackward = list.some(item => item.backward);
    // someBackward: true
    const everyNewest = list.every(item => !item.backward);
    // everyNewest: false
复制代码

• 二者都是用来做数组条件判断的，都是返回一个布尔值
• 二者都可以被中断
• some 若某一元素满足条件，返回 true，循环中断；所有元素不满足条件，返回 false。
• every 与 some 相反，若有益元素不满足条件，返回 false，循环中断；所有元素满足条件，返回true。

数组去重

这是一个原生的JS函数但是非常简洁，Set接受任何可迭代对象，如数组[1,2,3,3]，并删除重复项

let a=[1,1,1,2,3,4,5,5,5,]
[...new Set(a)] 
//[1, 2, 3, 4, 5]
复制代码

数组对象去重

var obj = {};
  arr = arr.reduce(function(item, next) {
   obj[next.key] ? '' : obj[next.key] = true && item.push(next);
   return item;
  }, []);
  console.log(arr);
复制代码

数组分割

function Chunk(arr = [], size = 1) {
    return arr.length ? arr.reduce((t, v) => (t[t.length - 1].length === size ? t.push([v]) : t[t.length - 1].push(v), t), [[]]) : [];
}
const arr = [1, 2, 3, 4, 5];
Chunk(arr, 2); // [[1, 2], [3, 4], [5]]
复制代码

数组求最大或最小值

function Max(arr = []) {
    return arr.reduce((t, v) => t > v ? t : v);
}

function Min(arr = []) {
    return arr.reduce((t, v) => t < v ? t : v);
}

const arr = [12, 45, 21, 65, 38, 76, 108, 43];
Max(arr); // 108
Min(arr); // 12
复制代码

展开多维数组

flat()    
flatMap()
复制代码

• flat() 方法可以将多维数组展平成一维数组
• 请注意，如果提供的数组中有空值，它们会被丢弃：
• flat() 还接受一个可选参数，该参数指定嵌套数组应该被展平的级别数。 如果未提供参数，则将使用默认值1：如果输入Infinity参数则不管多少维数组都会展平
• flatMap() 方法将map()和flat()组合成一个方法。 它首先使用提供的函数的返回值创建一个新数组，然后连接该数组的所有子数组元素。 来个例子：\

遍历对象或数组对象

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。
这个真的很有用。之前为了遍历key和value搞得很烦。

for(let [key,value] of Object.entries(obj1)){
	console.log(`key: ${key} value:${value}`)
}
//遍历对象
//key:a value:1
//key:b value:2
//key:c value:3

//遍历数组对象
//key:0 value:{a: 1, b: 2, c: 3}
//key:1 value:{a: 1, b: 2, c: 3}
复制代码

将二维数组转换对象

Object.entries是把对象转成键值对数组，而Object.fromEntries则相反，是把键值对数组转为对象

const arr = [
  ['name', '林三心'],
  ['age', 22],
  ['gender', '男']
]
console.log(Object.fromEntries(arr)) 
// { name: '林三心', age: 22, gender: '男' }
复制代码

将一维数组转换为对象

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var plantsObj = {...plants }
console.log(plantsObj); // {'0': 'Saturn','1': 'Earth', '2': 'Uranus','3': 'Mercury','4': 'Venus','5': 'Earth','6': 'Mars','7': 'Jupiter'}
复制代码

数组的快速查找

使用Array的find()可以实现快速查找。

 const pets=[  
        {type:'Dog',name:'Max'},  
        {type:'Cat',name:'Karl'},  
        {type:'Dog',name:'Tommy'}  
    ]  
let pet= pets.find(pet=>pet.type==='Dog'&&pet.name==='Tommy');  
console.log(pet);
// {type: "Dog", name: "Tommy"}
复制代码

求两个数组的交集

要求两个数组的相同值,首先确保数组不重复，然后使用filter()方法和includes()方法。

var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var plants2 = ['Saturn', 'Earth', 'Uranus'];
var alonePlants = [...new Set(plants1)].filter(item => plants2.includes(item));
console.log(alonePlants); 
// [ 'Saturn', 'Earth', 'Uranus' ]
复制代码

获取数组最后一个元素

var arr = [1,2,3,4,5]
arr.pop() //5 此方法会改变数组的结构，不推荐
arr[arr.length - 1] //5 常用方法
arr.slice(-1)[0] //5 不需要计算数组的长度，直接拿到最后一个元素
复制代码

动态为对象的属性指定键名

const dynamic = 'email';
let user = {
    name: 'John',
    [dynamic]: 'john@doe.com'
}
console.log(user);// outputs { name: "John", email: "john@doe.com" }
复制代码

取出数组对象中的指定属性值，并返回为数组

const sheet=[ {type:'Dog',name:'Max'}, {type:'Cat',name:'Karl'}, {type:'Dog',name:'Tommy'} ]
  let arr =sheet.map((v,i)=>{
      return v['name']
    }}
复制代码

获取URL的查询参数

用最精简的代码

//第一种
q={};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q); 
{
    "ie": "utf-8",
    "f": "8",
    "rsv_bp": "1",
    "tn": "baidu",
    "wd": "js%E6%97%A0%E7%A9%B7%E5%A4%A7",
    "oq": "%25E6%2597%25A0%25E7%25A9%25B7%25E5%25A4%25A7",
    "rsv_pq": "ac0117fa00057293",
    "rsv_t": "90bbevB0RLfLUZ4XME2%2FGHL2Uad8MPo%2Bhvu89MbGddXhQ4jpzIZRmNBfuIs",
    "rqlang": "cn",
    "rsv_enter": "1",
    "rsv_btype": "t",
    "rsv_dl": "tb",
    "inputT": "1127"
}

//第二种
Object.fromEntries(new URLSearchParams(window.location.href))
复制代码

vue 样式穿透

 ::v-deep .box p:{
     color:red
 }
//使用 ::v-deep进行穿透
复制代码

Element UI 表单校验进阶知识

www.cnblogs.com/xyyt/p/1336…