devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS高级（含ES6）

作者：AllinToyou | 2024-04-17 03:28:07

赞

踩

js高级

目录

1、ES6中的类和对象

2、构造函数和原型

2.1构造函数

2.2原型

2.2.1对象原型__proto__

2.2.2constructor构造函数

2.2.2构造函数、实例、原型对象关系

 2.2.3原型链

2.2.4成员查找机制

3、ES5新增方法

3.1forEach 遍历数组

 3.2filter 筛选数组

3.3 some 检测数组中是否满足指定条件

3.4字符串方法（trim）

3.5对象方法

4、函数进阶

 4.1、定义

4.2、函数的调用

4.3函数this指向

4.3.1改变函数this指向

4.4严格模式

4.4.1什么是严格模式

 4.4.2开启严格模式

 4.4.3严格模式的变化

4.5高阶函数

 4.6闭包

 4.7递归

4.8拷贝

5 正则表达式

5.1概述

5.2特点

5.3 使用

5.4特殊字符

5.4.1边界符

5.4.2字符类

5.4.3量词符

5.4.4括号总结

5.5.5预定义类

 5.5.6替换

6、ES6

6.1let关键字（声明变量）

 6.2const关键字（声明常量）

let、const、var区别

 6.3解构赋值

6.3.1数组解构

6.3.2对象解构

6.4箭头函数

6.4.1定义

6.4.2不绑定this关键字

6.5剩余参数

 6.6扩展运算符

 6.6.1扩展运算符应用

6.6.2构造函数方法Array.form()

 6.6.3实例方法方法find()

  6.6.4实例方法方法findIndex()

   6.6.5实例方法方法includes()

 6.7模板字符串

6.8String的扩展方法

 6.9Set数据结构

 

面向对象和面向过程对比

1、ES6中的类和对象

创建类和对象

 

类中添加方法

  1. eg：
  2.  class car {
  3.             constructor(uname,age) {
  4.                 this.uname=uname;
  5.                 this.age=age;
  6.             }
  7.             sing(s) {
  8.                 console.log(s);
  9.                 
  10.             }
  11.         }
  12.         var fa=new car("li",12);
  13.         console.log(fa.uname);
  14.         fa.sing('a');

继承（extends）

 

  1.  class father {
  2.         constructor(x,y) {
  3.             this.x=x;
  4.             this.y=y;
  5.         }
  6.         sum(x,y) {
  7.             console.log(this.x+this.y);
  8.         }
  9.     }
  10.     class Son extends father {
  11.         constructor(x,y) {
  12.             super(x,y);//调用父类的构造函数
  13.         }
  14.     }
  15.     var son=new Son(1,2);
  16.     var son1=new Son(11,22);
  17.     son.sum();
  18.     son1.sum();

super关键字

 注：

 子类继承父级同时扩展自己的方法

  1.     class father {
  2.         constructor(x,y) {
  3.             this.x=x;
  4.             this.y=y;
  5.         }
  6.         sub() {
  7.             console.log(this.x+this.y);
  8.         }
  9.     }
  10.     // var s=new father(3,2);
  11.     // s.sub();
  12.     class son extends father {
  13.         constructor(x,y) {
  14.             // 利用super调用父类函数
  15.             // super必须在子类this之前调用
  16.             super(x,y);
  17.             this.x=x;
  18.             this.y=y;
  19.         }
  20.         subs() {
  21.             console.log(this.x-this.y);
  22.         }
  23.     }
  24.     var sona=new son(4,3);
  25.     sona.sub();
  26.     sona.subs();

注意：1、ES6中没有变量提升，必须先定义类才能实例化对象

           2、类中里面的共有的属性和方法一定要加this使用

          3、this指向问题（constructor指向的是实例化对象，方法里面的指方法调用者）

2、构造函数和原型

2.1构造函数

eg:

  1. // 1. 利用 new Object() 创建对象
  2.  
  3.         var obj1 = new Object();
  4.  
  5.         // 2. 利用 对象字面量创建对象
  6.  
  7.         var obj2 = {};
  8.  
  9.         // 3. 利用构造函数创建对象
  10.         function Star(uname, age) {
  11.             this.uname = uname;
  12.             this.age = age;
  13.             this.sing = function() {
  14.                 console.log('我会唱歌');
  15.  
  16.             }
  17.         }
  18.  
  19.         var ldh = new Star('刘德华', 18);
  20.         var zxy = new Star('张学友', 19);
  21.         console.log(ldh);
  22.         ldh.sing();
  23.         zxy.sing();

