Js 基础

男娘i 2022-12-04 08:35 176阅读 0赞

**Js的全局作用域就是window**

Function 内存中保存一段代码的函数 代码重用 调用函数 函数名(实参值)

第一种 以声明的方式创建函数 function 函数名(形参列表)\{ 函数体 return 返回值 \} 有一个问题：会被声明提前

第二种 以赋值的方式创建函数 var arr= function (形参列表)\{ 函数体 return 返回值 \}

第三种 用new创建函数 几乎不用 var fun=new Function函数名(形参列表)\{ 函数体 return 返回值 \}

在程序开始执行前！程序会先将var声明的变量和funtion声明的函数，提前到当前作用域的顶部集中创建，而赋值留在原地啊

函数 解决声明提前 赋值方式创建一个函数 var arr= function (形参列表)\{ 函数体 return 返回值 \}

变量存在window中 函数也存在window中

什么是变量 内存中存储一个数据的存储空间，再起一个名字

**重载** [overload][]

重载是多个同名函数，不同形参列表，在调用时，可根据传入的实参列表不同，动态选择匹配的函数执行

Js不支持标准的重载写法，因为js不允许多个同名函数同时存在 解决借助arguments来实现重载

函数都有一个arguments对象，会保存形参数据 有下标有length属性 可以根据length的长度判断用户输入的实参长短 如果.length相同，区分不出来，可以用typeof判断arguments\[i\]的数据类型

**匿名函数** 定义函数时，不被任何变量引用的函数

为什么：1、为了节约内存 2、划分临时作用域 匿名函数自调：定义函数后，立即调用函数，调用后立即释放 ( function (形参列表)\{ 函数体 return 返回值 \})()

**作用域和作用域链**

1、作用域scope：作用域就是一个变量的可用范围，本质上作用域是保存变量的一个对象，为了避免不同范围的变量互相干扰，在全局作用域中保存的变量叫做全局变量，函数作用域中保存的变量叫局部变量

Js中没有块级作用域 也就是说js中的for if 这类都不是作用域

2、作用域链 一个函数可用的所有作用域对象的集合

**闭包闭包原理**

1、闭包 既可以重用一个变量，又保护了变量不被污染

外部是一个以声明的方式创建函数，外层函数将内层函数return到外部，最后调用外层函数，获得内层函数返回的函数对象，保存在变量中，反复使用

问题：局部变量在调用后应该释放，结果没有释放，还累加了

1.  闭包原理 外部的函数对象被内部的函数对象所引用，无法释放

**Js最核心的**

1、JS对象底层，其实都是关联数组，任何对象和数组的成员，都可以用【“下标”】访问，任何对象和数组都可在任何时候随意添加新成员，访问任何对象和数组的不存在位置，都不会报错

2、Js中的函数也是一个普通的对象而已。函数名仅仅是一个普通的变量，函数名变量通过对象地址引用函数 以声明的方式创建函数存在window中

Window.onscroll 页面滚动时

防抖：只要不是最后一次触发，就不执行异步操作

节流：第一次发生请求后，只要响应没回来，就不能发送第二次 定义一个开关布尔类型

document.addEventListener() 方法用来添加事件函授可以使用 [document.removeEventListener()][document.removeEventListener] 方法来移除 document.addEventListener()事件的函数

toUpperCase()  将英文字母转大写
    toLowerCase()  将英文字母转小写

**截取字符串**

substr(start, count)  截取字符串，start开始的下标，count截取的长度，如果count为空，截取最后；start为负数表示倒数
    substring(start, end) 截取字符串，start开始的下标，end结束的下标，如果end为空截取到最后，

**Math对象**

不需要创建，可以直接使用
    PI  取圆周率
    abs()  取绝对值
    floor()  向下取整
    ceil()  向上取整
    round()  四舍五入取整
    max()  取一组数字最大
    min()  取一组数字最小
    pow()  取x的y次幂
    random()  取随机数   >=0   <1

**转换数据类型**

Typeof()   检测数据类型
    Number() 强制转为数值型
    parseInt() 强制转换为整型
    parseFloat() 强制转为浮点型
    toString() 强制将数值型和布尔型转为字符串型

**逻辑短路**

&& 当第一个条件为false的时候，就不需要再执行第二个条件 num>5 && console.log(a);

|| 当第一个条件为true的时候，就不需要再执行第二个条件 num<1 || console.log(a);

alert() 弹出警示(消息)框

prompt() 弹出提示(输入)框，需要使用变量来保存输入的值，类型默认是字符串类型，如果输入框中内容为空，返回空字符(’’)，如果点击取消返回 null

hasOwnProperty 判断对象是否含有某个属性 对象.hasOwnProperty(‘属性名’) 有true

toFixed() toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

事件委托：利用冒泡

e.target 始终指向目标元素不变e.target

This 指向当前元素

NodeName 获取节点名称 可以判断e.target必须指向谁e.target.**nodeName**==”BUTTON”

n<0&&(n=0)短路逻辑

