• 前端技术发展史、Nodejs语法


    HTML

    浏览器

    历史

    浏览器技术

    JavaScript

    JS

     ES

    V8引擎

    CSS(Cascading Style Sheets)层叠样式表

    动态网页技术

    网页布局

    同步

    异步

    前端开发

    硬件发展

     

    ES6开发环境准备及基础语法(Nodejs)

     Nodejs

     

    安装

    国内镜像可以去阿里云镜像
    https://npm.taobao.org/mirrors/node

    开发

    文档

    搜索MDN,Mozilla Developer Network,提供非常完善HTML、CSS、JS等技术资料。 
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
    
    指南(非常好的JS文档)
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
    
    使用任何一种文本编辑器,都可以开发JS,此次使用微软的Visual Studio Code开发。

    Visual Studio Code

    解决快捷键冲突

    注释

     

    str = 'hello' + /*comment*/ 'magedu'
    console.log(str)
    //结果如下
    //hellomagedu

    常量和变量

    str = 'hello' + /*comment*/ 'magedu'
    console.log(str)
    
    var a
    let b
    console.log(1,a,b)
    
    a = 1
    b = 'a string'
    console.log(2,a,b)
    
    // const c;  不可以
    const c = 100
    console.log(c)
    
    //c = 200 不可以修改
    var y // 只是声明,y值为undefined
    var x = 5 //规范的声明并初始化,声明全局或全局变量
    x = 6 /*不规范的初始化,不推荐。在严格模式下会产生异常。在赋值之前不能引用,因为它没有声明。一旦这样赋值就是全局作用域*/
    function hello()
    {
        var a   //只是声明,a为undefined,作用域在函数中
        a = 100
    }
    
    console.log(a) //未声明变量异常,ReferenceError: a is not defined
    
    // a = 200 // 不能提升作用域
    // var a = 200 ;hello(); // var提升作用域

    数据类型

     

    // 类型转换
    // 弱类型
    console.log('======string======')
    console.log(a = 3 + 'magedu',typeof(a)) //3magedu string
    console.log(a = null + 'magedu',typeof(a))//nullmagedu string
    console.log(a = undefined + 'magedu',typeof(a))//undefinedmagedu string
    console.log(a = true + 'magedu',typeof(a))//truemagedu string
    
    //  数字
    console.log('========number=====')
    console.log(a = null + 8, typeof a)//8 number
    console.log(a = undefined + 8, typeof a)//NaN number
    console.log(a = true + 8, typeof a)//9 number
    console.log(a = false + 8, typeof a)//8 number
    
    // boolean
    console.log('========bool====')
    console.log(a = null + true,typeof a)//1 number
    console.log(a = null + false,typeof a)//0 number
    console.log(a = undefined + true,typeof a)//NaN number
    console.log(a = undefined + false,typeof a)//NaN number
    console.log(a = null & true,typeof a)//0 number
    console.log(a = undefined & true,typeof a)//0 number
    
    //短路
    console.log('=======短路========')
    console.log(a = null && true,typeof a)//null object
    console.log(a = false && null,typeof a)//false boolean
    console.log(a = false && 'magedu',typeof a)//false boolean
    console.log(a = true && 'magedu',typeof a)//magedu string
    console.log(a = true && '',typeof a)// string
    
    //
    console.log('=======null======')
    console.log(a = null + undefined,typeof a)//NaN number

    字符串

    let a = 'abc';
    let b = "124";
    let c = `line1
        line2
    line3
    `//支出多行
    console.log(c)
    
    //字符串插值,要求在反引号字符串中。Python3.6支持
    let name = "tom",age =19
    console.log(`Hi my name is ${name},I am ${age}`)

    转义字符

    字符串操作方法

    let school = 'magedu'
    console.log(school.charAt(2))//g
    console.log(school[2])//g
    console.log(school.toUpperCase())//MAGEDU
    console.log(school.concat('.com'))//连接
    console.log(school.slice(3))//切片,支持负索引
    console.log(school.slice(3,5))
    console.log(school.slice(-2,-1))
    console.log(school.slice(-2))
    
    let url = 'www.magedu.com'
    console.log(url.split('.'))
    console.log(url.substr(7,2))//返回子串从何处开始,取多长
    console.log(url.substring(7,10))//返回子串,从何处开始,到什么为止
    
    let s = 'magedu.com'
    console.log(s.indexOf('ed'))//3
    console.log(s.indexOf('ed',4))//7
    console.log(s.replace('.edu','.com'))
    s = '	mag edu 
    '
    console.log(s.trim())//去除两端的空白字符。

    数值型number

     

    console.log(Number.MAX_VALUE)//1.7976931348623157e+308
    console.log(Number.MIN_VALUE)//5e-324
    console.log(Number.POSITIVE_INFINITY)//Infinity
    console.log(Number.NEGATIVE_INFINITY)//-Infinity
    console.log(Number.NaN)//NaN

    数字的方法

     

    console.log(Math.PI)
    console.log(Math.abs(-1))
    console.log(Math.log2(16))
    console.log(Math.sqrt(2))
    console.log(Math.random())

    运算符

    算数运算符

    let i = 0;
    let a = i++;
    console.log(a,i)// 0 1
    console.log(a,i++)//0 1
    a = ++i
    console.log(a,i)//3,3

    挑战题

    比较运算符

     

    console.log(100>'200')//false
    console.log(300>'200')//true
    console.log(300>'2000')//false
    console.log(3000>'2a')//false
    console.log('3000'>'2000')//true
    //宽松比较
    console.log(300 == '300')//true
    console.log('200' == '200')//true
    //严格比较 ===
    console.log(300 === '300')//false
    console.log('300' === '300')//true

     

    逻辑运算符

    位运算

     

    三元运算符

     

    console.log(('3'>30)?'true':'false')//false

    逗号运算符

    let a = 4+5,b = true, c = a >20?'true':'false'
    console.log(a)//9
    console.log(c)//false

    其他

    console.log('a' instanceof String)//false
    console.log(1 instanceof Number)//false
    a = new String('b')
    console.log(a instanceof String)//true
    console.log(a instanceof Object)//true
    console.log(new Number(1) instanceof Number)//true
    
    console.log(typeof('a'))//string
    console.log(typeof 'a')//string
    console.log(typeof a)//object
    console.log(typeof typeof a)//string

    x = 42;
    var y = 43; 
    let z = 60;
    myobj = new Number();
    myobj.h = 4
    console.log(delete x );//true   (can delete if delcared implicitly)
    console.log(delete y );//false  (cannot delete if declared with var)
    console.log(delete z );//false  (cannot delete if declared with let)
    console.log(delete Math.PI );   //false    (cannot delete predefined properties)
    console.log(delete myobj.h );   //true     (can delete user-defined properties)
    console.log(delete myobj );     //true     (can delete if delcared implicitly)
    
    var trees = new Array("redwood","bay","cedar","oak","maple")
    for (var i=0;i<trees.length;i++)
        console.log(trees[i])
    console.log("==================") 
    delete trees[3]//数组中元素被删除,但空着的位置是undefined
    for (var i=0;i<trees.length;i++)
        console.log(trees[i])

    var trees = new Array("redwood","bay","cedar","oak","maple")
    console.log(0 in trees)         // true,0在数组对象的index中  
    console.log(6 in trees)         // false,6不在数组对象的index中
    console.log("bay" in trees)     // false,bay不是属性,它是值
    console.log("length" in trees)  // true,length是对象的属性
    
    delete trees[3]
    console.log(3 in trees) //false
    
    //Custom objects
    let mycar ={
        color:"red",
        year:1998
    }
    console.log("color" in mycar)   //true
    console.log("model" in mycar)   //false
    console.log("year" in mycar)    //true

    运算符优先级

     

    表达式

     

    function* inc()
    {
        let i = 0;
        let j = 3;
        while (true){
            yield i++;
            if (!j--) return 100;
        }
    }
    let gen = inc()
    for (let i=0;i<6;i++)
        console.log(gen.next());
    /*输出结果如下:
    { value: 0, done: false }
    { value: 1, done: false }
    { value: 2, done: false }
    { value: 3, done: false }
    { value: 100, done: true }
    { value: undefined, done: true }
     */ 

    JS语法

    语句块

    //语句块
    function hello(){
        let a = 1;
        var b =2;
        c =3;
    }
    // let d = 100
    if (1){
        let d = 4;
        var e = 5;
        f = 6;
        if (true){
            console.log(d)//4
            console.log(e)//5
            console.log(f)//6
            console.log('===============')
            g = 10
            var h = 11
        } 
    }
    
    console.log(a)//不可见
    console.log(b)//不可见
    console.log(c)//函数内不可见
    console.log(d)//块作用域使用let,快外不可见;
    console.log(e)//块作用域使用var,可见    //5
    console.log(f)//块作用域隐式声明,可见   //6
    console.log(g)//可见         //10
    console.log(h)//可见         //11

    流程控制

    条件分支

    条件的False等效:
        False
        undefined
        null
        0
        NaN
        空字符串
    其他值都被视为True

    switch...case分支语句

     

    let x =5;
    switch (x){
        case 0:
            console.log('zero')
            break;
        case 1:
            console.log('one')
        case 2:
            console.log('two')
        case 3:
            console.log('three')
            break;
        case 5:
        case 4:
            console.log(4)
        default:
            console.log('other')
    }

    for循环

    for (let i=0;i<10;i++){
        console.log(i)
    }
    for (var x=0,y=9;x<10;x++,y--)
        console.log(x*y)

    while循环和do...while循环

     

    let x =3;
    while (x--){
        console.log(x)
    }
    console.log('~~~~~~')
    do{
        console.log(x);
    }while(x++<3)
    console.log(x)
    /*输出结果
    2
    1
    0
    ~~~~~~
    -1
    0
    1
    2
    3
    4
    */

    练习

     

    for(let i=1;i<10;i++){
        line = '';
        for (let j=1;j<=i;j++)
            line += `${j}*${i}=${i*j} `;
        console.log(line)
    }

    for...in循环

    let arr = [10,20,30,40]
    console.log(arr[1])
    for (let x in arr)
        console.log(x)//返回索引
    
    for (let index in arr){
        console.log(`${index}:${arr[index]}`)//插值
    }
    //C风格
    for(let i=0;i<arr.length;i++){
        console.log(arr[i])
    }
    //对象
    let obj = {
        a:1,
        b:'magedu',
        c:true
    }
    console.log(obj.a)
    console.log(obj['b'])
    console.log(obj.d)//undefined
    
    for (let x in obj){
        console.log(x)//属性名
    }
    
    for (let key in obj){//返回数组的index
        console.log(`${key}:${obj[key]}`)//插值
    }

    for...of循环

     

    let arr =  [1,2,3,4,5]
    let obj = {
        a:1,
        b:'magedu',
        c:true
    }
    
    for (let i of arr){//返回数组的元素
        console.log(i)
    }
    
    for (let i of obj){//异常,不可以迭代
        console.log(i)
    }

    break、continue

    for迭代的差别

    //for迭代的差别
    function sum(arr){
        for (let x in arr){//遍历index
            console.log(x,typeof x,arr[x])
        }
        for (let x of arr){//遍历元素
            console.log(x,typeof x)
        }
        for (let x=0;x<arr;x++){//自定义索引数值遍历
            console.log(x,typeof x,arr[x])
        }
    }
    sum([3,6,9])

    函数

     

    函数表达式

    //匿名函数
    const add = function(x,y){
        return x + y;
    };
    console.log(add(4,6));
    
    //有名字的函数表达式
    const sub = function fn(x,y){
        return x - y;
    };
    console.log(sub(5,3))
    // console.log(fn(5,3))//fn只能用在函数体内部
    
    const sum = function _sum(n){
        if (n==1) return n;
        return n + _sum(--n)//_sum只能内部使用
    }
    console.log(sum((4)))

    函数、匿名函数、函数表达式的差异

    console.log(add(4,6))
    function add(x,y){//声明提升
        return x + y;
    };
    
    //console.log(sub(5,3));//sub未定义
    //有名字的函数表达式
    const sub = function(x,y){
        return x - y;
    }
    console.log(sub(5,3))

    高阶函数

    const counter = function(){
        let c = 0;
        return function(){
            return ++c;
        };
    };
    
    const c = counter()
    console.log(c())//1
    console.log(c())//2
    console.log(c())//3

    const map = function(arr,fn){
        let newarr = [];
        for (let i in arr){
            newarr[i] = fn(arr[i])
        }
        return newarr
    }
    console.log(map([1,2,3,4],function(x){return ++x}))

    var map = function* (fn,arr){
        for (i in arr)
            yield fn(arr[i]);
    };
    let newarr = map(x => x+10,[1,2,3])
    for (x of newarr){
        console.log(x)
    }

    箭头函数

    //以下三行等价
    console.log(map([1,2,3],(x) => {return x*2}))
    console.log(map([1,2,3],x => {return x*2}))
    console.log(map([1,2,3],x => x*2))

    函数参数

    普通参数

     

    const add = (x,y) => x+y;
    console.log(add(4,5));//9
    
    const add1 = (x,y=5) => x+y;
    console.log(add1(4,6));//10
    console.log(add1(4));//9

    const add2 = (x=6,y) => x+y;
    console.log(add2());//NaN
    console.log(add2(1));//NaN
    console.log(add2(y=2,z=3));//5

    可变参数(rest parameters剩余参数)

     

    //可变参数
    const sum = function(...args){
        let result = 0;
        for (let x in args){
            result += args[x];
        }
        return result
    }
    console.log(sum(3,6,8))//17
    console.log(sum((3,6,8)))//8
    console.log(sum([3,6,8]))//03,6,8

    arguments对象

    (function (p1,...args){
        console.log(p1)
        console.log(args)
        console.log('---------------')
        console.log(arguments,typeof arguments)
        for (let x of arguments)//{ '0': 'abc', '1': 1, '2': 3, '3': 5 } 这里没报异常!?
            console.log(x)
        for (let x in arguments)
            console.log(x)
    })('abc',1,3,5)
    let arguments = {'0': 'abc', '1': 1, '2': 3, '3': 5}
    console.log(arguments,typeof arguments)
    for (let x in arguments)
        console.log(x)
    for (let x of arguments)//报异常
        console.log(x)

    ((x,...args) => {
        console.log(args);//数组
        console.log(x);
        console.log(arguments);//不是传入的值
    })(...[1,2,3,4])

    参数解构

     

    const add = (x,y) => {console.log(x,y);return x,y}
    console.log(add(...[100,200]))//   100 200  200
    console.log(add(...[100,200,300,3,5,5]))// 100 200 200
    console.log(add(...[100]))//100 undefined undefined

    函数返回值

     

    const add = (x,y) => {return x,y}
    console.log(add(4,100))//110
    
    a = (x=5,y=6,true)
    console.log(a)//true
    b = (123,true,z='test')
    console.log(b)//test
    function c(){
        return x=5,y=6,true,'ok'
    }
    console.log(c())//ok

    作用域

    //test1.js
    //函数中变量的作用域
    function tets(){
        a = 100;
        var b = 200;
        let c = 300;
    }
    //先要运行test函数
    tets()
    console.log(a)
    // console.log(b)//不可见
    // console.log(c)//不可见
    //test2.js
    //块作用域中变量
    if(1){
        a = 100;
        var b = 200;
        let c = 300;
    }
    console.log(a)
    console.log(b)
    // console.log(c)//不可见

    做一枚奔跑的老少年!
  • 相关阅读:
    python调包——hashlib加密
    初识-图论基础+拓扑排序的实现
    初识 基本数据结构和stl
    【寒假作业三】-带着作业的幌子打开影视剧的奇妙体验和学会挂作业的机
    scapy模块的学习
    【寒假作业三】——高级代码拼接工人的养成(改)
    寒假作业二-自救指南(网络基础)
    【寒假作业一】-编写踩雷指南
    寒假作业一-Github部分
    markdown基础(试水)
  • 原文地址:https://www.cnblogs.com/xiaoshayu520ly/p/11324416.html
Copyright © 2020-2023  润新知