静态成员和实例成员

 eg：

  1.  // 构造函数中的属性和方法我们称为成员, 成员可以添加
  2.         function Star(uname, age) {
  3.             this.uname = uname;
  4.             this.age = age;
  5.             this.sing = function() {
  6.                 console.log('我会唱歌');
  7.  
  8.             }
  9.         }
  10.         var ldh = new Star('刘德华', 18);
  11.         // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
  12.         // 实例成员只能通过实例化的对象来访问
  13.         console.log(ldh.uname);
  14.         ldh.sing();
  15.         // console.log(Star.uname); // 不可以通过构造函数来访问实例成员
  16.         // 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员
  17.         Star.sex = '男';
  18.         // 静态成员只能通过构造函数来访问
  19.         console.log(Star.sex);

2.2原型

 eg：

  1. <script>
  2.         // 1. 构造函数的问题. 
  3.         function Star(uname, age) {
  4.             this.uname = uname;
  5.             this.age = age;
  6.             // this.sing = function() {
  7.             //     console.log('我会唱歌');
  8.  
  9.             // }
  10.         }
  11.         Star.prototype.sing = function() {
  12.             console.log('我会唱歌');
  13.         }
  14.         var ldh = new Star('刘德华', 18);
  15.         var zxy = new Star('张学友', 19);
  16.         console.log(ldh.sing === zxy.sing);
  17.         // console.dir(Star);
  18.         ldh.sing();
  19.         zxy.sing();
  20.         // 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
  21.     </script>

2.2.1对象原型__proto__

  

eg:

  1.  <script>
  2.         function Star(uname, age) {
  3.             this.uname = uname;
  4.             this.age = age;
  5.         }
  6.         Star.prototype.sing = function() {
  7.             console.log('我会唱歌');
  8.         }
  9.         var ldh = new Star('刘德华', 18);
  10.         var zxy = new Star('张学友', 19);
  11.         ldh.sing();
  12.         console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
  13.         console.log(ldh.__proto__ === Star.prototype);
  14.         // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
  15.         // 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
  16.     </script>

2.2.2constructor构造函数

eg：

  1. <script>
  2.         function Star(uname, age) {
  3.             this.uname = uname;
  4.             this.age = age;
  5.         }
  6.         // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
  7.         // Star.prototype.sing = function() {
  8.         //     console.log('我会唱歌');
  9.         // };
  10.         // Star.prototype.movie = function() {
  11.         //     console.log('我会演电影');
  12.         // }
  13.         Star.prototype = {
  14.             // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
  15.             constructor: Star,
  16.             sing: function() {
  17.                 console.log('我会唱歌');
  18.             },
  19.             movie: function() {
  20.                 console.log('我会演电影');
  21.             }
  22.         }
  23.         var ldh = new Star('刘德华', 18);
  24.         var zxy = new Star('张学友', 19);
  25.         console.log(Star.prototype);
  26.         console.log(ldh.__proto__);
  27.         console.log(Star.prototype.constructor);
  28.         console.log(ldh.__proto__.constructor);
  29.     </script>

2.2.2构造函数、实例、原型对象关系

 2.2.3原型链

2.2.4成员查找机制

3、ES5新增方法

3.1forEach 遍历数组

 eg：

  1.    <script>
  2.         // forEach 迭代(遍历) 数组
  3.         var arr = [1, 2, 3];
  4.         var sum = 0;
  5.         arr.forEach(function(value, index, array) {
  6.             console.log('每个数组元素' + value);
  7.             console.log('每个数组元素的索引号' + index);
  8.             console.log('数组本身' + array);
  9.             sum += value;
  10.         })
  11.         console.log(sum);
  12.     </script>

 3.2filter 筛选数组

 eg：

  1. <script>
  2.         // filter 筛选数组
  3.         var arr = [12, 66, 4, 88, 3, 7];
  4.         var newArr = arr.filter(function(value, index) {
  5.             // return value >= 20;
  6.             return value % 2 === 0;
  7.         });
  8.         console.log(newArr);
  9.     </script>

