周偏偏偏
周偏偏偏

ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（下）

ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（上）

文章目录

      • 一.函数参数的扩展
        • 默认参数
        • 不定参数
        • 箭头函数
        • 适合使用的场景
        • 不适合使用的场景
      • 二.javascript标准函数this
        • new 对象
        • 指定的对象
        • 上下文对象
        • 全局对象或 undefined
      • 三.箭头函数和this
      • 四.Class类
        • 基础用法
        • 类的主体
        • 方法
        • 封装与继承

一.函数参数的扩展

默认参数

基本用法

function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

注意点：使用函数默认参数时，不允许有同名参数。

// 不报错
function fn(name,name){
 console.log(name);
}
 
// 报错
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
 console.log(name+","+age);
}

只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

function fn(name,age=17){
    console.log(name+","+age);
}
fn("Amy",null); // Amy,null

函数参数默认值存在暂时性死区，在函数参数默认值表达式中，还未初始化赋值的参数值无法作为其他参数的默认值。

function f(x,y=x){
    console.log(x,y);
}
f(1);  // 1 1
 
function f(x=y){
    console.log(x);
}
f();  // ReferenceError: y is not defined

不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

基本用法

function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
参数 => 函数体

基本用法：

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

当箭头函数没有参数或者有多个参数，要用 () 括起来。

var f = (a,b) => a+b;
f(6,2);  //8

当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

// 报错
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
 
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意点：没有 this、super、arguments 和 new.target 绑定。

var func = () => {


  // 箭头函数里面没有 this 对象，
  // 此时的 this 是外层的 this 对象，即 Window 
  console.log(this)
}
func(55)  // Window 
 
var func = () => {    
  console.log(arguments)
}
func(55);  // ReferenceError: arguments is not defined

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。

function fn(){
  setTimeout(()=>{
    // 定义时，this 绑定的是 fn 中的 this 对象
    console.log(this.a);
  },0)
}
var a = 20;
// fn 的 this 对象为 {a: 19}
fn.call({a: 18});  // 18

不可以作为构造函数，也就是不能使用 new 命令，否则会报错

适合使用的场景

ES6之前,使用普通函数把其中每个名字转换为大写形式：

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(function(name) { 
  return name.toUpperCase();
});

箭头函数表示:

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
  name => name.toUpperCase()
);

普通函数可以是函数声明或者函数表达式, 但是箭头函数始终都是表达式, 全程是箭头函数表达式, 因此因此仅在表达式有效时才能使用，包括：

  • 存储在变量中，
  • 当做参数传递给函数，
  • 存储在对象的属性中。

所以，当我们需要维护一个 this 上下文的时候，就可以使用箭头函数。

不适合使用的场景

定义函数的方法，且该方法中包含 this

var Person = {
    'age': 18,
    'sayHello': ()=>{
        console.log(this.age);
      }
};
var age = 20;
Person.sayHello();  // 20
// 此时 this 指向的是全局对象
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
        console.log(this.age);
    }
};
var age = 20;
Person1.sayHello();   // 18
// 此时的 this 指向 Person1 对象

需要动态 this 的时候
var button = document.getElementById('userClick');
button.addEventListener('click', () => {
     this.classList.toggle('on');
});

button 的监听函数是箭头函数，所以监听函数里面的 this 指向的是定义的时候外层的 this 对象，即 Window，导致无法操作到被点击的按钮对象。

二.javascript标准函数this

new 对象

const mySundae = new Sundae('Chocolate', ['Sprinkles', 'Hot Fudge']);

sundae这个构造函数内的this的值是实例对象, 因为他使用new被调用.

指定的对象

const result = obj1.printName.call(obj2);

函数使用call/apply被调用,this的值指向指定的obj2,因为call()第一个参数明确设置this的指向

上下文对象

data.teleport();

函数是对象的方法, this指向就是那个对象,此处this就是指向data.

全局对象或 undefined

teleport();

此处是this指向全局对象,在严格模式下,指向undefined.

javascript中this是很复杂的概念, 要详细判断this,请参考this你不懂JS: this 与对象原型

三.箭头函数和this

对于普通函数, this的值基于函数如何被调用, 对于箭头函数,this的值基于函数周围的上下文, 换句话说,this的值和函数外面的this的值是一样的.

function IceCream() {
    this.scoops = 0;
}

