JavaScript

'Boom'

已于 2022-03-02 16:30:57 修改

阅读量106

点赞数 1

分类专栏：心路历程文章标签： javascript

于 2021-04-10 14:55:24 首次发布

本文链接：https://blog.csdn.net/B000M/article/details/115576038

版权

心路历程专栏收录该内容

38 篇文章 0 订阅

订阅专栏

JavaScript

函数

定义函数一（建议）

function abs(x) {
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

定义函数二

var abs = function (x) {
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

手动抛出异常

var abs = function (x) {
    if (typeof x!="number"){
        throw 'Not a Number'
    }
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

rest

获取除了已经定义的参数之外的所有参数

function aaa(a,b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest)
}

变量的作用域

变量的作用域：内部函数可以访问外部函数的成员，反之则不行

function qj() {
    var x = 1;
    //内部函数可以访问外部函数
    function qj2() {
        var y = x+1;  //2
    }
    var z = y+1;  //Uncaught ReferenceError: y is not defined
}

内部函数变量和外部函数的变量重名

function qj() {
    var x = 1;
    function qj2() {
        var x = 'A';
        console.log('内:'+x);
    }
    console.log('外:'+x);
    qj2();
}
qj();
//函数查找变量从自身开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

规范

由于我们的所有的全局变量都会绑定到我们的window上。如果不同的JS文件，使用了相同的全局变量，冲突~

//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = 'Y'
KuangApp.add = function (a,b) {
    return a + b;
}

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

建议用let去定义局部作用域变量

function aaa() {
    for (let i = 0; i <100 ; i++) {
        console.log(i);
    }
    console.log(i+1);
}

在ES6引入了常量关键字const

const PI = '3.14';  //只读变量
console.log(PI);
PI = '3.14';

方法

var kuangshen = {
    name:'yrz',
    birth:'1998',
    age:function () {
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
//属性
kuangshen.name
//方法,一定要带  ()
kuangshen.age()

function getAge () {
    var now = new Date().getFullYear();
    return now-this.birth;
}
var kuangshen = {
    name:'yrz',
    birth:'1998',
    age:getAge
}
kuangshen.age()  //OK
getAge()  //NaN  因为window里面没有.birth

apply

在JS中可以控制this指向！

function getAge () {
    var now = new Date().getFullYear();
    return now-this.birth;
}
var kuangshen = {
    name:'yrz',
    birth:'1998',
    age:getAge
}
var xiaoming = {
    name:'xm',
    birth:'2000',
    age:getAge
}
getAge.apply(kuangshen,[]);  //this指向了kuangshen，参数为空
getAge.apply(xiaoming,[]);

内部对象

Date

var now = new Date();
now.getFullYear();
now.getMonth();
now.getDate();
now.getHours();
now.getMinutes();
now.getSeconds();

now.getTime();  //时间戳 世界统一 1970 1.1 0:00:00
console.log(new Date(1617946876931))  //时间戳转为时间
//Fri Apr 09 2021 13:41:16 GMT+0800 (GMT+08:00)

now = new Date(1617946876931)  //时间戳转为时间
//Fri Apr 09 2021 13:41:16 GMT+0800 (GMT+08:00)
now.toLocaleDateString()
//"2021/4/9"
now.toLocaleString()
//"2021/4/9下午1:41:16"
now.toLocaleTimeString()
//"下午1:41:16"
now.toGMTString()
//"Fri, 09 Apr 2021 05:41:16 GMT"

JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式：

对象都用{}
数组都用[]
所有键值对都是用key:value

JSON字符串和JS对象的转化

var user = {
    name : 'yrz',
    age : 3,
    sex : '男'
}
//对象转化为json字符串  {"name":"yrz","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"yrz","age":3,"sex":"男"}');

面向对象编程

原型对象

javascript、java、c#…面向对象；javascript有些区别

类：模板
对象：具体的实例

但在javascript中这个需要换一下思维方式

原型：

var Student = {
    name : 'yrz',
    age : 3,
    run : function () {
        console.log(this.name+"run...");
    }
};
var xiaoming = {
    name : "xiaoming"
};

//小明的原型是 Student
xiaoming.__proto__ = Student;
xiaoming.run()

class继承

//ES6 之后
    //定义一个学生的类
    class Student {
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert(this.name+'hello')
        }
    }
    class Primary extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert('I am Primary');
        }
    }

    var xiaoming = new Student('xiaoming');
    var xiaohong = new Primary('xiaohong');

操作BOM对象（重点）

screen

screen.width
1536
screen.height
864

location（重要）

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()  //刷新网页
//设置新地址
location.assign('https://www.bilibili.com/')

document

document代表当前的页面

document.title
"哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie

history

history代表浏览器的历史记录

history.back()  //后退
history.forward()  //前进

操作DOM对象（重点）

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

获取DOM节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
   //对应 CSS 选择器 
    var h1 = document.getElementsByName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByName('p2');
    var div = document.getElementById('father');

    var children = div.children;  //获取父节点下的所有子节点
</script>

更新DOM节点

<div id="id1"></div>
<script>
    var id1 = document.getElementById('id1')
</script>

//操作文本
id1.innerText='text'  //修改文本的值
id1.innerHTML='<strong>123</strong>'  //可以解析HTML标签
//操作JS
id1.style.color='red'
id1.style.fontSize='200px'  //驼峰命名问题
id1.style.padding='2em'

删除节点

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

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1)
    //删除是一个动态的过程
</script>

插入节点

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

追加：

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">SE</p>
    <p id="ee">EE</p>
    <p id="me">ME</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);  //追加到后面
</script>

创建一个新的标签，实现插入：

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">SE</p>
    <p id="ee">EE</p>
    <p id="me">ME</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);  //追加到后面
    var newP = document.createElement('p');  //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'hello!YRZ';
    list.appendChild(newP);
    //创建一个标签节点（通过这个属性，可以设置任意的值）
    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)
</script>