526互联

JavaScript基础

发布时间 2023-03-28 10:45:07作者: Geek李

1. 引入js

  1. https://www.w3cschool.cn/javascript/

  2. 用script标签，在其中写js代码

  3. <script src="JS/style.js"></script>
  • Number js不区分小数和整数 NaN表示不是一个Number类型的数据 Infinity表示无限大
  • 字符串 ‘abc' “abc”
  • 布尔值 ture，false
  • 逻辑运算 && || !
  • 比较运算符 ==(类型不一样，值一样) ===(数据类型和值都一样)
  • 数组 var arr = [1,2,"a"] 数组中的数据类型可以不同，下标越界会返回undefined
  • 对象 var a =

须知：

  1. NaN与所有的数值都不相等，包括自己，只能通过isNaN()来判断
  2. 尽量避免使用浮点数运算，存在精度问题
  3. null是空的意思，undefined是未定义

2. 严格检查模式

严格模式 的使用很简单，只有在代码首部加入字符串 “use strict”，限制性更强的JavaScript变体，它与常规JavaScript的语义不同，其分析更为严格。

  1. 不使用var声明变量严格模式中将不通过
  2. 任何使用’eval’的操作都会被禁止
  3. with被禁用等等

3. 数据类型

3.1 字符串

  1. 使用单引号或双引号包裹

  2. 注意转义字符 \ 比如: 'n ' '\t' '\x41'

  3. 多行字符串编写 用Tab上面的``包裹起来

  4. 模板字符串：

    var name = "66"
var msg = `你好啊,${name}`

  5. 字符串不可变性

  6. 大小写转换： name.toUpperCase()

  7. 输出name中有几个字符a name.indexOf('a')

  8. substring:

    name.substring(1,3) 从下表为1的输出到下标为2的，左闭右开原则

3.2 数组

  1. 数组可以包含任意数据类型

  2. 通过给arr.length赋值，数组大小会发生变化，赋值小于之前的大小会丢失数据

  3. indexOf(元素) 通过元素获得下标

  4. arr.slice(1,3) 截取arr数组中下标为1的元素到下标为2的元素，左闭右开，赋值给新数组

  5. arr.push() 将参数压入数组后面 arr.pop()压出数组后面一个元素

  6. arr.unshift() 压入到头部 shift弹出头部一个元素

  7. 排序arr.sort()

  8. 元素反转arr.reverse()

  9. arr.concat([1,2,3]) 将[1,2,3]加在arr后面

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

    var arr=[1,3,4]
arr.join('-')
'1-3-4'

3.3 对象

  1. 对象是由若干键值对组成的，JS中所有的键都是字符串，值是任意对象
var body = {
    name:"lijialong",
    age: 18,
    sex: "male"
}
  1. 使用不存在的属性，不会报错，会返回 undefined
  2. 动态删减属性，通过delete删除对象的属性
  3. 动态的添加，直接给新的属性添加至即可
  4. 判断属性值是否在这个对象中

3.4 Map和 Set

  1. Map

JS中的map可以通过map.get(键)获取对应的值，还可以通过map.set(键，值)向map中增加数值

  1. Set :无序不重复集合
  • Set会去重new Set([1,1,3,2]) 输出结果是 1,3,2
  • set.add(*) 增加元素
  • set.delete(*) 删除元素
  • set.has(*) 查找元素

3.5 iterator

  1. 通过for of获取各种集合中的值

for (var x of arr){ console.log(x) }

  1. for in会获取下标

4. 函数

4.1 定义函数

  • 方法一 (推荐使用)
function abs(x){
    if(x > 0){
        return x;
    } else {
        return -x;
    }
}
  • 方法二
var abs = function(x){
    if(x > 0){
        return x;
    } else {
        return -x;
    }
}

注意：如果没有执行return，也会返回结果，结果就是undefined

4.2 参数

  1. arguments 代表传递进来的参数的数组

  2. rest 获取除了已经定义了的其它所有参数

function add(x, y, ...rest){
    console.log(x);
    console.log(y);
    console.log(rest);
}

4.3 变量作用域

  1. 全局变量

    JS中惟一的全局变量域就是window，为了减少冲突，可以定义唯一全局变量：

    //定义唯一全局变量
var allHere = {};

//为我们定义的全局变量中加入我们的'全局变量'
allHere.name = 'GeekLee';
allHere.add = function(x){
    return x;
}

  2. let关键字

    其可以解决局部作用域冲突问题，建议用let定义局部变量

  3. const

    常量定义标识符：const ，常量用全大写命名

4.4 方法

  1. 对象中定义的函数就叫做方法，方法调用需要带括号

    通过外部定义内部方法：

    function getAge(){
    return 23;
}

var geekLee = {
    name: "geekLee";
    age: getAge
}

  2. apply(对象, [参数列表])

    让geekLee执行getAge方法

    getAge.apply(geekLee,[]);

5. 内部对象

typeof x 会返回x所属的对象

5.1 Date

var now = new Data();

  • 时间戳 now.getTime();
  • 转换为本地时间格式 now.toLocaleString();

5.2 JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。易于人阅读和编写，可以在多种语言之间进行数据交换 。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。

  • 对象转换为json字符串 JSON.stringify(对象)
  • json字符串转化为对象 JSON.parse('{"name":"geekLee","age":"23"}')

6. 面向对象编程

1. 原型（父类）

子类.__proto__ = 父类；

2. Class

2.1 构造器

class Student{
    constructor(name){
        this.name = name;
    }
}

2.2 继承

extends

7. 操作BOM对象（重点）

BOM：浏览器对象模型

  1. window

    代表浏览器窗口

  2. navigator

    封装浏览器信息

  3. screen

    代表屏幕

  4. location（重要）

    代表当前页面的URL信息

  5. document

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

    • 获取具体的文档数节点：document.getElementById('id');

    • 获取cookie(网络传输信息): document.cookie ,恶意人员可能会获取cookie进行违法活动,获取你的cookie相当于登录你的账号，所以要保护好你的"饼干"！

  6. history

    • 代表历史记录

    • 后退history.back()

    • 前进history.forward()

8. 操作DMO对象（重点）

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

  • 更新，遍历，添加，删除Dom节点

  1. 获得Dom节点

    var x = document.getElementsByTagName('标签名');

    var x = document.getElementsById('Id');

    var x = document.getElementsByClassName('类名');

    获取子节点 var childrens = father.children;

    father.firstChild father.lastChild

  2. 更新节点

    修改文本的值：x.innerText = '123'

    修改超文本：x.innerHTML = '<strong 123 </strong' (因为md语言可以用HTML编写，所以省略括号)

    操作JS

    x.style.color = 'red'

    x.style.fontSize = '100px'

    x.style.padding = '2em'

  3. 删除节点

    1. 找到自己 var self = document.getElementById('Id');
    2. 找到自己的父节点 var father = self.parentElement;
    3. 删除自己 father.removeChild(self)

    注意，删除是一个动态的过程，连续删除操作会瞬时影响节点下标，比如：father.removeChild(father.children[0]) 结束后，下表为1的会变为此刻下表为0的

  4. 插入节点

    被插入节点Id.appendChild(插入节点Id)

  5. 创建节点

    创建一个新p标签var newP = document.createElement('p')

    newP.id = 'newP';

    newp.innerText = 'Hello';

    或者公用写法 newP.setAttribute('id','newP')