JS基础回顾1

JS介绍

• window:系统定义的，JavaScript最大的对象，代表浏览器的一个窗口
• 前端工作核心：渲染 用户体验 性能优化
• JavaScript是一种轻量级、解释型的Web开发语言
  • 轻量级：比较其他的企业级(java,c++,c#)，比较简单不能操作系统文件。(Node.js)
  • 解释型：无需服务器环境，直接浏览器解析。
• 核心组成部分
  • ECMAscript:欧洲计算机协会组织提供语法和基本对象。
  • DOM：文档标签结构

  • BOM：浏览器，浏览器打开的一个窗口。

    变量

• 所谓变量，就是特定时间用于保存特定值的一个名字而已，并且初始化后可以再次改变的量。
• 变量的命名规则：字母，数字，下划线，$符号组成，数字不能开头。
• 变量的特点
  • 值可以改变的
  • 同时定义多个变量
  • 写入内存，文档中任意的使用
  • 前置访问不报错，返回undefined

  • 松散类型：js定义变量无需考虑变量的数据类型。

    数据类型

1. js数据类型(基本类型、复杂类型(引用类型-object))

• number:数字
• string:字符串,放在引号里面的内容都是字符串,需要前后添加引号(单引号或者双引号)
• boolean:布尔类型(true真/false假)
• undefined:未初始化，值不存在，属性不存在......(js特殊的数据类型)。
• null:空对象(js特殊的数据类型)。
• 对象类型-object(引用类型)

1. 检查数据类型--typeof()方法--括号可以省略

// console.log(typeof(num));//number,输出的number这个值是个字符串。
// console.log(typeof str);//string

运算符

• +：字符串拼接，只要加号两边有一边是字符串，加号就是拼接的作用，若同为数字类型则运算
• 赋值运算符 = 将等式右边的结果赋值给左边

        var num = 10;
        num = num + 20;//将上面的num+10再赋值给num;
        num += 20;//复合的赋值运算符，和上面意义是一样，写法更优,更合理。
        num -= 10;//num=num-10;  40
        num *= 1; //num=num*1;   40
        num /= 8; //num=num/8;   5
        num %= 2; //num=num%2;   5%2   (求余数、取模)

• 隐式转换：+ - * / %都具有隐式转换(隐式转换：看不到的，系统内部自动完成)
  • 将字符串或者布尔值转换成数字

  // console.log(false + true);//1
  // console.log(4 - '5');//-1

  关系运算符

1. 比较运算符结果：布尔值。
2. 数字和字符串进行比较:具有隐式转换
3. 字符串的比较遵循unicode编码。
4. == ===

• ==:具有隐式转换，比较的是值是否相等。(比较的核心应该是数值)
• ===:比较的是值和类型。

1. js下面的两个特殊的类型：null和undefined

    // console.log(null==undefined);//true  系统约定的。
    // console.log(null==null);//true  系统约定的。
    // console.log(undefined==undefined);//true  系统约定的。
    //其他的任何类型的值都无法和null或者undefined相等。

逻辑运算符

• 逻辑运算符的结果不一定是布尔值，运算时转布尔值进行的。

1. && and --和

• 将对应得操作数转换成布尔值，
• 如果第一个操作数为真，继续执行第二个操作数，结果一定是第二个操作数。
• 如果第一个操作数为假，结果就是第一个操作数，第二个操作数跳过，称之为程序短路。

1. || or --或

• 如果第一个操作数为真，第二个操作数跳过，结果一定是第一个操作数。
• 如果第一个操作数为假，结果一定是第二个操作数的值。

1. ! not --逻辑非

• 逻辑非的结果一定是布尔值

  一元运算符

1. 只有一个操作数。 ++加1 --减1

• num++:++在操作数的后面，先让操作数参与运算，然后在自加1

• ++num:++在操作数的前面，先让操作数自加1，然后再参与运算

  NaN的概念及应用

• NaN:当数学计算无法得到数字结果，该变量的值为NaN

• isNaN():该方法判断num变量的值是否是NaN（不是一个数字）

  函数的返回值

• 函数都有一条return语句，return语句导致函数停止执行，并返回它的表达式的值给调用者
• 如果return语句没有相关的表达式，则函数返回undefined
• 函数的好处
  • 函数解决代码冗余，一旦代码出现冗余，封装函数。
  • 封装--将多行代码放到函数体内，形成功能。
  • 重用性--反复使用

  • 可扩展性--利用参数将整个函数封装的功能变的更灵活。

    预编译

• 第一步：JS的预编译:代码的执行前要做的事情,或者说代码进入浏览器预览之前系统隐式操作的。(隐式的)。

1. 找var关键字,找到了var关键字提前赋值undefined给这个变量. 找function关键字,提前将整个函数体给这个函数名
2. 如果变量名和函数名重复,函数名优先
3. 函数的参数类似于变量，函数内部同样做预解析，支持预解析
4. if语句和for语句里面的变量和函数做预解析提前赋值undefined

• 第二步：JS代码的执行（在编译后的基础上开始从上到下执行脚本,遇到错误时中断,函数声明跳过）

  递归函数

• 递归函数是在一个函数通过名字调用自身情况下构成的

• 递归函数就函数内部调用函数本身。

  事件

onclick　　点击事件
onload　　用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
onunload　　用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）
onchange　　内容变化事件（常结合对输入字段的验证来使用）
onmouseover　　鼠标移动到HTML元素上方的事件
onmouseout　　鼠标移出HTML元素上方的事件
onmousedown　　鼠标按下的时候触发的事件
onmouseup　　鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）
onfocus　　元素获取焦点事件
onblur　　元素失去焦点事件
onabort　　图像的加载失败
ondblclick　　双击事件
onerror　　当加载图像和文档时发生错误
onkeydown　　键盘按键被按下发生的事件
onkeyup　　键盘按键被松开发生的事件
onkeypress　　键盘按键按下并松开发生的事件
onmousemove　　鼠标移动
onresize　　窗口或者框架被重新调整大小
onselect　　文本被选中
onreset　　重置按钮被点击
onsubmit　　提交按钮被点击

数组

• 创建数组对象的两种方式
  • 利用构造函数创建数组对象

  var arr=new Array(123,'hello',function(){alert('我是函数')})

  • 利用字面量创建数组对象(简写风格)

  -var arr1=[123,'hello',function(){alert('我是函数')}]

• 区别：当数组只有一项值，而且这个值是数字，在构造函数创建方式里面这个数字代表数组的长度。但是在字面量创建方式中依然代码数组的一项值
• Array.isArray()：确定括号中的某个值到底是不是数组

 // var names = ['zhangsan', 'lisi', 'wangwu'];
 // var n = null;
 // console.log(typeof n);//object  空对象
 // console.log(typeof names);//object  数组对象
 // console.log(Array.isArray(names));//true
 // console.log(Array.isArray(n));//false

数组的方法

1. push() 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
2. pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
3. unshift()方法能够在数组前面添加任意个项并返回新数组的长度
4. shift() 方法能够移除数组中的第一个项并返回该项，同时将数组长度减 1
5. reverse() 方法会反转数组项的顺序
6. sort() 方法按字母表升序排列数组项
7. concat() 方法可以基于当前数组中的所有项创建一个新数组，参数可以是数组项或者数组--不会改变原数组
8. slice() 方法它能够基于当前数组中的一或多个项创建一个新数组。可以接受一或两个参数，即要返回项的索引起始和结束位置，不包括结束位置--不会改变原数组
9. splice() 方法，对数组进行删除、插入、替换，是最强大的数组方法，返回值是截取的数组项---改变原数组

    //1.删除,第一个参数开始的索引,第二个参数代表截取的长度
        // var arr=["a", "b", "c", "d", "e", "f", "g"];
        // console.log(arr.splice(2,3));//["c", "d", "e"]
        // console.log(arr);//["a", "b", "f", "g"]

    //2.插入,第一个参数开始的索引,第二个参数代表截取的长度,从第三个参数开始，代表插入的值。
        // var arr=["a", "b", "c", "d", "e", "f", "g"];
        // console.log(arr.splice(2,0,'hehe','xixi','haha'));//添加了三项
        // console.log(arr);//["a", "b", "hehe", "xixi", "haha", "c", "d", "e", "f", "g"]

    //3.替换
        // var arr=["a", "b", "c", "d", "e", "f", "g"];
        // console.log(arr.splice(2,3,'hehe','xixi','haha'));//[ "c", "d", "e"]
        // console.log(arr);//["a", "b", "hehe", "xixi", "haha", "f", "g"]

1. join()方法，将数组转换成对应的字符串。参数就是连接符
2. indexOf()/lastIndexOf()返回要查找的项在数组中的索引位置，没找到的情况下返回-1（从前往后/从后往前）。

• 两个参数：要查找的数组项和表示查找起点位置的索引(可选的)

1. has(arr,60)判断数组中是否存在60这个元素，返回布尔类型
2. 迭代方法：5个

• 两个参数：
  • 第一个参数：要在每一项上运行的函数。
    • 此函数会接收三个参数：数组项的值、该项在数组中的位置、数组对象本身。
  • 第二个参数：（可选的）运行该函数的作用域对象（影响 this 的值）。
• every()对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true
• some()对数组中的每一项运行给定函数，如果该函数对任意一项返回 true ，则返回 true
• filter()对数组中的每一项运行给定函数，返回该函数结果为 true 的项组成的数组
• map() 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。返回就是数组，不考虑true或者false
• forEach() ：对数组中的每一项运行给定函数。这个方法没有返回值--取代for

1. 归并

• reduce() 方法从数组的第一项开始，逐个遍历到最后
  • 第一个参数：函数

  • 第二个参数：迭代的初始值。(可选的)

    字符串的方法

1. charAt(num):返回对应字符串索引的内容
2. charCodeAt(num):返回对应的字符串索引的内容的unicode编码
3. String.fromCharCode(unicode编码);将参数中的unicode编码返回成对应的字符串的内容，多个编码用逗号分隔
4. trim() 创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果
5. split——根据分隔符、将字符串拆分成数组

console.log('abcde'.split('',4))

1. substring()：用来截取字符串的内容

• 没有参数全部截取。相当于从第0位开始截取
• 一个参数代表截取从参数的位置往后的字符串
• 两个参数代表截取两个参数之间的字符串，包括第一个参数的位置
• 两个参数的时候，当第二个参数小于第一个参数，自动交换位置
• 如果是负数，当做0来处理

1. substr(start, length); 用来截取字符串的内容

• start：开始的索引，如果为负数，从后往前进行数，包括开始的索引
• length：截取的长度

1. toUpperCase()转换成大写
2. toLowerCase()转换成小写

严格模式"use strict"

• 将"use strict"放在脚本文件的第一行，则整个脚本都将以"严格模式"运行
• 将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行。
• 语法和行为改变
  1. 变量显式声明：一定加var
  2. 禁止使用with语句(性能)
  3. 禁止this关键字指向全局对象
  4. 函数不能有重名的参数
  5. 禁止八进制表示法

  6. 不允许对arguments赋值,禁止使用arguments.callee

     日期对象

    //var date=new Date();//Date:日期类 date：日期对象。
    //console.log(date);
    //Fri Sep 06 2019 14:57:34 GMT+0800 (中国标准时间)
    //console.log(date.toLocaleString());
    //2019/9/6 下午2:59:43

// var d=new Date();
        // console.log(d.getYear());//119   1900-2019的年份差。
        // console.log(d.getFullYear());//2019
        // console.log(d.getMonth()+1);//9
        // console.log(d.getDate());//6
        // console.log(d.getDay());//5  星期五
        // console.log(d.getHours()+':'+d.getMinutes()+':'+d.getSeconds());

定时器

1. setInterval(函数名称，时间)；间隔定时器(反复调用)
2. clearInterval( 定时器的返回值 ); 停止定时器
3. setTimeout(函数名称，时间); 延时定时器，执行一次
4. clearTimeout( 定时器的返回值 ); 停止定时器

• 注意：定时器的第一个参数是函数，但是函数是由定时器来触发的，不是自动触发

        // var num = 1;
        // var timer = window.setInterval(function () {
        //     console.log('我是定时器里面的内容' + num);
        //     num++;
        // }, 1000);
        //每个1s钟执行一次内部的函数。

        // document.onclick=function(){
        //     clearInterval(timer);//timer:定时器的返回值
        // }

BOM对象

• BOM:浏览器的对象模型---BOM的核心就是window
• window:浏览器打开的一个页面(js里面最大的对象)
• BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关
• window下面有很多的子对象
  • location对象:url地址栏
    • href属性：获取地址栏里面的所有的信息.(读写的能力)
    • search属性：获取地址栏后面的信息，问号后面的数据，包括问号
    • hash:获取哈希值--实现路由(单页面应用)的核心的原理：通过hash的改变进行操作的
    • reload():刷新页面
    • reload(true):缓存刷新
  • history：历史记录
    • history.go() 函数 -- 前进或后退指定的页面数（负数后退，正数前进）
    • history.back() 函数 -- 后退一页
    • history.forward() 函数 -- 前进一页
    • history.length 属性 -- history对象中缓存了多少个URL
  • navigator对象--浏览器版本信息等

    //console.log(navigator.userAgent);
    //Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
    //Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR)
    //Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

• 可视区宽高：clientWidth/clientHeight

• 滚动条距离：scrollTop/scrollLeft

  DOM对象

1. 获取元素

• getElementById()： 获取特定 ID 元素的节点--最优
• getElementsByTagName()： 获取相同元素的节点列表，返回类数组，使用[0]来获取(就算是一个也是类数组)
• getElementsByClassName()： 获取相同类名的节点列表（IE8及以下不支持），返回类数组
• 查询选择--获取元素的方式和css获取元素一样的
  • querySelector()： 通过选择器获取元素，如果获取多个只返回第一个
  • querySelectorAll()： 通过选择器获取元素，可同时获取多个元素，类数组

1. 元素的增删改查

• document.createElement(元素节点的名称)) 创建一个元素节点,元素对象存在的
• 父节点.appendChild(元素节点) 把元素节点插入到父节点的内部最后的位置
• 父节点.insertBefore(新的元素节点,存在元素节点) 在父节点内,把新的元素节点插入到已经存在的元素切点的前面
• 父节点.removeChild(node) 删除父节点内部的子节点
• obj.cloneNode() 克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆
• 父元素.replaceChild(新添加的节点 , 被替换的节点) 替换子节点
• innerHTML：读写元素节点里的内容（包括元素）,从节点起始位置到终止位置的全部内容,包括内部的元素和格式
• outerHTML：读写元素节点里的内容（包括元素）,除了包含innerHTML全部内容外, 还包含元素节点本身
• innerText：读写某个元素节点的文本内容,所有的文本内容

