田敏
返回博客列表
技术

es6

田敏
2023-12-072 分钟阅读
FrontendJavaScriptVue

1.前端使用委托

     //声明一个委托
    function deleglet(func){
        func();
    }
    //两种使用委托的方式  很类似c# 匿名函数
     deleglet(function(){
        console.log("lalal")
     })
     deleglet(()=>{
        console.log("lalal")
     })

2.es6占位符的使用

占位符的使用,与c#不同的是,是直接在{}之前j加$

     let username = 'qweqwe';
     let str = `${username} say hello`;
     console.log(str);

filter的使用,类比c#的findall以及where

3.concat的使用:

     var list1=[1,2,3,4]
     var list2=[3,4,5,6]
     list1=list1.concat(list2);
     console.log(list1);

4.扩展参数的使用:

在ES6中,你可以使用扩展参数(rest parameters)来处理不定数量的函数参数。扩展参数使用三个点号(...)作为前缀,允许你将一个函数的多个参数收集到一个数组中。这在处理未知数量的参数时非常有用。

// 使用扩展参数的函数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

// 调用函数
const result = sum(1, 2, 3, 4, 5);
console.log(result); // 输出 15

在这个例子中,sum 函数使用扩展参数 ...numbers,它可以接受任意数量的参数,并将它们收集到一个名为 numbers 的数组中。在函数体内,我们使用 reduce 方法对这个数组进行求和。

你也可以结合扩展参数和普通参数一起使用,但请注意,扩展参数应该是最后一个参数:

c#中也有扩展参数

public int Sum(params int[] numbers)
{
    return numbers.Sum();
}

int result = Sum(1, 2, 3, 4, 5);
Console.WriteLine(result); // 输出 15

解构字符串

const str = 'Hello';

// 将字符串转换为字符数组
const charArray = [...str];

// 遍历字符数组
for (const char of charArray) {
  console.log(char);
}

5.map使用

在 JavaScript 中,map 是一个数组方法,用于在数组的每个元素上调用一个提供的函数,并返回一个新的数组,该数组包含每次函数调用的结果。以下是 map 方法的基本用法:

const numbers = [1, 2, 3, 4, 5];

// 使用 map 对数组中的每个元素进行操作
const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

下面是 map 方法的一些常见用法:

1. 映射到新的数组:
const names = ['Alice', 'Bob', 'Charlie'];

const nameLengths = names.map((name) => name.length);

console.log(nameLengths); // 输出 [5, 3, 7]
2. 对象数组提取属性:
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const userIds = users.map((user) => user.id);

console.log(userIds); // 输出 [1, 2, 3]
3. 字符串转换:
const numbers = [1, 2, 3];

const stringNumbers = numbers.map(String);

console.log(stringNumbers); // 输出 ['1', '2', '3']

map 是一个非常强大且常用的数组方法,可以简化对数组元素的处理过程。

4.map字典对象
// 创建一个 Map 对象
const myMap = new Map();
// 添加键值对
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.set('key3', 'value3');
// 获取值
console.log(myMap.get('key1')); // 输出 'value1'
// 遍历 Map
myMap.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});
// 检查键是否存在
console.log(myMap.has('key2')); // 输出 true
// 删除键值对
myMap.delete('key2');
// 获取 Map 的大小(键值对的数量)
console.log(myMap.size);

es6中的类

在 ES6(ECMAScript 2015)中,引入了类(Class)的概念,使得在 JavaScript 中更容易使用面向对象的编程风格。类提供了一种创建对象和定义对象行为的方式。以下是 ES6 中类的基本用法:

class Person {
  // 构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 类方法
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// 创建类的实例
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

// 调用类方法
person1.sayHello(); // 输出 'Hello, my name is Alice and I'm 25 years old.'
person2.sayHello(); // 输出 'Hello, my name is Bob and I'm 30 years old.'

使用继承:

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  // 父类方法
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

// 子类继承父类
class Dog extends Animal {
  // 子类可以有自己的构造函数
  constructor(name, breed) {
    // 调用父类的构造函数
    super(name);
    this.breed = breed;
  }

  // 子类可以重写父类方法
  speak() {
    console.log(`${this.name} barks!`);
  }

  // 子类可以添加自己的方法
  fetch() {
    console.log(`${this.name} fetches the ball.`);
  }
}

// 创建子类的实例
const myDog = new Dog('Buddy', 'Golden Retriever');

// 调用继承的方法
myDog.speak();  // 输出 'Buddy barks!'
myDog.fetch();  // 输出 'Buddy fetches the ball.'

版权协议:MIT返回列表