JS基础回顾2

事件绑定

1. 事件绑定：(DOM 2级事件，事件侦听，事件监听)一个元素对象上面可以绑定多个事件处理函数

• 标准浏览器：addEventListener(事件类型,事件处理函数,是否捕获)
• 事件类型：不带on
• 是否捕获：false：冒泡 true：捕获

    //document.addEventListener('click',fn1,false);
    // document.addEventListener('click',fn2,false);
    // document.addEventListener('click',fn3,false);

• IE浏览器：attachEvent(事件类型,事件处理函数)
• 事件类型：带on

    // document.attachEvent('onclick',fn1);
    // document.attachEvent('onclick',fn2);
    // document.attachEvent('onclick',fn3);

• 事件绑定下面IE和标准浏览器的区别
  • 参数不一样，标准3个，IE 2个
  • 事件类型不一样，标准不带on，IE带on
  • 事件执行顺序不一样，标准顺序执行，IE反向执行
  • 事件处理函数里面的this指向不一样。标准谁调用函数指向谁。IE指向window

    //封装函数解决兼容问题

        function addEvent(obj,etype,fn){//obj:元素对象  etype:事件类型   fn:事件处理函数
            if(obj.addEventListener){//标准
                obj.addEventListener(etype,fn,false);
            }else{//IE
                obj.attachEvent('on'+etype,fn);
            }  
        }

1. 取消事件绑定

• 注意：移除事件监听的参数和添加事件监听的参数是一致的
• removeEventListener();
• detachEvent();
• 注意：所有的DOM 0级事件(普通事件)都可以使用DOM 2级事件(事件绑定)来写，反之不行

        // function removeEvent(obj, etype, fn) {//obj:元素对象  etype:事件类型   fn:事件处理函数
        //     if (obj.removeEventListener) {//标准
        //         obj.removeEventListener(etype, fn, false);
        //     } else {//IE
        //         obj.detachEvent('on' + etype, fn);
        //     }
        // }

        // addEvent(document, 'click', fn1);
        // addEvent(document, 'click', fn2);
        // removeEvent(document,'click',fn2);//移除事件监听
        // addEvent(document, 'click', fn3);

滚轮事件

• IE和chrome：onmousewheel DOM 0级 DOM 2级

• firefox：DOMMouseScroll DOM事件只能在事件绑定中使用。 DOM 2级

  正则

1. 正则的作用：

• 利用正则完成表单验证
• 利用正则完成一些算法(去重,计数......)

1. 创建正则的两种方式

• 构造函数创建正则对象
  • var reg=new RegExp(正则规则,修饰符)
  • 第一个参数就是匹配规则（字符串和变量）
  • 第二个参数可选，模式修饰符

    //i 表示忽略大小写
    //g 表示全局匹配
    //m 表示多行匹配\n

• 字面量方式直接声明（如果正则表达式中有变量则不可用此方式）
  • var reg = /hello/i
  • 规则不能使用变量,默认就是字符串类型，无需添加引号

1. 正则的方法

• test(str)方法在字符串中查找是否存在与正则规则相符合的字符，如果存在则返回true，不存在则返回false
• 可匹配正则的字符串的方法

        //var str = 'adfd22我3fdsaf78dsf7喜欢8f7hg987hgf6h76dsa5f你65df654saff';
        // 使用 match 方法获取匹配内容，返回数组
        // var reg=/[a-z]+/g;
        // console.log(str.match(reg));
        // 使用 search 来查找匹配数据，和全局没有关系，查找第一个匹配值的位置。(-1)
        //console.log(str.search(/[0-9]/));//4
        // 使用 replace 替换匹配到的数据,2个参数：1代表正则，2代表用来替换的字符*****
        //console.log(str.replace(/[0-9]/g,'*'));
        // 使用 split 拆分成字符串数组
        //var str='a1b2c3d4e5f';//[a,b,c,d,e]
        //console.log(str.split(/[0-9]/));
        //exec()方法：和match方法一样，搜索符合规则的内容，并返回内容，格式为数组。

        //用法：正则.exec(字符串)；

1. 正则符号

    //[0-9]   ==  [0123456789]  表示数字
    //[a-z]匹配小写字母
    //[A-Z]匹配大写字母
    //[A-Z0-9a-z]匹配数字字母
    //[123]匹配数字123中的一个
    
    //[^a-z0-9]:取反
    //[^a-z]:非小写字母

• ^行首匹配 以及 取反$行尾匹配

var reg=/^1[3578]\d{9}$/g

• {}:匹配的个数

    // x{3}:匹配3个x
    // x{3,5}:匹配至少3个，最多5个x
    // x{3,}:匹配至少3个x

• this|where|logo 匹配this或where或logo中任意一个

    //过滤敏感词
    // var str='这件衣服是你妈的，还是你妹的，我猜是你大爷的';
    // console.log(str.replace(/妈|妹|大爷/g,'*'));

this

1. this指向

• 有一个总的原则，那就是this指的是调用函数的那个对象
• 指向当前的对象(this:自定义对象)
• 事件处理函数（this:当前点击的元素）
• 构造函数：new出来的实例对象（this就指这个new出来的新对象（实例对象））