offsetX offsetY 获得界面的坐标 配合e（事件对象）使用

**定时器**

setTimeout(function(){....   },毫秒数) 定时器 一次性的
    setInterval(function(){ alert("Hello"); }, 3000);  方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。周期性的
    clearInterva clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

**倒计时**

<h3 id="time"></h3>
    <script>
    var i=setInterval("data()",2000);
            var num=20;
            function data(){
                num>0 ? num-- : clearInterval(i);
                document.getElementById("time").innerHTML=num;
            }
     </script>

**事件**

event.preventDefault() 取消事件默认行为
    onmousedown 当用户按下鼠标按钮执行Javascript代码
    onmouseenter 鼠标移入
    onmouseleave 鼠标离开
    keydown  按键按下时
    Focus 获得焦点 取值false  true
    Blur 失去焦点
    Click 单击
    Dblclick 双击

**正则**

/ … / 正则需写在/ … /中间

\[ \]里面可以写多个词 列入 我\[草艹\] \[3-9\] \[A-Za-z\]\[\\u4e00-\\u9fa5\]汉字 |竖线或 卧槽|我草

\\d数字 \\d\{n，m\} n个数字 \[0-9\]范围数字 ^匹配开头 $匹配结尾 i严格验证，写在//i后 \\s空字符

3-12位字母数字严格验证 /1\{3,12\}$/i \\b 字母

数量词 \*可有可无多了不限 ？可有可恶，最多一次 +至少一次

（）括号分组

开头和结尾的空字符 匹配开头^\\s+ 结尾\\s+$ 完整开头结尾/^\\s+|\\s+$/g

2位数字 var rega=/2\{2\}$/;

test() 方法用于检测一个字符串是否匹配某个模式. 参数string 需要检测的字符串（必须）常用正则.test

RegExp实例方法：

indexOf 查找固定敏感词var i=str.indexOf(‘敏感词’,fromi) fromi第一个敏感词后面的下一个，不加从0开始 如果找到返回下标位置，否则返回-1

Search var i=str.search(/正则/i ) 返回值和 indexOf 一样 只能获取位置

Match var arr=str.match(/正则/ig) 可以获取位置和内容 返回值：如果找到会返回一个数组 ,没找到返回null 数组包含下标和内容，内容arr\[0\],下标arr\[“index”\] index必须是双引号 不加g只能获取一个敏感词 加了g可以获取多个敏感词，但是就只能返回敏感词的内容，不能返回下标

替换 2种情况：简单替换 将所有敏感词都替换为统一的新词 2高级替换 根据每次找到的敏感词的不同 动态替换

1、replace简单替换 str=str.replace(/正则/ig,”新词”) 坑 替换后不报错也不成功 因为不能对原字符串直接修改

2、replace高级替换str=str.replace(/正则/ig,回调函数function(kokoko) 要求必须有一个参数kokoko接住本次找到的关键词，必须return处理后的新词)

回调函数：所有我们自主定义的，但是不是由我们自己调用执行的函数

定义三个函数删除开头删除结尾删除开头和结尾的空字符

删除开头 function rtrr(str)\{ str.replace(/^\\s+/,””\}

切割：2种情况

简单切割：切割符是固定的 arr.split(“@”) @切割的标识 返回数组 执行arr.\[0\] 又比如拿到字符串中一个变化的值 var arr=url.split(“=”)\[1\]返回数组

3、复杂切割：切割符是固定的，但是有规律 var arr=str.split(/正则/i )

获得用户输入的搜索关键词 将用户输入的整个字符串，按不确定个数的空格分开var arr=str.split(/\\s+/i )

1、Test()

RegExpObject.test(string)

判断string中是否有与表达式匹配的字符串，有则返回true,否则返回false

例如

var patt1=new RegExp(“e”,ig);

document.write(patt1.test(“The best things in life are free”));

由于该字符串中存在字母 “e”，以上代码的输出将是：true

focus() 使元素自动获取焦点

reduce() 计算数组元素相加后的总和 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue) total：必需。初始值, 或者计算结束后的返回值 currentValue： 必需。当前元素

**核心DOM函数↓**

getAttribute()  var 属性值=元素.getAttribute("属性名") 获取属性值
    
    setAttribute() 元素.setAttribute("属性名","新值") 修改属性值
    
    hasAttribute var bool=元素.hasAttribute("属性名") 判断元素是否包含该属性
    
    removeAttribute 元素.removeAttribute("属性名") 移除元素上的指定属性

**获取样式 2步**

1. 先获得计算后的样式对象

var style=getComputedStyle(元素)

获得指定元素计算后的完整样式对象

强调: getComputedStyle是内置的全局函数，可直接使用！

返回值: 是一个包含所有css属性的巨大的对象

2. 才是从样式对象中提取想要的css属性:

var 属性值=style.css属性

强调: 计算后的样式，都是只读的。

因为样式的来源不确定，不确定有多少元素正在共享该属性。所以不允许擅自修改。以免牵一发而动全身。

总结: 想修改一个元素的css属性:

