es6新特性

一、类

class Base{
    constructor(){
        this.name = "杨洋"
    }
    get y(){
        return this.name
    }
    set y(n){
        this.name = n;
    }
    getV(){ 
        return "这是我定义的方法"
    }
}
var n = new Base();
n.y = "朱一龙";
console.log(n.name,n.getV(),"222===")

二、继承、重载、静态方法

class Base {
    top() {
        console.log("top")
    }
    mid() {
        console.log("middle")
    }
    static s(){
        console.log("这是静态方法")
    }
    all() {
        let me = this; 
        me.top(); 
        me.mid(); 
        return "总的"; 
    }

}
class c1 extends Base {
    top() {
        // super.top();// 继承
        console.log("这是第一个新的top")
    }
}
class c2 extends Base {
    top() {
        // super.top();// 继承
        console.log("这是第二个新的top")
    }
}
function getV(nn){
    var n = new Base()
    if(nn == "1"){
        n =  new c1(); 
    }else{
        n = new c2(); 
    }
    return n.all();
}
console.log(getV("2"))
Base.s();

注意:静态方法必须使用定义的类名去调用,不能使用实例化后的对象进行调用

三、实现交集、并集、差集


// 交集
function compare1(arr1,arr2){
    return [...new Set(arr1)].filter((it)=>arr2.includes(it));
} 

// 差集
function compare2(arr1,arr2){
     return [...new Set([...arr1, ...arr2])];
} 

// 并集
function compare3(arr1,arr2){
    return [...new Set(arr1)].filter(it => !arr2.includes(it));
} 

// 数组对象
// 交集
function compare4(arr1, arr2, key) {
  const set2 = new Set(arr2.map(it => it[key]));
  return arr1.filter(it => set2.has(it[key]));
}
 
// 并集
function compare5(arr1, arr2, key) {
  const set2 = new Set(array1.map(it => it['id']));
  return arr1.concat(arr2.filter(item => !set2.has(item[key])));
}
 
