JavaScript基础（快速回忆版）

JavaScript基础（快速回忆版）

1.对象：

对象的定义：

对象是若干键值对（属性之间使用逗号隔开，最后一个属性不加逗号）

JavaScript中的所有的键都是字符串，值是任意对象

取对象的值

person.name
>lyl
person.age
>12

通过delete删除对象的属性

person.name
"lyl"
delete person.name
true
person
{age: 21, number: 123456}

2.严格检查模式

建议启用严格检查模式，

在javaScript代码块第一行中加入'use strict'

3.字符串

多行字符串编写

       //多行字符串编写（使用反引号``）
       var mes=
           `hello
           你好
我是望穿先生！`

模板字符串

//模板字符串
let name='lyl';
let age=21;
let massage=`你好啊，${name}`

字符串的可变性

字符串不可变

4.数组

Array可以包含任意的数据类型

//数组可以包含任意数据类型
var arr=[1,2,3,'lyl',13.8]

通过arr.length获取长度

注意：假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就回丢失

slice()方法：

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

push()和pop()方法：

push:将元素压入到尾部
pop:弹出尾部的一个元素

unshift()和shift()方法：

unshift:将元素压入到头部
shift:  弹出头部的一个元素

join()方法：

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

var arr=[1,2,3,4,5]
undefined
arr.join('-')
"1-2-3-4-5"

concat()方法：

实现数组的拼接

>var arr2=['k','l']
>undefined
>arr.concat(arr2)
>[1, 2, 3, 4, 5, "k", "l"]

5.分支和循环

循环:

foreach()

var age=[12,23,34,45,21,22]
//foreach()里是函数
age.foreach(function(value)){
            console.log(value)
}

for...in 遍历出索引下标

//遍历出来的是数组的索引
for(var num in age){
    if(age.hasOwnProperty(num)){
        console.log("存在")
        console.log(age[num])
    }
}

6. Map和Set

Map:

//Map
var map=new Map([['lyl',99],['kkk',89]]);
var score =map.get('kkk')    //通过键获取值
console.log(score)

Set:无序不重复的集合

var set=new Set([1,2,3,4,1,1,1]);
console.log(set)
>
0: 1
1: 2
2: 3
3: 4

7. iterator

通过for of遍历值

//for of遍历值
var arr=[3,4,5]
for(var x of arr){
    console.log(x)
}

8.函数

8.1定义函数

定义方式1：

一旦执行到return代表函数返回，返回结果。

定义方式2：

//定义方式2
var abs=function (x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }   
}

假设不存在参数，如何规避（需要手动抛出参数）

