深入
法典:
// 函数声明
f(); // 'web'
function(){
console.log('web');
};
复制代码
// 函数表达式
g(); // Uncaught TypeError: g is not a function
var g = function(){ // 换成 let 声明也一样
console.log('web');
}
复制代码
常量的完整 JavaScript 实现由 3 部分组成:核心 ECMAScript、文档对象模型 DOM 和浏览器对象模型 BOM。JavaScript 是一种文字脚本语言,一种动态类型、弱类型、基于原型的语言,内置了对键入的支持。JavaScript具有的特点:一种解释型脚本语言,主要用于为HTML页面添加交互行为,可以直接嵌入HTML页面中,但编写为单独的js文件便于结构和行为的分离,跨平台的特点,绝大多数浏览器都支持,可以在多个平台上运行。JavaScript 句子类型差异:区分大小写,变量为弱类型,末尾的分号是可选的,解释与 Java、C 和 PHP 语言中的注释相同,大括号表示代码块。
示例 {} 包含表示代码块的内容
法典:
if(test1=="red") {
test1 = "blue";
alert(test1);
}
复制代码
JavaScript 关键字:
break,else,new,var
case,finally,return,void
catch,for,switch,while
continue,function,this,with
default,if,throw
delete,in,try
do,instanceof,typeof
复制代码
JavaScript 变量
在 JavaScript 中,变量是用于存储信息的容器,变量有两种类型的值,原始值和引用值。
JavaScript的原始类型,即Undefined,Null,Boolean,Number和String。字符串是 JavaScript 的基本数据类型。数据类型表示数据类型,JavaScript 语言中的每个值都属于某种数据类型。JavaScript 数据类型分为两类:值类型(原始值)和引用数据类型(参考值)。值类型:字符串字符串、数字、布尔值、null 表示 null、未定义、符号是 ES6 引入的一种新的基元数据类型,表示唯一值。参考数据类型:对象对象、数组数组、函数函数。JavaScript 提供了 typeof 运算符来确定值是否在某种类型的范围内。未定义类型只有一个值,该值未定义。当断言变量未初始化时,变量的默认值为未定义。null 类型只有一个 null 值,而 undefined 值实际上是从值 null 派生的,因此 JavaScript 将它们定义为相等的。null 和 undefined 表示这两个值相等,但含义不同。未定义是在声明变量但未初始化时分配给变量的值,null 表示尚不存在的对象。
法典:
console.log( null == undefined); // true
复制代码
布尔类型的两个值为真和假。键入 Number,所有物理操作都返回十进制结果。Number.MAX_VVALUE 和 Number.MIN_VALUE,用于定义“数字集”值的外部边界。如果生成的数值结果小于 Number.MAX_VALUE,则会将其分配给值 Number.POSITIVE_INFINITY,表示不再有数值。如果生成的值大于 Number.MIN_VALUE,则会将其分配给值 Number.NEGATIVE_INFINITY,表示不再有 Number 值。有一个值表示无穷大为无穷大。Number.POSITIVE_INFINITY的值是无穷大,Number.NEGATIVE_INFINITY的值是 -无穷大。
使用 isFinite() 方法确定参数值是否有限。
特殊 NaN,表示非数字。像无穷大一样,NaN不能用于算术估计。请注意,NaN 不等于自身。
例:
console.log(NaN == NaN) // false
console.log(isNaN("66")); // false
复制代码
String 类型是唯一
没有固定大小的基元类型,由双冒号或单冒号声明。typeof 运算符用于获取变量或表达式的类型。
返回值:
undefined,变量是Undefined类型
boolean,变量是Boolean类型的
number,变量是Number类型的
string,变量是String类型的
object,变量是一种引用类型或者Null类型
复制代码
例:
console.log(typeof 12); // number
复制代码
typeof 运算符返回空值的对象。
实例运算符,用于确定引用类型属于哪种类型。
例:
var a = new Array();
if(a instanceof Array) {
console.log('a是一个数组类型');
}else{
console.log('a不是一个数组类型');
}
复制代码
该类型转换 Number 变量以将变量转换为数值类型。字符串变量,将变量转换为字符串类型。布尔变量,将变量转换为布尔类型。parseFloat 变量,将变量转换为浮点类型。parseInt 变量,将变量转换为整数类型。运算符运算符:赋值运算符、算术运算符、比较运算符、逻辑运算符、一元运算符、二元运算符、三元运算符。
例:
赋值运算符的符号为=
算数运算符:+,-,*,/,%
比较运算符:>,>=,<,<=,!=,==,===,!==
逻辑运算符:
&&,逻辑与,表示表达式前后全为true才能返回true
||,逻辑或,表示表达式前后只要有一个true就返回true
!,逻辑取反,表示表达式后若为true,则返回false,否则反之。
复制代码
++自递减,自身每次执行加1,--自递减,自身每次执行减去1.i++,该值首先参与外部表达式的操作,再将自身值加1。 ++i,i 先给自己的值加 1,然后参与外部表达式的操作。 +=,a+=3 等于 a=a+3。事实也是如此。三元运算符的表达式格式为:条件?正:假运算符优先级:算术运算符>比较运算符>逻辑运算符>赋值运算符。分支循环,if-else,条件判断,句子,切换大小写,选择句子,for-in循环,for-in,遍历句子,whilejavascript 日期转换字符串,循环,句子,do-while,循环句子
例:
if(条件 1) {
当条件1为true时执行的代码
}else if(条件 2){
当条件2为true时执行的代码
}else{
当条件1和条件2都不为true时执行的代码
}
复制代码
例:
switch(n){
case1:
执行代码块1
break;
case2:
执行代码块2
break;
default:
...
}
复制代码
例:
for(语句1;语句2;语句3){
被执行的代码块
}
复制代码
继续意味着
跨越这个循环,继续下一个循环中断意味着跳出整个循环,循环结束遍历为在句子循环中遍历对象的属性,多用于对象、数组等复合类型,遍历其中的属性和技巧。
例:
for(键 in 对象) {
代码块
}
复制代码
同时,仅当表达式为真时,您才能单步进入循环。
例:
while(表达式){
代码块
}
复制代码
做
而做
例:
do {
代码
}while(表达式)
复制代码
数组
数组的属性和方式:
康卡特()
连接两个或多个字段并返回一个新字段。
语法:
arr.concat(a1, a2, ..., an)
复制代码
参数:
arr:目标字段 A1、A2,...,an:要合并的元素
join()
使用指定的分隔符连接两个或多个字段以返回字符串的元素。
数组定义使用 new 关键字创建数组对象,该对象可以在视频内存中创建字段空间并添加元素。使用 new 关键字创建一个数组对象,并为链表分配 n 个初始值。直接使用 [] 声明链表而不是 newjavascript 日期转换字符串,可以直接将其分配给初始值。数组操作添加元素和删除元素、弹出模式、移位模式、拼接模式。遍历链表以插入元素,取消移位方式,拼接方式插入。以相反的顺序将链表链表合并为字符串链表元素
pop() 和 push()。
pop():删除并返回链表的最后一个元素,更改原始链表。 push(item):在链表末尾添加一个或多个元素,更改原始链表,返回新的链表厚度。
shift() 和 unshift()。
shift():删除并返回链表的第一个元素,更改原始链表。 unshift(item):将一个或多个元素添加到链表的背面,更改原始链表并返回新的链表宽度。
例:
let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2); // [3, 5, 6]
let a2 = arr.slice(2,3); // [3]
let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "web", "a");
// a => [2, 3]
// arr => [1, "web", "a", 4]
复制代码
forEach()
法典:
let a = [1,3,5,7];
a.forEach(function(val, index, arr){
arr[index] = val * 2
})
a ; // [2, 6, 10, 14]
复制代码
法典:
arr.every(callback)
测试数组的所有元素是否都通过了指定函数的测试。
some()
测试数组中的某些元素是否通过由提供的函数实现的测试。
复制代码
过滤器()
例:
let a = [1, "", "aa", 2, 6];
let res = a.filter(function(val, index, arr){
return typeof val == "number";
})
res;//[1, 2, 6]
复制代码
地图()
对每个元素执行此操作,并在执行后返回一个链表。
例:
let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
return val + 1;
})
b; //[2, 4, 6]
复制代码
扩展运算符
扩展运算符使用 (...)。
例:
console.log(...[1, 2, 3]); // 1 2 3
console.log(1, ...[2,3], 4); // 1 2 3 4
复制代码
// 通常情况 浅拷贝
let a1 = [1, 2];
let a2 = a1;
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]
// 拓展运算符 深拷贝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]
复制代码
let [a, ...b] = [1, 2, 3, 4];
// a => 1 b => [2,3,4]
let [a, ...b] = [];
// a => undefined b => []
let [a, ...b] = ["abc"];
// a => "abc" b => []
复制代码
fill() 用于用指定值填充链表,初始化空链表,平滑链表中已有元素,fill() 的第二个和第三个参数指定填充的开始和结束位置
new Array(3).fill('a'); // ['a','a','a']
[1,2,3].fill('a'); // ['a','a','a']
[1,2,3].fill('a',1,2);// [1, "a", 3]
复制代码
条目(),keys(),values()entries() 对通配符对遍历键() 对键值遍历值()
对通配符遍历。 include() include() 用于指示链表是否包含给定值,第二个参数是起始位置,默认值为 0,如果为正,则表示倒数的位置,如果小于链表的宽度, 它被重置为 0 开始。
法典:
[1,2,3].includes(3,3); // false
[1,2,3].includes(3,4); // false
[1,2,3].includes(3,-1); // true
[1,2,3].includes(3,-4); // true
复制代码
flat
(),flatMap()
例:
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
复制代码
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
复制代码
语法
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])
复制代码
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
复制代码
let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
复制代码
Array.prototype.reduce()
reduce() 方法执行您为链表中的每个元素提供的化简器函数(按升序执行),将其结果汇总为单个返回值。
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// 和为 6
var total = [ 0, 1, 2, 3 ].reduce(
( acc, cur ) => acc + cur,
0
);
复制代码
语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
复制代码
字符串对象属性
字符串对象属性
字符串对象模式
字符串对象模式
字符串搜索
indexOf(), lastIndexOf(), search() 和 match()。indexOf(), indexOf(搜索词,起始索引位置),
如果未写入第二个参数,则搜索默认从 0 开始。 indexOf() 用于检索指定字符串值首次出现在字符串中的位置。 lastIndexOf(), lastIndexOf (搜索词,起始索引位置), 从后到前检索,返回指定子字符串值的最后一次出现。 搜索(), 语法为字符串、搜索(搜索词)或字符串搜索(正则表达式)。match(),语法是一个字符串。match() 检索字符串中的指定值,或查找一个或多个正则表达式的匹配项。如果未匹配任何结果,则返回 null。如果存在匹配项,则将返回链表,并且数组的第 0 个元素存储匹配的文本。字符串拦截
3种截取字符串的方法:substring(),slice(),substr()。子字符串(
),语法是字符串,子字符串(截断的起始位置,
截断结束位置),substring()是一种常用的字符串拦截方法,接收两个参数,不能为负数,会返回一个新的字符串。slice(),语法是一个字符串,slice(截断的起始位置,截断的结束位置),slice()中的参数可以是负数,如果参数为负数,则从字符串的末尾计算参数的位置。-1 表示字符串的最后一个字符。substr(),substr(截断的起始位置,长度),从截断的起始位置的下标开始提取字符串中指定数量的字符。返回一个字符串 如果截断的开头是正数,则表示它从字符串的末尾开始。
字符串替换
replace(),replace (要替换的正则表达式/字符串,要替换的子字符串)。
切线split() 用于将字符串拆分为字符串的链表,
语法为字符串。 split(用于拆分子字符串,返回链表的最大宽度),返回的链表的最大宽度通常不设置。
JS风暴三个阶段
事件流:
事件冒泡流风波捕获流
事件处理过程中有三个主要阶段:捕获阶段、目标阶段和
冒泡阶段 事件流由三个阶段组成:事件捕获阶段、目标阶段和气泡阶段。
事件捕捉,
使用风波捕获时,首先触发父元素,稍后触发子元素。事件冒泡,使用风波冒泡时,子元素首先触发,父元素稍后触发。事件
冒泡和事件捕获
DOM 结构是一个树形结构,当一个 HTML 元素形成风波时,风波会按照特定的顺序在元素节点和根节点之间传播,路径经过的节点会接收风波。有两种类型的事件流顺序:事件冒泡和事件捕获。
事件触发表单
法典:
addEventListener("click","doSomething","true")
复制代码
第三个参数为 true,表示使用风波捕获,false 表示使用风波气泡。
Document
html,body{
width:100%;
height:100%;
}
window.onload=function(){
d1 = document.getElementById("d1");
d2 = document.getElementById("d2");
d3 = document.getElementById("d3");
// true 表示在捕获阶段响应
// false 表示在冒泡阶段响应
d1.addEventListener("click",function(event){
console.log("d1")
},"true");
d2.addEventListener("click",function(event){
console.log("d2")
},"true")
d3.addEventListener("click",function(event){
console.log("d3")
},"true")
}
复制代码
addEventListener 网页,点击跳转:addEventListener .html
活动委托
一个响应另一个元素的风暴委托。
- 按钮1
- 按钮2
- 按钮3
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
webbtn.myAddFun(btn1, 'click', function(event){
alert('1点击');
});
webbtn.myAddFun(btn2, 'click', function(event){
alert('2点击');
});
webbtn.myAddFun(btn3, 'click', function(event){
alert('3点击');
});
复制代码
添加事件处理程序以执行风暴委托
var btn = document.getElementById('btn');
webbtn.myAddFun(btn, 'click', function(event){
event = webbtn.getMyEvent(event);
var target = webbtn.getMyTarget(event);
switch(target.id){
case "btn1":
alert('1点击');
break;
case "btn2":
alert('2点击');
break;
case "btn3":
alert('3点击');
break;
}
});
复制代码
键盘风暴
键盘混乱完全是关于由鼠标动作触发的世界。
键盘风暴:
拖放鼠标进行治疗
鼠标绑定 onmousedown()、onmousemove()、onmouseup() 事件。鼠标
网页,点击跳转:鼠标.html
mouse
html,body{
width: 100%;
height: 100%;
}
#dd {
width: 120px;
height: 120px;
background: #00ff00;
position: absolute;
}
var dd;
var mflag = false;
function ondown() {
dd = document.getElementById('dd');
mflag = true;
}
function onmove(e){
if(mflag) {
dd.style.left = e.clientX - 60 + "px";
dd.style.top = e.clientY - 60 + "px";
}
}
function onup() {
mflag = false;
}
<div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;"
复制代码
老鼠风暴
老鼠风暴:
例:
function web(e) {
mouseX = e.clientX;
mouseY = e.clientY;
console.log("x:"+mouseX + "," + "y:"+mouseY)
}
复制代码
鼠标
悬停在鼠标悬停上 键盘离开是鼠标出窗风暴
窗口风暴:
loadunloadaborterrorselectresizescroll加载风暴
意味着当页面完全加载时,它会在窗口中触发加载风暴。包含所有图像,js文件,css文件和其他外部资源。
例:
window.onload=function(){}
复制代码
这些函数在页面完全加载时执行。
例:
window.onload = function() {
var mydiv = document.getElementById("mydiv");
console.log(mydiv.innerText);
}
复制代码
例:
function imgLoad() {
myimg = document.getElementById("myimg");
// 图片加载完成后,给图片加载框
myimg.style.border = "9px solid $00ff00";
}
复制代码
调整风暴大小
当浏览器的窗口调整为新的长度或高度时,将触发调整大小风暴。
例:
document.body.clientWidth 和 document.body.clientHeight 获取窗口的宽度和高度。
html,body {
width: 100%;
height: 100%;
}
function winChange() {
winWidth = document.body.clientWidth;
winHeight = document.body.clientHeight;
}
复制代码
Scrol 风暴,触发滚动风暴的文档或浏览器窗口
例:
function scrollChange() {
srpos = document.getElementById("srpos");
srpos.innerText = document.documentElement.scrollTop;
srpos.style.top = docuemnt.documentElement.scrollTop+"px";
}
滚动条滚动到0px
复制代码
焦点风暴
例:
var note;
function myfocus(fname,notename) {
note = document.getElementById(notename);
note.innerText = fname+'获得焦点';
}
function myblur(fname,notename) {
note = document.getElementById(notename);
note.innerText = fname + '失去焦点';
}
复制代码
活动介绍
事件模式
窗户风暴
加载风暴 调整大小 风暴滚动 风暴焦点风暴
老鼠风暴
获取键盘单击位置,键盘悬停并离开键盘拖放
键盘风暴与风浪冒泡,得到
JavaScript 外部对象:窗口对象、文档对象、位置对象、导航器对象、屏幕对象、历史记录对象
JavaScript DOM 操作,包括获取节点、获取、设置元素的属性值、创建、添加节点、删除节点、属性操作。
加载网页时,浏览器会创建页面的文档对象模型(文档对象模型),该模型是 BOM 表的一部分,用于操作 BOM 表中的核心对象文档。HTML DOM 模型被构造为对象树。DOM 操作
如何获取节点:
标签 ID 获取:
document.getElementById(idName)
复制代码
标签名称属性 gets:返回元素的链表
document.getElementsByName(name)
复制代码
类别名称 get:返回元素的链接列表
document.getElementsByClassName(className)
复制代码
标记名称获取:返回元素的链接列表
document.getElementsByTagName(tagName)
复制代码
获取设置元素的属性值
getAttribute(attributeName) 方法,// 输入名称的括号进出,返回属性值
对应的属性 setAttribute(attributeName, attributeValue) 方法,// 传入属性名称和设置值
例:
window.onload=function(){
mytable = document.getElementById('mytable');
// 获取mytable中标签名为tr的字节点
trs = mytable.getElementsByTagName("tr");
len = trs.length;
flag = true;
for(i=0;i<len;i++){
if(flag){
trs[i].setAttribute('bgcolor','#cccccc');
flag = false;
}else{
flag = true;
}
}
ww = mytable.getAttribute('width');
}
aaa
bbb
ccc
复制代码
创建、添加节点
创建节点:
法典:
// 创建节点:
document.createElement("h1");
document.createTextNode(String);
document.createAttribute("class");
复制代码
添加节点:
法典:
element.appendChild(Node);
element.insertBefore(newNode, existingNode);
复制代码
删除节点
法典:
element.removeChild(Node)
复制代码
属性操作:获取当前元素的父节点,获取当前元素的子节点,获取
当前元素的同级元素,获取当前元素的文本,获取节点
键入当前节点,然后设置样式。
法典:
element.parentNode
复制代码
法典:
element.chlidren
复制代码
法典:
element.nextElementSibling
element.previousElementSibling
复制代码
法典:
element.innerHTML
element.innerText
复制代码
法典:
node.nodeType
复制代码
BOM 对象,称为外部对象,是浏览器对象模型,也是 JavaScript 的重要组成部分。window-“ 文档、位置、导航器、屏幕、historywindow 对象表示浏览器窗口 .innerHeight 以获取浏览器窗口的内部高度,window.innerWidth 表示获取浏览器窗口的内部长度。document.documentElement.clientHeight,document.documentElement.clientWidth;document.body.clientHeight,document.body.clientWidth。打开一个新窗口,window.open (url)。关闭当前窗口 window.close()。调整当前窗口的规格,窗口调整大小
文档对象
文档属性和技巧:
位置对象
位置属性和技巧:
导航器对象
导航器对象包含有关浏览器的信息
屏幕对象
每个窗口对象的 screen 属性都引用一个 scren 对象。screen 对象存储有关显示浏览器屏幕的信息。
屏幕对象的属性:
历史记录对象
历史记录对象包含用户访问过的 URL。
历史对象的属性:
内置函数:字符串函数、数组函数、
数学函数、日期函数
数学函数
日期函数
秒/分钟: 0 - 59; 小时: 0 - 23; 周: 0 (星期日) - 6 (星期六) 日期: 1 - 31个月: 0 (一月) - 11 (十二月) 年份: 计时器函数 setInterval() 从 1900 年开始,根据指定的时间段调用函数或估计表达式。 setTimeout() 用于在指定的微秒数后调用函数或估计表达式。区别:setTimeout() 只运行一次,setInterval() 在循环中执行。函数函数由函数名、参数、函数体和返回值四部分组成。
法典:
function 函数名(参数){
函数体
return 返回值
}
复制代码
函数声明
有3种类型:通过函数名声明,在调用程序时执行;通过将匿名函数参数化为变量,可以在调用时执行;它以new的形式声明,不需要直接调用和执行。
法典:
function web1 () {
document.write("1");
}
web1();
var web2 = function(){
document.write("2")
}
web2();
// 无须调用,直接执行,此方法不常用
var web3 = new function(
document.write("3")
);
复制代码
函数返回值
,函数执行可以有也可能没有返回值。函数调用:值调用、地址调用、函数调用。闭包功能
在JS中,在另一个函数中定义的函数可以访问父函数的成员,内部函数称为闭合函数。闭
包是词法闭包的缩写,是一个引用自由变量的函数。
闭包功能的特点:
闭包,作为数据
与函数配对,在函数执行期间属于活动状态,并在操作过程中保持最终数据状态闭包,也称为词法闭包或函数闭包,是实现中的一种结构,它存储函数和关联的环境词法范围
法典:
function init() {
var name = "web"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数,一个闭包
alert(name); // 使用了父函数中声明的变量
}
displayName();
}
init();
复制代码
init() 创建一个局部变量名和一个名为 displayName() 的函数。displayName() 是在 init() 中
定义的一个内部函数,仅在 init() 函数中可用。
displayName() 没有自己的局部变量。但是,由于它可以访问外部函数的变量,因此 displayName() 可以使用在父函数 init() 中声明的变量名。
警报()
displayName() 函数内的语句成功显示变量名称的值(在其父函数中声明)。
此单词 scope 的示例描述了解析器如何使用嵌套的函数解析变量名称。词法
意味着词法范围根据变量在源代码中的位置确定变量的可用位置。嵌套函数可以访问在其外部作用域中声明的变量。
闭包是一个表达式(通常是函数),它有许多变量和一个绑定到这些变量的环境,因此是表达式的一部分。
JavaScript 中的所有函数都是闭包。但是,一般来说,嵌套函数形成的闭包功能更强大,大多数时候我们称之为“闭包”。
闭包的作用
执行后
并返回,闭包导致 Javascript 的垃圾回收机制 GC 无法回收 a 使用的资源,因为 a 的内部函数 b 的执行依赖于 a 中的变量。
函数的执行环境(执行上下文)、活动对象(调用对象)、作用域(作用域)、作用域链(作用域链)。
定时器和闭包
代码如下:
for(var i = 0 ; i<10; i++){
setTimeout(function(){
console.log(i);
},100);
}
复制代码
返回的内容是 10 分中的 10 分。
溶液:
使用 ES6 中的新 let。使用闭合
for(var i = 0; i<10 ; i++){
(function(i){
setTimeout(function(){
console.log(i);
}, i*100);
})(i);
}
复制代码
在 ES6 之前,使用 var 声明变量将改善变量问题:
for(var i = 0 ; i<10; i++)
{
console.log(i)
};
console.log(i);
// 变量提升 返回10
复制代码
有两种
方法可以声明对象:通过新的 Object() 和 {}。
例:
// 1
var Person = function(id,name){
this.id = di;
this.name = name;
}
var user1 = new Person(1,"web");
// 2
var web1 = {id:1,name:"web"};
var web2 = Object.create({id:2,name:"web"});
复制代码
正则表达式太难了
创建正则表达式
使用正则表达式文本:
let reg = /ab+c/;
let reg = /^[a-zA-z]/gi;
复制代码
不记得,
不记得,不记得。正则表达式是由普通字符和特殊字符组成的文本模式。正则表达式包含匹配器、定位符、限定符、转义字符等。正则表达式有两种方式:字符串模式和正则对象模式。
字符串模式
常规对象模式
正则表达式对象模式
[a-z]
匹配小写字母从a到z中的任意一个字符
复制代码
[A-Z]
匹配大写字母从a到z中的任意一个字符
复制代码
[0-9]
匹配数字0到9中任意一个字符,等于 d
复制代码
[0-9a-z]
匹配数字0到9或者小写字母a到z中任意一个字符。
复制代码
[0-9a-zA-Z]
匹配数字0到9或小写a到z或大写A到Z中任意一个字符
复制代码
[abcd]
匹配字符abcd中的任意一个字符
复制代码
[^a-z]
匹配除小写字母a到z外的任意一个字符
复制代码
[^0-9]
匹配除数字0到9外的任意一个字符
复制代码
[^abcd]
匹配除abcd外的任意一个字符
复制代码
元字符是具有特殊含义的字符:
.
查找单个字符,除了换行和行结束符。
复制代码
w
查找单词字符。
复制代码
W
查找非单词字符。
复制代码
d
查找数字。
复制代码
D
查找非数字字符。
复制代码
s
查找空白字符。
S
查找非空白字符。
复制代码
查找 NUL 字符。
n
查找换行符。
f
查找换页符。
r
查找回车符。
t
查找制表符。
v
查找垂直制表符。
复制代码
xxx
查找以八进制数 xxx 规定的字符。
xdd
查找以十六进制数 dd 规定的字符。
uxxxx
查找以十六进制数 xxxx 规定的 Unicode 字符。
复制代码
量词
量词说明
.定位符
定位符可以将一个正则表达式固定在一行的开始或者结束,也可以创建只在单词内或者只在单词的开始或者结尾处出现的正则表达式。
复制代码
^
匹配输入字符串的开始位置
复制代码
$
匹配输入字符串的结束位置
复制代码
b
匹配一个单词边界
复制代码
B
匹配非单词边界
复制代码
/^[d]{4}-[d]{1,2}-[d]{1,2}${1,2}$]/
日期字符
复制代码
转义符
使用转义符(反斜杠)进行转义
复制代码
new RegExp(str[, attr
]) 接收 2 个参数,str 是指定正则表达式匹配规则的字符串,attr 是可选的,表示匹配模式,值为 g(全局匹配)、i(区分大小写匹配)和 m(多行匹配)。
表达式:g,i,m
g 表示全局模式
应用于所有字符串,而非在发现第一个匹配项就停止
i 表示不区分大小写模式
m 表示多行模式
继续查找下一行中是否存在模式匹配的项
复制代码
参数对象
函数的实际参数保存在类字段对象、参数对象中,特定参数由索引访问:
var a = arguments[i]
复制代码
使用 arguments.length 获取传入的实际参数数,参数对象获取每个参数文本框失去焦点并获取焦点风暴
onBlur:当输入焦点丢失时形成此风暴
onFocus:此文件在输入接收焦点时生成
更改时:当文本值更改时,会发生此风暴
Onselect:当文本突出显示时,将生成文件
记忆力最好的三个时间段:午睡前2小时,早上2小时和早起后上午10点,谢谢
1.如果这篇文章对你有帮助,请点赞,你的“赞”是我创作的动力。
推荐的 JavaScript 学习相关文章
“关于后端的 174 个 JavaScript 知识点总结(1)”
“关于后端的 174 个 JavaScript 知识点总结(II)”
“关于后端的 174 个 JavaScript 知识点总结 (3)”
JavaScript ECMAScript 句子模式摘要 [思维导图]。
都2020年了,你还不知道怎么做JavaScript装饰器?》
《100 个原生 JavaScript 代码片段知识点详细总结 [实践]
“
“向您发送 43 个 JavaScript 面试问题”
《70 个 JavaScript 知识点详细总结(上)[实践]”
《70 个 JavaScript 知识点详细总结(下)[实践]”
“3 个伟大的不受欢迎的 JavaScript 库你值得拥有”
“Echa 哥哥教你彻底理解 JavaScript 执行的机制”
“3 个伟大的不受欢迎的 JavaScript 库你值得拥有”
“总结了几个特别有趣的JavaScript知识点[实践]
“
开源敏感词过滤库的JavaScript版本
推荐 7 个出色的 JavaScript 产品步骤指南库
合格的高级后端工程师需要解决的 28 个 JavaScript 技巧