JavaScript Notes
一、JavaScript概念
- JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
- JavaScript 由三大部分组成：ECMAScript(js核心)+DOM+BOM
二、变量
- 概念：内存中专门存储数据的空间
- 变量的使用：
- 声明变量 var = 变量名
- 命名规范：不能用大写、要用英文，不能用符号除了下划线，不能以数字开头和纯数字，不能加空格，要见名知意
- 初始化：
js的等于号(=)是赋值，等号右边的数据（可以直接是一个数据或者运算结果是一个数据也行）存放于等号左边的变量里面
使用变量名就等于使用变量里面的数据
变量是允许更改的
⚠️：如果控制台报错，说明你的程序肯定有错，控制台不报错门不一定写的没错
var data=123;
data=123+1;（重新赋值不需要声明了）
数据如果直接使用不要存，暂时不使用就存储起来
var a=b=2 变量的声明是从右往左读的
三、输出方式
- console.log()在控制台输出，用作调试
- alert() 弹出窗口，中断网页的运行，做调试
- document.write() 在页面输出，没啥用
四、JavaScript里面的数据类型
-
原始（基本）数据类型：数据保存在变量本地，保存在栈中
1.1 number（数字类型）
1.2 string（“字符串”）
1.3 boolean（布尔值）
1.4 undefined（未定义）
1.5 null（空） -
引用数据类型：数据不保存在变量本地，保存在堆中
2.1 array（数组）
2.2 object （函数）
五、JavaScript里面的隐式类型转换
- 字符串和数字类一起运算，那么数字会自动转为string类型
- 字符串和布尔一起运算，那么布尔会自动转为string类型
- 字符串和undefined一起运算，那么undefined会自动转为string类型
- 当数字和布尔一起运算时，布尔会自动转为number，true=1，false=0
六、运算符
- 程序运算的符号
算术运算符：+(加） -（减） *（乘） /（除以） %（取余）++（自增） --（自减）
i++单独使用时，前后都一样
i++在表达式中：++i先+1，再参与表达式，i++，先用旧值参与表达式，表达式结束后再+1 - 关系运算符：> 、< 、>= 、<= 、==、!=、 = = =、!= =
- 逻辑运算符： &&、||、 !（与或非）
- 赋值运算符： =、 += 、-=、 *=、 /=、 %=
- 字符串运算符： +
- 特殊运算符: typeof(数据类型检测)
- 三目运算符 ：条件？条件成立时的值：条件不成立时候的值
三目运算符多重判断: 条件？条件成立时的值:(表达式)
3.
var a=1
var b=2
var c=3
console.log(b>a&&c>a)
7.
var msg=grade<60?"不及格“:(grade<80?"及格":(grade<90?"良好“:"优秀")）
七、if判断语句
if语句可以多重条件判断
if (条件){
条件1成立的时候执行的代码
}else if(条件2){
条件2成立的时候执行的代码
}else {
条件不成立的时候执行的代码
}
⚠️：条件判断里面只有六种情况（ false 、0、 undefined 、null、 nan 、“ ”）算false 其他全是true
八、函数(方法)
- 概念：封装执行一项专门任务的代码段
- 语法： function 方法名（参数）{做什么} 方法是不调用不执行的
- 方法内独有的变量，接受传入的数据，在方法内处理
形参：（形式上的参数）函数定义时传入的参数
实参：（实际上的参数）函数调用时传入的参数
⚠️：如果函数定义了形参，那么函数调用的时候必须传实参 - 函数声明提升：function声明的函数会自动提升到最顶部
- 变量提前：变量声明提前，赋值不提前
- 函数默认是没有结果的，如果你需要结果的话，在函数内加return关键字 return后面跟你想要的数据
return的本意是退出函数的运行
function grade(形参){
if(gra<60){
alert("不及格“)
}else if(gra<80){
alert("及格“)
}else if(gra<90){
alert("良好“)
}else {
alert("优秀“)
}
}
grade（实参）
九、作用域
- 概念：一个变量可用的范围
- 全局作用域：除了函数内，都是
- 局部作用域：函数内
- 全局变量：在全局作用域内声明的变量（客厅里的东西）
- 局部变量：在局部作用域内声明的变量（卧室里的东西）
- 全局作用域不能访问局部，局部作用域可以访问全局
- 局部变量可以改变全局变量
- 对于未声明的变量直接赋值，那么js会在全局自动声明
- 函数作用域只有在函数调用的时候菜创建的，函数调用之后立即销毁。
var a=1
function fn(){
a=2
}
fn()
console.log(a)
十、闭包
- 概念：用来解决全局污染的，用来保护变量的，里面的函数使用了外面函数定义的局部变量，就是解决作用域的问题(结构：函数套函数)。
- 工作中增添变量时可能重复使用变量名，打乱程序代码。
- 这时候解决变量在全局变量的问题就把变量放入局部变量里。
- 函数套函数
弊端：内存泄漏
性能：
计步器：
function num(){
var n=0
function add(){
return n++
}
return add
}
console.log(num())
十一、循环结构
- 概念：程序反复执行同一套代码
- 循环三要素：
1、循环条件：循环继续运行的条件
2、循环变量：循环中做判断的量，循环变量一定是向着循环退出的趋势变化
3、循环体：循环做什么事情 - while 循环
while(条件){做什么事情}
var n=5
while(n<10){
console.log("我执行一次“)；
n++；
}
- for 循环
for(var i=0;i<10;i++){
console.log("我执行一次“)；
}
十二、数组 array
- 概念：相当于多个变量的集合，如果要访问数组中的某一个值，用下标访问，0开始
- 数组是没有任何数据类型的限制
- 数组遍历：for循环
- 封装函数
var arr=[数据1，数据2，数据3]
var names=[“1”，“2”，“3”]；
console.log(names[0])
//下标查找元素
十三、对象 object
- 概念：相当于多个变量（key/value）（键值对）的集合 ，没有任何类型限制
- 访问对象的值：对象名.属性名
- 更改对象的值，直接更改：var object=？
- 对象的属性名一定是字符串
- js里面一切皆对象
- 如果希望属性名为变量，那么要在属性名外面套[ ]
- 函数（方法）是可以作为对象的属性，方法名就当作属性值，方法当作属性值
- 面向对象的编程语言，面向过程编程
- 对象的循环： for(var 属性名 in 你要遍历的对象){ }
- 对象循环中，如果要取值的话， 对象名[key]
- null：空对象指针，作用：主动释放对象
十四、内置对象
- 概念：js里已经定义好的对象，有现成的属性和方法供我们使用
- js里面一共有17个内置对象
Array 方法
1、length ：数组长度 2、push（你要追加的元素）：向数组的结尾追加元素。或者通过下标增添arr[5]=6 3、pop ()：删除数组最后以为元素 4、unshift()：向数组的开头添加元素 5、shift(): 删除数组的第一位元素 6、reverse():反转数组 7、splice(a,b) :用来删除，插入，替换元素的,从第a位参数开始，删除b个参数 如果超过两个参数，那么后面几个参数就会作为新值插入进去。 不删要插入的话，第二个参数给0（1，0，2） 8、sort() ：不改装不适合数组排序，从小到大，只限制于纯数字 根据unicode编码排序 大写字母65-90 小写字母97-122 数字 48-57 var a=arr.sort(function(a,b){return a-b}) 9、map(function(item,index){ return 进行的操作}) 对数组的每一个元素进行处理，返回一个群新的数组。 item是位数，index是下标。 ——————————————————————————以上9种方法都可以直接修改原数——————————————————————————————————————— 10、join(拼接符号“-”) ：把数组连接成字符串 11、slice(star，end) ：截取子数组,原则含头不含尾，如果只给一个参数，从第一位开始截取到最后 12、concat() ：连接多个数组的。数组1.concat（数组2，数组3...）
2.
var arr[1,2,3,4,5];
arr.push(6);
console.log(arr)
6.
var arr=["h","e","l","l","o"];
arr.splice(1,3)
console.log(arr)
7.
//冒泡排序
var arr=[65,27,139,67,8,97]
function order(arr){
//多次执行单次排序
for(var m=o;m<(arr.length-1);m++){
//单次对数组排序，去最大的一个
for(var i=0;i<(arr.length-1-m);i++>){
if(arr[i]>arr[i+1]){
var tem=arr[i];
arr[i]=arr[i+1];
arr[i=1]=tem;
}
}
}
return arr
}
console.log(order(arr))
8.
var arr=[1,2,3,4,5,6];
arr=arr.map(function(item.index){
return "星期"+item
});
console.log(arr)
9.
var arr=["h","e","l","l","o"];
arr=arr.join("-")
console,log(arr)
10.
var arr=["h","e","l","l","o"];
arr=arr.slice(1,3);
console.log(arr)
string 对象方法
1、length 长度
2、toUpperCase()转大写 toLowerCase()转小写
3、indexOf(查找关键字) 找不到返回-1 true
4、split(“切割符”)把字符串切割成数组 唯一一种字符串转数组的方法
5、substring(截取的字符串通过下标) 含头不含尾，如果只给一个参数，那就截取到结尾
6、slice 同上
7、concat()
去重方法：
var arr=[0,20,1,1,1,2,61,2,2,1,3,2,2,2,333]
for(var i=0;i<arr.length;i++>){
for(var j=0;i<aee.length;i++>){
if(var j=0;j<i;j++){
arr.splice(j,1)
i--
}
}
}
number 方法
1、toFixed (按几位小数四舍五入取整数)
2、number()把字符串转成数字
十五、正则表达式
-
定义：字符串中字符出现的规则 （定字符串规则）
-
正则表达式都是写在双斜线里面的
-
正则表达式的规则写在[]里面
-
[]是用来放备选字符的，一个中括号只能代表一位字符的匹配规则
-
正则表达式对于任意连续的区间，都可以以横线连接 [0-9]
var reg=/[]\ -
数量词
{num}前面一位规则重复num次，如果想修饰多位，加小括号
{min,}前面一位规则重复至少min次
{min,max}前面一位规则重复至少min次,最多max次 -
特殊数量词
？：可有可无，最多出现一次{0,1}
*：可有可无，不限次数{0,}
+:至少出现一次{1,}
预定义字符集：在正则表达式里面有特殊含义的字符
\d:代表了所有数字
\w：代表了所有数字、字母、下划线
\s: 代表空格
. :代表任意字符 -
对于正则表达式里面任意有特殊含义的字符，你希望以原文的形式去匹配的话，必须要加\转译[.]
-
如果备选字符里面只有一个备选字符或者只有一个预定义字符集，中括号可以省略
-
正则表达式.text(被检测的字符串)结果是布尔值
⚠️：text方法是部分匹配
在备选字符里面加^代表除了…外都行
在整条正则表达式的开头加^,代表以…开头，在整条正则表达式的结尾加$代表以…结尾邮箱：var reg=/^\w+@\w+([-]\w+)*(.[0-9a-zA-Z]+)$/
十六、Math 方法
1、Math.round() 四舍五入取整
2、Math.cell() 向上取整
3、Math.floor() 向下取整
4、Math.min()取一堆数中的最小值
5、Math.max()取一堆数中的最大值 参数接受的是参数序列，不接受数组
var arr=[9,10,12,13,14,3,4,6]
var num=Math.max(...arr)；// 配合es6
console.log(num)
6、Math.random()取0-1之间的随机数
取任意min-max之间的随机数
7、Math.floor(Math.random()*（max-min）+min)
//2000员工抽奖
var num=Math.floor(Math.random()*2001)
console.log("恭喜“+num+”号员工中奖“)
================================以下不常用
8、Math.pow("底数","幂")
9、Math.sqrt()平方根
10、Math.abs()取绝对值、
⚠️
string.fromCharCode(unicode编码)转换
数字：48-57
大写字母：65-90
小写字母：97-122
//随机验证码
var code=[]；
for(var i=48;i<=57;i++>){
code.push(i)
}
for(var i=65;i<=90;i++>){
code.push(i)
}
for(var i=97;i<=122;i++>){
code.push(i)
}
var arr=[];
for(var i=0;i<4;i++>){
var index=Math.floor(Math.random()*62)
var un=code[index];
var cha=string.fromCharCode(un);
arr.push(cha)
}
console.log(arr)
十七、Date 方法
1、封装了所有与日期相关的api
2.、new Date()得到的是当前事件对象 var date=new Date()
日期对象可以直接相减，得到的结果是间隔毫秒数
3、getDate() 返回几号（1-31）
4、getFullYear()返回哪一年
5、getMonth（）+1返回月
6、getDay（）0-6 星期几
7、getHours（）0-23 时
8、getMinutes（）0-59 分
9、getSeconds（）0-59 秒
10、getMilliseconds（）0-999 毫秒
11、getTime（）返回的是1970年1月1日之今的毫秒数
以上所有方法把get改成set就是设置时间的方法（除了getDay）
十八、Error：所有错误的父类型
- SytaxError：语法错误
- referenceError：找不到对象
- TypeError:错误的使用了类型的方法
…
十九、DOM
-
document object model
-
DOM操作：增删改查
查：查找元素
1、document.getElementBuId("") 通过ID选择器返回的是元素对象
2、document.getElementsByClassName("") 返回的是数组
3、document.getElementsByTagName("") 同过标签名返回的是数组
4、document.getElementsByName("") 返回的是数组 表单专用
5、document.querySelector(“css选择器”) 返回第一个元素对象
6、document.querySelectorAll(“css选择器”) 返回数组改：通过对象的形式
class代表类不可以直接修改class关键字 要写成className
改属性;
1、通过对象的形式
2、setAttribute("属性名“，”属性值“)
改内容：
innerText：拿到的是元素开始标签到结束标签之间的文本内容。标签.innerText
innerHTML: 拿到的是元素开始标签到结束标签之间的内容z(包含标签)删：
删属性：removeAttribute(“属性名”)；
删内容：innerHTML=“” ；
删元素：父元素对象.removeChild(“要删除的子元素对象”)增：
1、创建元素 createElement(“标签”)
2、父元素对象.appendChild(“子元素对象”)
var h = document.createElement(“h1”)
var list1 = document.getElementById(“list1”)
list1.appendChild(h)
3、加属性和内容 参照第二步
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
