JS高级

标题 JS高级

标题1 面向对象

1. 面向对象的思维特点

• 抽取对象公用的属性和行为封装成一个类
• 对对象进行实例化，获取类的对象。可以有多个对象来使用这个公共的类

2. 面向对象的使用步骤

var that;
class star {// 首先创建一个类
constroctor(name,age形参) {  //这里传入的是实例化对象
that=this;//在其他的函数中可以使用that在调用实例化对象
this.name=name;
this.age=age;
      }
}constroctor(){}这个构造函数必须有，会在new对象之后立即执行
new star("张三",18)//实例化对象

注意点：类里面所有的函数不需要写function，多个函数之间不需要逗号隔开，里面的属性和方法必须加this关键字才能使用
如果有多个函数，需要了解里面的this指向问题。只有constroctor这个构造函数里面的this指向的是实例对象。因此如果在其他函数里面调用this，可以在类外面声明一个全局变量that

3. 类的继承 extends和super()
super()用来调用父类中的构造函数和普通函数。类的继承是子类继承父类的一些属性和方法，使用方法如下

class Son extends father {
    super()
}

super()必须用在子类的this之前，必须先调用父类的构造函数，再调用子类的构造函数

4. appendChild()和insertAdjacentHTML()追加元素的区别
   两者都是可以动态追加元素的，不同之处在于
   appenChild()只能追加creatElement("标签名")创建的元素，不能直接追加字符串形式创建的元素

var li=document.creatElement("li");
ul.appendChild(li);
var li=`<li>这是字符串</li>`
ul.insertAdjacentHTML("插入位置",插入的内容);
ul.insertAdjacentHTML('beforeend',li);
insertAdjacentHTML的插入位置有一下几种
1.     beforeBegin: 插入到标签开始前
2.     afterBegin:插入到标签开始标记之后
3.     beforeEnd:插入到标签结束标记前
4.     afterEnd:插入到标签结束标记后

标题2 构造函数和原型

1. 静态成员和实例成员
   静态成员：是在构造函数本身添加的成员，只能通过构造函数来调用
   实例成员：是构造函数内部通过this添加的成员。实例成员只能通过实例对象来访问，不能通过构造函数来访问

function Start(name) {//构造函数
this.name=name;//实例成员
}
var start=new Start("姓名")//实例对象
start.sex="男"//静态成员

2. 原型对象prototype
   出现的原因：构造函数中有一些共享的方法，反复开辟空间，容易造成空间浪费的现象。
   使用方法：把一些不变的方法，放在原型对象中，实现共享方法

Start.prototype.sing=function() {这是共享的sing方法}

3. 对象原型__proto__ 属于一个属性
   概念：每个对象中都有一个__proto__属性，被称为对象原型。因为这个属性，实例对象才能够调用prototype里面的方法
   注意：prototype和__proto__里面都有一个constrctor(){}构造函数，都指向原来的构造函数
   
   原型对象中的this也只向实例对象。

标题4 继承 call()

1. call()方法的作用：可以调用函数，再者是可以改变this的指向问题

// 3.call();  作用，可以用来调用函数，也可以用来改变this的指向问题   
function Father(uname,age) {
    this.uname=uname;
    this.age=age;
}
function Son(uname,age,score) {
    Father.call(this,uname,age);//需要改变this的指向，让father里面的uname属于son，这里的this是指的Son的实例对象
    this.score=score;
}
var son=new Son("刘德华",18,"100");
console.log(son);

标题5 数组操作

1. 遍历数组（迭代数组）forEach(function(三个参数){})没有返回值

var arr=[1,2,3];
arr.forEach(function(value,index,arr) {
value:代表数组中的每一个值
index:代表数组中索引
arr:代表数组对象本身
})//forEach()遍历数组没有返回值，如果设置了也是返回undefined

2. 筛选数组filter()也是三个参数，有返回值，返回的是一个新的数组

