1、什么是JavaScript?
1.1 概述
JavaScript是一门世界上最流行的脚本语言
1.2 历史
ECMAScript可以理解为JavaScript的一个标准
2、快速入门
2.1 引入JavaScript
1、内部标签
2、外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内,写JavaScript代码;;此段也可放在body标签内-->
<!--<script>-->
<!-- alert("hello world")-->
<!--</script>-->
<!--外部引入-->
<!--注意:script标签必须成对出现-->
<script src="JS/test.js"></script>
<!--不用显示定义type,也默认就是JavaScript-->
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
2.2 基本语法入门
<!--JavaScript严格区分大小写-->
<script>
// 1、定义变量 ---变量类型 变量名 = 变量值;(java中,。值有可能是对象,)
var score = 71;// 只有var这个变量名
//alert(num);
// 2、 条件控制
if(score>60 && score<70){
alert("60~70");
}else if(score>70 && score<80){
alert("70~80")
}else{
alert("other")
}
//console.log(score) 在浏览器的控制台打印变量! SOUT--system.out.println
</script>
浏览器必备调试须知:
2.3 数据类型
数值、文本、图形、音频、视频.....
变量
var name //不可以数字开头
number
JS不区分整数和小数 number
NaN // not a number
Infinity //表示无穷大
字符串、布尔值、逻辑运算、
比较运算符(重要!)
=
== 等于 (类型不一样,值一样,也会判断true)
=== 绝对等于(类型一样,值也一样,结果为true)
坚持不要使用==比较
须知:
- NaN===NaN,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题
console.log( (1/3) === (1-2/3) )
Math.abs(1/3- (1-2/3) )
null 和 undefined
null 空
undefined 未定义
数组
Java的数值必须是相同类型的对象,JS中不需要这样
//保证代码的可读性,尽量使用[] //数组用中括号,对象用大括号
var arr = [1,2,3,4,5,"hello",null,true];
new Array(1,2,3,4,5,"hello");
取数组下标:如果越界了,就会undefined
对象
//Person person = new Person(1,2,3,4,5);
var person = {
name:"Donger",
age:18,
tags:['handsome','honest','very nice','...']
}
2.4 严格检查格式
<!--
'use strict'严格检查模式,预防JS的随意性导致产生的一些问题
必须写在第一行
-->
<script>
'use strict';
//全局变量
var i = 1;//在ES6中用let定义局部变量
</script>
3、数据类型
3.1 字符串
1、正常字符串我们使用 单引号,或者双引号包裹
2、注意转义字符
\'
\n
\t
\u4e2d
\x41 Ascll字符
3、多行字符串编写
var msg = `
hello
world
你好
`
4、模板字符串
let name = "donger";
let age = 18;
let msg = `${name}你好棒`
//输出结果
donger你好棒
5、字符串长度
str.length
6、字符串的可变性—不可变
7、大小写转换
//注意,这里是方法不是属性
>console.log(student.toLocaleUpperCase())
<STUDENT
>console.log(student.toLocaleLowerCase())
<student
8、获取元素下标
>console.log(student.indexOf('u'))
<2
9、 substrng
[)
student.substring(0) //从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3]---->tu
3.2 数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5]
1、长度
arr.length
注意:加入给arr.length赋值,数组大小就会发生变化
2、indexOf(),通过元素获得下标索引
arr = [1,2,3,4,5,6,"1","2"]
>arr.indexOf(1)
<0
>arr.indexOf("1")
<6
字符串的 1 和数字 1 是不同的
3、slice()截取Array的一部分,返回一个新数组,类似于String中的substring
>arr.slice(3)
<(5) [4, 5, 6, '1', '2']
>arr.slice(1,5)
<(4) [2, 3, 4, 5]
4、push()—压入到尾部, pop()—弹出尾部的一个元素
5、unshift()—压入到头部, shifit() 弹出头部的一个元素
6、排序sort()
7、元素反转reverse()
8、concat()
["C","B","A"]
>arr.concat([1,2,3])
<["C","B","A",1,2,3]
注意:concat()并没有修改数组,只是会返回一个新的数组
9、连接符join
打印拼接数组,使用特定的字符串连接
["C","B","A"]
>arr.join('-')
<"C-B-A"
10、多维数组(了解)
数组:存储数据(如何存和取方法都可以实现)
3.3 对象
若干个键值对
var 对象名 = {
属性名 : 属性值,
属性名 : 属性值,
属性名 : 属性值
}
var person = {
name:"donger",
age: 18,
tel: 10010,
score:404
}
JS中对象,{…}表示一个对象,键值对描述属性 xxxx : xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号。
JavaScript中的所有键都是字符串,值都是任意对象
1、对象赋值
2、使用一个不存在的对象属性,不会报错!-----undefined
3、动态的删减属性,通过delete删除对象的属性
4、动态的添加,直接给新的属性添加值即可
5、判断属性是否在这个对象中! xxx in xxx
6、判断一个属性是否是这个对象自身拥有的–hasOwnProperty()
3.4 流程控制
if判断
var age = 1;
if(age>5){ //第一个判断
alert("haha");
}else if(age<3){ //第一个判断
alert("wawa");
}else{ //否则
alert("balabala");
}
循环(for、while、数组、ForEach)
3.5 Map 和 Set
Map:
var map = new Map([['tom',100],['jack',100],['smith',80]]);
var name = map.get('smith'); //通过key获value
map.set('admin',70);
map.delete('jack');
Set: 无序不重复的集合
var set = new Set([5,6,6,6]); //Set可以去重
set.add(2); //添加
set.delete(5); //删除
console.log(set.has(6)); //是否包含某个元素
3.6 iterator
遍历数组
//通过for of 实现。。。//for in 打印的是下标
var arr = [3,4,5]
for (var x of arr){
console.log(x)
}
遍历map
var map = new Map([['tom',100],['jack',100],['smith',80]]);
for(let x of map){
console.log(x)
}
遍历set
var set = new Set([5,6,7]);
for (let x of set){
console.log(x)
}
4、函数
4.1 定义函数
绝对值函数
function abs(x){
if (x>0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束,返回结果;如果没有执行return,函数执行完也会返回结果,结果就是undefined
var abs = function(x)
if (x>0){
return x;
}else{
return -x;
}
}
function(x){…}这是一个匿名函数。但是可以把结果赋值给abs,通过abs就可以调用函数!方式一方式二等价。
参数问题:JavaScript可以传任意个参数,也可以不传参数
参数进来是否存在的问题:
假设参数不存在,如何规避?
var abs = function (x) {
//手动抛出异常来判断
if(typeof x !== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
var abs = function (x){
console.log("x=>"+x);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>0){
return x;
}else{
return -x;
}
}
问题:arguments包含所有参数,我们有时想使用多余的参数来进行附加操作,需要排除已有的参数
以前
function aaa(a,b){
console.log("a=>"+a);
console.log("b=>"+b);
if(arguments.length>2){
for (let i = 0; i < arguments.length; i++) {
//。。。。。。。
}
}
}
ES6引入新特性,获取除了已经定义的参数之外的所有参数~ // . . .
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
//rest只能写在后面,必须用...标识
4.2 变量的作用域
在JavaScript中,var定义变量实际是有作用域的。
- 假设在函数体中声明,则在函数体外不可以使用,(非要想用的话,之后可以研究闭包)
function qj() {
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
- 如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
- 内部函数可以访问外部函数,反之则不行
function qj() {
var x = 1;
//内部函数可以访问外部函数,反之则不行
function qj2() {
var y = x + 1; //2
}
var z = y+1; //Uncaught ReferenceError: z is not defined
}
假设,内部函数变量和外部函数的变量,重名
function qj(){
var x = 1;
function qj2(){
var x = 'A';
console.log('inner'+x);//outer1
}
console.log('outer'+x);//innerA
qj2()
}
qj()
假设在JavaScript中函数查找变量从自身函数开始,由“内”向“外” 查找。假设外部存在这个同名的函数变量,则在内部函数会屏蔽外部函数的变量。
function qj(){
var x = "x" + y;
console.log(x);
var y = 'y';
}
//结果: xundefined
说明:JS执行引擎,自动提升了y的声明,但是不会提升变量y的赋值;
function qj2(){
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
这个是在JavaScript建立之初就存在的特性。养成规范:所有变量定义都在函数的头部,不要乱发过,便于代码维护;
function qj2(){
var x = 1;
y = x + 1;
z,i,a; //undefined
}
//全局函数
x = 1;
function f(){
console.log(x);
}
f();
console.log(x);
全局对象window
var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量,都会自动绑定在window对象下
alert这个函数本身也是一个window变量
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x);
window.alert = function(){
};
//发现alert()失效了
window.alert(123);
//恢复
window.alert = old_alert;
window.alert(456);
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有任何函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,冲突。 —如何减少冲突?
//唯一全局变量
var chenApp = {};
//定义全局变量
chenApp.name = 'donger';
chenApp.add = function(a,b){
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名的冲突的问题。jQuery可以解决。
jQuery. 等价 $()
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)//问题:i出了作用域还可以使用
}
ES6 let 关键字,解决局部作用域冲突问题
建议使用 let 去定义局部作用域的变量
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)//Uncaught ReferenceError : i is not defined
}
4.3 方法
方法就是把函数放在对象的里面,对象只有两个东西:属性 和 方法
var chen = {
name : 'donger',
birth : 1999,
//方法
age : function (){
//今年 - 出生年
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
chen.name
//方法
chen.age()
this. 代表什么?拆开上面的代码看看
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var chen = {
name : 'donger',
birth : 1999,
age : getAge
}
//chen.age() ok
//getAge() NaN window
this 是无法指向的, 是默认指向调用它的那个对象;
在JS中可以控制this 的指向!
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var chen = {
name : 'donger',
birth : 1999,
age : getAge
}
var EASON = {
name : 'Eason',
birth : 1999,
age : getAge
}
getAge.apply(chen,[]);//this,指向了chen这个对象,参数为空
//getAge.apply(EASON,[]);
5、内部对象
5.1 Date
基本使用
转换
5.2 JSON
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBBTCC0n-1646231188931)(658cb017f2efd87c0ad7a262057cef88.png)]
在JavaScript中一切皆为对象、任何JS支持的类型都可以用JSON来表示;
格式:
- 对象都用 {}
- 数组都用 []
- 所有的键值对 都是用key:value
JSON字符串 和 JS 对象的转化
var user = {
name : "donger",
age : 3,
gender : '男'
}
//对象转化为json字符串--->{"name":"donger","age":3,"gender":"男"}
var jsonUser = JSON.stringify(user)
//json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('"name":"donger","age":3,"gender":"男"')
JSON 和 JS 对象的区别
var obj = {a:'hello', b:'hi'};
var json = '{"a":"hello", "b":"hi"}'
5.3 Ajax
- 原生的js写法 xhr 异步请求
- jQuery封装好的 方法 $("#name").ajax("")
- axios 请求
未完待续。。。。