javascript高级进阶

大家好,最近比较忙,好久没有写文了,今天总结一下javascript进阶,希望可以帮到大家.

1-作用域

作用域分为全局作用域/局部作用域/块级作用域
全局作用域
在函数外定义的变量叫做全局变量,全局变量在任何地方都可以被使用
局部作用域
在函数内定义的变量叫做局部变量,局部变量只能在当前作用域被使用
块作用域
在大括号内,块级作用域下定义的变量叫做块级变量,块级变量只能在当前块级使用

2-声明变量的关键字

声明变量的关键字主要有let var const
他们的区别在哪里?
var 声明的变量属于window,但是let声明的变量不属于window
var 可以重复被声明,但是不报错,let不可以重复被声明
var 不具有块级作用域,但是let有块级作用域
const 声明必须初始化有值
const 定义的常量,不可以被修改
const 因为声明不可以被修改,所以我们通常说是定义常量

3-作用域链

作用域链是什么?
其实就是由作用域串联起来的链
let i = 0;
function fn(){
   console.log(i)
}
fn()
这样输出出来的值是0,就是因为作用域链的原因
他会在当前作用域查找,如果,当前作用域没有,他会上上级作用域查找

4-闭包

闭包是什么?
闭包其实就是一个作用域,有权访问另一个作用域的局部变量
function fn(){
    let i = 0;
    function fnOne(){
       console.log(i)
    }
    fnOne()
}
fn()
这样就是fnOne这个作用域,访问了fn这个作用域的局部变量i

5-预解析

预解析是什么?
预解析其实就是变量的提升和函数提升
也就是说,代码在解析之前,会进行一步操作
就是将声明变量的语法提升到当前作用域的最前面(只声明不赋值)
console.log(n)
let n = 666;
预解析之后就是:
let n;
console.log(n)
n=666;


函数预解析是什么?
函数预解析和变量的提升一样,将有名字的函数提升到当前作用域的最前面(只声明不调用)

6-函数的默认值

我们给函数加实参和形参
function get(a,b){
   return a+b;
}
let sum  = get(10,5)
console.log(sum)
当我们给函数传入的实参小于形参的时候,我们就要给函数设置默认值了
function getOne(a,b=5){
   return a+b;
}
let num = getOne(10)
console.log(num)
形参b=5就是我们给函数设置的默认值

7-动态参数

当我们遇到参数不固定的时候,我们就可以用到函数的arguments
arguments是用来收集实参然后生成一个伪数组
function get(){
    我们需要获取每一个实参
    for(let i = 0;i<arguments.length;i++){
        console.log(arguments[i])
    }
}
get(1,2,3,4,5)

8-剩余参数

我们传入了很多实参,我们有一个形参,我们想让他接受所有的实参
我们需要用到...这个扩展运算符
function get(...a){
    我们想要获取所有的实参
    for(let i = 0;i<a.length;i++){
        console.log(a[i])
    }
}
get(1,2,3,4,5)

9-箭头函数

箭头函数是通过函数表达式来改变的
函数表达式
let s = function (){console.log('函数表达式')}
箭头函数
let s = (res)=>{console.log('箭头函数')}
在箭头函数中
如果形参只有一个的话就可以省略小括号,如果{}里面只有一行代码的话,可以省略{}
改变之后为:
let s = res =>console.log('改变之后的箭头函数')

10-解构赋值

结构赋值:数组的解构赋值(一一对应)
let arr = [1,2,3]
let a = arr[0];
let b = arr[1];
let c = arr[2];
这样写就比较麻烦了
我们可以采用数组结构赋值的一一对应原则写成:
let [a,b,c] = [1,2,3]


结构赋值:对象的解构赋值
let obj = {
    name:"对象",
    age:18,
}
let name = obj.name
let age = obj.age
这样写也是比较麻烦的,我们可以采用对象解构赋值的将对象的属性名作为变量的原则写成:
let {name,age} = {
    name:"对象",
    age:18,
}

11-创建对象

创建对象 : 字面量创建/构造函数创
字面量创建
let obj = {
    name:'字面量创建对象',
    age:18,
}


构造函数创建
let obj = new Object();
我们添加成员
obj.name="构造函数创建对象";
obj.age=18
console.log(obj)

12-自定义构造函数