function abs(x){  
    //手动抛出异常
    if(typeof x!='number'){
        throw 'Not a number'
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

8.2 arguments关键字

代表传进来的所有参数是一个数组

var abs=function (x){
    for (var i=0;i=0){
        return x;
    }else{
        return -x;
    }
}

8.3 rest关键字

arguments包含所有的参数，我们有时候想要使用多余的参数类进行附加操作，需要排除已有的参数

rest是 ES 6 引入的新特性，可以获取除了已经定义的参数之外的所有参数

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

function lyl(a,b,...rest){
    console.log(rest);  //输出除了a,b这两个参数以后的所有参数
}

9. 变量的作用域

var 定义的变量有作用域‘

变量在函数内有效，内部函数可以访问外部函数的成员，反之则不行

全局对象window

var a='全局变量';
alert(a);
alert(window.a)  //默认的所有全局变量，都会自动绑定在window对象下

规范：

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

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

//单一全局变量
var lyl={};
//定义全局变量
lyl.name="望穿先生";
lyl.add=function (a,b){
    return a+b;
}

建议使用let关键字 定义局部变量

解决局部作用域冲突的问题

常量关键字 const

const PI="3.14"  //定义常量
console.log(PI);
PI="1234";     //常量不可被修改，此时会报类型错误

10.方法

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

var lyl={
    name:"望穿先生",
    birth:2000,
    //方法
    age:function (){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    //调用方法一定要带()
    lyl.age()

apply(在js中可以控制this指向)

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var lyl={
    name:"望穿先生",
    birth:2000,
    age:getAge()
}
getAge().apply(lyl,[]);  //this,只指向了lyl，参数为空

11.内部对象

11.1 Date对象

 let date = new Date();
 date.getFullYear();  //年
 date.getMonth();    //月
 date.getDate();      //日
 date.getDay();       //星期
 date.getHours();     //时
 date.getMinutes();   //分
 date.getSeconds();    //秒
 date.getTime();       //时间戳，从1970年 1.1 00.00到现在的时间戳

// 通过时间戳返回正确格式的时间
// console.log(new Date(1646962666507))
 // VM194:1 Fri Mar 11 2022 09:37:46 GMT+0800 (中国标准时间)

转换

date = new Date(1646962666507)
date.toLocalestring()         //将时间戳转换为当前时间

11.2 JSON对象

Json是什么

  • JSON(JS对象简谱)是一种轻量级的数据交换格式

  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言

  • 易于人阅读和编写，同时也有易于机器解析和生成，并有效提升网络传输效率

在JavaScript一切皆为对象，任何js支持的类型都可以Json来表示

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都使用key:value
var user={
  name:"lyl",
  age:21,
  sex:"男"
}
//将对象转化为json字符串
let jsonuser=JSON.stringify(user)

//字符串转化为对象,参数必须是JSON字符串
let obj=JSON.parse('{"name":"lyl","age":21,"sex":"男"}')
//JSON.parse('{"name":"lyl","age":21,"sex":"男"}')
//{name: "lyl", age: 21, sex: "男"}

注意：json和js对象的区别

let obj={a:'hello',b:'你好'}
let json='{"a":"hello","b":"你好"}'

12.面向对象编程

类似于java中的继承，javaScript中有原型继承

let Student={
  name:"lyl",
  age:21,
  run:function (){
    console.log(this.name+"run...")
  }
}

let mike={
  name:"望穿先生",
  age:22,
}
//mike的原型指向Student,使得mike也可以执行run方法
mike.__proto__ =Student;

class

class关键字，是在ES6引入的

定义一个类，属性，方法

//定义一个学生类
class Student{
  //构造器
  constructor(name) {
    this.name=name;
  }
  hello(){
    alert("你好啊");
  }
}
let mike=new Student();
mike.hello();

继承

//继承
class xiao extends Student{
  constructor(name,grade) {
    super(name);
    this.grade=grade;
  }
  MyGrade(){
    alert("我的成绩是100");
  }
}
let linda=new xiao("linda",20);

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iuTodVua-1647138157554)(C:\Users\28905\AppData\Roaming\Typora\typora-user-images\image-20220311110429788.png)]

13.操作BOM对象（重点）

JavaScript和浏览器的关系：

JavaScript诞生就是为了能够让他在浏览器中运行

BOM:浏览器对象模型

  • IE 6-11
  • Chrome
  • Safari
  • FireFox

window对象

window代表浏览器窗口

    window.innerHeight     //窗口内部高度
    window.innerWidth      //窗口内部宽度

Navigator对象

Navigator,封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人修改，所以不建议使用这些属性来判断和编写代码

navigator.appName      //浏览器名字
navigator.appVersion    //版本

Screen对象

代表屏幕

screen.width
screen.height

location对象（重要）

location代表当前页面的URL信息

//设置新的地址
location.assign('https://cnsblog.wangchaunxiansheng.com')

Document对象

document代表当前的页面，HTML,DOM(文档树)

获取cookie

doucument.cookie

服务器端可以设置cookie:httpOnly

history对象

history代表浏览器的历史记录

history.back()  //返回
history.forward()  //前进

14.操作DOM对象

DOM文档对象模型

核心：

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

  • 更新：更新DOM节点
  • 遍历DOM结点：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个新的节点

获得DOM节点:

（这是原生代码，之后我们尽量都是用jQuery）


    
我是h1

    
我是p1

    
我是p2

更新DOM节点：

操作文本：

  • lyl.innerText="你好" 修改文本的值
  • lyl.innerHTML='你好 ' 可以解析HTML文本标签

操作js

  • lyl.style.color="red" 将文本颜色修改为红色

删除DOM节点：

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


  
p1

插入DOM节点:

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerTHML就可以增加一个元素了，但是这个DOM结点已经存在元素了，我们再增加元素就会产生覆盖。

追加元素

外部p标签



    
JavaSE

    
JavaEE

    
JavaME

创建元素


    
JavaSE

    
JavaEE

    
JavaME

通过setAttribute()为新创建的节点设置属性


    
JavaSE

    
JavaEE

    
JavaME

15.操作表单（验证）

得到表单输入框的内容


  用户名：

得到表单，单选框的值


  用户名：
  
性别：
    男
    女

MD5加密的提交表单（注意onsubmit的return）




    
    md5加密
  





    

        用户名：
    

    

        密码：

效果：

此时的password已经被MD5加密

在这里插入图片描述

16. jQuery

jQuery库，里面存在大量的javascript函数

获取jQuery

CDN引入或者下载引入

//jQuery公式  选择器+shijian 
$(selector).action()

简单实例：




    
    jquery

选择器：

css的选择器全部都可以用

参考文档：http://jquery.cuishifeng.cn/

事件：

鼠标事件，键盘事件，其他事件

简单实例（移动鼠标显示位置）：




    
    jquery事件
  
  
  



mouse : 


  在此处移动鼠标

操作DOM

    
  
  • JavaScript
    • 
  
  • Python
    •
JavaScript

相关

javascript基础知识(29) 实现继承的方式

7个有用的JavaScript技巧

JavaScript跳出嵌套循环

JavaScript常用对象介绍

JavaScript学习day03

推荐12个最好的 JavaScript 图形绘制库

javascript模板字符串（反引号）

javascript 新版本的语法（ECS6）

javascript设计模式阅读后的感悟与总结

【译】理解JavaScript中的柯里化

javascript性能优化

图说js中的this——深入理解javascript中this指针

标签