JavaScript学习笔记

最新推荐文章于 2024-01-28 09:35:01 发布

巡山小钻风つ

最新推荐文章于 2024-01-28 09:35:01 发布

阅读量673

点赞数

分类专栏： web 笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_51497041/article/details/122271326

版权

笔记同时被 2 个专栏收录

39 篇文章 2 订阅

订阅专栏

web

6 篇文章 0 订阅

订阅专栏

1 入门

1.1 引入JavaScript

内部标签

<script>
        alert('helloword');
    </script>

外部引用

<script src="qj.js"></script>

1.2 语法入门

变量 var去定义

console.log(score)在浏览器的控制台打印变量

js不区分小数和整数，Number

123 整数123

123.1 浮点数123.1

1.123e3 科学计数法

-99 负数

NaN not a number

Infinity 表示无限大

字符串

'abc' "abc"

布尔值

ture false

逻辑运算

&& || ！

比较运算符

= 赋值

== 等于（类型不一样，值一样也会true）

=== 绝对等于（类型一样，值一样）（NaN===NaN特例，需使用isNaN(NaN)判断）

避免使用浮点数比较

判断1/3和1-2/3console.log(Math.abs(1/3-1-2/3)<0.0000000001)

数组

var arr = [1,2,3,a,b,c,'hello',null,true] (java中就不行)

对象

对象用大括号，数组用中括号

var person = {

name ： “qinjiang”，

age：3，

tags：['js','java','wang']

}

使用的时候在控制台person.name

严格检查模式strict

'use strict'

用来检查是否有代码错误，放在javaScript的第一行

需要在IJ的javascript6才支持

i=1全局变量

var i =1局部变量

let i = 1 局部变量

1.3 字符串

1.正常字符床我们使用单引号或双引号包裹

2.注意转义字符\

\'

\n

\u4e2d \u#### unicode字符

\x41 Ascll字符

使用 console.log("\x41")

模板字符串

波浪键

let name = ‘gao’；

let age = 3；

let msg = `你好，${name}`; 注意使用 ` ` 去包裹字符串的

大小写转换

//注意，这里是方法不是i属性

student.toUpperCase()转大写

student.toLowercase()转小写

substring 截取字符串

student.substring(1) //从第一个字符串截取到最后一个字符串

student.substring(1,3) //[1,3)

1.4数组

数组赋值之后，长度是可变的

通过元素获得下标索引

arr.indexof(2) 获得2的下标

字符串的"1"和数字1是不同的

截取数组

slice（）截取Array的一部分，返回一个数组，类似于String中的substring

push、pop

push在数组后添加元素，

pop弹出数组尾部一个元素

unshift(),shift()

unshift：压入元素到头部

shift：弹出头部元素

排序sort（）

arr.sort()

元素反转reverse()

arr.reverse()

数组拼接confat（）

["c","b","a"]

arr.concat([1,2,3])

["c","b","a",1,2,3]

arr

["c","b","a"]

注意：这里拼接不修改原数组，只是返回一个新数组

连接符join

打印拼接数组，使用特定的字符串连接

["c","b","a"]

arr.join('-')

"c-b-a"

1.5对象

若干个键值对

var 对象名 = {

属性名：属性值，

属性名：属性值，

属性名：属性值

}

对象赋值：

使用一个不存在的对象属性，不会报错，只报undefined

动态删减属性通过delete删除对象的属性

delete person.name

true

person

动态添加，直接给新的属性添加值即可

person.haha = 'gao'

'gao'

person

判断属性值是否在这个对象中 XXX in XXX

'age' in person

true

//继承

‘toString’ in person

true

判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')

false

person.hasOwnProperty('age')

true

1.6 流程控制

if for while 同java

forEach循环

var age = [1,2,3,4,4]

//函数

age.forEach(function(value){

console.log(value);

})

1.7 Map 和Set

（ES6刚出来的）

map：

var map = new Map(['tom',100],['jack',200],['haha',300])

var name = map.get('tom');//通过key获得value

map.set('admin',123456)//设置map

map.delete("tom");

Set：无序不重复的集合

var set = new Set（[3,2,1,1]）;//set可以去重

set.delete(1);

set.add(2)

set.has(3)//是否包含某个元素

1.8 iterator

遍历数组

//通过for of / for in 下标

var arr = [3,4,5]

for(var x of arr){

console.log(x);

}

遍历map

var map = new Map(["tom",100],["jack",90],["haha",80]);

for(let x of map){

console.log(x)

}

遍历set

var set = new Set([5,6,7]);

for (let x of set){

console.log(x)

}

2 函数

方式一：

如果没有return，也会返回结果undefined，不报错

function abs(x){

if(x>=0){

return 0;

}else{

return 1;

}

}