元素.style.css属性=值

想获取一个元素的css属性:

getComputedStyle(元素).css属性

Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数：

**Css扩展属性**

data-... 可以为元素添加自定义的扩展属性
    
    dataset 元素的自定义属性data-... 可以通过dataset访问dataset . ...

**时间↓**

new Data(...) . 对象自动使用当前的日期和时间作为其初始值。
    
    toLocaleString 可根据本地时间把 Date 对象转换为字符串，并返回结果 2020/4/13 上午11:44:41
    
    formatDate 标准日期格式

**Promise ↓**

Promise是保证多个异步函数可以顺序执行，防止回调地狱

使用：Promise function()\{return new Promise(function arr(door,err)\{ 执行语句完成后打开door(),如果需执行错误语句打开err()\})\} 必须使用return返回结果

执行： 在function外先执行第一个函数arr（），.then(接下一个new promise函数),.catch(接err传出来的错误内容)

.then和.catch里面必须是函授

Parse join解析

**this**.**others**=result.**data**.slice(3); slice() 方法可从已有的数组中返回选定的元素

split() 方法用于把一个字符串分割成字符串数组。 参数 必须开始下标，结束下标可选

Arguments

**节点树: 包含所有节点内容的完整树结构**

**两大类关系：** **不推荐使用**

1. 父子关系:

节点.parentNode 获得当前节点的父节点

父节点.childNodes 获得当前父节点下的所有直接子节点的集合。

强调: childNodes返回的是一个类数组对象，今后我都简称集合。

父节点.firstChild 获得当前父节点下的第一个直接子节点。

父节点.lastChild 获得当前父节点下的最后一个直接子节点。

2. 兄弟关系:

节点.previousSibling 获得当前节点平级的前一个相邻的兄弟节点

节点.nextSibling 获得当前节点平级的下一个相邻的兄弟节点

问题: 同时包含看不见的换行和空字符，也是节点对象，严重干扰查找。

**元素树: 仅包含元素节点的树结构。**

说明: 元素树不是一棵新树，而是原来节点树中添加了仅指向元素节点的新属性而形成一棵子树结构。

大类关系： **推荐使用**

1. 父子关系:

元素.parentElement 获得当前元素的父元素。

说明: 其实也可以用parentNode。

父元素.children 获得当前父元素下的所有直接子元素的集合。

强调: children\[ \]返回的是一个类数组对象，今后我都简称集合。

父元素.firstElementChild 获得当前父素下的第一个直接子元素。

父元素.lastElementChild 获得当前父元素下的最后一个直接子元素。

2. 兄弟关系:

元素.previousElementSibling 获得当前元素平级的前一个相邻的兄弟元素

元素.nextElementSibling 获得当前元素平级的下一个相邻的兄弟元素

总结: 今后只要按节点间关系查找，都用元素树的属性代替节点树的旧属性。

何时: 今后只要已经获得一个节点对象，找周围附近的节点时。就用节点间关系查找。

querySelector var 元素=父元素.querySelector(“任意复杂的选择器”) 在指定父元素下查找符合选择器要求的一个元素返回值: 如果找到，返回一个元素对象 如果没找到，返回-1

querySelectorAll var 集合=父元素.querySelectorAll(“任意复杂的选择器”)在指定父元素下查找符合选择器要求的多个元素返回值: 如果找到，返回多个元素的集合，如果没找到，返回空集合: \[\].length=0

**创建一个空元素**

createElement 创建一个空元素 var a=document.createElement(“a”); 只能用document调用 赋值a.href=“…” 问题网页上无法显示出来 因为没有挂载到dom

**将空元素挂载到DOM树**

appendChild 父元素.appendChild(新元素) 追加到一个父元素下的所有子元素末尾
    
    insertBefore 父元素.insertBefore(新元素, 现有元素) 插入到一个父元素下的某个子元素之前
    
    replaceChild 父元素.replaceChild(新元素，旧元素) 替换父元素下一个现有的旧元素

**BOM**

history 管前进后退  前进一步: history.go(1) 后退一次: history.go(-1)
    
    location 管地址栏
    
    document 其实就是DOM中的document对象
    
    navigator 管浏览器配置信息
    
    screen 管显示设备的信息
    
    event 管事件处理

@click="active='tab-container1'"> **active**是data中的数据
    
    <a href="javascript:history.go(-1)">返回上一步</a>
    
    window.open(URL,name,features,replace)
    
    open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

**浏览器代表**

-webkit-代表chrome、safari私有属性
    
    -ms-代表[IE浏览器](https://www.baidu.com/s?wd=IE%E6%B5%8F%E8%A7%88%E5%99%A8&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao)私有属性
    
    -moz-代表firefox浏览器私有属性
    
    -o-代表opera

--------------------

1.  a-z0-9 ↩︎
2.  0-9 ↩︎

[overload]: http://tts.tmooc.cn/video/javascript:;
[document.removeEventListener]: https://www.runoob.com/jsref/met-document-removeeventlistener.html