热门课程

免费试听

上课方式

开班时间

当前位置: 首页 -   文章 -   新闻动态 -   正文

前端开发:node.js入门

知了堂姐
2024-07-08 17:22:16
0

把js从前端语言变成了服务端语言。

使用

node helloworld.js

安装额外的包

npm install mysql
安装很慢的话,可以更换源为中国源
npm install -g cnmp --registry="
https://registry.npm.taobao.org"cnpm install xxx// -g 为全局安装//什么都不写就说本地安装,加入到./node_modules//-s -D,一个是运行环境要有,一个是开发环境要有

卸载包

npm uninstall xxx

导包

const http = require('http');

示例1 httpserver.js

前端开发:node.js入门

示例2 mysql.js

//1.导包
const mysql = require('mysql')
//2.创建连接对象
var connection = mysql.createConnection({
    host:"127.0.0.1",
    port:3306, 
    user:"root",
    password:"root", 
    database:"test"
});
//3.配置数据库连接信息
//4.开辟链接
connection.connect();
//5.执行
sqlconnection.query("select * from user",function(error,results,fields){  
    if(error)
        throw error;
    console.log("results=",results);
});
//6.关闭连接
connection.end();

ES6

let const var

let:变量,并且能够防止变量穿透 const: 常量,不可修改
之前都用var,无法区分变量常量,而且无法防止变量穿透var name = "xiaobo";var PI = Math.PI;---现在使用 let 和 constlet name = "xiaobo";const PI = Math.PI;//不可修改

变量穿透

//使用var 无法防止变量穿透  
for(var i = 0;i<5;i++){    
    console.log(i);    }
//0,1,2,3,4
console.log(i);
//5 不希望的结果
//使用let 可以 
for(let i = 0;i<5;i++){    
    console.log(i);    
}
//0,1,2,3,4 
console.log(i);//报错,i is not defined

模板字符串

使用两个反括号包裹起来 `` 即可
        var person = {    
            name:"xiaocainiao",  
            address:"dalian"  
        } 
        let address = "我是"+person.name+",在"+person.address;//我是xiaocainiao,在dalian    
        let address2 = `我是${person.name},在${person.address}`;//我是xiaocainiao,在dalian        
        console.log(address);    
        console.log(address2);

默认参数

函数的参数,没有赋值的时候是undefined,多个参数,没有全部传值就会计算出错。 现在可以使用默认参数
function sum(a,b){
return a+b;
}
var res = sum(70);
console.log(res);
//结果为 NaN------------
function sum(a=100,b=100){
return a+b;
}
var res = sum(70);
console.log(res);//结果为 170

箭头函数

1.去掉function,加上箭头 2.如果方法中只有一句return,没有别的逻辑,可以去掉大括号和return 3.如果参数只有一个,可以取消参数的括号
    var sum = function(a,b){ 
        return a+b; 
    }
    //变体1  
    var sum2 =(a,b)=>{ 
        return a+b; 
    }
    //变体3 
    var sum3 = (a,b)=>a+b; 
    //4 如果只有一个参数,可以省略括号    
    var twobei = a=>a*2;    
    console.log(twobei(100));//结果为200

对象初始化简写

变量名和对象的key一致,对象内部可以简写 对象内的:function可以省略,只剩下括号
let name="xiaocainiao";
let phone=12345678901;
let info = {  
    name:name,
    phone:phone,
    go:function(){     
        console.log("go!go!go!"); 
    }}
//可以简写为以下,前提是变量名和对象的key一致。
let name="xiaocainiao";
let phone=12345678901;
let info = {   
    name, 
    phone, 
    //:function可以省略,只剩下括号
    go(){  
        console.log("go!go!go!");
    }
}

对象解构