3.3 some 检测数组中是否满足指定条件

 eg：

  1.    <script>
  2.         // some 查找数组中是否有满足条件的元素 
  3.         // var arr = [10, 30, 4];
  4.         // var flag = arr.some(function(value) {
  5.         //     // return value >= 20;
  6.         //     return value < 3;
  7.         // });
  8.         // console.log(flag);
  9.         var arr1 = ['red', 'pink', 'blue'];
  10.         var flag1 = arr1.some(function(value) {
  11.             return value == 'pink';
  12.         });
  13.         console.log(flag1);
  14.         // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
  15.         // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
  16.     </script>

3.4字符串方法（trim）

 eg：

  1.   <input type="text"> <button>点击</button>
  2.     <div></div>
  3.     <script>
  4.         // trim 方法去除字符串两侧空格
  5.         var str = '   an  dy   ';
  6.         console.log(str);
  7.         var str1 = str.trim();
  8.         console.log(str1);
  9.         var input = document.querySelector('input');
  10.         var btn = document.querySelector('button');
  11.         var div = document.querySelector('div');
  12.         btn.onclick = function() {
  13.             var str = input.value.trim();
  14.             if (str === '') {
  15.                 alert('请输入内容');
  16.             } else {
  17.                 console.log(str);
  18.                 console.log(str.length);
  19.                 div.innerHTML = str;
  20.             }
  21.         }
  22.     </script>

3.5对象方法

1、keys

 eg：

  1. script>
  2.         // 用于获取对象自身所有的属性
  3.         var obj = {
  4.             id: 1,
  5.             pname: '小米',
  6.             price: 1999,
  7.             num: 2000
  8.         };
  9.         var arr = Object.keys(obj);
  10.         console.log(arr);
  11.         arr.forEach(function(value) {
  12.             console.log(value);
  13.  
  14.         })
  15.     </script>

2、defineProperty

 eg：

  1.  <script>
  2.         // Object.defineProperty() 定义新属性或修改原有的属性
  3.         var obj = {
  4.             id: 1,
  5.             pname: '小米',
  6.             price: 1999
  7.         };
  8.         // 1. 以前的对象添加和修改属性的方式
  9.         // obj.num = 1000;
  10.         // obj.price = 99;
  11.         // console.log(obj);
  12.         // 2. Object.defineProperty() 定义新属性或修改原有的属性
  13.         Object.defineProperty(obj, 'num', {
  14.             value: 1000,
  15.             enumerable: true
  16.         });
  17.         console.log(obj);
  18.         Object.defineProperty(obj, 'price', {
  19.             value: 9.9
  20.         });
  21.         console.log(obj);
  22.         Object.defineProperty(obj, 'id', {
  23.             // 如果值为false 不允许修改这个属性值 默认值也是false
  24.             writable: false,
  25.         });
  26.         obj.id = 2;
  27.         console.log(obj);
  28.         Object.defineProperty(obj, 'address', {
  29.             value: '中国山东蓝翔技校xx单元',
  30.             // 如果只为false 不允许修改这个属性值 默认值也是false
  31.             writable: false,
  32.             // enumerable 如果值为false 则不允许遍历, 默认的值是 false
  33.             enumerable: false,
  34.             // configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
  35.             configurable: false
  36.         });
  37.         console.log(obj);
  38.         console.log(Object.keys(obj));
  39.         delete obj.address;
  40.         console.log(obj);
  41.         delete obj.pname;
  42.         console.log(obj);
  43.         Object.defineProperty(obj, 'address', {
  44.             value: '中国山东蓝翔技校xx单元',
  45.             // 如果只为false 不允许修改这个属性值 默认值也是false
  46.             writable: true,
  47.             // enumerable 如果值为false 则不允许遍历, 默认的值是 false
  48.             enumerable: true,
  49.             // configurable 如果为false 则不允许删除这个属性 默认为false
  50.             configurable: true
  51.         });
  52.         console.log(obj.address);
  53.     </script>