// 为 IceCream 添加 addScoop 方法
IceCream.prototype.addScoop = function() {
    setTimeout(function() {
        this.scoops++;
        console.log('scoop added!');
        console.log(this.scoops); // undefined+1=NaN
        console.log(dessert.scoops); //0
    }, 500);
};


const dessert = new IceCream();
dessert.addScoop();

传递给 setTimeout() 的函数被调用时没用到 new、call() 或 apply()，也没用到上下文对象。意味着函数内的 this 的值是全局对象，不是 dessert 对象。实际上发生的情况是，创建了新的 scoops 变量（默认值为 undefined），然后递增（undefined + 1 结果为 NaN）;

解决此问题的方式之一是使用闭包(closure):

// 构造函数
function IceCream() {
  this.scoops = 0;
}

// 为 IceCream 添加 addScoop 方法
IceCream.prototype.addScoop = function() {
  const cone = this; // 设置 `this` 给 `cone`变量
  setTimeout(function() {
    cone.scoops++; // 引用`cone`变量
    console.log('scoop added!'); 
    console.log(dessert.scoops);//1
  }, 0.5);
};

const dessert = new IceCream();
dessert.addScoop();

箭头函数的作用正是如此, 将setTimeOut()的函数改为剪头函数:

// 构造函数
function IceCream() {
  this.scoops = 0;
}

// 为 IceCream 添加 addScoop 方法
IceCream.prototype.addScoop = function() {
  setTimeout(() => { // 一个箭头函数被传递给setTimeout
    this.scoops++;
    console.log('scoop added!');
    console.log(dessert.scoops);//1
  }, 0.5);
};

const dessert = new IceCream();
dessert.addScoop();

四.Class类

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

基础用法

类定义

类表达式可以为匿名或命名。

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

类声明

class Example {
    constructor(a) {
        this.a = a;
    }
}

注意要点：不可重复声明。

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

注意要点
类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错

类中方法不需要 function 关键字。
方法间不能加分号。

new Example(); 
class Example {}

类的主体

属性

prototype

ES6 中，prototype 仍旧存在，虽然可以直接自类中定义方法，但是其实方法还是定义在 prototype 上的。 覆盖方法 / 初始化时添加方法

Example.prototype={
    //methods
}

添加方法

Object.assign(Example.prototype,{
    //methods
})

静态属性

静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化。 ES6 中规定，Class 内部只有静态方法，没有静态属性。

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

公共属性
class Example{}
Example.prototype.a = 2;

实例属性

实例属性：定义在实例对象（ this ）上的属性。
class Example {
a = 2;
constructor () {
console.log(this.a);
}
}

name 属性

返回跟在 class 后的类名(存在时)。

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

方法

constructor 方法

constructor 方法是类的默认方法，创建类的实例化对象时被调用。

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

返回对象

class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

静态方法

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

原型方法

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

实例方法

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

类的实例化

new

class 的实例化必须通过 new 关键字。

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

实例化对象共享原型对象

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
console.log(exam1._proto_ == exam2._proto_); // true
 
exam1._proto_.sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

decorator

decorator 是一个函数，用来修改类的行为，在代码编译时产生作用。
类修饰

一个参数

第一个参数 target，指向类本身。

function testable(target) {
    target.isTestable = true;
}
@testable
class Example {}
Example.isTestable; // true

多个参数——嵌套实现

function testable(isTestable) {
    return function(target) {
        target.isTestable=isTestable;
    }
}
@testable(true)
class Example {}
Example.isTestable; // true

实例属性

上面两个例子添加的是静态属性，若要添加实例属性，在类的 prototype 上操作即可。
方法修饰

3个参数：target（类的原型对象）、name（修饰的属性名）、descriptor（该属性的描述对象）。

class Example {
    @writable
    sum(a, b) {
        return a + b;
    }
}
function writable(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor; // 必须返回
}

修饰器执行顺序

由外向内进入，由内向外执行。

class Example {
    @logMethod(1)
    @logMthod(2)
    sum(a, b){
        return a + b;
    }
}
function logMethod(id) {
    console.log('evaluated logMethod'+id);
    return (target, name, desctiptor) => console.log('excuted         logMethod '+id);
}
// evaluated logMethod 1
// evaluated logMethod 2
// excuted logMethod 2
// excuted logMethod 1

封装与继承

getter / setter

