华清远见JS阶段经验分享

js基础知识

1.数据类型:四基两空一对象

-四基: number(数值类型) 、string (字符串类型) 、 bool(布尔类型)、 symbol(符号类型)

 - 两空: Null (空对象,空引用) Undefined (未定义的空值)

 - 一对象: Object (对象类型,复杂数据,引用数据类型)

2. 变量:变量是存储数据的容器,通过这个容器我们将程序中所用到的数据进行保存

js中如何声明并创建一个变量:语法  var 变量名

方式一:先声明,再赋值

 1、先声明并创建一个变量 num

 2、再对变量进行赋值,将赋值号右边的数据赋值到左侧

 var num1

 num1 = 10

console.log(num1);

方式二:声明创建的同时进行赋值,变量的初始化

 var num2 = 3.14

 console.log(num2);

注意:如果只是声明了变量,但没有对其进行赋值,该变量的默认值为 undefined

3.标识符

标识符:就是为变量、函数、形参、对象属性、对象方法等命名的一段字符

  标识符的命名规则:

  - 1、标识符只能由数字、字母、下划线、$组成

  - 2、不能以数字进行开头

  - 3、不能使用关键字或者保留字作为标识符的名字

            - 关键字:if  else  for  return ...

            - 保留字:目前某些单词并没有实际的含义,未来可能会被赋予其含义的单词

   - 4、标识符的命名严格区分大小写

   - 5、标识符的命名应该遵循'见名知义'

    - 6、如果标识符由多个单词组成应采用 驼峰命名法   abcAbcBcc

4.运算符

 1)算数运算符

  + - * /  %(取余)  **(幂运算)

  +:将加号两边的number数据进行相加 得到一个相加后的值

   如果加号两边不是number类型(string除外) 他会先将其隐式转换为number型再计算

   注意:加号运算也可以用作字符串的拼接 当加号两侧的有一边为string 加法运算变成了字符串的拼接, 通常利用该特性进行两个字符串拼接

-:没有拼接作用 将字符串转为number 如果字符串里含有字母得到结果为NaN

*:乘以NaN 还是NaN

/:数学意义上的除法 会有小数点

%:两个number类型进行模运算得到的是两数相除的余数

2)单目运算符(一元运算):

对一个数据进行运算  

 typeof    new  delete   自增、自减运算符(单目运算)  

++(自增)

前自加  ++变量名  将变量名进行自加一后再参与后续计算

后自加  变量名++    用当前值进行运算 运算完毕后 再将变量的值加一

 不管前自加还是后自加最后变量结果都会加一

 --(自减)

与上面一样只是加减不一样

3)比较运算符

  > < >= <=

  将左右两侧表达式进行数据的比较 得到一定是逻辑值,比较运算符得到的结果 要么true要么false

4)相等运算符

  == !=  ===  !==

 ==  相等 比较左右两边值 如果左右两边数据类型不同 会先进行隐式转换统一后 再比较      

 === 全等运算  如果两边数据类型不一样会之间返回false 不进行隐式转换

 !=  不等  比较左右两边值 如果左右两边数据类型不同 会先进行隐式转换统一后 再比较

 !==  不全等  如果两边数据类型不一样会之间返回true 不进行隐式转换

5) 逻辑运算符

 与(&&) 或(||) 非(!) 将两边进行逻辑比较 最后得到逻辑值 true false

 逻辑与:表达式1&&表达式2  从左往右 计算逻辑值

 一假既假 全真才真,遇到第一个false返回其表达式的值 如果没有遇到 就将最后一个表达式的值返回

注意:js中的逻辑与是短路与 一旦表达式1为false 不再进行表达式2运算 逻辑表达式结果直接为false

逻辑或: 表达式1||表达式2

一真既真 全假才假

遇到第一个true返回其表达式的值 如果没有遇到 就将最后一个表达式的值返回

注意:js中的逻辑或是短路或 一旦表达式1为true 不再进行表达式2运算 逻辑表达式结果直接为true

不管是逻辑与还是逻辑或 是将表达式的值 作为整个逻辑表达式的值进行返回,通过非运算将其他类型的值转换为布尔类型 如果对一个值连续取反就会得到该值的逻辑值

6)括号运算符

 括号也是一种运算符并且优先级最高 有括号先算括号

7) 逗号运算符

在大多数时候作为分隔符使用 比如多个变量声明时,也可以作为运算符使用

  ,号表达式的值是将最后一个表达式的值作为整个逗号表达式的值返回