4、函数进阶

 4.1、定义

 eg：

  1. <script>
  2.         //  函数的定义方式
  3.  
  4.         // 1. 自定义函数(命名函数) 
  5.  
  6.         function fn() {};
  7.  
  8.         // 2. 函数表达式 (匿名函数)
  9.  
  10.         var fun = function() {};
  11.  
  12.  
  13.         // 3. 利用 new Function('参数1','参数2', '函数体');
  14.  
  15.         var f = new Function('a', 'b', 'console.log(a + b)');
  16.         f(1, 2);
  17.         // 4. 所有函数都是 Function 的实例(对象)
  18.         console.dir(f);
  19.         // 5. 函数也属于对象
  20.         console.log(f instanceof Object);
  21.     </script>

4.2、函数的调用

  1.   <script>
  2.         // 函数的调用方式
  3.  
  4.         // 1. 普通函数
  5.         function fn() {
  6.             console.log('人生的巅峰');
  7.  
  8.         }
  9.         // fn();   fn.call()
  10.         // 2. 对象的方法
  11.         var o = {
  12.             sayHi: function() {
  13.                 console.log('人生的巅峰');
  14.  
  15.             }
  16.         }
  17.         o.sayHi();
  18.         // 3. 构造函数
  19.         function Star() {};
  20.         new Star();
  21.         // 4. 绑定事件函数
  22.         // btn.onclick = function() {};   // 点击了按钮就可以调用这个函数
  23.         // 5. 定时器函数
  24.         // setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次
  25.         // 6. 立即执行函数
  26.         (function() {
  27.             console.log('人生的巅峰');
  28.         })();
  29.         // 立即执行函数是自动调用
  30.     </script>

4.3函数this指向

  eg：

  1.  <script>
  2.         // 函数的不同调用方式决定了this 的指向不同
  3.         // 1. 普通函数 this 指向window
  4.         function fn() {
  5.             console.log('普通函数的this' + this);
  6.         }
  7.         window.fn();
  8.         // 2. 对象的方法 this指向的是对象 o
  9.         var o = {
  10.             sayHi: function() {
  11.                 console.log('对象方法的this:' + this);
  12.             }
  13.         }
  14.         o.sayHi();
  15.         // 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
  16.         function Star() {};
  17.         Star.prototype.sing = function() {
  18.  
  19.         }
  20.         var ldh = new Star();
  21.         // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
  22.         var btn = document.querySelector('button');
  23.         btn.onclick = function() {
  24.             console.log('绑定时间函数的this:' + this);
  25.         };
  26.         // 5. 定时器函数 this 指向的也是window
  27.         window.setTimeout(function() {
  28.             console.log('定时器的this:' + this);
  29.  
  30.         }, 1000);
  31.         // 6. 立即执行函数 this还是指向window
  32.         (function() {
  33.             console.log('立即执行函数的this' + this);
  34.         })();
  35.     </script>

4.3.1改变函数this指向

 eg