class Example{
    constructor(a, b) {
        this.a = a; // 实例化时调用 set 方法
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this.a;
    }
    set a(a){
        console.log('setter');
        this.a = a; // 自身递归调用
    }
}
let exam = new Example(1,2); // 不断输出 setter ，最终导致 RangeError
class Example1{
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this._a;
    }
    set a(a){
        console.log('setter');
        this._a = a;
    }
}
let exam1 = new Example1(1,2); // 只输出 setter , 不会调用

getter 方法

console.log(exam._a); // 1, 可以直接访问

getter 不可单独出现

class Example {
    constructor(a) {
        this.a = a; 
    }
    get a() {
        return this.a;
    }
}
let exam = new Example(1); // Uncaught TypeError: Cannot set property // a of # which has only a getter

getter 与 setter 必须同级出现

class Father {
    constructor(){}
    get a() {
        return this._a;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
    set a(a) {
        this._a = a;
    }
}
let test = new Child();
test.a = 2;
console.log(test.a); // undefined
 
class Father1 {
    constructor(){}
    // 或者都放在子类中
    get a() {
        return this._a;
    }
    set a(a) {
        this._a = a;
    }
}
class Child1 extends Father1 {
    constructor(){
        super();
    }
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); // 2

extends

通过 extends 实现类的继承。

class Child extends Father { ... }

super

子类 constructor 方法中必须有 super ，且必须出现在 this 之前。

class Father {
    constructor() {}
}
class Child extends Father {
    constructor() {}
    // or 
    // constructor(a) {
        // this.a = a;
        // super();
    // }
}
let test = new Child(); // Uncaught ReferenceError: Must call super 
// constructor in derived class before accessing 'this' or returning 
// from derived constructor

调用父类构造函数,只能出现在子类的构造函数。

class Father {
    test(){
        return 0;
    }
    static test1(){
        return 1;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
}
class Child1 extends Father {
    test2() {
        super(); // Uncaught SyntaxError: 'super' keyword unexpected     
        // here
    }
}

调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

class Child2 extends Father {
    constructor(){
        super();
        // 调用父类普通方法
        console.log(super.test()); // 0
    }
    static test3(){
        // 调用父类静态方法
        return super.test1+2;
    }
}
Child2.test3(); // 3

注意要点

不可继承常规对象。

var Father = {
    // ...
}
class Child extends Father {
     // ...
}
// Uncaught TypeError: Class extends value # is not a constructor or null
 
// 解决方案
Object.setPrototypeOf(Child.prototype, Father);
 
  
本文参考：
 
  
https://www.jianshu.com/p/87008f4f8513
https://www.runoob.com/w3cnote/es6-tutorial.html

 
  
本次介绍就到这，学习愉快！ 
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(前端,#,JS,#,ES6)

        

            

                
    
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • C#中使用split分割字符串
                        互联网打工人no1
c#
                        
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
                        若博豆
java算法华为javascript
                        
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
    
                    
    • 
                    
  • 【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    
                    
    • 
                    
  • 数组去重
                        好奇的猫猫猫

                        
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • 【JS】执行时长(100分) |思路参考+代码解析（C++）
                        l939035548
JS算法数据结构c++
                        
    题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • docker
                        igotyback
eureka云原生
                        
    Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
    
                    
    • 
                    
  • 在Ubuntu中编译含有JSON的文件出现报错
                        芝麻糊76
Linuxkill_buglinuxubuntujson
                        
    在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
    
                    
    • 
                    
  • Xinference如何注册自定义模型
                        玩人工智能的辣条哥
人工智能AI大模型Xinference
                        
    环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
    
                    
    • 
                    
  • Python神器！WEB自动化测试集成工具 DrissionPage
                        亚丁号
python开发语言
                        
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net
                        佛一脚
errorreactmongodb数据库
                        
    背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
    
                    
    • 
                    
  • Vue( ElementUI入门、vue-cli安装)
                        m0_l5z
elementuivue.js
                        
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • 00. 这里整理了最全的爬虫框架（Java + Python）
                        有一只柴犬
爬虫系列爬虫javapython
                        
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
    
                    
    • 
                    
  • vue 创建项目报错：command failed: npm install --loglevel error
                        那鱼、会飞
vue.jsvue-cli3
                        
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
    
                    
    • 
                    
  • 更改npm镜像源为淘宝镜像
                        骆小骆
基于node.js
                        
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
    
                    
    • 
                    
  • COCO 格式的数据集转化为 YOLO 格式的数据集
                        QYQY77
YOLOpython
                        
    """--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances
    
                    
    • 
                    
  • 最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    
                    
    • 
                    
  • 补充元象二面
                        Redstone Monstrosity
前端面试
                        
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    
                    
    • 
                    
  • 微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    
                    
    • 
                    
  • NPM私库搭建-verdaccio（Linux）
                        Beam007
npmlinux前端
                        
    1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • golang获取用户输入的几种方式
                        余生逆风飞翔
golang开发语言后端
                        
    一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
    
                    
    • 
                                
  • 戴尔笔记本win8系统改装win7系统
                                    sophia天雪
win7戴尔改装系统win8
                                    
    戴尔win8 系统改装win7 系统详述  
 
第一步：使用U盘制作虚拟光驱： 
        1）下载安装UltraISO：注册码可以在网上搜索。 
        2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文 

    
                                
    • 
                                
  • BeanUtils.copyProperties使用笔记
                                    bylijinnan
java
                                    
    BeanUtils.copyProperties VS PropertyUtils.copyProperties 
 
两者最大的区别是： 
BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。 
既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
    
                                
    • 
                                
  • MyEclipse中文乱码问题
                                    0624chenhong
MyEclipse
                                    
    一、设置新建常见文件的默认编码格式，也就是文件保存的格式。 
在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。 
在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 
Window-->Preferences-->General -
    
                                
    • 
                                
  • 发送邮件
                                    不懂事的小屁孩
send email
                                    
      
import org.apache.commons.mail.EmailAttachment;  
import org.apache.commons.mail.EmailException;  
import org.apache.commons.mail.HtmlEmail;  
import org.apache.commons.mail.MultiPartEmail;  

    
                                
    • 
                                
  • 动画合集
                                    换个号韩国红果果
htmlcss
                                    
    动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 
1 transition  制作鼠标滑过图片时的放大效果 
 

css
.wrap{
		width: 340px;height: 340px;
		position: absolute;
		top: 30%;
		left: 20%;
		overflow: hidden;
		bor
    
                                
    • 
                                
  • 网络最常见的攻击方式竟然是SQL注入
                                    蓝儿唯美
sql注入
                                    
    NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。 
信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
    
                                
    • 
                                
  • java笔记2
                                    a-john
java
                                    
    类的封装： 
1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 
2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 
3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 
4，封装的特性： 
      4.1设置
    
                                
    • 
                                
  • [Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx”
                                    aijuans
学习Android遇到的错误
                                    
            最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。 
 
昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。 
 
我就看了一下，和她要了psd的文件，还好我有一点
    
                                
    • 
                                
  • 自己写的一个繁体到简体的转换程序
                                    asialee
java转换繁体filter简体
                                    
              今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。 
         实现的思路是重载request的调取参数的几个方法，然后做下转换。 
          
    
                                
    • 
                                
  • android意图和意图监听器技术
                                    百合不是茶
android显示意图隐式意图意图监听器
                                    
    Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递 
  
显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。 
  
隐式意图;不指明调用的名称,根据设
    
                                
    • 
                                
  • spring3中新增的@value注解
                                    bijian1013
javaspring@Value
                                    
            在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 
1.首先在applicationContext.xml中加入：    
<beans xmlns="http://www.springframework.
    
                                
    • 
                                
  • Jboss启用CXF日志
                                    sunjing
logjbossCXF
                                    
    1. 在standalone.xml配置文件中添加system-properties： 
    <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&
    
                                
    • 
                                
  • 【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码
                                    bit1129
centos
                                    
      编译必需的软件 
 
 Firebugs3.0.0 
 Maven3.2.3 
 Ant 
 JDK1.7.0_67 
 protobuf-2.5.0 
 Hadoop 2.5.2源码包 
 
  
  
  
 
 Firebugs3.0.0 
 
  
http://sourceforge.jp/projects/sfnet_findbug
    
                                
    • 
                                
  • struts2验证框架的使用和扩展
                                    白糖_
框架xmlbeanstruts正则表达式
                                    
    struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 
1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 
2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。 
本文介绍一下struts2通过xml文件进行校验的方法并说
    
                                
    • 
                                
  • 记录-感悟
                                    braveCS
感悟
                                    
    再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。 
  
2015-1-11  1. 能在工作之余学习感兴趣的东西已经很幸福了； 
2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 
3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 
4. 一天内集中一个定长时间段看最新资讯和偏流式博
    
                                
    • 
                                
  • 编程之美-数组中最长递增子序列
                                    bylijinnan
编程之美
                                    
    
import java.util.Arrays;
import java.util.Random;

public class LongestAccendingSubSequence {

	/**
	 * 编程之美 数组中最长递增子序列 
	 * 书上的解法容易理解
	 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组，
	 * 然后求排序后的数组与原数
    
                                
    • 
                                
  • 读书笔记5
                                    chengxuyuancsdn
重复提交struts2的token验证
                                    
    1、重复提交 
2、struts2的token验证 
3、用response返回xml时的注意 
 
1、重复提交 
(1)应用场景 
(1-1)点击提交按钮两次。 
(1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 
(1-3)刷新页面 
(1-4)使用浏览器历史记录重复提交表单。 
(1-5)浏览器重复的 HTTP 请求。 
(2)解决方法 
(2-1)禁掉提交按钮 
(2-2)
    
                                
    • 
                                
  • [时空与探索]全球联合进行第二次费城实验的可能性
                                    comsci

                                    
     
 
     二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验 
  至今给我们大家留下很多迷团..... 
 
     关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了 
 
     在这里,我的意思是,现在
    
                                
    • 
                                
  • easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符
                                    daizj
oracleORA-12154
                                    
    用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： 
C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl 
SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 
Copyright (c) 198
    
                                
    • 
                                
  • 简单排序:归并排序
                                    dieslrae
归并排序
                                    
    
    public void mergeSort(int[] array){
        int temp = array.length/2;
        
        if(temp == 0){
            return;
        }
        
        int[] a = new int[temp];
        int
    
                                
    • 
                                
  • C语言中字符串的\0和空格
                                    dcj3sjt126com
c
                                    
       \0 为字符串结束符，比如说： 
                      abcd (空格)cdefg； 
存入数组时，空格作为一个字符占有一个字节的空间，我们
    
                                
    • 
                                
  • 解决Composer国内速度慢的办法
                                    dcj3sjt126com
Composer
                                    
    用法： 
有两种方式启用本镜像服务： 
1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 
2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 
为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下      1   2   3   4   5    
    
                                
    • 
                                
  • 高效可伸缩的结果缓存
                                    shuizhaosi888
高效可伸缩的结果缓存
                                    
    /**
 * 要执行的算法，返回结果v
 */
public interface Computable<A, V> {
	public V comput(final A arg);

}
 
  
/**
 * 用于缓存数据
 */
public class Memoizer<A, V> implements Computable<A, 
    
                                
    • 
                                
  • 三点定位的算法
                                    haoningabc
c算法
                                    
    三点定位， 
已知a,b,c三个顶点的x,y坐标 
和三个点都z坐标的距离，la，lb,lc 
 
求z点的坐标 
原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求 
但是，由于三个点的距离可能不准，不一定会有结果， 
所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 
运行 
gcc -lm test.c 
test.c代码如下 
 

#include "stdi
    
                                
    • 
                                
  • epoll使用详解
                                    jimmee
clinux服务端编程epoll
                                    
    epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
    
                                
    • 
                                
  • Hibernate对Enum的映射的基本使用方法
                                    linzx0212
enumHibernate
                                    
      
枚举 
  
/**
 * 性别枚举
 */
public enum Gender {

    MALE(0), FEMALE(1), OTHER(2);

    private Gender(int i) {
        this.i = i;
    }

    private int i;

    public int getI
    
                                
    • 
                                
  • 第10章 高级事件（下）
                                    onestopweb
事件
                                    
    index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
    
                                
    • 
                                
  • 孙子兵法
                                    roadrunners
孙子兵法
                                    
    始计第一 
 
孙子曰： 
兵者，国之大事，死生之地，存亡之道，不可不察也。 
故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五 
曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑 
、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法 
者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校 
之以计，而索其情，曰
    
                                
    • 
                                
  • MySQL双向复制
                                    tomcat_oracle
mysql
                                    
    本文包括: 
 
  主机配置  
  从机配置  
  建立主-从复制  
  建立双向复制  
 
  背景 
按照以下简单的步骤: 
参考一下： 
 
  在机器A配置主机(192.168.1.30)  
  在机器B配置从机(192.168.1.29)  
  我们可以使用下面的步骤来实现这一点  
 
  
步骤1：机器A设置主机 
 
  在主机中打开配置文件 , 
    
                                
    • 
                                
  • zoj 3822 Domination(dp)
                                    阿尔萨斯
Mina
                                    
     题目链接：zoj 3822 Domination 
 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。 
 解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理
    
                                
    •