投稿
  1. 首页
  2. python

JavaScript总结

code • 2022-5-13 • python • 阅读 18

JavaScript总结,第1张

文章目录
  • 一、简介
    • 1.引入JavaScript
    • 2.基本语法类型
      • 1）严格检查格式
      • 2）Number
      • 3） 字符串
      • 4）比较运算符
      • 5）数组
      • 6）对象
      • 7）循环
      • 8）Map和Set集合
  • 二、函数
    • 1.定义函数
    • 2.arguments
    • 3.rest
    • 4.window
    • 5.规范
    • 6.const
    • 7.方法
  • 三、内部对象
    • 1.JSON
    • 2.Ajax
  • 四、面向对象_继承
    • 1.原型对象
    • 2.class
  • 五、 *** 作BOM对象

一、简介 1.引入JavaScript

1）内部标签

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

2）外部引入
Test/demo.js

alert(`hello`);

test.html


<script src = "Test/demo.js">script>
2.基本语法类型 
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    
    <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()，d出最后一个元素
5、unshift(1,2)，在数组头部添加两个元素1、2；pop()，d出第一个元素
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、此时淘宝页面d出了一个d窗，别人恶意引入了一个js文件，这个js文件中有一行代码getDocumentCookie
3、点击这个d窗后，别人会拿到你的cookie，再用ajax请求到他的服务器中，就能获取到你的cookie
服务器端可以设置cookie：httpOnly，使cookie变为只读模式

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/876647.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-13
下一篇 2022-05-13

发表评论

登录后才能评论

评论列表（0条）

保存