:

  1.    <script>
  2.         // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
  3.  
  4.         // 1. call()
  5.         var o = {
  6.             name: 'andy'
  7.         }
  8.  
  9.         function fn(a, b) {
  10.             console.log(this);
  11.             console.log(a + b);
  12.  
  13.         };
  14.         fn.call(o, 1, 2);
  15.         // call 第一个可以调用函数 第二个可以改变函数内的this 指向
  16.         // call 的主要作用可以实现继承
  17.         function Father(uname, age, sex) {
  18.             this.uname = uname;
  19.             this.age = age;
  20.             this.sex = sex;
  21.         }
  22.  
  23.         function Son(uname, age, sex) {
  24.             Father.call(this, uname, age, sex);
  25.         }
  26.         var son = new Son('刘德华', 18, '男');
  27.         console.log(son);
  28.     </script>

 eg:

  1. <script>
  2.         // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
  3.  
  4.         // 2. apply()  应用 运用的意思
  5.         var o = {
  6.             name: 'andy'
  7.         };
  8.  
  9.         function fn(arr) {
  10.             console.log(this);
  11.             console.log(arr); // 'pink'
  12.  
  13.         };
  14.         fn.apply(o, ['pink']);
  15.         // 1. 也是调用函数 第二个可以改变函数内部的this指向
  16.         // 2. 但是他的参数必须是数组(伪数组)
  17.         // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
  18.         // Math.max();
  19.         var arr = [1, 66, 3, 99, 4];
  20.         var arr1 = ['red', 'pink'];
  21.         // var max = Math.max.apply(null, arr);
  22.         var max = Math.max.apply(Math, arr);
  23.         var min = Math.min.apply(Math, arr);
  24.         console.log(max, min);
  25.     </script>

  1.  <script>
  2.         // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
  3.  
  4.         // 3. bind()  绑定 捆绑的意思
  5.         var o = {
  6.             name: 'andy'
  7.         };
  8.  
  9.         function fn(a, b) {
  10.             console.log(this);
  11.             console.log(a + b);
  12.  
  13.  
  14.         };
  15.         var f = fn.bind(o, 1, 2);
  16.         f();
  17.         // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
  18.         // 2. 返回的是原函数改变this之后产生的新函数
  19.         // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
  20.         // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
  21.         // var btn1 = document.querySelector('button');
  22.         // btn1.onclick = function() {
  23.         //     this.disabled = true; // 这个this 指向的是 btn 这个按钮
  24.         //     // var that = this;
  25.         //     setTimeout(function() {
  26.         //         // that.disabled = false; // 定时器函数里面的this 指向的是window
  27.         //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn
  28.         //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象
  29.         // }
  30.         var btns = document.querySelectorAll('button');
  31.         for (var i = 0; i < btns.length; i++) {
  32.             btns[i].onclick = function() {
  33.                 this.disabled = true;
  34.                 setTimeout(function() {
  35.                     this.disabled = false;
  36.                 }.bind(this), 2000);
  37.             }
  38.         }
  39.     </script>

call、apply、bind总结

4.4严格模式

4.4.1什么是严格模式

 4.4.2开启严格模式

 

 4.4.3严格模式的变化

 

4.5高阶函数

 4.6闭包

 eg;

  1. <script>
  2.         // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
  3.         // 一个作用域可以访问另外一个函数的局部变量 
  4.         // 我们fn 外面的作用域可以访问fn 内部的局部变量
  5.         // 闭包的主要作用: 延伸了变量的作用范围
  6.         function fn() {
  7.             var num = 10;
  8.  
  9.             // function fun() {
  10.             //     console.log(num);
  11.  
  12.             // }
  13.             // return fun;
  14.             return function() {
  15.                 console.log(num);
  16.             }
  17.         }
  18.         var f = fn();
  19.         f();
  20.         // 类似于
  21.         // var f = function() {
  22.         //         console.log(num);
  23.         //     }
  24.         // var f =  function fun() {
  25.         //         console.log(num);
  26.  
  27.         //     }
  28.     </script>

 4.7递归

 eg：

  1.   <script>
  2.         // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
  3.         var num = 1;
  4.  
  5.         function fn() {
  6.             console.log('我要打印6句话');
  7.  
  8.             if (num == 6) {
  9.                 return; // 递归里面必须加退出条件
  10.             }
  11.             num++;
  12.             fn();
  13.         }
  14.         fn();
  15.     </script>

4.8拷贝

 浅拷贝

  1. <script>
  2.         // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
  3.         // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
  4.         var obj = {
  5.             id: 1,
  6.             name: 'andy',
  7.             msg: {
  8.                 age: 18
  9.             }
  10.         };
  11.         var o = {};
  12.         // for (var k in obj) {
  13.         //     // k 是属性名   obj[k] 属性值
  14.         //     o[k] = obj[k];
  15.         // }
  16.         // console.log(o);
  17.         // o.msg.age = 20;
  18.         // console.log(obj);
  19.  
  20.         console.log('--------------');
  21.         Object.assign(o, obj);
  22.         console.log(o);
  23.         o.msg.age = 20;
  24.         console.log(obj);
  25.     </script>