方式二：

var abs = fuction(x){

if(typeof x!= 'number'){// 判断类型

throw 'Not a number'; //抛出异常

}

}

arguments关键字，代表参数传递进来是一个数组

function avs(x){

console.log("x=>"+x);

for(var i = 0;i<arguments.length;i++){

console.log(arguments[i]);

}

}

出现问题：arguments 包含所有的参数，我们有时候使用多余的参数进行附加操作。需要排除已有参数~

rest关键字

function aaa(a,b,...rest){

console.log("a=>"+a);

console.log("b=>"+b);

console.log(rest);

}

rest 参数只能写在最后面，必须用...标识；

3 变量的作用域

内部成员可以访问外部成员，反之不行

双亲委派机制，javascript中，函数查找变量从自身函数开始~，由内向外查找，假设外部存在这个同名的函数变量，则内部函数回屏蔽外部函数的变量。

所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function qj(){

        var x = 1,

          y=x+1,

          z,i;

}

全局变量

x=1；

function f(){

}

全局对象 window

var x = 'xxx';

alert(x);

alert(window.x);//默认所有全局变量，都会自动绑定在window对象下；

alert()这个函数本身也是一个window对象的变量

注意当window.alert被覆盖时，需要恢复

javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就报错

自己做全局变量

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突。如何减少冲突？

//唯一全局变量

var gaoApp = {};

//定义全局变量

gaoApp.name = 'gulang';

gaoApp.add = function(a,b){

return a+b;

}

把自己的代码全部放入自己当以的唯一空间名字中，降低全局命名的冲突问题

局部变量let

function aaa（）{

for （let i = 0;i<100;i++）{

console.log(i)

}

console.log(i+1);//i的作用域内用let定义，出了作用域就会报错，Uncaught ReferenceError:i is not defined

}

const 常量

const PI = '3.14';//只读变量

console.log(PI);

PI = '123';//报错：TypeError:Assignment to constant variable.

4 方法

方法: 把函数放在对象的里面，对象只有两个东西属性和方法；

var gao = {

name: 'didi',

birth: 2020

//方法

age:function(){

var now = new Date().getFullYear();

return now-this.birth;

}

}

//调用时

属性

gao.name

方法，调用时必须要加括号

gao.age()

写法2：函数和方法拆开写

function getAge(){

var now = new Date().getFullYear();

return now-this.birt

}

var gao = {

name:'gxq',

birth:200,

age:getAge

}

//gao.age() 可以这么用

//getAge() 不能这么调，原因是这里的this指向的是window对象，而window对象里没有birth这个属性所以报错，而gao.age(),这里的this指向的是gao这个对象。

this默认指向调用他的那个对象

apply 这个关键字可以控制this的指向

function getAge(){

var now = new Date().getFullYear();

return now-this.birt

}

var gao = {

name:'gxq',

birth:200,

age:getAge

}

//调用(被动)

getAge.apply(gao,[]);//this，指向gao，参数为空

5 内部对象

标准对象

number ，string， boolean， object， function

5.1 Date

var now = new Date();

now.getFullYear();

n0w.getMonth();

now.getDate();

now.getDay();

now.getHours();

now.getMinutes();

now.getSeconds();

now.getTime();//时间戳全世界统一起始1970 1.1 0.00.00

new Date（157810617591）//时间戳转为时间

转换

now = new Date(157810617591)

输出格式：Sat Jan 04 2020 10:49:35 GMT+0800(中国标准时间)

now.toLocaleString //注意，调用是一个方式，不是一个属性

f toLocaleString(){[native code]}

now.toLocaleString()

输出格式：“2020/1/4 上午10：49：35”

now.toGMTstring()

输出格式：“Sat，04 Jan 2020 02：49：35 GMT”

6 JSON

json 是一种轻量级的数据交换格式
简洁的清晰的层次结构是的JSON成为理想的数据交换语言
易于机器解析和生成，并有效提升网络传输效率

在JavaScript 一切皆为对象、任何支持的类型都可以用JSON来表示；number，string

格式：

对象都用{}
数组都用[]
所有的键值对，都用key：value

JSON字符串和JS对象的转化

var user = {

name:"gaoxiu",

age: 3,

sex:'男'

}

//对象转化json字符串{"name":"gaoxiu","age":3,"sex":"男"}；

var jsonUser = JSON.stringify(user);

//json 字符串转化为对象，参数为json字符串

var obj = JSON.parse('{"name":"gaoxiu","age":3,"sex":"男"}')；

7 面向对象

6.1 原型

（以前用的，现在不用了）

对象wang里没有方法run，通过最后一行把对象wang的原型设为Student那么就可以在wang中使用run方法了