对于对象取出属性或者执行对象的方法,有两种方式 1.obj.x obj.y() 2.obj[“x”], obj“y” 现在新添一种,var{x,y} = obj;也就是快速取出了
        let name="xiaocainiao";   
        let phone=12345678901; 
        let info = {     
            name,  
            phone,
            //:function可以省略,只剩下括号    
            go(){
                console.log("go!go!go!");  
            }
        }
        for(var x in info){
            console.log(x);
            console.log(info.x); //undefined 
            //这是用 `.`方式的缺点,它不回去寻找x背后的值是name或者phone,    
            //而是就直接寻找info.x,没有就undefined了 
            console.log(info[x]);//可以查出    
        }
            //新增方式 
            //但是这种,应该要求解构出来的变量名需要与对象属性名一致,这样就不能用对象构造时候的简写了。             //否则新定义的变量就与上面的变量冲突了     
            //所以似乎没啥用 
        let {name,phone,go} = info;     
        console.log(name);
        console.log(phone);  
        go();

传播操作符

...obj 解构之后的对象,可以拿到除了解构出的属性,剩余的所有属性 具体见代码
        let info = {        
            name:"cainiao",   
            phone:123456,     
            address:"DLUT",   
            go(){        
                console.log("go!go!go!");     
            } 
        }   
        let {name,phone,...info2} = info;    
        console.log(name);  
        console.log(phone);   
        console.log(info2);//这里会拿到除了name和phone的所有属性。     
        //cainiao  
        //123456    
        //Object { address: "DLUT", go: go()}

数组Map

假设有一个需求,要对数组所有内容*2,之前只能使用for循环的方式,现在可以用map迅速搞定
let arr1 = [1,2,3,4,5];
let arr2=[]; 
for(let i = 0;i val*2);
原理是什么?arr.map的时候,实际上是产生了新的数组,然后取出原数组的每个字,计算后,return进行回填到对应位置 v1为数组的第i个元素, v2为第i-1个元素,第一次循环时为0 v3为数组本身 最多三个,v4就not defined
//更复杂的形式   
let arr1 = [1,2,3,4,5];     
let arr2 = arr1.map(function(v1,v2,v3){   
    console.log(v1);        
    console.log(v2);       
    console.log(v3);     
    return v1+v2+v3;     
});
//v1为数组的第i个元素,v2为第i-1个元素,第一次循环时为0
//v3为数组本身
//最多三个,v4就not defined
//v1和v2是值相加,接着再加对象,变成了字符串拼接,结果为
/*Array(5) [
    "11,2,3,4,5", 
    "31,2,3,4,5",
    "51,2,3,4,5",
    "71,2,3,4,5",
    "91,2,3,4,5" ]
*/

数组reduce

v1是循环计算位,第一次就是数组的第一个数 接着每次都是计算后的结果暂存 v2是第i+1位 v3是第i位(好复杂。。。) v4 和map的v3一样,是数组本身 v5 not defined
        let arr1 = [1,2,3,4,5];      
        let arr3 = arr1.reduce(function(v1,v2,v3){     
            console.log(v1);//1 4 9 16 
            console.log(v2);//2 3 4 5   
            console.log(v3);//1 2 3 4      
            return v1+v2+v3;  
        });   
        console.log(arr3);//25

总结

后端java程序员,这方面想必应该是了解就好,springboot 还没有学会,就先不在这里深究了。以后一定回来继续深入了解。


大家都在看

前端培训班出来能找到工作吗?培训机构得选择非常重...

2024-07-08 浏览次数:0

前端开发需要学什么?前端主要学什么?

2024-07-08 浏览次数:0

毕业生转行为什么首选网络安全?

2024-07-08 浏览次数:0

月薪5k vs 10k ,多半是因为忽略了这些秋...

2024-07-08 浏览次数:0

转行前端能拿多少工资?0基础学前端好找工作吗?

2024-07-08 浏览次数:0

程序员职场生态:近8成本科毕业生起薪过万,跳槽首...

2024-07-08 浏览次数:0
最新资讯