深拷贝

  1. <script>
  2.         // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
  3.         var obj = {
  4.             id: 1,
  5.             name: 'andy',
  6.             msg: {
  7.                 age: 18
  8.             },
  9.             color: ['pink', 'red']
  10.         };
  11.         var o = {};
  12.         // 封装函数 
  13.         function deepCopy(newobj, oldobj) {
  14.             for (var k in oldobj) {
  15.                 // 判断我们的属性值属于那种数据类型
  16.                 // 1. 获取属性值  oldobj[k]
  17.                 var item = oldobj[k];
  18.                 // 2. 判断这个值是否是数组
  19.                 if (item instanceof Array) {
  20.                     newobj[k] = [];
  21.                     deepCopy(newobj[k], item)
  22.                 } else if (item instanceof Object) {
  23.                     // 3. 判断这个值是否是对象
  24.                     newobj[k] = {};
  25.                     deepCopy(newobj[k], item)
  26.                 } else {
  27.                     // 4. 属于简单数据类型
  28.                     newobj[k] = item;
  29.                 }
  30.  
  31.             }
  32.         }
  33.         deepCopy(o, obj);
  34.         console.log(o);
  35.  
  36.         var arr = [];
  37.         console.log(arr instanceof Object);
  38.         o.msg.age = 20;
  39.         console.log(obj);
  40.     </script>

5 正则表达式

5.1概述

5.2特点

5.3 使用

 

 eg：

  1.  <script>
  2.         // 正则表达式在js中的使用
  3.  
  4.         // 1. 利用 RegExp对象来创建 正则表达式
  5.         var regexp = new RegExp(/123/);
  6.         console.log(regexp);
  7.  
  8.         // 2. 利用字面量创建 正则表达式
  9.         var rg = /123/;
  10.         // 3.test 方法用来检测字符串是否符合正则表达式要求的规范
  11.         console.log(rg.test(123));
  12.         console.log(rg.test('abc'));
  13.     </script>

5.4特殊字符

5.4.1边界符

5.4.2字符类

  1.  <script>
  2.         //var rg = /abc/;  只要包含abc就可以 
  3.         // 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
  4.         var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
  5.         console.log(rg.test('andy'));
  6.         console.log(rg.test('baby'));
  7.         console.log(rg.test('color'));
  8.         console.log(rg.test('red'));
  9.         var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
  10.         console.log(rg1.test('aa'));
  11.         console.log(rg1.test('a'));
  12.         console.log(rg1.test('b'));
  13.         console.log(rg1.test('c'));
  14.         console.log(rg1.test('abc'));
  15.         console.log('------------------');
  16.  
  17.         var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
  18.         console.log(reg.test('a'));
  19.         console.log(reg.test('z'));
  20.         console.log(reg.test(1));
  21.         console.log(reg.test('A'));
  22.         // 字符组合
  23.         var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
  24.         console.log(reg1.test('a'));
  25.         console.log(reg1.test('B'));
  26.         console.log(reg1.test(8));
  27.         console.log(reg1.test('-'));
  28.         console.log(reg1.test('_'));
  29.         console.log(reg1.test('!'));
  30.         console.log('----------------');
  31.         // 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
  32.         var reg2 = /^[^a-zA-Z0-9_-]$/;
  33.         console.log(reg2.test('a'));
  34.         console.log(reg2.test('B'));
  35.         console.log(reg2.test(8));
  36.         console.log(reg2.test('-'));
  37.         console.log(reg2.test('_'));
  38.         console.log(reg2.test('!'));
  39.     </script>

