ES6小技巧

1、对象简化写法

const school = {
name,
change,
improve(){
console.log("对象简化")
}
}

2、变量解构赋值

//1.数组解构
const F4 = ['小','刘','赵','宋'];
let [xiao, liu, zhao, song] = F4;

//2.对象解构
const zhao = {
  name: '赵',
  age: '12',
  jineng:function(){
    console.log('技能')
  }
}
let {name, age, jineng} = zhao
jinneg();
console(jineng)

3、箭头函数

//1、箭头函数简写
//  1.省略小扩号，当形参数有且只有一个的时候
//  2.花括号省略，当代码体只有一条语句的时候，此时return必须省略
let add = (n) => {
  return n + n;
}
//简化后
let add = n => n * n;

4、参数默认值

//1. 形参初始值 具有默认值的参数，一般位置要靠后（潜规则）
function add(a,b,c=10){
  return a + b + c;
}
add(1,2);  //13

//2. 与结构赋值结合
function connect ({host="127.0.0.1", username, password, port}){
  console.log(host, username ,password, port})
}
connect({
  host:'baidu.com', //如果没传用默认值
  username: 'root',
  password:' root',
  port: 3300
})

5.rest参数

  //rest参数必须放在参数最后
  function date(a, b, ...args){
    console.log(a);
    console.log(b);
    console.log(args); // [3, 4, 5, 6]
  }
  date(1, 2, 3, 4, 5, 6)

6.扩展运算符

//【...】扩展运算符能将【数组】转换为逗号分隔的【参数序列】
// 声明一个数组 ... 
const sanguo = ['刘备', '关羽', '张飞'];

// 声明一个函数
function duikan() {
  console.log(arguments);  //arguments 获取实参的方法
} 

duikan (...sanguo); //duikan ('刘备', '关羽', '张飞')

//使用场景
//1、数组合并
const arr = [ ...arr1, ...arr2 ]
//2、数组克隆
const arr = [1, 2, 3]
const arr1 = [...arr] //[1, 2, 3]
//3、将伪数组转为真正的数组

7.原始数据类型 Symbol 表示独一无二的值
特点：（1）值唯一，解决命名冲突
（2）不能与其他数据类型进行运算
（3）定义的对象属性不能用for...in 循环遍历，但是可以Reflect.ownKeys 来获取对象的所有键名

//创建
let s = Symbol()
let s2 = Symbol.for('加上for 为可查找') === Symbol.for('加上for 为可查找')

使用场景：
给对象添加Symbol方法
疑问：什么时候需要给对象添加方法？

//方法1
let game = {...}
let methods = {
  up: Symbol(),
  down: Symbol()
}
game[methods.up] = function(){
  ....
}
game[methods.down] = function(){
  ....
}

//方法二
let youxi = {
  name:"狼人杀",
  [Symbol('say')]: function() {
    console.log('说话')
  },
  [Symbol('say')]: function() {
    console.log('说话')
  }
}

内置值：
了解就好，主要用来拓展对象功能

8.迭代器
for...of 与 for...in 区别
const arr = ['路飞', '索隆', '艾思']
for(let v of arr){
console.log(v) //'路飞', '索隆', '艾思'
}
for(let v in arr){
console.log(v) //0, 1, 2
}
使用场景：

const banji = {
  name:"终极一班",
  stus: [
    'xiao1',
    xiao1',
    xiao1',
    xiao1'
  ]
}
//自定义遍历方法
for(let v of banji){
  //只循环 stus中的值 如何实现？
  .....
}

8.生成器函数（为异步编程提供解决方案）
function * gen（）
//解决痛点回调地狱

2022-7-14 更新补充
1、利用ES6，根据id替换有id相同的数组元素

const replaceElementById = (arr, newElement) => {
  const index = arr.findIndex(element => element.id === newElement.id);
  if (index !== -1) {
    arr[index] = newElement;
  }
  return arr;
}

其中，arr 是原数组，newElement 是要替换的新元素。该函数使用 findIndex 方法找到第一个满足条件的元素的下标，然后根据下标替换元素。如果没有找到相同的 id，则不进行替换。最后返回替换后的数组。

需要注意的是，这里使用了箭头函数和解构赋值的语法，这是 ES6 中的新特性。findIndex 方法返回的是找到的元素的下标，如果没有找到则返回 -1。

2、js根据id删除对应的数组数据
可以使用以下代码根据id删除数组中对应的数据：

// 假设有一个数组
const array = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

// 要删除的元素的id
const idToDelete = 2;

// 找到要删除的元素的索引
const indexToDelete = array.findIndex(item => item.id === idToDelete);

// 如果找到了该元素，则从数组中删除
if (indexToDelete !== -1) {
  array.splice(indexToDelete, 1);
}

其中，idToDelete是要删除元素的id，findIndex方法用于找到数组中满足条件的元素的索引，splice方法用于从数组中删除指定的元素。上述代码会删除数组中id为2的元素。

3、用vue2写一个悬浮于底部的div，div中间位置有一个“进入体育课堂"的按钮

可以使用Vue的template和style标签来实现这个悬浮div的样式和HTML结构，然后使用Vue的script标签来实现组件的逻辑。

HTML代码：

<template>
  <div class="sticky-footer">
    <button class="enter-classroom">进入体育课堂</button>
  </div>
