zoukankan      html  css  js  c++  java
  • JavaScript百炼成仙知识点小记

    直接量和变量


    直接量:数值 布尔 字符串 null undefined 对象和函数

    对象是存储数据的一个容器,函数就是应用程序处理某一个系列逻辑的过程设计

    null 表示也有值

    undefined 表示变量未定义

    变量:就是指向了某个直接量或者其他变量的‘钥匙’;

    对象数据类型:

    js中的数据可以分为两类,原生数据类型和对象数据类型。所谓对象数据类型,是一种复合型的数据类型,它可以把多个数据放在一起。原生数据类型,比如数值型 浮点型 布尔型等都只能存放一些直接量,也就是说单一的数据

    对象:
    var container={};
    创建对象最常用的方式,创建对象以后,就相当于开辟了一块内存,对象中数据是以键值对的形式存在,称为对象的属性,键和值之间使用:隔开,多个数据之间使用,隔开,键就是属性名称,值就是属性值。
    对象访问其中的属性使用.,访问一个不存在的属性,结果是undefined(不存在的属性,因此它是未定义的)

    对象的取值:

    对象不仅可以用点号(.)访问它的一个属性,也可以用中括号([])。如果用中括号,里面就允许再写一个变量。当然了,写字符串也是可以的。
    如果事先属性的名称未知,或者调用的属性是动态变化的,就不能使用点号了,使用中括号可以最大程度地提升对象调用属性的灵活度。

    for循环和while循环

    for(var i=0; i<10;i++){}
    var i=0;的意思是定义了一个变量i,第二句是i<10,表示进入循环体的条件。({})循环体中的代码是需要被多次执行的。第三句:i++是要在循环体执行完之后才会被执行。
    for(语句1,;语句2;语句3){被执行的代码块}
    语句1 在循环开始前执行
    语句2 定义运行循环的条件
    语句3 在循环已被执行之后执行
    while(条件){需要执行的代码}

    对象内容的遍历 for in

    js运算符

    = 赋值运算符

    + - * /加减乘除运算符

    ++ -- 自增 自减运算符

    % 取余运算符

    var a = 1; //定义变量a的值是1,
    var b; //变量b未赋值,undefined
    var sum = (b = a+++--a) + a-- + b++;
    先执行(b=a+++--a),结果b=2; a++ a先参与运算再自增1,第一步得到1,1+--a ,执行--a,这时a=2;--a自减1再运算--a的结果为1 b=1+1
    a-- ,此时a=1; 先运算 1+;b++ 此时b=2,b++ 先运算

    sum==(b=1+1)+1+b 结果是5 ,此时a=0; b=3

    数组:

    数组是一个非常灵活的类型。就是一个容器,可以存放一个或者多个对象。
    数组有4中定义方式
    1 直接量定义数组
    var arr=[1,2,3,4];
    2 构造函数的方式
    var arr=new Array();//创建一个长度为0的空数组
    在js中,每个类型其实都是一个函数作为支撑,Array也叫作构造函数。与第二种方法也是采用构造函数创建一个数组对象。
    3 var b=new Array(8); //创建一个长度为8的数组,为8个空元素,但是依然占据内存空间
    4 var c=new Array('first','second','third');//创建一个长度为3的数组,并赋与初始值

    数组只有个属性,length。表示数组所占内存空间的数目,而不仅仅是数组中元素的个数。

    数组的方法
    push 可以把一个元素添加到数组里面
    pop splice 删除数组元素
    pop 删除数组尾部的元素,先进入的元素后删除,后进入的元素先删除
    splice 插入 删除 或者替换数组元素,它不仅会在原有的数组上进行修改,还会返回被处理的内容,
    splice(开始位置,删除元素的个数,插入部分)
    join 把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分割的,join(分隔符)

    函数

    函数定义

    需要使用关键字 function
    function a(){}
    var a=function(){} 变量名就是函数名
    js代码在运行之前会经过一个编译过程,分为3个步骤。
    分词 js代码其实激素hi由一句句话组成的,分词的目的是把这些代码分解为一个个有意义的代码块;
    解析 由js编译器对刚才分词得到的一个个代码块进行解析,生成一棵抽象的语法树。js代码是没有办法直接运行的,要运行js代码,就需要通过js编译器对其进行编译,只有编译之后的代码才可以被识别,然后通过js引擎执行代码逻辑。由于js这门编程语言的特殊性,其编译的过程一般就在代码执行前的几微妙甚至更短的时间之内。所以直观看,编译和运行是同时发生的,或者说我们根本感觉不到编译的存在。
    抽象语法树定义了代码本身,通过操作这棵树可以精准地定位到赋值语句、声明语句和运算语句。

    作用域

    js中只有函数作用域和全局作用域

    参数传递

    任何一个变量在被赋予真正的值之前,其在编译阶段都是undefined。函数的参数可以被理解为一种预备变量,可以这样说,任何变量在被赋予真正的值之前,其在比编译阶段都是undefined。
    arguments

    闭包

    function test(){
    var a=100;
    return function(){
    console.log(a)
    }
    }

    产生闭包的条件
    1 在函数内部也有一个函数, 返回的匿名函数
    2 函数内部的函数用到了外部函数的局部变量。匿名函数使用到了外部函数定义的局部变量a
    3 外部函数把内部函数作为返回值reutrn出去 匿名函数被reuturn 出去
    好处
    正常情况下,我们调用一个函数,其里面的局部变量会在函数调用结束后销毁,这也是我们在全局作用域中无法访问函数局部变量的原因。但是,如果你使用了闭包,那么就会让这个局部变量不随着原函数的销毁而销毁,而是继续存在。闭包里面可以访问外部函数中局部变量,这种变量销毁,需要手动赋值null,js会走动扫描函数中值为null的变量,一旦找到就会自动清除这些无用的变量。

    自执行函数

    很多时候,我们只想执行一个函数,却无所谓这个函数叫什么名字。那么在这种情况下,就可以考虑使用自执行函数了。
    语法:
    (定义一个没有名字的函数)();
    (
    function(){
    console.log(123);
    }
    )();

    自执行函数经常和函数闭包一起使用

    上面的例子可以改写成:
    function test(){
    var a=1;
    return (function(){
    console.log(a);
    })();
    }

    new 一个函数

    this永远指向当前函数的调用者,this一旦出现就一定出现在函数中,this指向函数的调用者,这个函数是谁调用的,那么this就是谁

    js中分为全局作用域和函数作用域,在全局作用域中顶底的任何东西,不管是一个变量还是一个函数,其实都是window对象的。

    如果调用函数的时候使用了new关键字,在函数内部就会产生一个新的对象,也就是函数的真实调用者,this关键字指向的那个对象,然后函数默认返回了这个新的对象。这种函数叫做构造函数,通过这种方式,我可以通过构造函数构建一个对象模板。
    function test(){console.log(this)}
    var newObject=new test();
    newObject就是函数里面的this
    对象模板就是指用一个函数的形式设计一种对象的种类。
    因为函数在适用new 关键字以后会从内部新产生一个对象出来,而this就指向了这个对象。

    回调函数

    回调函数就是指把一个函数的定义当作参数传递给另一个函数。
    函数作为参数

    精度

    0.1+0.2=0.30000004
    精度丢失问题 不仅是加减法 小数乘除法的计算依然会有精度丢失的问题
    解决办法:化浮为整

    小数的计算会丢失精度,整数的计算没有这个问题,可以先把小数化为整数进行计算,再除以一个共同的倍数

    //js小数的加减乘除都有精度丢失的问题,整数没有你这样得问题

    function add(num1,num2){
    num1=num1.toString();num2=num2.toString();//转为字符串
    let ws1=0,ws2=0;//获取小数点位数
    ws1=num1.split('.')[1]?.length||0;
    ws2=num2.split('.')[1]?.length||0;
    num1=parseInt(num1.replace('.',''));//去掉小数点,不用数值乘以两个数的位数差值的10的幂的原因是:小数的乘法也要精度丢失的问题
    num2=parseInt(num2.replace('.',''));
    let beishu=Math.pow(10,Math.abs(ws1-ws2));
    let maxWs=ws1>ws2?ws1:ws2;//小数点位数最大值
    //Math.abs(ws1-ws2),获取两个数值的位数差值,
    //beishu就是较小数值补齐位数需要相乘的数Math.pow(a,b)得到a的b次幂
    //比较小的数,补齐位数
    num1>num2?(num2=num2*beishu):(num1=num1*beishu)
    return (num1+num2)/Math.pow(10,maxWs)
    }

    函数的三大要义

    第一 理解返回值 参数列表 和函数体
    第二 业务逻辑
    第三 函数的调用

    HTML超文本标记语言,功能比普通的文本更加强大,是使用一组标签对内容进行描述的语言,它不是编程语言,而是一种解释性语言,它没有逻辑顺序,只有结构。

    jQuery选择器,css选择器

    vue

    处理事件冒泡

    .stop 阻止事件冒泡
    .prevent 阻止提交,form表单组件和a链接组件都会导致页面刷新和跳转。如果不希望页面刷新,则可以加上.prevent以阻止这种默认的刷新操作。 .prevnet 只对form和a标签有效。
    .capture 作用是优先触发,就是优先级的调整。
    .self 当仅单击元素本身时,只允许元素自己触发,子元素无法触发。
    .once 只触发一次

    this指向函数的调用者

    setTimeout(function(){console.log(this);},20000); this出现在函数中,this指向函数的调用者,setTimeout函数是一个延时函数,属于window对象,所以this指向的是window。
    在实际的代码编写过程中,每当遇到这种回调函数的情况,一定要特别小心,重点要看当前这个函数是不是Vue对象自己的函数,函数都放在methods里面的,其中也并没有一个叫做setTimeout的函数,setTImeout函数式一个延时函数,属于window对象。所以上面的代码相当于这样 window.setTimeout(function(){console.log(this);},20000);
    在setTimeout中处理vue的data数据,可以在函数外面定义 let that=this;将Vue对象存起来,然后在回调函数里面调用即可;

    组件component

    组件的名字驼峰式的命名法,在调用组件的时候需要格外注意,每次要换成大写字母的地方都需要额外添加一个半字线(-),然后大写字母转变成小写字母

    监听 watch
    计算属性 computed
    过滤器 filters

    {{today | dateFormat}}
    过滤器可以叠加使用,比如添加样式,需要使用v-html,vue 2.0开始不再支持v-html中使用过滤器了,解决办法是把过滤器当成一个普通方法进行调用。在定义的Vue对象中,所有过滤器都会被挂载在$options.filters对象上,所以我们可以直接这样写:
    v-html="$options.filters.dateFilter(today)"//v-html="today|dateFilter|boxStyle"不支持这种写法

    node

    node就是让js也可以编写服务器的代码

    npm 模块管理,模块的下载和发布

    package.json
    name:模块的名字
    version:版本号
    description:模块的描述
    main:代表模块的启动文件,一些复杂的模块可能会使用到一些其他资源,但是模块的启动文件,或者说入口只能有一个。
    npm允许再package.json文件里面使用scripts字段定义脚本命令。
    scripts:{
    'test':"echo 'this is a test'"
    }
    test是命令,npm run test ;echo表示在屏幕上输入一段文字。
    npm 所有的穆凯都发布在http://www.npmjs.com上面,
    在发布代码之前,需要在npm.js上注册一个账号,才有权限发布自定义的模块;

    模块发布

    npm adduser 添加用户
    npm publish 发布模块

    npm 安装模块

    npm install 模块名
    运行结果:
    自定生成一个package-lock.json,在node——modules中就可以看到我们的模块了。

    npm 一般运行速度比较慢,事假发开中应使用国内的服务器地址,使用cnpm

    使用vue-cli搭建项目

    vue-cli就是进行vue组件化开发的一个脚手架。可以理解为了一项目模板

    安装vue-cli
    npm install -g @vue/cli@3.0.1
    -g 全局安装,安装之后,在任何地方都可以使用Vuecli脚手架了
    需要安装一个原型工具
    cnpm i -g @vue/cli-service-global@3.0.1
    版本号一定要一致,不然会出现一些莫名其妙的错误。


    vue-cli创建的项目默认支持ES6的语法
    es6: let 实现块级作用域,内部变量不会影响全局
    const 定义常量 提升了js的安全性

    变量的解耦赋值

    作用是把获取对象中方法以及赋值给对应变量的过程一次性做完。
    let {name='张三',age,sxe}=Person;

    字符串升级
    es6

    1 允许字符串直接通过for循环的方式遍历
    for(let s of str) 这里用到的是of不是in,如果是in,则获取的是每个字符对应的下标。
    2 允许反引号进行一些简化的字符串定义,模板字符串 `你好,${name}`,这一改进支持了换行和变量注入。
    3 字符串补全
    例如:依次打印0~99,但是不足2位的数字需要用0左补齐,
    for(let i=0; i<100;i++){console.log(i.toString().padStart(2,'0'))}
    padStart:返回新的字符串,表示用参数字符串从头部(左侧)补全原字符串
    padEnd:返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串
    第一个参数:生成字符串的最小长度,第二个参数:用来补全字符串,默认是空格;
    字符串允许被当做数组一样使用,你可以用下标的方式获取字符串中某个位置的字符。

    Proxy 代理

    在支持Proxy的浏览器环境中,Proxy(target,handler)是一个全局对象,它可以被直接使用。Proxy是一个构造函数,target是被代理的对象,handler是声明了各类代理操作的对象,最终返回一个代理对象。外界每次通过代理对象访问taregt对象的属性时,就会经过handler对象,从这个流程来看,代理独享很类似middleware(中间件)。那么Proxy可以拦截什么操作呢?最常见的即使get set 对象属性等操作。

    Proxy的作用就是允许我们声明一个代理,对某个对象进行一些特殊的访问拦截。一个Proxy对象由两个部分组成:target handler。在通过Proxy构造函数生成实例对象时,需要提供者两个参数。target即目标对象,handler是一个对象,声明了代理target的指定行为。

    强化后的数组

    快速构建新数组
    Array.of将参数中的所有制最为元素而形成数组
    Array.from 可以将类数组或可迭代对象转化为数组,类数组对象就是一种可以遍历的对象,只要对象由length属性,就可以被称为类数组,可以接收第二个参数,就是一个map的回调函数,用于对每个元素进行处理,放入数组的就是处理后的元素。
    find
    findIndex
    fill 将一定范围索引的数组元素内容填充为单个指定的值
    copyWithin 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素
    entries
    keys
    values

    数组复制
    ...

    强化后的函数

    箭头函数 允许省略function关键字,直接用一个箭头声明一个函数

    箭头函数中的this对象是定义函数时的对象,而不是使用函数时的对象。一个小窍门:只要使用了箭头函数,就不管这个函数本身了,在外面寻找最近的大括号,然后看这个大括号处在怎么样的环境中,this就指向它。
    let Person={
    name:'zahngsan',
    getName:()=>{
    return this.name
    },
    getName1:function(){return this.name},
    sayHi:function(){
    setTimeout(()=>{console.log(this.name)},3000);
    },
    sayHi1:function(){
    setTimeout(function(){console.log(this.name)},3000);
    },
    sayHi2:()=>{
    setTimeout(function(){console.log(this.name)},3000);
    },
    sayHi3:()=>{
    setTimeout(()=>{console.log(this.name)},3000);
    }
    };
    Person.sayHi()//箭头函数,找最近的大括号,就是sayHi,this就是Person对象
    Person.sayHi1()//不是箭头函数,setTImeout是window的方法,this就是window
    Person.sayHi2()//不是箭头函数,setTImeout是window的方法,this就是window
    Person.sayHi3()//箭头函数,找最近的大括号,就是sayHi,sayHi也是箭头函数,继续找最近的大括号,就是window,this就是Window对象

    更加灵活多变的对象

    let name='zhangsan'; let obj={name:name};可以简写:let obj={name};//左右两边的名字一样
    属性名称是一个变量:
    let key='name'; let obj={[key]:'zhangsan'};

    promise对象和async函数

    promise(resolve,reject) 处理异步操作,then catch

    async函数和await关键字(ES7)
    async fun1(){//只有加上了async关键字的函数,内部才可以使用await关键字
    let data=await getJosn();//getJson是一个Promise对象
    }

  • 相关阅读:
    Hbase数据库简介
    v8引擎详解
    TCP、UDP和HTTP详解
    关于websocket的代码,实现发送信息和监听信息(前端 后端(node.js))
    浏览器的渲染流程
    事件的各个阶段
    回流和重绘
    Nginx入门教程
    解决浏览器跨域
    TCP三次握手
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/15602712.html
Copyright © 2011-2022 走看看