5.4.3量词符

 eg：

  1. <script>
  2.         // 量词符: 用来设定某个模式出现的次数
  3.         // var reg = /^a$/;
  4.         // console.log(reg.test('a'));
  5.         // console.log(reg.test('aa'));
  6.  
  7.  
  8.         // 1. * 相当于 >= 0 可以出现0次或者很多次 
  9.         // var reg = /^a*$/;
  10.         // console.log(reg.test(''));
  11.         // console.log(reg.test('a'));
  12.         // console.log(reg.test('aa'));
  13.         // console.log(reg.test('aaaaaa'));
  14.  
  15.         // 2. + 相当于 >= 1 可以出现1次或者很多次
  16.         // var reg = /^a+$/;
  17.         // console.log(reg.test(''));
  18.         // console.log(reg.test('a'));
  19.         // console.log(reg.test('aa'));
  20.         // console.log(reg.test('aaaaaa'));
  21.         // 3. ?  相当于 1 || 0
  22.         // var reg = /^a?$/;
  23.         // console.log(reg.test(''));
  24.         // console.log(reg.test('a'));
  25.         // console.log(reg.test('aa'));
  26.         // console.log(reg.test('aaaaaa'));
  27.         // 4. {3 } 就是重复3次
  28.         // var reg = /^a{3}$/;
  29.         // console.log(reg.test(''));
  30.         // console.log(reg.test('a'));
  31.         // console.log(reg.test('aa'));
  32.         // console.log(reg.test('aaaaaa'));
  33.         // console.log(reg.test('aaa'));
  34.         // 5. {3, }  大于等于3
  35.         var reg = /^a{3,}$/;
  36.         console.log(reg.test(''));
  37.         console.log(reg.test('a'));
  38.         console.log(reg.test('aa'));
  39.         console.log(reg.test('aaaaaa'));
  40.         console.log(reg.test('aaa'));
  41.         // 6. {3, 16}  大于等于3 并且 小于等于16
  42.  
  43.         var reg = /^a{3,16}$/;
  44.         console.log(reg.test(''));
  45.         console.log(reg.test('a'));
  46.         console.log(reg.test('aa'));
  47.         console.log(reg.test('aaaaaa'));
  48.         console.log(reg.test('aaa'));
  49.         console.log(reg.test('aaaaaaaaaaaaaaaaaaaaa'));
  50.      //  量词是设定某个模式出现的次数
  51.         var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
  52.         // {6,16}  中间不要有空格
  53.         // console.log(reg.test('a'));
  54.         // console.log(reg.test('8'));
  55.         // console.log(reg.test('18'));
  56.         // console.log(reg.test('aa'));
  57.         // console.log('-------------');
  58.         // console.log(reg.test('andy-red'));
  59.         // console.log(reg.test('andy_red'));
  60.         // console.log(reg.test('andy007'));
  61.         // console.log(reg.test('andy!007'));
  62.     </script>

5.4.4括号总结

  1.  <script>
  2.         // 中括号 字符集合.匹配方括号中的任意字符. 
  3.         // var reg = /^[abc]$/;
  4.         // a 也可以 b 也可以 c 可以  a ||b || c
  5.         // 大括号  量词符. 里面表示重复次数
  6.         // var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
  7.         // console.log(reg.test('abc'));
  8.         // console.log(reg.test('abcabcabc'));
  9.         // console.log(reg.test('abccc'));
  10.  
  11.         // 小括号 表示优先级
  12.         var reg = /^(abc){3}$/; // 它是让abcc重复三次
  13.         console.log(reg.test('abc'));
  14.         console.log(reg.test('abcabcabc'));
  15.         console.log(reg.test('abccc'));
  16.     </script>

5.5.5预定义类

 5.5.6替换

 

  1.   <textarea name="" id="message"></textarea> <button>提交</button>
  2.     <div></div>
  3.     <script>
  4.         // 替换 replace
  5.         // var str = 'andy和red';
  6.         // // var newStr = str.replace('andy', 'baby');
  7.         // var newStr = str.replace(/andy/, 'baby');
  8.         // console.log(newStr);
  9.         var text = document.querySelector('textarea');
  10.         var btn = document.querySelector('button');
  11.         var div = document.querySelector('div');
  12.         btn.onclick = function() {
  13.             div.innerHTML = text.value.replace(/激情|gay/g, '**');
  14.         }
  15.     </script>

6、ES6

6.1let关键字（声明变量）

 

 

 6.2const关键字（声明常量）

         

 注：对应的内存地址不能更改

let、const、var区别

 6.3解构赋值

6.3.1数组解构

 eg：

  1. <script type="text/javascript">
  2. 		// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
  3. 		let ary = [1,2,3];
  4. 		let [a, b, c, d, e] = ary;
  5. 		console.log(a)
  6. 		console.log(b)
  7. 		console.log(c)
  8. 		console.log(d)
  9. 		console.log(e)
  10. 	</script>

6.3.2对象解构

第一种：

第二种：

 eg：

  1. <script type="text/javascript">
  2. 		// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
  3. 		
  4. 		let person = {name: 'lisi', age: 30, sex: '男'};
  5. 		// let { name, age, sex } = person;
  6. 		// console.log(name)
  7. 		// console.log(age)
  8. 		// console.log(sex)
  9. 		
  10. 		let {name: myName} = person;
  11. 		console.log(myName)
  12.  
  13. 	</script>

6.4箭头函数

