ES6、ES7、ES8等等，ES系列的家人们。会持续一直更新

vanora1111

已于 2022-07-20 16:10:36 修改

阅读量373

点赞数

文章标签：开发语言 javascript 前端

于 2022-03-28 15:06:15 首次发布

本文链接：https://blog.csdn.net/vanora1111/article/details/123527752

版权

一、对象与数组解构赋值

1、解构对象

2、解构数组

注：从嵌套数组/对象中提取数据也是可以的，此时等号左侧必须和等号右侧有相同的结构。

四、 Object.entries()与Object.fromEntries()

五、some跟every

六、一些简化代码操作

总结

前言

主要是总结写出来给自己回顾查看

一、对象与数组解构赋值

1、解构对象

let {prop : varName = default, ...rest} = object

这表示属性 prop 会被赋值给变量 varName，如果没有这个属性的话，就会使用默认值 default。

没有对应映射的对象属性会被复制到 rest 对象

注： defalut只是一个name，需要你自己定义一个值，例如：

let {prop : varName = 'balabala', ...rest} = object

如果没有从object里找到prop，那么 varName的值将是balabala，而不是undefined。

1-1、解构嵌套对象，代码如下：

const obj = {
  name: '测试',
  doing: {
    morning: '早晨',
    afternoon: '中午',
    evening: '晚上'
  }
}

const { doing: { evening } } = obj
console.log(evening) // 输出 晚上

2、解构数组

let [item1 = default, item2, ...rest] = array

数组的第一个元素被赋值给 item1，第二个元素被赋值给 item2，剩下的所有元素被复制到另一个数组 rest

注：从嵌套数组/对象中提取数据也是可以的，此时等号左侧必须和等号右侧有相同的结构。

3、用解构赋值从一个对象给另一个对象赋值

let params = {
    id: '',
    name: '',
    project: ''
}
let data2 = {
    id: 2,
    name: 'test1',
    parent: '1-2'
}

({ id: params.id, name: params.name, parent: params.project } = data2 )

console.log(params) 
// 输出 {id: 2, name: 'test1', project: '1-2'}

4、函数参数的解构

// 对象参数和默认值以及解构
function printInfo({name, age} = {name: 'why', age: 18}) {
 console.log(name, age)
}
printInfo({name: 'kobe', age: 40})



// 另外一种写法
function printInfo1({name = 'why', age = 18} = {}) {
 console.log(name, age)
}
printInfo1()

二、箭头函数

没有 this

没有 arguments

不可作为构造函数，不能使用 new 进行调用

它们也没有 super

这是因为，箭头函数是针对那些没有自己的“上下文”，但在当前上下文中起作用的短代码的。

没有原型对象

三、Array.includes()

在ES5，Array已经提供了 indexOf用来查找某个元素的位置，如果不存在就返回-1，也不能判断是否有NaN的元素。

ES6提供了Array.includes()函数判断是否包含某一元素，除了不能定位外，解决了indexOf的上述的两个问题。它直接返回true或者false表示是否包含元素，对NaN一样有效。includes内部使用了Number.isNaN对NaN进行了匹配。

总结：includes()方法，可以判断NaN，而且直接返回true/false，比较直观；
indexOf()方法，不能判断NaN，返回-1，即不包含，非-1即当前包含的位置。
两个方法各有长短，依实际情况定。如果元素包含NaN，就用includes()，否则两者均可。

// indexOf
const arr = [1, 2, 3]
arr.indexOf(2) // 1

// includes
const arr = [1, 2, 3]
arr.includes(2) // true
arr.includes(4) // false

还可以用来优化if else判断，例如：

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

// 可以用includes
const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

四、 Object.entries()与Object.fromEntries()

1、 Object.entries() 是将对象转成一个自身可枚举属性的键值对数组

const obj = { a: '1', b: 2 }
Object.entries(obj)
console.log(obj) // {a: '1', b: 2}

2、 Object.fromEntries() 将数组转成对象

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
]
Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}

举个例子：

const object = { key1: 'value1', key2: 'value2' }

// Object.entries
const array = Object.entries(object)

console.log(array)
(2) [Array(2), Array(2)]
0: (2) ['key1', 'value1']
1: (2) ['key2', 'value2']

// Object.fromEntries
const array1 = Object.fromEntries(array)
console.log(array1)

{key1: 'value1', key2: 'value2'}

注意事项:

当传入的参数中有重复出现的 key：

传入给 fromEntries 的参数，如果有重复的 key 出现，后面的会被采用：

1	`console.log(Object.fromEntries([['a', '1'], ['a', '2']])) {a: '2'}`

五、some跟every

some英语翻译过来是一些，every是每个，顾名思义，那我们来打印一下吧！

1、every则表示只有全部满足条件才会返回true

const arr = [
{label: '产品部',checked: 1},
{label: '研发部',checked: 1},
{label: '设计部',checked: 1}]

let result = arr.every((item) =>item.checked === 1)
console.log(result)
// true

2、some表示只有一个满足条件就返回true

const arr = [
{label: '产品部',checked: 1},
{label: '研发部',checked: 0},
{label: '设计部',checked: 0}]

let result = arr.some((item) => item.checked === 1)
console.log(result)
// true

六、一些简化代码操作

1、默认参数值

function volume(l,w,h) {
  if(!w) w=3
  if(!h) h=4
  return l*w*h
}
// 简化版
volume = (l,w=3,h=4) => (l*w*h)

volume(2) // 输出 24

2、强制参数

function foo(bar) {
  if(!bar) {
   console.log('测试')
  }
 return bar
}

// 简化版
mandtory = () => {
 console.log('测试')
}
foo = (bar = mandtory()) => {
 return bar
}

3、取反运算和 IndexOf（使用数组执行查找时，indexOf() 函数用于检索您要查找的项目的位置。如果未找到该项，则返回值-1）

if(arr.indexOf(item) > -1) { // item找到
}

if(arrr.indexOf(item) === -1) { // item没找到
}

// 简写版
if(~arr.indexOf(item)) { // item找到
}

if(!~arr.indexOf(item)) { // item没找到
}

// 或者使用includes()
if(arr.includes(item)) { // 如果item在数组中，返回true，否则返回false
}

七、对象数组去重

const arr1 = [{ id: 1 }, { id: 2 }, { id: 3 }];
const arr2 = [{ id: 3 }, { id: 4 }, { id: 5 }];

function mergeArray(arr1, arr2) {
  // 克隆
  const cloneArr1 = arr1.slice(0);
  let v;
  for (let i = 0; i < arr2.length; i++) {
    v = arr2[i];
    // 能找到相同 id 属性值的数据则进入判断
    if (~cloneArr1.findIndex((el) => el.id === v.id)) {
      continue;
    }
    cloneArr1.push(v);
  }
  return cloneArr1;
}

console.log(mergeArray(arr1, arr2)); // [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 } ]