1. 高级选取（第一个子节点，最后一个子节点，上一个兄弟节点，下一个兄弟节点(包含空白和不包含空白等分成8个属性)）

• firstChild/firstElementChild
• lastChild/lastElementChild

1. 自定义属性的操作

• getAttribute()/获取
• setAttribute()/设置
• removeAttribute()/删除

1. 读取css属性的值

• js提供了5个常用的属性词：5个属性词是只读的,不能赋值,没有单位
  • offsetWidth/offsetHeight:获取盒模型的尺寸。(width+padding+border)
  • offsetLeft/offsetTop:获取元素的位置(元素在文档中的位置，如果没有定位，依然也能够获取元素的位置)
  • offsetParent：获取定位父级元素对象，如果没有定位父级，就是body元素
• 获取任意的css属性值
  • getComputedStyle:获取任意的css属性值。//标准浏览器
  • currentStyle:获取任意的css属性值。//IE8及以下浏览器
• 利用style获取css属性值--获取内联css的属性值
• cssText利用css文本的形式,接收的值就是css代码

1. 文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素

   event对象

• 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有事件相关的信息
• 标准浏览器的事件对象是事件处理函数中的一个隐藏的（第一个）参数，可以通过参数获取事件对象
• 老版本的IE浏览器默认自带event对象，无需再次声明