1. 改变this指向

• call(),apply(),bind() 都能够改变函数内部的this的指向
• call(),apply(),bind():第一个参数代表this指向，从第二个参数开始代表函数自身参数

    call():从第二个参数开始代表函数自身参数。
    apply():第二个参数是个数组，数组里面放置函数自身的参数。
    bind():bind的参数和call一样的，但是bind返回的是函数体，需要再次触发。

json

1. json数据：前后端交互最好的数据格式

• 它是基于 ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据

1. json的方法

• JSON.parse():用于从一个字符串中解析出json对象，具有json检测功能

• JSON.stringify():用于从一个对象解析出字符串

  var 、 let 、 const

• var声明的变量：全局和局部(函数)
• var、let相同点：写入内存、值可以改变、同时定义多个、松散类型
• var、let区别：
  • 只在let命令所在的代码块{}内有效，即let所声明的变量就“绑定”这个区域，不再受外部的影响
  • Let声明的不存在变量提升(var 前置访问返回undefined--预解析)
  • let不允许在相同作用域内，重复声明同一个变量
  • ES6允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以

• const常量：值不能被改变的（不可重复声明）.其他的特点和let一样

变量的解构赋值

1. 解构：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
2. 解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值

• 数组的解构

    // let arr=[1,2,3,4,5];
    // let num1=arr[0];
    // let [a1,a2,a3,a4,a5]=arr;
    // console.log(a1,a2,a3,a4,a5);

    // let arr=[1,2,[3,4,[5,6,[7,8]]]];
    // let [a,b,[c,d,[e,f,[g,h]]]]=arr;
    // console.log(a,b,c,d,e,f,g,h);//1 2 3 4 5 6 7 8


    // let [a,b,c]=[1,2,3,4];
    // console.log(a,b,c);//1 2 3

    // let [a,b,c]=[1,2];
    // console.log(a,b,c);//1 2 undefined


    // var a=5;
    // var b=10;
    // var [a,b]=[b,a];
    // console.log(a,b);

• 对象的解构赋值

    // let  obj={
    //     n1:10,
    //     n2:20,
    //     n3:30
    // };

    // let {n1,n2,n3}=obj;//变量名就是属性名
    // console.log(n1,n2,n3);


    // let {n1:a,n2:b,n3:c}=obj;//自定义变量名接受，得到值的后者(a,b,c)
    // console.log(a,b,c);

    // let {n2}=obj;//常见的写法
    // console.log(n2);//20

    // let arr=[1,2,3];
    // let [a]=arr;
    // console.log(1);

扩展运算符

1. 扩展运算符：用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值

• 数组的合并

    // let arr1=[1,2,3];
    // let arr2=[4,5,6];
    // let arr3=[7,8,9];
    // console.log([...arr1,...arr2,...arr3]);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

• 求最大最小值

    // console.log(Math.max(...arr1));//3
    // console.log(Math.min(...arr2));//4

• 类数组-->真正的数组

    //let aLi=document.querySelectorAll('li');
    //aLi.push(123);//aLi.push is not a function
    //aLi=[...aLi];
    //aLi.push(123);
    //alert(aLi);

• 引用传递--浅拷贝

    // let arr1=[1,2,3];
    // let arr2=arr1;
    // arr2.push(4);
    // console.log(arr1);//?[1, 2, 3, 4]
    // console.log(arr2);//?[1, 2, 3, 4]

• rest运算符：用三个点号表示，将一组值变成数组(arguments)

    // function sum(...arr){//将实参的值变成数组了
    //     console.log(arr);
    //     let he=0;
    //     for(let i=0;i<arr.length;i++){
    //         he+=arr[i];
    //     }
    //     alert(he);
    // }

    // sum(1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10);

模板字符串

1. 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量(函数,对象...))（${}）
2. 字符串扩展的方法

• repeat(n)方法返回一个新字符串，表示将原字符串重复n次

    //let str='hello';
    //console.log(str.repeat(10));

• includes()：返回布尔值，表示是否找到了参数字符串

    //let str1='javascript';
    //console.log(str1.includes('scr'));//true
    //console.log(str1.includes('sor'));//false
    //console.log(str1.includes('a'));//true

• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部

    let str1='javascript';
    console.log(str1.startsWith('j'));
    console.log(str1.startsWith('java'));
    console.log(str1.startsWith('jiava'));//false

• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部

    console.log(str1.endsWith('t'));
    console.log(str1.endsWith('ript'));
    console.log(str1.endsWith('rpt'));//false

箭头函数

• 箭头函数最吸引人的地方是简洁
• 同时函数体内this对象，就是声明时所在的对象，而不是调用时所在的对象。This不会改变了（箭头函数的this来自父级的，无法改变）
• 函数的参数只有一个的时候，可以省略括号，其他的都要添加括号
• 函数内部return后面只有一句代码的时候可以省略花括号和return

数组和对象的扩展

1. 数组的扩展

• Array.from()方法用于将对象转为真正的数组(类数组转数组)
• Array.of()方法用于将一组值，转换为数组
• fill()方法使用给定值，填充一个数组。改变原数组