function Fn(name,age){
    this.name=name;
    this.age=age;
}
let obj = new Fn('吕恣瑞',18)
cconsole.log(obj)

13-构造函数的this指向

构造函数的this指向实例化对

14-构造函数添加静态成员

function Fn(name,age){
    this.name=name;
    this.age=age;
}
let p1 = new Fn('小吕',18)
我们给函数函数添加静态成员
Fn.language='汉语' ;
Fn.skin='黄皮肤' ;
静态成员只能由函数本身调用
console.log(Fn.skin)
实例成员只能由实例对象调用
console.log(p1.name)

15-基本类型和复杂类型的值传递

基本数据类型值传递:
是拷贝一份给另一个,当其中一个发生改变时,另一个不会受到影响
复杂数据类型值传递:
是将地址给另一个,两个或者多个共用一个地址
当其中一个发生改变的时候,其他的也会发生改变

14-Object的values和keys

let obj = {
   name:"小吕",
   age:18
}
console.log(Object.keys(obj))
keys是获取所有的属性名,生成一个伪数组
console.log(Object.values(obj))
values是获取所有的属性值,生成一个伪数组

15-数组的方法

在初学数组的时候:
push : push方法是在数组的最后添加一条数据
pop : pop方法是删除数组中的最后一条数据
unshift : unshift方法是在数组的最前面添加一条数据
shift : shift方法是在数组的最前面删除一条数据
splice : splice方法是删除数组中的某个元素
arr.splice(1,2)  第一个参数是从什么索引值位置开始删除
然后第二个参数是删除几个


进阶数据方法:
reverse : reverse方法是对数据中的内容进行翻转
concat : concat方法是拼接两个数组为一个数组
indexOf : indexOf方法是从最前面开始查找,找到了返回其索引值
lastIndexOf : lastIndexOf方法是从最后面开始匹配,找到了返回其索引值
上面的indexOf和lastIndexOf没有匹配到就返回-1
join : join方法就是拼接数组中的元素,并成成字符串

16-数组遍历得方法