1. button属性:它是一个数字，代表鼠标按键

• 0代表鼠标按下了左键
• 1代表按下了滚轮
• 2代表按下了右键

1. which属性：获取鼠标和键盘的按键对应得Unicode编码。(低版本浏览器不支持)

• 1代表鼠标按下了左键
• 2代表按下了滚轮
• 3代表按下了右键

1. clientX,clientY：鼠标相对于可视区的位置
2. pageX,pageY：鼠标相对于文档的位置
3. offsetX,offsetY：鼠标相对于操作元素(鼠标点击元素)到元素边缘(左上)的位置
4. screenX，screenY：显示屏的距离
5. keyCode和which 获取键盘上按键对应的unicode编码(which有兼容问题)

// var oBox=document.querySelector('.box');
// document.onkeydown=function(ev){
//     var ev = ev || window.event;
//     if(ev.keyCode===65){
//         oBox.style.left=oBox.offsetLeft-5+'px';
//     }else if(ev.keyCode===68){
//         oBox.style.left=oBox.offsetLeft+5+'px';
//     }else if(ev.keyCode===87){
//         oBox.style.top=oBox.offsetTop-5+'px';
//     }else if(ev.keyCode===83){
//         oBox.style.top=oBox.offsetTop+5+'px';
//     }
// }


//ev.keyCode===13 && ev.ctrlKey//组合键

事件流和事件冒泡

1. 事件流：事件流描述的是从页面中接收事件的顺序

• 网景：netscape 事件捕获
• 微软：microsoft 事件冒泡，事件由最具体的元素先接收，逐级向上传播到最不具体元素，直到document
• 冒泡：具体-->最不具体的
• 捕获：最不具体-->具体的

1. 事件冒泡

• 取消冒泡：让当前操作的具体元素对象（冒泡元素）的事件不会冒泡到父级（外层）

        if(ev.stopPropagation){
            ev.stopPropagation();
        }else{
            ev.cancelBubble=true;
            }

浏览器的默认行为

• 常见的默认行为：a的链接 鼠标右键 图片
• 阻止浏览器的默认行为
  • ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件
  • ev.returnValue = false; 非标准浏览器（IE8）阻止默认事件
  • return false; 退出执行, 所有触发事件和动作都不会被执行. 可以用来替代 preventDefault

    //     var ev=ev||window.event;
    //     ev.returnValue=false;
    //     ev.preventDefault();
    //     return false