表达式1,表达式2,表达式3  看最后一个表达式的值

8) 条件运算符

也叫三目运算符 :表达式1 ? 表达式2:表达式3

计算过程:首先计算表达式1的逻辑值如果为true 那么将表达式2的值作为整个表达式的值返回,反之将表达式3的值返回

9)赋值运算符

  切记不是等于符号  变量数据改变只能通过赋值运算

10) 复合赋值运算符

  +=  -=  *=  /=  %=

5.流程控制语句

 -顺序结构 整体运行轨迹是从上往下执行

 -选择结构

  -单分支 if

    语法 if(表达式)

          语句;

if 语句执行流程 到执行到这句时先判断括号中表达式值的判断true 或者false  然后是否执行if 后的第一条 ,  if 语句可以嵌套

-多分支 if else

要么执行if 要么执行else

                if(表达式)

                {

                }

                else{

                }

 嵌套规则:else 永远是找离他最近未配对的if

-条件分支 switch case

switch(key){

                        case 表达式:

                            语句

                        case 表达式:

                            语句

                        default:

                            语句

    }

 流程:

1.计算switch后面key的值

 2.将刚才计算的值与case后的表达式进行匹配想不想等 不论真假都会执行case 表达式的内容

 3.字符串不会转换为数值

 4.一旦匹配到一个case后会执行之后所有的case 通过break强制中断后续的执行

  -循环结构

  while

 循环语句,语法规则:

                while(表达式){

                    语句

                }

流程:

1.计算括号中的表达式值 为true 就执行循环体 执行完毕后会进行表达式下一次判断 直到表达式为false

 注意:如果表达式最后的值不是布尔值  会进行隐式转换

避免死循环 指定两个东西   1.循环控制变量  2.更新循环控制变量

 do{

                代码

            }while(表达式)

 执行流程:

  1.先执行一次循环体的内容

  2.执行完毕后判断while表达式的值 如果值为true才会继续执行循环体 反复进行这一步直到为false 就会跳出循环

while和 do while区别

如果使用两个方法解决相同问题 当第一次不符合条件时 do while 比while多执行一次

  for(表达式1;表达式2;表达式3)

            {

                ....

            }

1.表达式1 循环变量的定义和初始化  只执行一次 不参与循环

2.计算表达式2的值 为true 则执行循环体里面的内容

3.执行完后回到表达式3 对循环控制变量的更新 更新完毕后跳到表达式2进行判断  直到表达式2为false

  注意:以上for语句中三个表达式是可以省略的

   1)如果省略表达式1 没有影响 循环控制变量定义要写在外部

   2)如果省略表达式2 for语句将会陷入死循环

   3)如果省略表达式3 有可能造成死循环

JS重难点

1.函数

函数:已经封装好的可以重复调用 实现某种功能的代码块

-多变 单从名字可以看出

-不同环境中称呼会发生变化

创建和声明:

本质上是两个步骤

1.在堆空间中创建函数

 2.在当前作用域下声明该函数

  js中如何创建一个函数:

   //无参函数  声明并创建

                    function 函数名(){

                        函数体:

                        ....


 

                    }

                    //有参函数

                    function 函数名(形参列表){

                        函数体:

                        ....


 

                    }

注意:函数名 形参变量 也是标识符也要遵守标识符规则

 传参的规则(软性规则)

            1.遵循参数的顺序一致

            2.遵循参数的个数一致

            3.遵循参数的类型一致

函数是一个表达式 函数表达式默认返回值是undefined,如果需要指定返回值 请使用return语句进行函数返回值

 return 表达式

return语句除了可以指定函数返回值 还可以结束当前函数的执行

函数也是对象的一种 称之为函数对象 也是一种数据,函数名和变量名运行同名 同名后数据会被覆盖

函数的参数传递 分为两种情况:

-值传递 当函数在调用时实参数据是基本数据类型时 传递给形参的是值 改变的形参不影响实参

-地址传递 当函数在调用时实参数据是引用数据类型时 传递给形参的是地址 改变的形参影响实参

实质上都是值传递(基本数据的值 引用数据的值)

2.this关键字

this关键字:当函数被调用时 运行环境会自动向该函数隐式传入this对象

this 的指向是变化的 在不同情况下函数的执行中 this的指向是不一样的,this 类似于语文上的‘这’是一个代词

