ES6

安和桥661
137 阅读10分钟

ES6的常用特性

新增const和let声明变量

var x = '全局变量';
{
  let x = '局部变量';
  console.log(x); // 局部变量
}
console.log(x); // 全局变量

let表示声明变量，而const表示声明常量，两者都为块级作用域；const声明的变量都会被认为是常量，意思就是它的值被设置完成后就不再修改了
如果const的是一个对象，对象所包含的值是可以被修改的，就是对象所指向的地址没有改变就行

    const a = 1 
    a = 0 //报错
    
    const student = {name:'cc'}
    student.name = 'yy';//不报错
    student = {name;'yy'}；//报错

let关键词声明的变量不具备变量提升(hoisting)特性
let和const声明变量只在最近的一个块中(花括号)有效
当使用常量const声明时，请使用大写变量
const在声明时必须被赋值

模板字符串
ES6中字符串拼接，用${字符串}来拼接

    `这是文本：${字符串}`//反引号是tab键上面那个符号

箭头函数(Arrow functions)
ES6中，箭头函数是函数的一种简写形式，使用括号，包裹参数，跟随一个=>，然后写函数体就可以了。
箭头函数的是三个特点：
不需要function关键字来创建函数
省略return关键字
继承当前上下文中的this关键字

    // ES5
