javascript学习笔记记录01

基本数据类型

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

1. 内部函数可以使用外部函数的变量
2. 若内部函数定义了和外部函数同名的变量 , 函数查找变量是由内向外的
3. 假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

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'