1. 对象的扩展

• Object.assign(目标对象，对象1，对象2...)用于对象的合并，将源对象的所有可枚举属性，复制到目标对象

Symbol

1. Symbol--表示独一无二的值，它是js中的第七种数据类型。属于基本类型

• Symbol函数前不能使用new,否则会报错，原因在于symbol是一个原始类型的值，不是对象
• Symbol函数接收一个字符串作为参数，表示对symbol的描述，主要是为了在控制台显示，或者转为字符串的时候，比较容易区分，描述的内容相同仅仅表示的是描述，不代表其他的意义

1. Symbol作用

• 对象的属性一定是字符串，对象的属性可以覆盖
• Symbol可以给对象设置私有属性

• 不能直接使用[symbol()]作为键值，最好添加对应的参数进行区分，而且也不能被for...in遍历出来。但可以通过Object.getOwnPropertySymbols(obj)方法获取一个对象所有的symbol属性

  Generators生成器函数

    // function* fname(){
    //     yield 'hello';
    //     yield 'world';
    //     return 'gameover';
    // }
    
    // let result=fname();//Generator函数会返回一个遍历器对象.
    // console.log(result.next());//{value: "hello", done: false}
    // console.log(result.next());//{value: "world", done: false}
    // console.log(result.next());//{value: "gameover", done: true}

• 总结：调用 Generator函数，返回一个遍历器对象，代表 Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

iterator接口

1. 遍历器（Iterator）它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作
2. 一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator 接口，就可以用for...of循环遍历它的成员

Set、Map

1. set：ES6提供了数据结构Set. 它类似于数组，但是成员的值都是唯一的，没有重复的值

• Set本身是一个构造函数，用来生成 Set 数据结构，数组作为参数

    // let s1=new Set([12,3,45,8,23,12,345,12,34]);
    // console.log(s1);
    // console.log(...s1);//支持扩展运算符

    //数组去重
    // let arr=[1,2,3,4,5,6,6,5,4,3,2,1];
    // console.log([...new Set(arr)]);//[1, 2, 3, 4, 5, 6]

1. map：JavaScript 的对象（Object），只能用字符串当作键。这给它的使用带来了很大的限制。ES6提供了Map数据结构。它类似于对象，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

运动

1. 运动的原理

• 获取元素
• 读写元素的属性以及值
  • getComputedStyle currentStyle 获取任意的css属性 单位
  • offsetWidth offsetHeight 读取尺寸 没有单位
  • offsetLeft offsetTop 读取位置 没有单位
• 定时器的使用基础
  • setInterval setTimeout
  • clearInterval clearTimeout
• 测试一个基本的运动-位置的变化
• 位置变化：定位实现的。

面向对象 VS 面相过程

• 面向过程--函数式：面向过程的思想是把一个项目、一件事情按照一定的顺序，从头到尾一步一步地做下去，先做什么，后做什么，一直到结束
• 面向对象：强调类的概念，通过类可以创建任意多个具有相同属性和方法的实例对象。面向对象的思想是把一个项目、一件事情分成更小的项目，或者说分成一个个更小的部分，每一部分负责什么方面的功能，最后再由这些部分组合而成为一个整体.
  • 面型对象特点：
    • 抽象:关注重点。
    • 封装:函数特点相吻合
      
    • 继承:子类继承父类，不能影响父类。
    • 多态:js使用非常少
• 总结：js基于面向对象--构造函数(类)
• 面向对象的使用场景：
  • 面向对象最适合复杂的场景，但是js本身没有太多复杂的场景。
  • 采用面向对象的写法无非是更好的维护管理代码，因为面向对象的写法可以避免全局污染，方便程序的扩展。
  • js提供的系统类(构造函数)全部采用的面向对象生成的。

本地存储

1. 存

• 写入本地存储（存储时，如果key值相同，会覆盖）
• 如何查看存储的数据：控制面板-->application-->左侧找到localStorage
  • 存储普通字符串

    window.localStorage.name='zhangsan';
    window.localStorage['age']=100;
    window.localStorage.setItem('sex','男');//最优

• 存数组

let arr=['apple','banana','orange'];
localStorage.setItem('names',arr);//最优

• 存对象

let obj={
     a:1,
     b:2,
     c:3
 }
 localStorage.setItem('objdata',obj);//最优
    //存储的是'[object Object]'

1. 取

    // console.log(localStorage.name);
    // console.log(localStorage['age']);
    // console.log(localStorage.getItem('sex'));//最优

1. 删

• 删除单个

    // localStorage.removeItem('names');
    // localStorage.removeItem('objdata');

• 删除全部

localStorage.clear()

1. localStorage的键获取

    //使用key()方法，向其中输入索引即可获取对应的键
    //参数必须存在。
    // console.log(localStorage.key(0));
    // console.log(localStorage.key(1));
    // console.log(localStorage.key(2));
    // console.log(localStorage.key(3));//null

JS基础回顾2

原文：https://www.cnblogs.com/xxswkl-sn/p/11727834.html