基本数据类型
console.log(a) 控制台打印
NaN // not a number
Infinity //表示无限大
"abc" ; 'abc' //都是字符串
&& || ! //与或非
=: // 赋值
==: // 等于 (类型不一样,值一样,也会判断为true)一般情况不用
===: // 绝对等于 (类型一样,值一样,结果true)经常用
null // 空
undefined // 未定义
let a = 1; //局部变量建议使用let定义
"use strict";//严格检查模式,防止Javascript的随意性导纹产生的一些问题,放在第一行
字符串
单引号或者双引号包裹字符串 ,
\ 转译字符 : \n:换行 ; \t :table键 ; \' : 可以输出一个 '
多行字符串:
使用 ` 包裹
let str =
`
nihao
wkwkw
sereee
`
console.log(str)
模版字符串
使用 ` 包裹后 , 用${变量}来直接拼接字符串
let name = 'wkx';
let age =18;
let msg = `
nihao${name}${age}
`
console.log(msg)
字符串长度 和 字符串不可变
str.length
var student = 'wwwwwwwww';
console.log(student[1]);
student[1] = 'k'; //不可赋值,如果写了"use strict"; 这句话会直接报错不会执行
console.log(student)
// 打印结果还是wwwwwwwww
大小写转换
var student = 'hhhhhhh';
let teacher = student.toUpperCase();
console.log(`teacher现在是${teacher}`); // 字符串拼接多使用piao
let classmate = teacher.toLowerCase();
console.log(`classmate现在是${classmate}`)
//和下面的作对比
这里要注意字符串的不可变性 即:
let student = "aaaaaa";
student.toUpperCase();
console.log(student);
//打印结果仍然是aaaaa
字符串的一些操作和java基本一致
student.indexOf('t') :获取t第一次出现的索引位置 , 和java一样
student.subString(1,3) // [) :左闭右开
student.subString(1) // 从第一个截取到最后
数组
js数组不区分类型,随便写
var arr = [1,2,"qqq",'bbb',null,true,false]
数组长度可变
注意:假如给 arr.length 赋值,数组大小就会发生变化~,如果赋值过小,元素就会丢失
赋值大的时候,会出现很多undefined的空值
一些用法 indexOf slice push pop unshift shift sort reverse concat
arr.indexof (2) //和字符串一样 ;返回第一次出现的索引
arr.slice() //截取Array的一部分,返回一个新数组,用法类似于String中的 subString
//尾部操作
arr.push(1,3,'3') //尾部压入数据
arr.pop() //从尾部弹出数据
//头部操作
arr.unshift(1,3) //头部压入数据
arr.shift() //头部弹出一个数据
//排序
arr.sort()
//反转
arr.reverse
//数组拼接
arr.concat(1,2,3) //注意这是返回了一个新数组,并不会影响arr
对象
里面若干个键值对
js中的所有键都是字符串 , 值是任意对象
var 对象名 ={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var person = {
name: "wkx",
age :18,
tar : [18,'wkx',null,[1,2,3]]
}
console.log("这个数字是"+person.tar[3][1]) //输出2
动态的删减和添加,通过 delete 删除对象的属性 , 添加时直接添加即可
//删除属性 delete person.age
//添加属性 person.age = 18;
for循环
最基础的for循环就不看了 写一个for of
let arr = [1,2,"qqq",'bbb',null,true,false]
//for of循环
for(let i of arr){
console.log(i);
}
foreach
for each的入参是一个function()
arr.forEach(
function (value){
console.log(value);
}
)
map和set
map
初始化Map需要一个二维数组,或者直接初始化一个空Map
let m = new Map();
let m1 = new Map([["wkx",18],["李四",19],["王五","wwwww"]]);
// get获取键"wkx"的值
m1.get("wkx")
// set添加一个新的键值对到Map中去 对一个键赋多个值,会覆盖
m.set("张三",'1班')
// has是否存在键"李四"
m1.has("李四")
// delete删除键值
m.delete("张三")
map/set的遍历也可以用for of
for(let m of map)
for(let s of set)
set
set是一个无序且不重复的集合
初始化是一个一维数组或者空
// 重复元素自动过滤
let set = new Set([1,1,1,1,1,2]);
let set2 = new Set();
// add可以添加元素 , 重复元素添加无效
set.add(3);
// delete可以删除元素
set.delete(3);
// has查看set中是否有这个元素
set.has(1)
函数
函数的定义
函数的命名:
//第一种方式 常规命名
function abs(x){
if(x>=0){
return x;
}else {
return -x;
}
}
//第二种方式用变量来接收一个函数
let abs = function(x){
if(x>=0){
return x;
}else {
return -x;
}
}
传参:
上述案例虽然我们只需要一个参数 , 但是js可以传递任意多个参数,也可以不传参数
没有参数时,可以抛出异常以避免一些不必要的问题
// typeof 获取变量的类型 !== :不等于
if(typeof x !== 'number'){
throw 'not a number'
}
当参数很多时,我们可以使用arguments
arguments表示传递进函数的所有参数 , 是一个数组
//打印传递进函数的所有参数
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
rest 参数只能写在最后面,必须用 ... 标识,
rest以数组的形式接收定义之外的剩余参数
变量的作用域
假设在函数体中声明变量,则在函数体外不可以使用~(非要想实现的话,后面可以研究一下闭包)
function qi() {
var x= 1;
x= x+1;
}
×= ×+2; //Uncaught ReferenceError:x is not defined
- 内部函数可以使用外部函数的变量
- 若内部函数定义了和外部函数同名的变量 , 函数查找变量是由内向外的
- 假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量
function out(){
let x = 'www';
let y = 'y';
console.log(x);
function inner(){
let x = 'nnn'+y;
console.log(x);
}
inner();
}
out();
//输出结果:
www
nnny
提升变量的作用域
function out() {
var x = 'x'+y;
console.log(x);
var y = 'y';
}
out();
//输出结果
xundefined
js执行引擎,自动提升了y的声明,但是不会提升变量y的赋值;
所以我们在定义变量时需要一个规范 : 将所有的变量都放在函数体的头部
function out() {
// 逗号隔开
var x = 'x',
y = 'y',
z,c,m,v;
console.log(x,y,z,c)
}
out();
全局变量
全局变量和java类似 , 定义在函数外部的变量
js中有一个全局对象 window , 默认所有的全局变量,都会自动绑定在 window对象下;
包括alert , console ...
var x= 'x';
function out() {
console.log(x);
}
out();
console.log(x);
console.log(window.x);
//还可以这么玩
var n = window.console;
n.log(x);
var al = window.alert;
al("你看")
Javascript 实际上只有一个全局作用域,
任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,
如果在全局作用域都没有找到,报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的js文件,使用了相同的全局变量,冲突~>如果能够减少冲突?
解决方式:我们自己定义一个唯一的全局变量 , 将所有的变量都绑定到我们自己定义的变量上 , 不用window
var wkx = {}
wkx.name = "wangkaixuan";
wkx.age = 18;
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
局部作用域let
function abs(){
for (var i = 0; i <100 ; i++) {
console.log(i);
}
console.log(`局部变量竟然还可以用${i+1}`);
}
let是为了解决局部作用域冲突问题
function abs(){
for (let i = 0; i <100 ; i++) {
console.log(i);
}
console.log(`局部变量竟然不可以用了${i+1}`);
}
// 当我们用let定义i变量时, 出了for循环再使用就会报错:
// ReferenceError: i is not defined
所以在定义局部作用域的变量时 可以使用let
常量关键字:const : 用const定义的变量是只读的
方法
类(对象)里面的函数称为方法
var wkx = {
name : 'wkx',
birthday :1998,
age :function (){
return new Date().getFullYear()-this.birthday;
}
}
//调用方法 注意一定要有括号
wkx.age();
apply
方法.apply(对象名,参数数组,为空就是空数组)
内部对象
标准对象
可以使用typeof来打印对象是什么类型的
typeof 123
'number'
typeof '123'
'string'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof true
'boolean'
Date:日期
基本使用方法
var now = new Date(); // Sat Jun 04 2022 09:56:27 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); // 月 从0-11;六月打印5
now.getDate(); // 日
now.getDay(); // 星期
now.getHours() //时
now.getMinutes() //分
now.getSeconds() // 秒
now.getTime() // 时间戳,全世界统一,从1970年1月1日 0:00:00 到现在的毫秒数
console.log(new Date(now.getTime()))
VM379:1 Sat Jun 04 2022 10:02:12 GMT+0800 (中国标准时间)
面相对象编程
JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。
当我们用obj.xxx访问一个对象的属性时,
JavaScript引擎先在当前对象上查找该属性,
如果没有找到,就到其原型对象上找,
如果还没有找到,就一直上溯到Object.prototype对象,
最后,如果还没有找到,就只能返回undefined。
class继承
用class定义一个对象
class Person{
//构造方法
constructor(name) {
this.name = name;
}
hello(){
console.log("hi")
}
}
var xiaoming = new Person("xiaoming");
xiaoming.hello();
extends继承对象
class Student extends Person{
constructor(name,grade) {
super(name);
this.grade = grade;
}
hi(){
console.log("xiaohai");
}
}
var xiaoming = new Student("xiaoming",1);
操作Bom对象
JavaScript 诞生就是为了能够让他在浏览器中运行!
Bom : 浏览器对象模型
window 代表浏览器的窗口
凡是可以单独使用的都属于window下的
screen
//屏幕宽高
screen.width
screen.height
location(重要)
location代表当前页面的URL信息
host: "m.baidu.com" //主机名和端口号
href:"https://www.baidu.com/" //跳转到别的网页
protocol:"https:" //协议
reload //刷新网页
设置新的地址
1ocation.assign("https://www.wkx.com/")
操作DOM对象(重点)
DOM:文档对象模型
浏览器网页就是一棵DOM树 , 根节点是html ,分支节点有head body等
四个基本操作:
- 更新(修改) :更新DOM节点
- 遍历:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个DOM节点
获得dom节点的常用方法和属性
var id1 = document.getElementById('id'); //通过id获取元素
document.getElementsByClassName('class') //通过class获取元素
document.getElementsByTagName('h1') //通过标签来获取元素
father.children //获取父节点的所有子节点
更新节点:
//操作文本
id1.innerText = '123' //修改文本的值
id1.innerHTML ='<strong>123</strong>'; //可以解析html超文本
//操作样式
idl.style.color ='yellow';
idl.style.fontsize='20px'; //驼峰命名
idl.style.padding ='2em'
删除节点
删除节点的步骤:先获取父节点,在通过父节点删除自己
<div>
<p id="p1">p1</p>
<p id="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1'); //首先获取要删除的节点
var father = self.parentElement; //获取要删除节点的父节点
father.removeChild(self); //通过父节点来删除节点
</script>
删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意!
插入节点
- 获取的节点是空的,我们可以使用innerHTML来添加节点
但是这个DOM 节点已经存在元素了,我们就不能这么干了!会产生覆盖
- 追加操作:append
append和appendChind的区别:
append()可以同时传入多个节点或字符串,没有返回值;
appendChild()只能传一个节点,且不直接支持传字符串
<p id="add">add</p>
<p id="add1">add1</p>
<p id="add2">add2</p>
<div id="self">
<p id="p1">p1</p>
<p id="p2">p2</p>
</div>
<script>
var add = document.getElementById('add');
add1 = document.getElementById('add1');
add2 = document.getElementById('add2');
self = document.getElementById('self');
self.append('还可以传字符串',add,add1,add2);
self.appendChild(add);
</script>
新建一个节点,然后插入
var newP = document.createElement('div');
newP.id = 'newP';
newP.innerText ='wkx';
self.append(newP);
//效果
<div id="newP">wkx</div>
//上述设置id的值时有一个万能写法:使用setAttribute:键值对
newP.setAttribute('id','newP');
修改css样式
var body = document.getElementById('body')
console.log(body);
//二选一
body.style.backgroundColor ='yellow';
body.setAttribute('style','background-color:yellow');
操作表单
表单:form dom树
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
得到输入框的值
<input type="text" id="name" required/> //required:必填
var text_name = document.getElementById('name');
text_name.value; //用value属性来获取元素的值
text_name.value =1233; //也可以直接赋值来修改其内容
选择框
无论是单选框还是多选框 , 值都是写死在value中的
//这是一个单选框 name绑定相同
<input type="radio" name="sex" value="man" id="boy"/>男
<input type="radio" name="sex" value="women" id="girl"/>女
var radio_man = document.getElementById('boy');
对于单选框或者多选框 , 等等固定的值,radio_man.vaLue只能取到当前的值
就是说 即使我们选中了一个 , 用.value也无法获取我们选中的值
我们可以使用.checked属性来判断元素是否被选中
radio_man.checked //用dom变量来操作
true //选中就返回true
boy.checked //直接用id来操作
false //没选中就返回false
//只要是可以唯一定义到这个元素就可以
//也可以手动赋值
boy.checked = 'ture'