var arr=[10,22,30,44];
var newArr=arr.filter(function(val) {
return val >=20}
console.log(newArr);//返回值是newArr=[22,30,44]

3. 检测数组中的元素是否符合指定条件，some(),返回值是布尔类型的值
   用法和filter相同
4. 去掉字符串两端的空白字符trim(),返回值是一个新的字符串，一般是去掉空白字符串的字符。
   改变this的指向问题
5. call()、apply()和bind()改变函数内部this的指向问题，但是三者的使用方法不同
   call()有两个参数,参数1：指的是改变this指向谁；参数可以以字符串的形式传递
   apply()有两个参数,参数1：指的是改变this指向谁；参数二：传入的参数，只能是数组形式传入。call() 在使用之后会立即执行函数
   bind()也有两个参数，参数1也是this指向谁；但是bind不会调用函数
   应用场景：call()经常做继承
   apply()经常跟数组有关，比如借助数学对象实现数组的最大值最小值
   bind()不调用函数，但是想改变this的指向问题，比如改变定时器内部的this

   var btn=document.querySelector("button");
       btn.onclick = function (){
            console.log(this);
        }.call(window);//或者是.apply(window)
        // 运行结果都是打印函数内部的this，而this指向window
    // .bind(window);
        console.log(this);//这是使用bind不调用函数时需要手动打印

标题6 严格模式（strict）

1. 为脚本开启严格模式，在script标签里面声明use strict
2. 严格模式下的变化有哪些？
   严格模式的变化：1.变量必须先声明，才能够使用2.严禁删除已经声明好变量3.this指向：全局作用域中的this指向undefined,非严格模式下this指向window4.严格模式下，构造函数不加new调用，this会报错5.定时器下的this还是指向window6.函数名不能存在重名的参数7.不允许在非函数的代码块中声明函数

标题7 高阶函数

概念：传递过来的参数是函数或者函数的返回值是函数，这样的函数称为高阶函数。比如回调函数

// 高阶函数- 函数可以作为参数传递
        function fn(a, b, callback) {
            console.log(a + b);
            callback && callback();
        }
        fn(1, 2, function() {
            console.log('我是最后调用的');

        });

标题8 闭包（closure）

概念：一个函数可以使用另外一个函数内部的变量。立即执行函数被称为小闭包函数

// 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
        function fn() {
            var num = 10;

            function fun() {
                console.log(num);

            }
            fun();
        }
        fn();
        输出结果是10

闭包的作用：延伸了变量的作用范围，可以有效减少全局变量的使用，节省内存地址

标题9 递归函数 （类似于for循环）

1. 函数内部自己调用自己，所以必须加一个终止条件return，防止“栈溢出”的情况

function fn() {
fn();
}fn();

下面利用递归函数求1~n的阶乘

 // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
        function fn(n) {
            if (n == 1) {
                return 1;
            }//这里必须要有
            return n * fn(n - 1);
        }
        console.log(fn(3));
       //  return n * fn(n - 1);
       //         3 * fn(3-1)   
       //         3 * (2 * fn(2-1))    
       //          3 * (2 * (1))    

标题10 正则表达式

1. 创建正则表达式
   方式一：通过调用RegExp对象的构造函数创建var regexp=new RegExp(/123/)//是正则表达式的标志
   方式二：利用字面量创建var rg=/123/
2. 测试正则表达式test()正则对象方法，用于检测字符串是否符合该规则

var rg = /123/;
console.log(rg.test(123));返回true
console.log(rg.test('abc'));返回false

3. 正则表达式的特殊字符

• 3.1正则表达式的组成
  一个正则表达式可以由简单的字符组成，比如/abc/，也可以是简单和特殊字符的组合，比如/ab*c/

• 3.2边界符
  正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
  ^以谁开始
  $以谁结束

• 3.3 字符类
  []方括号表示有一系列字符可供选中，只要匹配其中一个就可以了

var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy'));//true
console.log(rg.test('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false
var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
var reg = /^[a-z]$/ //26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围 
//字符组合
var reg1 = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
//取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。 
var reg2 = /^[^a-zA-Z0-9]$/;

• 3.4 量词符 ：量词符用来设定某个谋杀出现的次数
  *重复0次或者更多次
  +重复1次或者更多次
  ？重复1次或者0次
  {n}重复n次
  {n,}重复n次或者更多次
  {n,m}重复n到m次
  密码验证：var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 中划线
  中文字符：/^[\u4e00-\u9fa5]{2,8}$/
  表单验证：

  <input type="text"> <span>请输入用户名</span>
    <script>
   var input=document.querySelector("input");
   var span=document.querySelector("span");
   var reg=/^[a-z][a-zA-Z0-9_-]{5,15}$/;
   input.onblur=function() {
       if(reg.test(this.value)) {
           span.className='green';
           span.innerHTML="用户名输入格式正确"
       }else {
        span.className='red';
           span.innerHTML="用户名输入格式不正确"
       }
   }
    </script>

• 3.5 括号总结
  大括号 量词符. 里面表示重复次数
  中括号 字符集合。匹配方括号中的任意字符.
  小括号表示优先级

4. 预定义类

\d\D\w\W\s\S
\d:[0-9]
\d:[^0-9]
\w:[a-zA-Z0-9_]
\W:[^a-zA-Z0-9_]
\s:匹配任何空白字符
\S:匹配任何非空白字符
[u4e00-u9fa5]匹配中文
.号匹配除了\n以外的任意单个字符，如果想要匹配所有则使用（.|\n）
如果想匹配特殊字符必须在.号的前面加上反斜杠\进行转义。

• 正则替换replace()
  replace()这个方法可以实现替换字符串的操作，用来替换的参数可以是一个字符串或是一个正则表达式
  可以用于过滤敏感词：
  正则表达式后面的参数是g，代表全部替换，i代表忽略大小写

//全部替换g
var nStr = str.replace(/a/a,'哈哈')
console.log(nStr) //哈哈bc哈哈bc
//忽略大小写i
var str = 'aAbcAba';
var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈

标题11 ES6

• ES6新增语法

1. let关键字：使用let关键字声明变量，具有块级作用域，也就是{}花括号里面声明的变量，只能在花括号里面使用，即块级作用域

if(true) {
let num=10;
var abc=23;
concsole.log(num);10
}
concsole.log(num);num没有定义
console.log(abc);返回结果是abc没有定义

• let关键字的特点：具有块级作用域；不能进行预解析，也就是只能先声明才能够使用；防止循环变量变成全局变量。
• 面试题，var和let的区别

   var arr = [];
 for (var i = 0; i < 2; i++) {
     arr[i] = function () {
         console.log(i); //函数内部并没有定义变量i，向上一级寻找，也就是全局变量。并且函数并没有调用
     }
 }
 arr[0]();//结果2
 arr[1]();//结果2
let声明下的变量
 let arr = [];
 for (let i = 0; i < 2; i++) {
     arr[i] = function () {//let块级作用域
         console.log(i); 
     }
 }
 arr[0]();//结果0
 arr[1]();//结果1

2. const关键字声明常量
   特点：具有块级作用域；使用const声明常量的时候必须赋初始值；常量声明之后不能更改（复杂数据不能修改它的内存地址）
3. var 、let 、cosnt三者的区别
   |var| let |const
   |函数级作用域|块级作用域|块级作用域
   | 变量提升| 不存在变量提升|不存在变量提升
   |值可更改 |值可更改 |值不可更改
   
4. 数组解构：
   ES6中数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量let arr[a,b,c]=[1,2,3]
   数组解构：

let arr=[1,2,3];
let [a,b,c,e,d]=arr;
console.log(a)//输出结果是1
console.log(e)//输出结果是undefined
结果和数组里面的值要一一对应，没有定义的输出undefined

对象解构：允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋给变量

let person={name:"李四",age:30,sex:"男"}
let {name,age,sex}=person;
console.log(name);//输出结果是李四，变量名必须和属性名一致

4. 箭头函数() => {}
   箭头函数中，函数体只有一句代码，且代码的执行结果就是返回值，可以省略大括号

const sum=(n1,n2) =>{
return n1+n2;
}
const sum=(n1,n2) => n1+n2//于上面代码效果相同
const result=sum(10,20);
console.log(result);

如果形参只有一个，可以省略小括号

function fn (v) => {
alert(v);                  
}
fn(20)
const fn = v => {alert(v)}
fn(20);

箭头函数不绑定this，指向的是函数定义位置的上下文this

var name="wangwu";
var obj={
name:"lisi",
fn1:function() {
console.log(this.name)
    },
 fn2:() => {
 console.log(this.name);
   }    
}
obj1.fn1();//输出结果是李四。fn1是一个匿名函数，this指向它的调用者，也就是obj，obj里面有一个name属性
obj1.fn2();//输出结果是王五。fn2是一个箭头函数，不能绑定this，这里的this就是obj的this,指向的是obj的调用者window，window里面有一个name的变量王五

5. 剩余参数：当实参个数大于形参个数时，可以用数组来存储实参的个数...三个点

let arr=["张三","李四","王五"]；
let [s1,...s2]=arr;
console.log(s1);//输出结果是张三
console.log(s2);//输出的结果是一个数组，里面存放的是多余的实参   李四和王五


const sun=(...args) => {
let total=0;
console.log(args);
args.foeEach(item =>total+=item);
//args.forEach((item) => {total+=item})
return total;
}
console.log(sum(10,20,1,2,3,4));
console.log(sum(10,20,30));//输出结果是实参相加

标题12 ES6的内置对象扩展

1. Array的扩展方法

• 1.1扩展运算符：
• 用法：...可以将数组或者对象转化为用逗号分隔的参数序列

let arr=["a","b","c"];
console.log(...arr);//结果就是把console.log("a","b","c")效果一样，都是a b c

• 应用场景：数组合并

let arr=[1,2,3];
let arr1=[4,5,6];
arr.push(...arr1);或者是let arr2=[...arr,...arr1];//输出结果都是123456的一个数组

• 应用场景2：将伪数组转换成真正的数组，用[ ]即可

var jArr=document.querySelectorAll("div");//这是一个伪数组
var arr=[...jArr];//把伪数组转换成了真的数组，可以使用数组的方法

2. Array的扩展方法
   2.1 Array.from()方法，将伪数组转换成真数组。参数1是要转换的伪数组，参数2是一个函数，只能通过Array.from(参数1，参数2)的形式使用
   将伪数组或可遍历对象转换为真正的数组

对象形式的转换成数组，
let arrayLike = { 
     id: 1,
     name: "zhangsan",
     length: 2
 }
 let newAry = Array.from(arrayLike, item => item.name)//["zhangsan"]这个数组
伪数组形式的转换成数组
  let arr=[{
        name:"zhangsan",
        sex:"nan"
    }]
   var b= Array.from(arr);
    console.log(b);//一个数组，里面长度为1，[{…}]
```css
结果
0: {name: "zhangsan", sex: "nan"}
length: 1
__proto__: Array(0)

2.2 `find()`方法：查找数组中**第一个符合条件的数组成员，**如果没有找到就返回undefined
使用方法：`数组名.find()`
```javascript
var ary=[{
id:1,name:"zhangsan"},
{id:2,name:"lisi"}]
let target=ary.find(item => item.id == 2)//返回结果是id为2的对象

2.3 findIndex()找出第一个符合条件的数组成员的位置（索引)，如果没有找到就返回-1

let arr=[10,20,50];
arr.findIndex(item =>i em>15 {
var index=arr.findIndex(item =>i tem>15);
console.log(index);//返回结果是1
})

2.4 includes()表示某个数组是否包含给定的值，返回布尔值arr.includes("要判断的数值")
2.5 filter()返回数组，包含了符合条件的所有元素。如果没有符合条件的元素，返回空数组
2.6 splice(index,length,[item])表示从数组中删除或者添加的元素，返回新数组保存所有删除的元素，index表示要操作的索引位置，length表示删除的个数，item表示要添加的元素（添加元素是添加到前面）

• String的扩展方法
  3.1 模板字符串：可以解析变量；可以换行；可以调用函数
  3.2 startsWith() endsWith(字符串)表示参数字符串是否符合原字符串头部和尾部，返回布尔值。也就是判断字符串以谁开始，和以谁结束
  3.3 repeat(重复次数)将原字符串重复n次，返回一个新的字符串

标题13 Set数据集合类型

1. 类似数组，但是成员的值是唯一的，没有重复的值
2. 创建Set数据const s1=new Set();size是☞Set结构的长度
3. 实例方法：

• add(value):添加某个值，返回Set结构本身
• delete(value):删除某个值，返回一个布尔值，表示删除是否成功
• has(value):返回一个布尔值，表示该值是否是Set的成员
• clear():清除所有成员，没有返回值

4. 遍历Set集合的方法和数组一样，利用forEach()方法和for of的形式

const arr=[1,2,3];
arr.forEach((value) => {
return console.log(value);
})//打印数组中的每一个值
for of 
for(let item of arr) {
console.log(item);//一样可以遍历数组
}

本文地址：https://blog.csdn.net/weixin_45651869/article/details/107179078

如对本文有疑问， 点击进行留言回复！！