第二章 前端开发——JavaScript
第二章 前端开发学习——JavaScriptjavascript
1、初识JavaScriptcss
2、JavaScript基础html
3、JavaScript数据类型前端
4、JavaScript运算符java
5、JavaScript流程控制node
6、JavaScript函数与对象python
7、JavaScript实用技巧正则表达式
8、JavaScript事件Event数据库
9、JavaScript内置对象 编程
1、初识JavaScript
什么是JavaScript（what）：
JavaScript，一般会简称为'JS', 是一种浏览器脚本语言。
JavaScript特色：
-
JavaScript是一种脚本编程语言
-
JavaScript是一种解释型语言
-
Javas的语法结构与C++、java十分相似
-
JavaScript是弱类型语言
- ***********************注释***************************
- 静态类型： 须要为变量提早指定 数据类型
- 强类型： 数据类型不能自动转换
- 弱类型： 数据库能够自动转换
-
JavaScript： 弱类型 动态类型
- Python： 强类型 动态类型
- ********************************************************
-
JavaScript是事件驱动的语言
-
JavaScript是一种基于对象的语言
-
JavaScript具备跨平台性
-
JavaScript具备安全性与简单性
JavaScript版本：
-
-
ECMAScript5.0
-
ECMAScript6.0 (ECMA201五、ECMAScript201六、ECMAScript2017)
JavaScript应用领域：
-
-
后端 （node.js）
-
混合APP(IOS 安卓)
-
游戏
2、JavaScript基础
1.如何在Html中使用JS
①引入外部脚本文件
②在<script>标签内写代码
③经过事件属性定义在元素内部
2.JavaScript注释
单行注释
多行注释
3.语句结束符（为了方便记忆末尾都加上分号，实际也能够不使用分号）
4.JavaScript中的输出
①输出到控制台
②输出到屏幕
③弹窗
5.JavaScript变量定义
变量名规范：
标识符必须 由 "数字","字母", "_" 或者 "$" 组成,而且不能以数字 开头标识符不能与保留字（关键字）冲突区分大小写（user_name/userName(推荐)/UserName/UserNameAge）
6.JavaScript弹框
①警告框alert（没有返回值）
②确认框confirm（返回布尔值True/False）
③输入框prompt（返回用户输入的内容，点击取消视为null）
7.获取html中的DOM属性
document.getElementById()
eleObj.innerHTML 获取/设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> input { width: 300px; font-size: 16px; line-height: 18px; padding:10px; border: 1px solid #ccc; } button { padding: 10px 20px; border: 1px solid #ccc; background: #f5f5f5; } .res { width: 300px; height: 100px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <h1>计算器</h1> <hr> <table> <tr> <td>加数1：</td> <td> <input type="text" id="num1"> </td> </tr> <tr> <td>加数2：</td> <td> <input type="number" id="num2"> </td> </tr> <tr> <td></td> <td> <button onclick="add()">+</button> </td> </tr> <tr> <td></td> <td> <div class="res" id="box"></div> </td> </tr> </table> <script> //定义函数 function add() { // 获取 用户在 input 中输入的内容 // 获取元素对象 返回对象 对象描述 id是num1的元素 var inputEle1 = document.getElementById('num1'); var inputEle2 = document.getElementById('num2'); //获取用户在input中输入的值 var v1 = inputEle1.value; var v2 = inputEle2.value; //判断用户输入是不是纯数字 if (isNaN(v1)) { alert('加数1必须是纯数字'); return; } if (isNaN(v2)) { alert('加数2必须是纯数字'); return; } //把字符串转换为数字 v1 = Number(v1); v2 = Number(v2); //两个数相加 var sum = v1 + v2; //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容 var boxEle = document.getElementById('box'); boxEle.innerHTML = sum; } </script> </body> </html>
3、JavaScript数据类型
1.数据类型分类
-
-
对象类型 Object、Array、Date、Math、Error Set(ES6).....
- 函数检测：typeof
2.Number数字类型
Tips：JavaScript不区分整型和浮点型
定义方式：
//十进制
var num = 100
//十六进制
var num = 0x10f
//科学计数法
var num = 123e100
浮点精度：
console.log(.1 + .2)
数值范围：
可表示的数字范围： -5e324 ~ 1.7976931348623157e+308
超过范围，会显示为 Infinity(正无穷) 或 -Infinity(负无穷)
isFinite() //函数判断是否在范围内
特殊值NaN：
表示Not A Number，类型是Number 但又不是常规的数字
和任何值都不相等
与任何值运算,结果仍是NaN
isNaN() //函数 判读是不是 NaN
3.String字符串类型
声明方式：
①单引号：
②双引号
③反引号
Tips：${}方式 嵌入变量
转义字符：
\b 退格
\f 走纸换页
\n 换行
\r 回车
\t 水平制表符
\' 单引号
\" 双引号
\\ 反斜杠
\xXX 十六进制XX指定的Latin-1 字符
\xXXXX 十六进制XXXX指定的Unicode 字符
4.Boolean布尔值类型
let a = true
let b = false
while (true) {
}
5.null和undefined
null：函数的默认返回值，表示未定义的对象（被动产生）undefined：没有赋值的变量会默认为undefined，表示"缺乏值"（被动产生）
6.数据类型转换
①自动类型转换
②强制类型转换
4、JavaScript运算符
1.算数运算符
表达式 表达式一般由运算符和操做数组成。 简单表达式也有复杂表达式
表达式的特色 表达式有计算结果
有些表达式 还会产生额外的做用（对操做产生影响）
- 加法运算符 +
- 减法运算符 -
- 乘法运算符 *
- 除法运算符 /
- 模运算符 %
- 负号运算符 -
- 正号运算符 +
- 递增运算符 ++（重要）
- 递减运算符 --（重要）
-
2.关系运算符
- 相等运算符
== - 全等运算符
===（推荐） - 不等运算符
!= - 不全等运算符
!== - 小于运算符
< - 大于运算符
> - 小于或等于运算符
<= - 大于或等于运算符
>= in运算符 判断一个值是否属于某个数组或者一个属性是否属于一个对象instanceof判断一个对象的实例是否属于某个对象-
3.逻辑运算符
- 逻辑与
&& - 逻辑或
|| - 逻辑非
!
4.位运算符
- 按位与
& - 按位或
| - 按位异或
^ - 按位非
~ - 左移
<< - 右移
>>
5.赋值运算符
-
= -
+= -
-= -
/= -
*= -
%=
6.其余运算符
- 条件运算符
?: typeof运算符 判断操做数类型delete运算符 删除对象属性或者数组元素void运算符 忽略操做数的值- 逗号运算符
, - 字符串链接
+
5、JavaScript流程控制
1.条件语句（分支结构）
①单向分支if
if (表达式) {
code...
}
注意：
if (条件)
代码
②双向分支if...else...
if (表达式) {
code...
} else {
code...
}
③多向分支if...else if...
if (表达式) {
code...
} else if (表达式) {
code...
} else if (表达式) {
code...
} else {
code...
}
④多向分支switch...case..
switch (表达式) {
case 表达式可能的值: code....; break;
case 表达式可能的值: code....; break;
case 表达式可能的值: code....; break;
case 表达式可能的值: code....; break;
default: code....;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多向分支——switch</title> </head> <body> <h2>多向分支——switch</h2> <hr> <h3>请输入生日</h3> <input type="date" id="dt"> <button onclick="check_result()">查询</button> <script type="text/javascript"> function check_result() { var date = document.getElementById('dt').value; var year = Number(date.split('-')[0]); var animal = ''; switch(year % 12) { case 0: animal = '猴'; break; case 1: animal = '鸡'; break; case 2: animal = '狗'; break; case 3: animal = '猪'; break; case 4: animal = '鼠'; break; case 5: animal = '牛'; break; case 6: animal = '虎'; break; case 7: animal = '兔'; break; case 8: animal = '龙'; break; case 9: animal = '蛇'; break; case 10: animal = '马'; break; case 11: animal = '羊'; break; default: animal = '驴'; //前面的条件都不知足 } alert(animal); } </script> </body> </html>
⑤分支结构嵌套
if (表达式) {
if (表达式) {
code....
}
code ...
} else {
code...
}
2.循环语句
①while循环
while (循环条件) {
//循环体
}
②do...while循环
do {
code...
} while (循环条件)
③for循环
for (循环变量; 循环条件; 循环变量变化) {
code ...
}
3.其余语句
①跳转语句
continue; 跳出当前循环 继续下一次
break; 结束循环
return; 结束函数
②异常捕捉
try {
tryCode - 尝试执行代码块
}
catch(err) {
catchCode - 捕获错误的代码块
}
finally {
finallyCode - 不管 try / catch 结果如何都会执行的代码块
}
Tips：
严格模式
//写在全部代码的最前面
//开启严格模式
‘use strict’
-
-
eval()在严格模式不能用
6、JavaScript函数与对象
（一）函数
1.JavaScript定义函数
方式一：关键字方式（存在函数提高状况，便可以先调用后定义）
方式二：表达式方式（不存在变量提高状况）
2.JavaScript函数特色
-
-
函数调用 必须加
() -
关键字方式定义的函数， 会存在函数提高 （在函数定义的前面 调用函数）
3.JavaScript函数参数
-
-
实参数量<形参梳理 多出的形参，默认值
undefined -
//ES6 新增的语法
function demo(a, b=默认值) {
}
//有默认值的参数 必定在后面 -
arguments对象 能够获取全部的实参
只能在函数中使用
arguments是类数组对象，用法同数组，可使用for循环遍历 -
4.回调函数
一个函数就能够接收另外一个函数做为参数，这种函数就称之为回调函数(高阶函数)
//有名函数 从小到大
function mySort(v1,v2) {
/*if (v1 > v2) {
return 5 //换过来 只要是正数 就会交换
} else {
return -7 //不变 只要是负数 就不换
}*/
return v1 - v2;
}
//有些方法的参数 要求就是函数
var list = [10,23,1,456,8,3,5]; //数组 Array
console.log(list);
//排序 字符串排序
//list.sort();
//按照天然排序
//list.sort(mySort)
list.sort(function(v1, v2){
return v1 - v2;
})
console.log(list);
5.自调函数
函数生声明完 直接调用
Tips：要是写JS文件的话，最好每一个JS文件都声明一个自调函数，这样每一个JS文件都有各自的做用域。
6.JavaScript做用域
①全局做用域
在函数外面，定义的变量是全局变量。哪均可以用
全局变量
②局部做用域
函数中使用定义的变量就是局部变量，只能在本函数中使用
Tips：
1.局部做用域中的变量加上var不会改变全局做用域的变量值
输出结果为小梅梅
2.局部做用域中的变量不加var会改变全局做用域的变量值
输出结果为小丽丽
总结：
-
-
函数内，若是声明了跟全局变量同名的局部变量， 在声明以前使用改变量，获得undefined( 该变量已是局部的啦)
-
④做用域链
- 函数嵌套函数会造成做用域链
- 当一个做用域 使用某个变量时，先从本做用域中找， 若是没有去父做用域，再没有，父做用域的父做用域，一直到 全局做用域。 构成了一个做用域链
-
⑤块状做用域
使用let关键字声明的变量会具备块状做用域。
局部做用域调内使用let，调用时报错
全部的 结构语句 for while do while if switch 都有块状做用域
7.闭包函数
当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，造成闭包
（二）对象
1.构造函数和对象
JavaScript中没有类的概念，JS中叫构造函数
构造函数就是类
function User([参数]) {
this.属性 = 值;
this.属性 = 值;
this.方法 = function(){
}
}
#实例一个对象
new 构造函数();
若是构造函数没有参数 能够 不加()
①定义构造函数（当作Python中的类使用）
注意：
A）函数名采用首字母大写或者驼峰体命名法
B）声明对象属性用this（等同于python中的self）
- this表示方法 所属的对象
- 全局函数中的this 指向 window
②实例化对象
若是构造函数没有参数 能够 不加()。
③使用对象的属性
④调用对象方法
⑤全部的对象都有与之对应的构造函数，而且都有一个属性【.constructor】用来查看其对应的构造函数
⑥对象属性的增删改查：
A）修改
console.log(obj.name)
obj.name = 'lili'
console.log(obj['name'])
obj['name'] = 'honghong'
B）删除
delete obj['name']
delete obj.name
C）监测属性是否存在
'name' in obj
2.原型和原型链
①原型
-
-
对象能够继承原型的属性和方法
-
__proto__全部对象都有该属性， 该属性指向该对象的原型
②原型链
-
-
原型的原型的原型 就构成了 原型链
-
使用对象中某个属性的时候，先从对象中找，若是没有，从原型上找，原型若是也没有，继续向上找，知道顶层 （顶层的原型对象是一个 类型(类)(构造函数)是Object 的对象）
3.JavaScript对象属性的调用
①点.
②方括号[]
任意的对象 均可以在对象实例化完成后， 添加属性和方法
4.使用Object构造函数
js内建的构造方法 叫 Object
var obj = new Object()
josn方式定义对象
var obj = {属性：值, 属性:值} // new Object的简写
obj的构造含 是 Object
7、JavaScript实用技巧
1.从页面中获取元素
document.getElementById() 根据ID的值
document.getElementsByTagName() 根据标签名
document.getElmenntsByClassName() 根据class的值
document.getElementsByName() 根据name属性的值
document.querySelector(css选择器) 返回知足条件的第一个 元素对象（经常使用）
document.querySelectorAll(css选择器) 返回全部知足条件元素组成的 类数组对象（经常使用）
2.修改元素的CSS样式
①ele.style.css属性名
②ele.style.background
③ele.style.border
④ele.style.backgroundColor
⑤ele.style['background-color']
3.改变元素内class的值
①ele.className 能够赋值，也能够获取
②ele.classList.add(‘值’) 添加一个class值
③ele.classList.remove(‘值’) 删除一个class值
④ele.classList.toggle(‘值’) 自动切换一个class值(有就删除，没有就添加)
4.JavaScript定时器
单词定时
setTimeout(fn, delay)
clearTimeout() 清除定时
屡次定时
setInterval(fn, dealy)
clearInterval() 清除定时
范例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时案例</title> <style> h1 { margin-top:100px; text-align: center; font-size: 300px; } </style> </head> <body> <h1>10</h1> <script> var h1 = document.querySelector('h1'); var m = 10; var time = setInterval(function(){ h1.innerHTML = --m; //当m <= 0的时候 if (m <= 0) { clearInterval(time); //清除定时 h1.innerHTML = '你死定了' } }, 1000) </script> </body> </html>
8、JavaScript事件Event
1.什么是事件（what）：
JavaScript 使咱们有能力建立动态页面。事件是能够被 JavaScript 侦测到的行为。
网页中的每一个元素均可以产生某些能够触发 JavaScript 函数的事件。比方说，咱们能够在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
2.如何将事件绑定给元素（how）：
方式一：（更经常使用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>给元素绑定事件</title> <style> .list { list-style: none; padding: 0; margin: 0; width: 600px; } .list li { padding:10px; margin:5px 0px; border: 1px solid #ccc; } .list li.active { border-color: red; background: #ccc; } </style> </head> <body> <h1 >同志交友</h1> <hr> <ul class="list"> <li>Lorem ipsum dolor sit amet.</li> <li class="item">Lorem ipsum dolor sit amet.</li> <li >Lorem ipsum dolor sit amet.</li> <li class="item">Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li class="item">Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li class="item">Lorem ipsum dolor sit amet.</li> </ul> <script> //获取全部li的集合 var lis = document.querySelectorAll('.list li'); //遍历 给每一个li 绑定单击事件 for (var i = 0; i < lis.length; i ++) { lis[i].onclick = function(){ //把全部的li都去掉class active for (var j = 0; j < lis.length; j ++) { lis[j].classList.remove('active'); } //把当前的添加上 this.classList.add('active') } } </script> </body> </html>
①先获取元素
②ele.onclick = function(){
..................
}
③获取元素的类数组对象， 遍历，挨个给每一个元素绑定事件
方式二：
<button onclick="code..">
方式三：（标准方式）
addEventListener(Event, fn) (非IE IE9+)
attachEvent(Event, fn) (IE8-)
3.事件的捕获与冒泡
捕获阶段： 从祖先元素 到 子元素
冒泡阶段： 从子元素 到 祖先元素
事件默认在冒泡阶段触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的捕获和冒泡</title>
<style>
#wrapper {
width: 200px;
height: 200px;
border: 2px solid pink;
background-color: #ccc;
}
#inner {
width: 100px;
height: 100px;
margin: 50px;
background: green;
}
</style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<div id="wrapper">
<div id="inner"></div>
</div>
<script>
//事件实在冒泡阶段触发的
var wrapperEle = document.querySelector('#wrapper');
var innerEle = document.querySelector('#inner');
wrapperEle.addEventListener('click', function(){
alert('我是大的');
}, true)
innerEle.addEventListener('click', function(event) {
alert('我是小的');
event.stopPropagation(); //阻止冒泡
}, true)
</script>
</body>
</html>
4.事件列表
①鼠标事件
onclick 单击
ondblclick 双击
oncontextmenu 右击
onmouseover/onmouseenter 鼠标悬浮到元素上
onmouseout/onmouseleave 鼠标离开元素
onmousemove 鼠标在上面移动
onmousedown 鼠标的按键按下
onmouseup 鼠标的按键抬起
②键盘事件
keydown 键盘按键 按下
keyup 键盘按键 抬起
keypress 键盘按键 按下 (只有字符按键) (控制按键不能够 Ctrl shift 上下左右都不行)
经过keydown控制div移动位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style>
input {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
font-size: 16px;
}
#res {
margin-top: 20px;
}
</style>
</head>
<body>
<input type="text" id="inputEle">
<div id="res"></div>
<script>
var inputEle = document.querySelector('#inputEle');
inputEle.onkeyup = function(){
document.querySelector('#res').innerHTML = this.value;
}
</script>
</body>
</html>
③表单事件
submit 表单提交的时候, 绑定给form元素reset 表单重置, 绑定给form元素blur 失去焦点focus 得到焦点change 表单控制的内容改变 一般绑定给 radio checkbox select 若是绑定给输入的input, 必须知足 内容改变和失去焦点才能触发select input 或 textarea 内容被选中的时候触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地址联动</title>
<style>
select {
width: 100px;
padding: 5px;
font-size:16px;
}
</style>
</head>
<body>
<h1>选择地址</h1>
<hr>
<select id="prov"></select>
<select id="city"></select>
<script>
//定义省市的信息
var provList = ['江苏','浙江','福建','湖南'];
var cityList = [];
cityList[0] = ['南京', '苏州', '宿迁', '扬州'];
cityList[1] = ['杭州', '温州', '宁波', '台州'];
cityList[2] = ['福州', '厦门', '泉州', '漳州'];
cityList[3] = ['长沙', '湘潭', '株洲', '湘西'];
//获取select元素
var provSelect = document.querySelector('#prov');
var citySelect = document.querySelector('#city');
//把省的信息 添加到第一个select元素中
provList.forEach(function(val, index){
//DOM操做 了解
provSelect.add(new Option(val, index))
});
//给第一个select绑定change事件
provSelect.onchange = function(){
//获取 当前的选项
var index = this.value;
//清空第二个select原先内容
citySelect.length = 0;
//选择对应的城市列表，添加到第二个select
cityList[index].forEach(function(val, index){
citySelect.add(new Option(val, index));
})
}
//手工触发一次 change事件
provSelect.onchange();
</script>
</body>
</html>
④文档事件
load 加载完成unload 文档关闭beforeunload 文档关闭 (兼容性好)
⑤图片事件
abort 图片加载中断load 图片加载完成error 图片加载错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片事件</title>
<style>
#imgList img {
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<h1>图片事件</h1>
<hr>
<div id="imgList">
<img src="../../dist/images_one/1.jpg" alt="">
<img src="../../dist/images_one/2.jpg" alt="">
<img src="../../dist/images_one/3.jpg" alt="">
<img src="../../dist/images_one/4.jpg" alt="">
<img src="../../dist/images_one/41.jpg" alt="美图">
<img src="../../dist/images_one/7.jpg" alt="">
<img src="../../dist/images_one/8.jpg" alt="">
</div>
<script>
//获取全部图片的列表
var imgs = document.querySelectorAll('#imgList img');
//给每一个img元素绑定 error 事件
for (var i = 0; i < imgs.length; i ++) {
imgs[i].onerror = function() {
this.src = '../../dist/images_two/11.jpg'
}
}
</script>
</body>
</html>
⑥其余事件
scroll 元素内部的内容滚动 适合于有滚动条的元素resize 绑定给window, 窗口尺寸发生变化
5.Event对象
A）属性
-
clientX 鼠标的x坐标
-
clientY 鼠标的Y坐标
-
button 鼠标按键的标示
-
keyCode 键盘按键的值
-
cancelBubble 阻止事件冒泡 设置为true
-
target 返回触发此事件的元素
-
tyep 返回事件类型
-
timeStamp 返回触发事件的那一刻的时间戳(从页面打开的那一刻开始
-
altKey 返回当事件被触发时，"ALT" 是否被按下。
-
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
-
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
B）方法
-
stopPropagation() 阻止事件冒泡
-
preventDefault() 阻止元素默认的事件
-
9、JavaScript内置对象
1.Number
A）属性
- MAX_VALUE JS能够表示的最大的数字
- MIN_VALUE JS能够表示的最小的数字
B）方法
- toFixed(length) 指定保留长度的小数
- toExponential() 用科学计数法表示
- toPrecision(length) 要求数字按照指定长度显示 整数+小数
- toString(number) 把数字转换为字符串 能够按照指定的 进制 返回
2.String
A）属性
- length 字符串长度
B）方法
- charAt(index) 返回指定位置的字符
- concat(string) 链接字符串
- indexOf(str) 返回小字符串在字符串对象中第一次出现位置 -1表示不存在
- lastIndexOf() 返回小字符在字符串中最一次出现的位置
- substr(start, length) 截取字符串 省略长度截取到结束
- substring(start, end) 截取字符串, 省略结束位置 一直到最后
- slice(start, end) 与substring 如出一辙
- split(char) 把字符串分割为数组
- toUpperCase() 把字符串转为大写
- toLowerCase() 把字符串转为小写
- match() 匹配字符串 可用正则
- search() 查找字符串 可用正则
- replace() 替换字符串可用正则
- charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
- String.formCharCode() 从字符编码建立一个字符串。
- trim() 去掉两边空格
3.Array
A）建立数组
方式一：
var list = [item1, item2, item3 ...]
方式二：
var list = new Array()
B）数组的添加、删除、修改
添加：
- 为新索引赋值
- 利用数组长度,在数组尾部插入新元素
- push() 在最后追加
- unshift() 在最前面追加
- splice(位置,0,新值) 指定位置加
删除：
- 改变数组长度
- pop()
- shift()
- splice(位置,删除的个数) 指定位置删除指定个数
- 运算符 delete
修改：
- list[index] = value
- list.splice(位置，删除个数,值1,值2...)
-
C）属性
- length 数组长度 元素个数
D）方法
- reverse() 翻转数组
- sort() 数组排序
- toString() 和 toLocalString() 把数组转换为字符串
- join() 把数组的元素拼接成字符串
- slice() 截取数组中的一部分,返回新的数组 slice(start, end)
- concat() 合并多个数组
- indexOf() 搜索数组中的元素，并返回它所在的位置。
- lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
- map() 经过指定函数处理数组的每一个元素，并返回处理后的数组。
- filter() 检测数值元素，并返回符合条件全部元素的数组。
- every() 检测数值元素的每一个元素是否都符合条件。
- some() 检测数组元素中是否有元素符合指定条件。
- reduce() 将数组元素 索引值从低到高 进行组合 reduceRight() 将数组元素 索引值从高到低进行组合
E）数组的遍历（迭代）
- for 循环遍历
- for...in 循环
- forEach 循环推荐
-
4.类数组对象
-
-
具备length属性
-
常见类数组对象： arguments， 元素的列表(NodeList)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类数组对象</title> </head> <body> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <script> //for ... of var list = [1,2,3,4,5]; //纯的 var itemList = document.querySelectorAll('.item'); console.log(list); console.log(itemList); console.log(list.constructor); console.log(itemList.constructor); function demo(){ console.log(arguments.constructor) } demo(); console.log(itemList[0]) console.log(itemList.length); for (var i = 0; i < itemList.length; i ++) { console.log(itemList[i]) } console.log(''); for (var i in itemList) { console.log(i, itemList[i]) } itemList.forEach(function(value, index) { console.log(value) }) </script> </body> </html>
5.Function
A）属性
-
prototype 原型
-
length 形参的数量
B）方法
- apply() 将函数做为一个对象的方法调用
- call() 将函数做为对象的方法调用
-
遍历全部的实参
function fn() { //遍历全部的实参 [].forEach.call(arguments, function(val, index){ console.log(val) }) } - bind() 返回一个做为方法调用的函数
6.Math
A）属性
- PI 返回圆周率（约等于3.14159）
B）方法
- abs(x) 返回数的绝对值。
- sqrt(x) 返回数的平方根。
- pow(x,y) 返回 x 的 y 次幂。
- ceil(x) 对数进行上舍入。
- floor(x) 对数进行下舍入。
- round(x) 把数四舍五入为最接近的整数。
- max(x,y) 返回 x 和 y 中的最高值。
- min(x,y) 返回 x 和 y 中的最低值。
- random() 返回 0 ~ 1 之间的随机数。
-
//取 0到10之间的随机数 console.log( Math.floor(Math.random() * 11)); //0到11 console.log( Math.round(Math.random() * 11)); //0到28 console.log(Math.floor(Math.random() * 29)); //7-17随机数 //取0~10 + 7 console.log(Math.floor(Math.random() * 11) + 7);
7.Date
属性：
- getYear() 请使用 getFullYear() 方法代替。
- getFullYear() 从 Date 对象以四位数字返回年份。
- getMonth() 从 Date 对象返回月份 (0 ~ 11)。
- getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
- getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
- getHours() 返回 Date 对象的小时 (0 ~ 23)。
- getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
- getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
- getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
- getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
- getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
- getUTC.... 标准时区
- set...
- setUTC...
- toTimeString() 把 Date 对象的时间部分转换为字符串。
- toDateString() 把 Date 对象的日期部分转换为字符串。
- toUTCString() 根据世界时，把 Date 对象转换为字符串。
- toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
- toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
- toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
8.RegExp
A）建立正则
B）属性
- global RegExp 对象是否具备标志 g。
- ignoreCase RegExp 对象是否具备标志 i。
- lastIndex 一个整数，标示开始下一次匹配的字符位置。
- multiline RegExp 对象是否具备标志 m。
- source 正则表达式的源文本。
C）方法
- exec() 检索字符串中指定的值。返回找到的值，并肯定其位置。
- test() 检索字符串中指定的值。返回 true 或 fal
- 1. 第二章 前端开发——JavaScript
- 2. 第二章：前端开发实践·第四篇：前端开发的技术栈
- 3. 第二章：前端开发实践·第五篇：前端开发做什么
- 4. 前端开发【第5篇：JavaScript进阶】
- 5. 前端开发【第4篇：JavaScript基础】
- 6. 前端开发【第3篇：JavaScript序】
- 7. 第一章 前端开发——HTML5/CSS3
- 8. 第四章 前端开发——JQuery库
- 9. 第9章 前端开发 口述题
- 10. 第六章 前端开发——Vue框架
- 更多相关文章...
- • JavaScript 指南 - 网站建设指南
- • WSDL 端口 - WSDL 教程
- • PHP开发工具
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解