JS高级

程序员文章站 2022-03-23 11:53:31

标题 JS高级标题1 面向对象面向对象的思维特点抽取对象公用的属性和行为封装成一个类对对象进行实例化，获取类的对象。可以有多个对象来使用这个公共的类面向对象的使用步骤var that;class star {// 首先创建一个类constroctor(name,age形参) { //这里传入的是实例化对象that=this;//在其他的函数中可以使用that在调用实例化对象this.name=name;this.age=age; }}constroctor...

标题 JS高级

标题1 面向对象

面向对象的思维特点

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

面向对象的使用步骤

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

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

class Son extends father {
    super()
}

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

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 构造函数和原型

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

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

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

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

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

原型对象中的this也只向实例对象。

标题4 继承 call()

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 数组操作

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

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

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

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

检测数组中的元素是否符合指定条件，some(),返回值是布尔类型的值
用法和filter相同
去掉字符串两端的空白字符trim(),返回值是一个新的字符串，一般是去掉空白字符串的字符。
改变this的指向问题
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）

为脚本开启严格模式，在script标签里面声明use strict
严格模式下的变化有哪些？
严格模式的变化：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循环）

函数内部自己调用自己，所以必须加一个终止条件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 正则表达式

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

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

正则表达式的特殊字符

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 括号总结
大括号量词符. 里面表示重复次数
中括号字符集合。匹配方括号中的任意字符.
小括号表示优先级

预定义类

\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新增语法

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

const关键字声明常量
特点：具有块级作用域；使用const声明常量的时候必须赋初始值；常量声明之后不能更改（复杂数据不能修改它的内存地址）
var 、let 、cosnt三者的区别
|var| let |const
|函数级作用域|块级作用域|块级作用域
| 变量提升| 不存在变量提升|不存在变量提升
|值可更改 |值可更改 |值不可更改
数组解构：
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);//输出结果是李四，变量名必须和属性名一致

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

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的变量王五

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

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的内置对象扩展

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];//把伪数组转换成了真的数组，可以使用数组的方法

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数据集合类型

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

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

遍历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

上一篇： windows phone应用程序版本升级

下一篇： Windows Phone 7 用户体验 - Panorama 你用明白了吗？

JS高级

标题 JS高级

标题1 面向对象

标题2 构造函数和原型

标题4 继承 call()

标题5 数组操作

标题6 严格模式（strict）

标题7 高阶函数

标题8 闭包（closure）

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

标题10 正则表达式

标题11 ES6

标题12 ES6的内置对象扩展

标题13 Set数据集合类型

Apache反向代理无法加载js css img

Js 导出table内容到Excel的简单实例_javascript技巧

JS截取字符串常用方法整理及使用示例_javascript技巧

Arcgis for js 笔记

jquery插件--ajaxfileupload.js

使用js实现雪花飘落效果_javascript技巧

基于 Docker 开发 NodeJS 应用_node.js

JS对URL字符串进行编码/解码分析

vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

easyui-edatagrid.js实现回车键结束编辑功能的实例

JS高级

标题 JS高级

标题1 面向对象

标题2 构造函数和原型

标题4 继承 call()

标题5 数组操作

标题6 严格模式（strict）

标题7 高阶函数

标题8 闭包（closure）

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

标题10 正则表达式

标题11 ES6

标题12 ES6的内置对象扩展

标题13 Set数据集合类型

Apache反向代理无法加载js css img

Js 导出table内容到Excel的简单实例_javascript技巧

JS截取字符串常用方法整理及使用示例_javascript技巧

Arcgis for js 笔记

jquery插件--ajaxfileupload.js

使用js实现雪花飘落效果_javascript技巧

基于 Docker 开发 NodeJS 应用_node.js

JS对URL字符串进行编码/解码分析

vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

easyui-edatagrid.js实现回车键结束编辑功能的实例

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