-1.当函数作为普通函数调用执行时  函数名() 、 函数表达式()(IIFE) 这时函数的this指向window

-2.当函数作为某个对象的方法进行调用时 该方法中的this 指向的是调用者而非持有者  .左边的表达式就是调用者

对象名.方法()  表达式.方法()  对象名[方法名]()

-3.构造函数的this指向是一个新创建的{}对象

注意:不只是函数下才有this 全局作用域下也有this 指向window

3.原型属性

 原型对象:存放在prototype属性或者————proto__属性中的对象 称作原型对象

prototype 存放在该属性中的对象称作为显式原型对象

__proto__ 存放在该属性中的对象称作为隐式原型对象

显式原型对象的作用

 -1.当函数作为构造函数使用时 该属性才会发挥作用 如果是普通函数执行 那么原型对象毫无作用

 -2.当函数作为构造函数时 会创建一个实例的空对象

创建好空对象后会把prototype中指向的原型对象赋值给空对象的__proto__属性中,被创建好的空对象就具备自己的原型对象

注意 :自定义的构造函数中的prototype属性指向的是一个{}空对象,原生js 提供的构造函数中的prototype是提前定义好的 基本不会是一个空对象

原型链:

 JavaScript通过每个实例对象上的__proto__这个隐式原型属性 将原型对象进行链接 再通过原型对象的原型属性再进行链接,依次往复 直到最终的null  这样便形成了js中的原型链

原型链的寻找一定是通过实例对象的__proto__去寻找的,__proto__不要直接通过代码去访问

注意:

在js中所有的函数都是由Function构造函数创建的 包括Function自己

所有的原型对象都是object的实例 object.prototype除外

每一个原生的构造对象所指向的prototype是不同的

4.this的劫持

this的劫持:强行的人为改变this的指向

实现this劫持的三种方式(基于三个方法):apply call bind

-apply和call用法基本一致

唯一不同之处:

           apply接受两个参数 1.对象 2.数组(对象是想要指向的对象)  函数表达式.apply()

           call 接受任意个参数 1.对象 其余参数是正常函数执行所需的实参  函数表达式.call()

-bind

           将函数进行改造后 重新返回 最终执行!

            函数表达式.bind(对象,形参1,形参2)()

            因为前面执行bind后返回的是函数

注意:函数对象才能使用

5.遍历数组的方法

-1.传统遍历 for语句

  特点 性能稳定 可以提前结束遍历的过程

-2.forEach方法

 语法规则 arr.forEach(callback(当前访问的数组中的元素,当前元素的下标,接收该回调函数中的this:thisarg=>arr)

回调函数 一般采用箭头函数的写法 但是也可以使用function函数

注意: 被传入的回调函数 每访问一次数组中的元素就被执行一次

 返回值为undefined, 不允许被中断

            arr.forEach((elment,index,thisArg)=>{

            })

-3.map方法 (不改变原数组)

  语法:arr.map(callback(elment,index,thisArg))

 遍历每一个数组元素

  每遍历一个元素都会调用一次回调函数 并且将回调函数的返回值存放到新数组中, 最终以数组形式整体返回

-4.filter方法 不改变原数组

语法:arr.filter(callback(element,index,thisArg))

 每访问一次元素都会调用一次回调函数 如果回调函数返回值是true 那么将当前访问的元素保存到一个新数组并返回

6.类

类 面向对象编程语言的概念

ES6中的类不是真正意义上的类 只是有了类之后 js在某种程度上更像是面向对象的语言,本质上是一种语法糖,都是一些抽象概念,对象则是类的实例化 或是具象的概念

类的定义

  class 类名{

        constructor(){

}

                    }

-1.定义的类不具备提升操作 一定是先定义后使用

-2.每一个类都必须且只有一个constructor方法 如果省略 js将自动补充一个空的constructor方法,如果类中同时存在多个 则会报错

- 3.其他与constructor方法同级的方法 是作为该实例对象的原型对象上的方法

-4.如果类中的方法或变量加上static关键字则该方法和变量会成为该类的静态属性和静态方法 只有该类才会调用

类的继承

                实现类的继承 extends 关键字

                语法 A类 extends B类

  

ps 1.实现编写一个apply函数实现this劫持功能

2.实现封装一个filter函数

 

总结:

js是学习web前端开发的一个重难点,它实现了前端与后端的交接工作,因此掌握好该阶段的知识尤为重要

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值