var add = function (a, b) {
    return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;

// ES5
[1,2,3].map((function(x){
    return x + 1;
}).bind(this));
    
// 使用箭头函数
[1,2,3].map(x => x + 1);

当函数只有一个参数时，可以省略掉括号；当函数返回只有一个表达是的时候可以省略{}和return;

面向对象介绍

面向过程编程POP
面向过程就是分析出解决问题所需要的步骤，然后用函数吧这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了，就是按照我们分析好了的步骤，按照步骤写解决问题。

面向对象的特性：
1.封装性 2.继承性 3.多态性

创建类

class name {
   class body
}

创建实例  
var xx = new name();

注意：类必须使用new实例化对象

只要new就会调用constructor里面的代码
类里面所有函数不需要写function
多个方法之间不需要添加逗号分隔

extends 继承
image.png 继承中的属性或方法查找原则：就近原则(如果子类有就执行子类的这个方法，如果子类没有就去父类中查找)。

ES6里面的注意点
1.在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
2.类里面的共有属性会让方法一定要加this使用
3.类里面的this指向问题：
constructor里面的this指向实例对象，方法类里面的this指向这个方法的调用者，constructor里面调用方法时，要点击过后再执行方法时， 函数名后面不要加小括号()，不然会直接执行方法

动态添加元素高级
insertAdjacentHTML('beforeend',li)：
四个值

  1. beforeBegin: 插入到标签开始前
  2. afterBegin:插入到标签开始标记之后
  3. beforeEnd:插入到标签结束标记前
  4. afterEnd:插入到标签结束标记后 li里面可以是可以创建字符串：
var li = '<li class = "liactive"><span>新选项卡</span><span class = "iconfont iconfont-guanbi"></span></li>'

双击事件：ondblclick
双击阻止选中文字：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

构造函数对象

  1. 实例成员就是构造函数内部通过this添加的成员如：uname，age，实例成员只能通过实例化的对象new来访问:
    const p = new Star(18//实参 );
    console.log(p.age//形参)；
    console.log(Star.uname)//不可以通过构造函数来访问实例成员
  1. 静态成员在构造函数中本身上添加的成员，如Star.sex=‘男’；静态成员只能通过构造函数来访问：console.log(Star.sex);
    构造函数可以通过原型对象来添加方法
    prototype是原型对象；
    Star.prototype.sing = function() {}
    //构造了一个原型对象

对象里系统自己添加了一个__proto__指向我们构造的函数的原型对象prototype,所以我们可以使用原型对象的属性和方法
方法的查找规则：

  1. 首先看实例化的对象是否有我们调用的这个方法，如果又就执行这个对象上的方法；
  2. 如果没有我们调用的这个方法，因为有__proto__的存在，就去构造函数原型对象prototype身上查找这个方法

image.png

对象原型__proto__)和构造函数(prototype)原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指回构造函数本身
constructor指回构造函数：
如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，就会覆盖掉Star的构造函数，必须手动的利用constructor指回原来的构造函数

    Star.prototype = {
      constructor: Star,
      sing:function() {},
      movie:function() {}
    }

谁调用this指向谁

    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
    }
    var that；
    Star.prototype.sing = function () {
      console.log('我要唱歌')
      that = this;
    }
    var ldh = new Star('刘德华', 18);
    //1.在构造函数中，里面的this指向的是对象实例ldh
    ldh.sing();
    console.log(that == ldh);//ture
    //2.原型对象函数里面的this指向实例对象ldh
原型链

image.png

继承

call():调用这个函数，并且修改函数运行时的this指向

    fun.call(thisArg,arg1,arg2,....)
   //thisArg:当前调用函数this的指向对象(改变后的那个指向)
   //arg1,arg2:传递的其他参数
   
   function fn() {
     console.log('唱歌');
     cosole.log(this);//window
   }
   var o = {
     name:'andy'
   }
   //1. call（）可以调用函数
   fn.call();//唱歌
   //2. call()可以改变这个函数的this指向,此时这个函数的this，就指向o这个对象
   fn.call(o,1,2)

ES5中新增方法

数组方法

www.w3school.com.cn/js/js_array…

字符串方法

trim()方法会从一个字符串的两端删除空白字符。
str.trim()方法并不影响字符串本身，它返回的是一个新的字符串。
表单提交单元格，可以检测用户输入空格

    <input type="text"><button>提交</button>
    <div></div>
    <script>
    var input = document.querySfelector('input');
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.onclick = function() {
      var str = input.value.trim();//用str替代后面这一长串
      if(str === ''){
      //用trim()防止用户输入空格时，不弹出’请输入内容‘，也防止输入空格后length增加
          alert('请输入内容')；
      }
      else{
          div.innerHTML = str://把输入的内容渲染到div里面
      }
    }
    </script>
对象方法

Object.defineProperty()定义对象中新属性或修改原有的属性。

    var obj = {
        name:andy,
        age:18
    }
    
    Object.defineProperty(obj,prop,descriptor)
    // obj:必需，目标对象
    // prop:必需，需定义或修改的属性的名字--age
    // descriptor:必需，目标属性所拥有的特性

第三个参数descriptor说明：以对象形式{}书写

  1. value：设置属性的值默认为undefined，如有prop这个值就修改，如果没有就添加一个prop的值
  2. writable：值是否可以重写，true|false 默认为true
  3. enumerable：目标属性是否被枚举，true|false 默认为true，如果是false遍历的时候就拿不到这个值
  4. configurable：目标属性是否可以被删除或是否可以再次修改特性true|false 默认为true

函数进阶

函数的定义方法
  1. 自定义函数(命名函数)
  2. 函数表达式（匿名函数）var fun = function() {};
  3. 利用new Function('参数1','参数2',...,'函数体')；
  4. 所有函数都是Function的实例(对象)；
  5. 函数也属于对象；
函数的调用方式
    //1.普通函数
    function fn() {alert('1');}
    //fn();  fn.call();
    
    //2.对象的方法
    var o = {
        sayHi:function() {alert('1');}
    }
    o.sayHi();
    
    //3.构造函数
    function Star() {};
    new Star();
    
    //4.绑定事件函数
    btn.onclick = function() {}//点击了按钮就可以调用这个函数
    
    //5.定时器函数
    setInterval(function() {},1000);定时器自动一秒钟调用一次函数
    
    //6.立即执行函数
    (function() {alert('1')};)();立即执行函数是自动调用
函数内this的指向

image.png

改变函数内部this指向

  1. call方法
    call方法可以调用一个对象，也可以改变函数的this指向。
    fun.call(thisArg,arg1,arg2,...); 
    //thisArg是指向向谁，可以是自己(函数调用者)比如this，也可以是其他，比如对象p.
  1. apply方法
    apply()方法调用一个函数，简单理解为调用函数的方法，但是它可以改变函数的this指向。
    fun.apply(thisArg,[argsArray]);
    //thisArg:在fun函数运行时指定的this值
    //argsArray：传递的值，必须包含在数组(伪数组)里面
    //返回值是函数的返回值，因为它就是调用函数
  1. bind方法
    bing()方法不会调用函数，但是能改变函数内部的this指向
    fun.bind(thisArg,arg1,arg2,...);
    //thisArg:在fun函数运行时指定的this值
    //arg1,arg2:传递的其他参数
    //返回由指定的this值和初始化参数改造的原函数拷贝
    
    //如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向此时用bind
高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出

闭包

闭包是一个函数(一个作用越可以访问另外一个函数的局部变量)
闭包的作用就是延伸变量的作用范围
立即执行函数也称为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的变量

递归

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
递归里面必须加return退出条件

  1. 浅拷贝只是拷贝一层，更深层次对象级别的值拷贝引用的地址
    Object.assign(target,...sources)es6新增方法可以浅拷贝
    //target拷贝给谁，sources拷贝对象
    Object.assign(o,obj);//拷贝obj给o
  1. 深拷贝拷贝多层，每一级别的数据都会拷贝

正则表达式

正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式，在技术中，正则表达式也是对象。
创建正则表达式：
1.通过RegExp对象的构造函数创建

    var 变量名 = new RegExp(/表达式/)；

2.通过字面量创建

    var 变量名 = /表达式/；
    var rg = /abc/;
    // /abc/只要包含abc这个字符串返回的都是true

test()正则对象方法，由于检测字符串是否符合该规则，该对象会返回true和false，其参数是测试字符串。
正则表达式里面不需要加引号，不管是数字型还是字符串型

正则特殊字符

一、 边界服
正则表达式中的边界符(位置符)用来提示字符所在的位置，主要有两个
1.^:表示匹配行首的文本(以谁开始)
2.$:表示匹配行尾的文本(以谁开始)
如果^和$在一起，表示必须是精确匹配

二、 字符类：[]表示有一系列字符可供选择，只要匹配其中一个就可以了

    var rg = /[abc]/;//只要输入的内容包含a或者包含有b或者包含有c都返回为true
    
    var teg = /^[abc]$/;//三选一，只有是a、b、c这三个字母才返回true

正则里面的(或者)符号：|符号表示或者用一条竖线表示
范围符：-符号表示范围，如a-z表示英文小写字母从a到z
字符组合：

    var reg = /^[a-zA-Z0-9]$/;
    //26个英文字母(大小写都可以)和数字0-9任意一个字母返回true
    //如果中括号[]里面有^表示取反(就是不包含中括号里的内容都为true),千万别和边界符混淆
    
    var reg1 = /^(abc){3}$/;
    //只有当输入为abcabcabc才为true

量词符：

image.png

在线测试工具：c.runoob.com/

预定义类：

image.png

replace替换

replace()方法可以实现替换字符串的操作，用来替换的参数可以是一个字符串或是一个正则表达式。
replace(参数1，参数2)；
第一个参数：被替换的字符串或者正则表达式
第二个参数：替换为字符串
返回值是一个替换完毕的新字符串，只能替换掉第一个满足条件的字符串

正则表达式参数

   var rg = /表达式/[switch]
   switch(也称修饰符)按照上面样的模式来匹配，有三种值：
   1. g:全局匹配
   2. i:忽略大小写
   3. gi: 全局匹配+忽略大小写
avatar
文章
阅读
粉丝