// 差集
function compare6(arr1, arr2, key) {
  const set2 = new Set(arr2.map(it => it[key]));
  return arr1.filter(it => !set2.has(it[key]));
}
1、交集
方法一:在arr1中筛选包含在arr2中的数据,即为交集。(filter + includes)
const arr1 = ['0', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const arr = arr1.filter(e => arr2.includes(e))
console.log(arr) // ['2', '4']
方法二:先将两个数组合并,再筛选出既属于arr1又属于arr2的数据,最后去重,即为交集。(concat + filter + includes + Set)
const arr1 = ['0', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const array = arr1.concat(arr2).filter(e => arr1.includes(e) && arr2.includes(e))
const arr = [...new Set(array)]
console.log(arr) 

2、并集
方法一:将两个数组合并,然后去重,即为并集。(concat + Set)
const arr1 = ['0', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const arr = [...new Set(arr1.concat(arr2))]
console.log(arr)
方法二:先将两个数组合并,然后执行reduce函数,结果值的初始值设置为空数组 [] , 当当前数据不存在结果值数组里时,将当前数据push到结果值数组里,最后获得结果值数组,即为并集。(concat + reduce)
const arr1 = ['0', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const arr = arr1.concat(arr2).reduce((pre, cur) => {
    if (!pre.includes(cur)) {
        pre.push(cur)
    }
    return pre
}, [])
console.log(arr)

3、差集
-先将两个数组合并,然后筛选在arr1的并且不在arr2的,即为A-B的差集。(concat + filter + includes)
const arr1 = ['0', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const arr = arr1.concat(arr2).filter(e => arr1.includes(e) && !arr2.includes(e))
console.log(arr)
-先将两个数组合并,然后筛选在arr2的并且不在arr1的,即为B-A的差集。
const arr1 = ['0', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const arr = arr1.concat(arr2).filter(e => arr2.includes(e) && !arr1.includes(e))
console.log(arr)

4、补集
方法一:先将两个数组合并,再分别筛选出既不在arr1又不在arr2中的数据,连个数组合并,即为补集。(concat + filter + includes)
const arr1 = ['0', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const array = arr1.concat(arr2)
const arr = [...array.filter(e => !arr1.includes(e)), ...array.filter(e => !arr2.includes(e))]
console.log(arr) 
方法二:在arr1中筛选出不在arr2中的数据,在arr2中筛选出不在arr1中的数据,两个数组合并,即为补集。(filter + includes)
const arr1 = ['1', '2', '3', '4']
const arr2 = ['2', '4', '6', '8']
const arr = [...arr1.filter(e => !arr2.includes(e)), ...arr2.filter(e => !arr1.includes(e))]
console.log(arr)

### ES6 新特性介绍 ES6(ECMAScript 2015)是 JavaScript 的一个重要版本更新,引入了许多新特性和改进。以下是一些关键的 ES6 新特性及其详细说明: #### 1. 模块化支持 在 ES6 中,模块化功能得到了显著增强。每个文件被视为一个独立的模块,默认情况下,模块内的变量和函数对外部是不可见的,除非显式使用 `export` 关键字导出。通过 `import` 可以从其他模块导入所需的接口[^4]。 ```javascript // 导出模块内容 export const sqrt = Math.sqrt; export function square(x) { return x * x; } // 导入模块内容 import { sqrt, square } from './lib.js'; ``` #### 2. 箭头函数 箭头函数是 ES6 中新增的一种函数定义方式,它提供了更简洁的语法,并且在处理 `this` 绑定时更加直观。需要注意的是,箭头函数不能作为构造函数使用,也没有自己的 `prototype` 属性[^2]。 ```javascript const add = (x, y) => x + y; const Foo = () => {}; // new Foo(); // TypeError: Foo is not a constructor ``` #### 3. Map 和 Set 数据结构 ES6 引入了两种新的数据结构:`Map` 和 `Set`。`Map` 是键值对的集合,允许使用任意类型的键;而 `Set` 是一个存储唯一值的集合。这两种数据结构可以提高代码的可读性和性能[^3]。 ```javascript const map = new Map(); map.set('name', 'Alice'); console.log(map.get('name')); // Alice const set = new Set([1, 2, 3, 3]); console.log(set.size); // 3 ``` #### 4. 类(Class)语法 ES6 引入了类的语法糖,使得继承和面向对象编程更加直观。尽管底层仍然基于原型链,但类的语法让开发者能够更容易地创建和扩展对象。 ```javascript class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } const d = new Dog('Rex'); d.speak(); // Rex barks. ``` #### 5. 解构赋值 解构赋值允许从数组或对象中提取数据并赋值给变量,简化了复杂的数据访问操作。 ```javascript const [a, , b] = [1, 2, 3]; console.log(a, b); // 1, 3 const { name, age } = { name: 'Bob', age: 30 }; console.log(name, age); // Bob, 30 ``` #### 6. 默认参数与剩余参数 函数参数现在可以设置默认值,同时还可以使用剩余参数来捕获不定数量的参数。 ```javascript function multiply(a, b = 1) { return a * b; } console.log(multiply(5)); // 5 function sum(...args) { return args.reduce((acc, val) => acc + val, 0); } console.log(sum(1, 2, 3, 4)); // 10 ``` #### 7. 模板字符串 模板字符串允许嵌入表达式,并且可以轻松创建多行字符串。 ```javascript const name = 'Alice'; const greeting = `Hello, ${name}!`; console.log(greeting); // Hello, Alice! const multiLine = `This is a multi-line string.`; console.log(multiLine); ``` #### 8. let 和 const `let` 和 `const` 提供了块级作用域的变量声明方式,避免了全局污染和变量提升问题。 ```javascript for (let i = 0; i < 3; i++) { console.log(i); } // 0, 1, 2 console.log(i); // ReferenceError: i is not defined const pi = 3.14; pi = 3; // TypeError: Assignment to constant variable. ``` #### 9. Promise Promise 提供了一种更好的方式来处理异步操作,解决了回调地狱的问题。 ```javascript const promise = new Promise((resolve, reject) => { setTimeout(() => resolve('Success!'), 1000); }); promise.then(result => console.log(result)); // Success! ``` ### 结论 ES6 的这些新特性极大地增强了 JavaScript 的功能和开发体验。通过合理使用这些特性,开发者可以编写更加简洁、高效和易于维护的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值