</template>

CSS代码：

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.enter-classroom {
  padding: 10px 20px;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

Vue组件代码：

<template>
  <div class="sticky-footer">
    <button class="enter-classroom">进入体育课堂</button>
  </div>
</template>

<script>
export default {
  name: 'StickyFooter',
}
</script>

<style scoped>
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.enter-classroom {
  padding: 10px 20px;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}
</style>

你可以使用JavaScript中的reduce()函数将具有相同startTime字段的项分组。下面是一个例子：

const records = [{
    "id": "d755945ae00130b92fa94fe4c68b8deb",
    "name": "2023国家体质监测1",
    "applicableGrades": "初一",
    "applicableGradeIds": "a1d8492b-8658-43a3-b485-9da5eaae43e3",
    "testStatus": "15",
    "randomTest": "0",
    "indicators": "1000米跑 1分钟仰卧起坐 50米跑 800米跑 BMI 体重 坐位体前屈 引体向上 立定跳远 肺活量 身高",
    "totalNumber": 1080,
    "completedNumber": 1080,
    "percent": "100%",
    "startTime": "2023-05-15"
  },
  {
    "id": "6197505741a5d8cd432a811ba29e6d3f",
    "name": "2023国家体质监测",
    "applicableGrades": "初一",
    "applicableGradeIds": "a1d8492b-8658-43a3-b485-9da5eaae43e3",
    "testStatus": "15",
    "randomTest": "0",
    "indicators": "1000米跑 1分钟仰卧起坐 50米跑 800米跑 BMI 体重 坐位体前屈 引体向上 立定跳远 肺活量 身高",
    "totalNumber": 1080,
    "completedNumber": 1080,
    "percent": "100%",
    "startTime": "2023-05-16"
  },
  {
    "id": "d755945ae00130b92fa94fe4c68b8deb",
    "name": "2023国家体质监测1",
    "applicableGrades": "初一",
    "applicableGradeIds": "a1d8492b-8658-43a3-b485-9da5eaae43e3",
    "testStatus": "15",
    "randomTest": "0",
    "indicators": "1000米跑 1分钟仰卧起坐 50米跑 800米跑 BMI 体重 坐位体前屈 引体向上 立定跳远 肺活量 身高",
    "totalNumber": 1080,
    "completedNumber": 1080,
    "percent": "100%",
    "startTime": "2023-05-16"
  }
];

const groupByStartTime = (arr) => {
  return arr.reduce((acc, cur) => {
    if (!acc[cur.startTime]) {
      acc[cur.startTime] = [];
    }
    acc[cur.startTime].push(cur);
    return acc;
  }, {});
};

const groupedRecords = groupByStartTime(records);
console.log(groupedRecords);

4、vue2子路由方式如何实现

这将输出一个对象，其中键是startTime值，对应的值是具有相同startTime值的项的数组。

在 Vue2 中，可以通过使用嵌套路由的方式来实现子路由。具体实现步骤如下：

在父组件中定义一个路由出口，用于显示子组件的内容。可以使用标签来定义路由出口。
在父组件的路由配置中，指定子路由的 path 和 component。path 中可以使用 '/子路由名' 或者使用相对路径来指定子路由的路径。
在子组件中定义自己的子路由，可以采用与父组件相同的方式来设置子路由。
在子组件的路由配置中，也需要指定子路由的 path 和 component。
在子组件中，可以使用标签来定义用于显示子路由的出口，在父组件调用子组件的时候，子组件的子路由也会被一同显示出来。

下面是一个示例代码：

<!-- 父组件中的路由配置 -->
<template>
  <div>
    <h1>父组件</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  // 父组件的路由配置
  // 注意，path 中包含了子路由的路径
  // 在子组件中的路由配置就只需要写子路由的路径即可
  // 通过 props 将用户 ID 传递给子组件
  children: [
    {
      path: '/users/:id',
      name: 'userProfile',
      component: UserProfile,
      props: true,
      children: [
        {
          path: 'posts',
          name: 'userPosts',
          component: UserPosts
        },
        {
          path: 'comments',
          name: 'userComments',
          component: UserComments
        }
      ]
    }
  ]
}
</script>

<!-- 子组件的路由配置 -->
<template>
  <div>
    <h2>用户 {{ id }}</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  props: ['id'],
  // 子组件的路由配置
  // 注意，不需要包含父组件的路径信息
  children: [
    {
      path: 'posts',
      name: 'userPosts',
      component: UserPosts
    },
    {
      path: 'comments',
      name: 'userComments',
      component: UserComments
    }
  ]
}
</script>

如上述代码所示，父组件中定义了一个名为 UserProfile 的子组件，并为其定义了两个子路由，分别是 '/posts' 和 '/comments'。在父组件的路由配置中，通过使用 children 属性来指定子路由的信息，并使用 props 属性将参数传递给子组件。

在子组件中，我们同样需要定义子路由的路径和组件，并使用标签来定义子路由的出口。需要注意的是，在子组件的路由配置中，不需要指定父组件的路径信息，因为父组件已经通过路由配置传递了该信息。
未完待续...

posted @ 2022-05-07 21:38 会飞的小白阅读(54) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

会飞的小白

不忘初心，方得始终。

ES6小技巧

公告