6.4.1定义

 

  1. <script type="text/javascript">
  2. 		箭头函数是用来简化函数定义语法的
  3. 		const fn = () => {
  4. 			console.log(123)
  5. 		}
  6. 		fn();
  7. 		
  8. 		在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
  9. 		const sum = (n1, n2) => n1 + n2;	 
  10. 		const result = sum(10, 20);
  11. 		console.log(result)
  12. 		
  13. 		在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
  14. 		const fn = v => {
  15. 			alert(v);
  16. 		}
  17. 		fn(20)
  18. 		
  19. 	</script>

6.4.2不绑定this关键字

  1. 头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
  2. 		
  3. 		function fn () {
  4. 			console.log(this);
  5. 			return () => {
  6. 				console.log(this)
  7. 			}
  8. 		}
  9.  
  10. 		const obj = {name: 'zhangsan'};
  11.  
  12. 		const resFn = fn.call(obj);
  13.  
  14. 		resFn();

6.5剩余参数

 

 6.6扩展运算符

 6.6.1扩展运算符应用

1合并数组

  1. 	扩展运算符应用于数组合并
  2. 		let ary1 = [1, 2, 3];
  3. 		let ary2 = [4, 5, 6];
  4. 		// ...ary1 // 1, 2, 3
  5. 		// ...ary1 // 4, 5, 6
  6. 		let ary3 = [...ary1, ...ary2];
  7. 		console.log(ary3)
  8.  
  9. 		合并数组的第二种方法
  10. 		let ary1 = [1, 2, 3];
  11. 		let ary2 = [4, 5, 6];
  12.  
  13. 		ary1.push(...ary2);
  14. 		console.log(ary1)

2.将类数组或可遍历对象转换为真正得到数组

 eg：

  1. // 利用扩展运算符将伪数组转换为真正的数组
  2. 		var oDivs = document.getElementsByTagName('div');
  3. 		console.log(oDivs)
  4. 		var ary = [...oDivs];
  5. 		ary.push('a');
  6. 		console.log(ary);

6.6.2构造函数方法Array.form()

1.将类数组或可遍历对象转换为真正得到数组

2.接受第二个参数，作为类似数组map方法，用于对每个元素处理后放入返回数组

 6.6.3实例方法方法find()

  6.6.4实例方法方法findIndex()

   6.6.5实例方法方法includes()

 6.7模板字符串

  1.  
  2.         //模板字符串（ES6）的使用
  3.         //语法：var str = `es6的字符串`； 反单引号表示
  4.         //用${}在字符串中嵌入变量表达式，
  5.         var username = "张三";
  6.         var str1 = `我的名字是${username}`;
  7.         var str2 = `1+1的结果是${1+1}`;
  8.         document.write(str1); //输出结果为我的名字是username
  9.         document.write(str2); //输出结果为1+1的结果为2

6.8String的扩展方法

1、startsWith（）和endsWith（）

 2、repeat（）

 6.9Set数据结构

  1. 	const s1 = new Set();
  2. 		console.log(s1.size)//0
  3.  
  4. 		const s2 = new Set(["a", "b"]);
  5. 		console.log(s2.size)//2
  6. 		// 去重
  7. 		const s3 = new Set(["a","a","b","b"]);
  8. 		console.log(s3.size)//2
  9. 		const ary = [...s3];
  10. 		console.log(ary)//含a，b的数组

Set数据结构方法

 eg：

  1. const s4 = new Set();
  2. 		// 向set结构中添加值 使用add方法
  3. 		s4.add('a').add('b');
  4. 		console.log(s4.size)
  5.  
  6. 		// 从set结构中删除值 用到的方法是delete
  7. 		const r1 = s4.delete('c');
  8. 		console.log(s4.size)
  9. 		console.log(r1);
  10.  
  11. 		// 判断某一个值是否是set数据结构中的成员 使用has
  12. 		const r2 = s4.has('d');
  13. 		console.log(r2)
  14.  
  15. 		// 清空set数据结构中的值 使用clear方法
  16. 		s4.clear();
  17. 		console.log(s4.size);
  18. 		

  1. 	// 遍历set数据结构 从中取值
  2. 		const s5 = new Set(['a', 'b', 'c']);
  3. 		s5.forEach(value => {
  4. 			console.log(value)
  5. 		})

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号