let arr = [1,2,3,4];
1.for循环
for(let i = 0;i<arr.length;i++){
   遍历得i是数组的索引值
   console.log(arr[i])
}
2.for in
for(let key in arr){
   将数组的每一个元素赋值给key
   console.log(key)
}
3.forEach
arr.forEach(function(item,b,c){
    第一个参数item是数组中的所有元素
    第二个参数b是数组中的所有索引值
    第三个参数c是数组本身
    console.log(item,b,c)
})
4.find
find方法其实就是查找数组中满足条件的第一个元素,并返回
let res = arr.find(function(item,b,c){
    return item>3
}
console.log(res)
5.findindex
findindex是查找满足条件的第一个元素,并返回其索引值
let res = arr.findindex(function(item,b,c){
    return item>3
})
console.log(res)
6.filter
filter是遍历筛选满足条件的元素,并放入一个新得数组中
let a = arr.filter(item=>{
   return item>2
})
console.log(a)

17-正则构造函数

创建正则有两种:字面量,构造函数
字面量创建正则表达式
let reg = /\.css$/;
构造函数创建正则表达式
let reg = new RegExp(/\.less$/)

18-字符串创建

创建字符串有两种 : 字面量,构造函数
字面量创建
let str = 'hahah'
构造函数创建
let str = new String('hahah')

19-字符串深层挖掘

字符串打印出来是一个伪数组
我们可以用length和索引值还有遍历得方法,来获取字符串的每一项

20-数值类型创建

数值类型创建有两种 : 字面量,构造函数
字面量创建
let i = 666
构造函数创建
let num = new Number(666)

21-数值类型保留两位小数方法

let num = 66.666
num.toFixed(2)
保留两位小数,四舍五入

22-字符串的方法

trim : trim是清空字符串两边的空格
replace : replace是用来替换字符串
split : split是用来分割字符串成数组
concat : concat是用来拼接字符串
toLowerCase : toLowerCase是将字符串转换为小写
toUpperCase : toUpperCase是将字符串转换为大写
substring : substring用来截取字符串
substring(3,6)是从索引为3开始,索引为6结束,不包括索引为6的值
substr : substr是用来截取字符串
substr(3,6)是从索引为3开始截取6个

23-原型对象

当我们封装了一个对象时,对象里面有方法
我们new很多的时候,会生成很多的方法
非常浪费资源
所以我们要把方法放到原型对象里面
每一个构造函数都有一个prototype,这个就是原型对象
function Fn(name,age){
    this.name=name;
    this.age=age;
}
Fn.prototype=function say(){
    console.log('我会说话')
}
let obj = new Fn('吕恣瑞',18)
实例化对象的__proto__用来查找原型对象
构造函数的prototype指向原型对象
原型对象的constructor指回构造函数

24-原型链

原型链其实就是原型对象串联起来的链
我们可以通过__proto__一直查找下去,就是因为原型链的存在

25-继承性

公共部分
function gong(head,eye){
   this.head=1;
   this.eye=2;
}
个体部分
function Fn(){
   this.language = '汉语'
   this.skin = '黄皮肤'
}
我们让个体继承公共部分
1.将公共部分的的实例化对象赋值给个体部分的原型对象
Fn.prototype=new gong()
2.将个体部分的构造函数指向其本身
Fn.prototype.constructor=Fn
这样就继承成功了
我们实例化一个个体部分
let ren = new Fn()
这个实例化的部分就继承了公共部分的属性

26-this大总结

构造函数里面的this指向调用者
function fn(){
   this.name = "xiaolv"
}


事件执行函数里面的this指向的是当前事件源
div.addEventListener('click',function(){
    this.style.background="red"
}


定时器this指向window
setInterval(function(){
  i++;
  console.log(this)
},1000)


普通函数this指向调用者window
function fn(){
   console.log(this)
}


自执行函数里面的this指向window
(function(){
      console.log(this) 
})();

27-call,apply,bind方法

三个方法都是将函数中的this指向其他

28-类的基本使用

定义一个类
class fn {}
实例化一个类
let cla = new fn();
判断是否属于object
console.log(fn instanceof Object)

29-类的实例成员和静态成员

类的实例成员
class ren {
   name = "吕恣瑞";
   age = 18;
   say(){
      console.log('说话')
   };
   eat(){
      console.log('吃饭')
   }
}


类的静态成员
class ren {
   static name = "吕恣瑞";
   static age = 18;
   static say(){
      console.log('说话')
   };
   static eat(){
      console.log('吃饭')
   }
}

30-类的构造方法

class ren {
    添加构造器
    constructor(name,age){
       this.name=name;
       this.age=age;
    }
    eat(){
       console.log('吃饭')
    }
}
let ren1 = new ren("小吕",18)
console.log(ren1)
let ren2 = new ren("小苏",18) 
console.log(ren2)
构造器,在new的时候自动执行
构造器如果不写的话,那么内部会默认的添加上这个方法
构造器名字是固定的,不能修改

31-类的继承

我们定义一个公共类
class gong {
   constructor(name,age){
       this.name=name;
       this.age=age;
    }
}
我们再定义一个个体类
让个体类继承公共类的属性
class geti extends gong {
    子类如果没有构造器就要调用公共类的方法即可
    constructor(name,age,shuai)
}
let ren = new geti("小吕",18,"帅");
console.log(ren)

32-浅拷贝

浅拷贝其实就是拷贝最外层的东西
let obj = {
    name:"小吕",
    age:18,
    eat:function(){
       console.log("吃饭")
    },
    arr:[[1,2],[3,4],[5,6]],
}
let obj1 = {}
我们想将obj的值拷贝一份给obj1
for(let key in obj){
   obj1[key]=obj[key]
}


以下这一行代码也可以实现浅拷贝
Object.assign(obj1,obj)

33-深拷贝

深拷贝里面一定到注意,数组是对象类型,但是对象类型不一定就是数组
let obj = {
    name:"小吕",
    age:18,
    eat:function(){
       console.log("吃饭")
    },
    arr:[[1,2],[3,4],[5,6]],
}
let obj1 = {}
我们想将obj的值拷贝一份给obj1
function fn(o,obj){
        for(let key in obj){
          // obj[key]
          if(obj[key] instanceof Array){
            o[key] = [];
            fn(o[key],obj[key])
          }else if(obj[key] instanceof Object){
            o[key]={}
            fn(o[key],obj[key])
          }else{
            o[key]=obj[key]
          }
        }
      }
      fn(o,obj)
      console.log(o)
      o.chenxi.name='吕恣瑞'
      console.log(obj)

以上就是进阶的javascript的内容了

最后,点个赞和再看鼓励一下吧