JavaScript总结

已于 2022-05-01 17:29:50 修改
阅读量1.5k 收藏
点赞数
分类专栏： 前端 文章标签： javascript idea
于 2022-04-29 13:31:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39674880/article/details/124492793
版权

文章目录

一、简介

1.引入JavaScript

1）内部标签

<script>
	//弹窗
	alert('Hello');
</script>

2）外部引入
Test/demo.js

alert(`hello`);

test.html

<!--外部引入-->
<script src = "Test/demo.js"></script>

2.基本语法类型

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--js严格区分大小写!-->
    <script>
        //定义全局变量
        var score = 71;
        //定义局部变量
        let score1 = 71;
        //java和js中变量名都能用中文
        var 张三 = "李四";
        //条件控制
        if (score >= 60 && score < 70) {
            alert("60-70");
        } else if (score >= 70 && score < 80) {
            alert("70-80");
        } else {
            alert("other")
        }
        
        //在浏览器控制台里打印变量
        //console.log(score)
    </script>
</head>

浏览器必备调试须知：在这里插入图片描述

1）严格检查格式

在这里插入图片描述

2）Number

js不区分小数和整数。

123	//整数
123.1	//浮点数
1.124e3	//科学记数法
-99	//负数
NaN	//not a number
Infinity	//表示无限大

3） 字符串

//字符串，一般用单引号或者双引号包裹，注意转义字符
`abc` "abc"
//多行字符串，tab键上面的那个键
var msg = `
	hello
	world
`

在这里插入图片描述

//模板字符串
var name = "张三";
var msg = `你好，${name}`;

在这里插入图片描述

//字符串长度
str.length

//字符串截取,[)
str.substring(1)	//从索引1的位置截取到最后一个字符
str.substrng(1,3)	//[1,3)，截取索引1到索引2的字符

4）比较运算符

=
==	//等于（类型不一样，值一样，也会判断为true。 1 == "1"）
===	//绝对等于（类型一样，值一样，才会为true）

NaN===NaN	//false,NaN与所有的数值都不相等，包括自己
isNaN(NaN)	//true

5）数组

//尽量使用[]
var arr = [1,2,3,4,'hello',null,true];
console.log(arr[8]);	//undefined
new Array(1,2,3,4,'hello',null,true);

1、长度
arr.length
如果给arr.length赋值，数组大小会发生变化。与Java不同！
2、indexof()，通过元素获得下标索引
3、slice()，类似于字符串的substring，截取数组的一部分，返回一个新的数组
4、push(1,2)，在数组结尾添加两个元素1、2；pop()，弹出最后一个元素
5、unshift(1,2)，在数组头部添加两个元素1、2；pop()，弹出第一个元素
6、concat([1,2,3])，拼接两个数组，没有修改数组，只是返回了一个新的数组
7、arr.join(‘-’)，打印拼接数组，使用特定的字符串连接。1-2-3-4

6）对象

js中的所有的键都是字符串，值是任意对象
1、创建对象并赋值

//Person person = new Person("小明",3,tags['js','java','web']);
//每个属性之间用逗号隔开，最后一个属性后面不用加
var person = {
	name:"小明"，
	age:3，
	tags:['js','java','web']
}
person.name;	//小明

2、动态删减属性

delete person.name;

2、动态添加属性。

person.haha = "haha";

3、判断属性值是否在这个对象中

'age' in persoon;
//继承
'toString' in person;
return true

在这里插入图片描述
4、判断一个属性是否是这个对象自身拥有

person.hasOwnProperty('age');

7）循环

在这里插入图片描述

8）Map和Set集合

  • Map
    在这里插入图片描述
    在这里插入图片描述
  • set
    在这里插入图片描述
    在这里插入图片描述
  • 遍历
    在这里插入图片描述

二、函数

类似于java中的方法

1.定义函数

  • 方式一
function func(x) {
	if (x>0) {
		return x;
	} else {
		return -x;
	}
}

在这里插入图片描述

  • 方式二
    function(x)是一个匿名函数
var func = functio(x) {
	if (x>0) {
		return x;
	} else {
		return -x;
	}
}

2.arguments

关键字，是一个数组类型，表示传递进来的所有的参数
js中的function没有重载，比如说func(x)函数，我传入了10,11,12，后面两个参数如果想被调用，则需要用到arguments

在这里插入图片描述
在这里插入图片描述

3.rest

问题：arguments包含所有参数，但如果不需要第一个参数，只需要后面一些参数。
比如说func(x)函数，我传入了10,11,12，但是我只需要11,12这两个参数
可以用rest关键字，可以理解为java中的动态参数
在这里插入图片描述
在这里插入图片描述

4.window

默认所有的全局变量，都会自动绑定在window对象下

var x = "111";
//等价于
window.x

alert()函数也是默认绑定在window下，等同于window.alert()
js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 ReferenceError（引用错误）

5.规范

由于所有的全局变量都会绑定在window上。如果不同的js文件，使用了相同的全局变量就会造成冲突。
解决方案：把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

//唯一全局变量
var OnlyVar = {};

//定义全局变量
OnlyVar.name = '张三';
OnlyVar.add = function(a, b) {
	return a+b;
}

6.const

常量关键字，只读变量

7.方法

  • 定义方法
    方法就是把函数放在对象的里面。对象内部只有两种：属性、方法