var Student = {

name:"gaoxiu",

age:3,

run:function(){

console.log(this.name+"run...");

}

};

var wang = {

name:"wang"

};

wang._proto_ = Student;

6.2 class继承

这个关键字是在ES6中加入的

定义一个类

class Student {

constructor(name){//构造器

this.name=name;

}

hello(){

alert('hello')

}

}

var gao = new Student("gaoxiu");

gao.hello();

继承

class gaogao extends gao{

constructor(name.grade){

super(name);

this.grade = grade;

}

myGrade(){

alert('我是弹窗')；

}

}

var gaoxiu = new gaogao("name",1);

本质上还是原型对象；

原型链的概念：每个函数都有一个prototype属性，这个属性指向函数的原型对象。原型对象都包含一个指向构造函数的指针，

6.3操作BOM对象

主流浏览器：

IE 6-11

chrome

Safari

FireFox

window

window 代表浏览器窗口

window.alert(1)

可以单独写的说明都有对象window，

Navigator

navigator 封装的浏览器的信息

不建议使用这些属性判断和编写代码

screen

屏幕尺寸

screen.width 1920px

screen.height 1080px

location

location 代表当前页面的URL信息

location.assign('https://www.csdn.net')

如果该网站又这个链接，则访问时直接跳转到该链接

用来设置新的

document

document 代表当前页面，HTML DOM文档树

<dl id="app">

<dt>java</dt>

<dd>javase</dd>

<dd>javaee</dd>

</dl>

<script>

var dl = document.getElemenById('app');

</script>

这样可以获取到

获取cookie

document.cookie

history 代表浏览器历史记录（不建议使用）

history.back() 返回

history.forword 前进

6.4操作DOM节点（重）

核心

浏览器网页就是一个Dom树形结构

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加要给新节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">行内容</p>
    <p class="p2">行内容</p>
</div>

<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var childrens = father.children;//获取父节点下的所有子节点
    father.firstChild
    father.lastChild
</script>

更新节点

id.innerText='234' 修改文本值

id.innerHTML='<strong>123</strong>' HTML可以解析HTML标签

id.style.color = 'red' 修改颜色

id.style.fontSize='200px' 修改尺寸

id.style.padding = '修改外边距'

<body>
    <div id="id1"></div>

<script>
    var id1 = document.getElementById('id1');
    id1.innerText = 'gao';
    id1.innerHTML = '<strong>123</strong' //解析html标签
</script>
</body>

删除节点

删除节点步骤：先获取父节点，再通过父节删除自己

删除多节点时，children是在时刻变化的，删除节点的时候一定要注意；

<body>
    <div id="father">
        <h1>标题一</h1>
        <p id="p1">行内容</p>
        <p class="p2">行内容</p>
    </div>

    <script>
        var self = document.getElementById('p1');
        var father = p1.parentElement;
        father.removeChild(self);
        
        //删除是一个动态的过程；
        //删除之后，剩下的会自动向前移动；(重)
        father.removeChild(father.children[0])
    </script>
</body>

插入节点

我们获得了某个DOM节点，假设这个dom节点是空的，我们通过innerHTML 就可以增加一个元素了，但这个DOM节点已经存在元素了，我们就不能这么干了，会产生覆盖

第一种在尾部加：

将js的p标签，添加到list标签的尾部

<body>
    <p id="js">JavaSrcipt</p>
    <div id="list">
        <p id="se">javase</p>
        <p id="ee">javaee</p>
        <p id="me">javame</p>
    </div>
    <script>
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        list.appendChild(js);
    </script>
</body>

第二种：

<p id="js">JavaSrcipt</p>
    <div id="list">
        <p id="se">javase</p>
        <p id="ee">javaee</p>
        <p id="me">javame</p>
    </div>
    <script>
        //1.在尾部加
        // var js = document.getElementById('js');
        // list.appendChild(js);

        //2.创建一个新的标签实现插入
        //通过JS创建一个新的节点
        var newP = document.createElement('p');//创建一个p标签
        newP.id = 'newP';
        newP.innerText = 'Hello,gao';

        //创建一个标签节点
        var myScript = document.createElement('script');
        myScript.setAttribute('type','text/javascript');

        //创建一个Style标签
        var myStyle = document.createElement('style');//创建了一个空style标签
        myStyle.setAttribute('type','text/css');
        myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
        document.getElementsByTagName('head')[0].appendChild(myStyle);

        //insert方式插入 insertBefore(newNode,targetNode) 第一个值插入的节点，第二个是目标节点
        var ee = document.getElementById('ee');
        var js = document.getElemenById('js');
        var list = document.getElemenById('list');
        list.insertBefore(js,ee);

    </script>