<script>
	'use strict';
	var a = {
		name:"小明",
        birth:1998,
        //方法
        age:function () {
            var now = new Data().getFullYear();
            //this是无法指向的，只默认指向调用它的对象
            return now - this.birth;
        }
    }
	//调用属性
	a.name;
	//调用方法
	a.age();
</script>

三、内部对象

1.JSON

  • 一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
  • 在js中一切皆为对象，任何js支持的类型都可以用JSON来表示。
  • 格式
    对象都用 {}
    数组都用 []
    所有的键值对都用 key:value
var user = {
	name:"小明",
	age:14,
	sex:'男'
}

//对象转化为json字符串
var jsonUser = JSON.stringify(user);	//{"name":"小明","age":14,"sex":"男"}

//json字符串解析成对象
var parseUser = JSON.parse('{"name":"小明","age":14,"sex":"男"}');

2.Ajax

  • 原生的js写法，xhr异步请求
  • jQuery封装的方法 $("#name").ajax("")
  • axios请求

四、面向对象_继承

1.原型对象

var student= {
	name:"张三",
	age:14,
	run=function() {
		console.log(this.name + "正在跑");
	}
}

var xiaoming= {
	name:"小明"
}

//通过原型对象_proto_关键字，继承
xiaoming._proto_ = student;

2.class

ES6之后新增的一个方法

//定义一个学生类
class Student {
	constructor(name) {
    	this.name = name;
	}
	hello() {
		console.log("你好," + this.name)
	}
}
var xiaoming = new Student("小明");

//继承
class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    myGrade() {
        console.log(this.grade + "分");
    }
}
var xiaohong = new Student("小红", 30);
xiaohong.hello();	//你好,小红
xiaohong.myGrade();	//30分

五、操作BOM对象

BOM：浏览器对象模型
js的诞生就是为了有一种语言能够在浏览器中运行

  • widow，浏览器窗口
  • navigator，封装了浏览器的信息，不建议使用，因为会被人修改
  • screen，屏幕尺寸
  • location，当前页面的url信息
  • document，当前的页面，HTML DOM文档树
    document.cookie，获取页面本地信息

劫持cookie原理：
1、登录淘宝，个人信息会存储到当前页面的cookie中。
2、此时淘宝页面弹出了一个弹窗，别人恶意引入了一个js文件，这个js文件中有一行代码getDocumentCookie
3、点击这个弹窗后，别人会拿到你的cookie，再用ajax请求到他的服务器中，就能获取到你的cookie
服务器端可以设置cookie：httpOnly，使cookie变为只读模式

Cristo_Li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript详细总结
qq_53124400的博客
01-05 718
概念 javascript 1.它是一门客户端脚本语言 客户端的语言：它是运行在客户端浏览器的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器 解析执行了 javascript功能 可以来增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增加用户的体验 javascript发展 JavaScript = ECMASceipt + JavaScript自己特有的（BOM + DOM） 1.1992年，Nombase
最新Javascript 基础知识全总结(持续更新)
weixin_66092620的博客
04-17 8263
本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E...
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript学习总结
qq_53069622的博客
07-08 1357
JavaScript学习总结
JavaScript 总结
qqyouhappy的博客
10-20 7910
avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 ECMAScript，描述了该语和基本对象。 文档对象模型（DOM），描述处理网页内容的方法和接口。 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。  什么是原型？ 原型是一个对象，其他对象可以通过它实现属性继承。 在JavaScript中，当
javascript学习总结
weixin_59049031的博客
07-10 1487
这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习，我对于JavaScript是什么，JavaScript的基本用法和语法有了初步的了解。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由
JavaScript 总结（2022）
ximingx
05-27 680
JavaScript [ 1995 Brendan Eich ]
JavaScript基础（详细总结）
挣钱买房买车的博客
08-18 1万+
JavaScript基础入门详细总结
Javascript总结
梦想起飞的地方，必须用心去经营
03-27 1756
JavaScript的学习是在开发项目的过程中开始学习的，在这样一个背景下，我给自己定了一个学习目标。那就是熟悉JavaScript的基本语法，在项目中基本会使用JavaScript，然后遇到问题时再专攻这一点。于是JavaScript的视频就匆匆过了一遍，并没有深入学习。不得不承认，JavaScript是一门比较好上手的语言，尤其是对有其他语言基础的人。在应用JavaScript的过程中，你会逐
JavaScript总结1
08-03
1、组成部分 2、相关联系 4、代码示例 5、输出语句 6、注释 1、关于弱类型 2、在 JS 中的字符和字符串引号 3、 var 定义变量的特点 4、代码示例
javascript总结
08-18
在学习完js课程之后，自己手动编写的总结文档，以及平常遇到的小问题的解决办法，通俗易懂，适合正在学习js的同学
javaScript总结
08-08
javaScript总结
Javascript 总结
05-15
Javascript 总结
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 303
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 501
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 754
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
JS-12-es6常用知识-async
最新发布
m0_68467925的博客
06-13 419
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
JavaScript new
08-29
总结起来，JavaScript 中的 new 运算符用于实例化一个类并创建一个对象，它通过一系列步骤来完成对象的创建和初始化，确保对象具有正确的原型链和上下文。<span class="em">1</span><span class="em">2</span><span ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值