JavaScript初级学习笔记(待完成)

JavaScript

1.1引入JavaSciprt

1.内部标签

<!--不用显示定义type，默认就是javascript-->
<script type="text/javascript">
	//....
    <!--弹窗标签-->
    alert("Hello,Word");
</script>

2.外部标签

abc.js

//......

test.html

<srcipt src="abc.js"></srcipt>

1.2基本语法入门

<script>
        // 1.定义变量
        var num=1;
        // 弹窗
        alert(num);

        // 2.条件控制(可以嵌套)

        //成绩
        var score=60
        if (score<100 &&score>80) {
        alert("优秀");
        }else if(score <80 && score >60){
            alert("良好");
        }else{
            alert("不及格");
        }

        //console.log(score);在浏览器的控制台打印变量
    </script>

浏览器必备调式须知：

1.3数据类型

数值 ，文本， 图形， 音频， 视频…

变量

var

• **number：**js不区分小数和整数，number

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

字符串

‘abc’ “abc”

布尔值

true,false

逻辑运算

&&	两个都为真，结果为真

||	一个为真，结果为真

!	真就是假，假就是真(取反)

比较运算符

=	
赋值
==	
等于(类型不一样，值一样，也会判断为true)

===	  ！！重要！！
绝对等于(类型一样，值一样，结果为true)

这是js的缺陷，不要使用==来比较

• NaN===NaN，这个与所有的数值都不相等，包括自己

• 只能通过isNaN(NaN)来判断这个数是否为NaN

浮点数问题：

console.log((1/3)===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

Math.abs(1/3-(1-2/3)<0.00000001

null和undefined

• null 空
• undefined 未定义

数组

java数组必须是相同类型的对象，js中不需要

保证代码的可读性，尽量使用第一种

1. var arr=[1,2,3,"abc",null,false];

   输出数组：console.log(arr[0])

   取数组下标：如果越界了，就会undefined

2. new Array(1,2,3,"abc",null,false);

对象

定义对象是大括号

每个属性之间使用逗号隔开，最后一个不需要添加

var cat = {
	name:"小花猫" ,   
    age: 12,
    action:['吃','叫','跑']
}

取对象的值

cat.name

2.1严格检查模式

‘use strict’; 严格检查模式，预防javascript的随意性导致产生的一些问题，必须写在JavaScript的第一行

局部变量建议使用ler去定义

let a=1

2.2数据类型

2.2.1字符串

1.正常字符串我们使用 单引号或双引号包裹

**2.注意转移字符 \ **

\'
\n
\t
\u4e2d	\u### Unicode字符
\x41	Ascll字符

3.多行字符串编写

//tab 上面的 esc键下面
var msg=`
	fdsfds
	fdsf
	sdf
	sdfsd
`

4.模板字符串

let name="张三";
let age=18;
let show=`Hello,${name},${age}`

5.字符串长度

str.length

6.字符串的可变性，不可变

7.大小写转换

var student="student"
//注意,这是方法，不是属性了
student.toUpperCase();//大写
student.toLowerCase();//小写

8.student.indexOf(‘t’) 获取指定下标

9.student.substring(1,2) 包含前面，不包含后面

[)
student.substring(1)	//从第一个字符串截取到最后一个字符串
student.substring(1,3)	//[1,3)

2.2.1数组

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

1.长度

var arr=[1,2,3,4,5,6]
arr.length	//长度

注意：加入arr.length赋值，数组大小就会发生变化,如果赋值过小，元素就会丢失

arr.length=10

2.indenxOf,通过元素获得下表索引

arr.indexOf(2)
1

字符串的"1"和数字1是不同的

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

4. push(),pop() 尾部

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

5.unshift(),shift() 头部

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

6.排序 sort()

var arr=["B","C","A","D"]
arr.sort()
输出['A', 'B', 'C','D']

7.元素反转reverse()

var arr=['A', 'B', 'C','D']
arr.reverse()
输出['D', 'C', 'B','A']

8.concat()

var arr=['A', 'B', 'C','D']
arr.concat([1,2,3])
输出['A', 'B', 'C','D',1,2,3]

注意：concat()并没有修改数组，只是会返回一个新的数组

9.连接符 join

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

var arr=['A', 'B', 'C','D']
arr.join('-')
输出["A-B-C-D"]

10.多维数组

数组：存储数据（如何存，如何取）

2.3对象

若干个键值对

最后一个属性不需要逗号

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

var 对象名={
	属性名:属性值,
	属性名:属性值,
    属性名:属性值
}

//定义了一个猫对象 它有三个属性
var cat{
	name:"anna",
	age:3,
	sex:"男"
}

cat.name="xxx"//赋值

js中的对象，{…}表示一个对象，键值对描述属性xxx:xxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！

---

1.使用一个不存在的对象属性，不会报错！ undefined

cat.haha
undefined

2.动态的删减属性,通过delete删除对象的属性

var student{
	name:"abc",
	age:199
}

delete student.name
true

3.动态的添加

var student{
	name:"abc",
	age:199
}

student.haha="haha"

4.判断属性值是否在这个对象中， xxx in xxx

var student{
	name:"abc",
	age:199
}

'age' in student
true

//继承
'toString' in student
true

5.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

var student{
	name:"abc",
	age:199
}

student.hasOwnProperty('toString')
false

2.4流程控制

if判断

var age=3;
if(age>3){
    alert("嘿嘿");
}else if(age>1){
    alert("哇哦哇哦");
}else{
    alert("呀呼");
}

while循环,避免程序死循环

var age=10;

while(age<20){
      age=age+1;
    console.log(age)
      }

do{
    age=age+1;
    console.log(age)
}while(age<10)

for循环

for(let i =0;i<10;i++){
    console.log(i);
}

forEach循环 and for in循环

var age=[12,54,78,29,418,1]

	//函数
age.forEach(function(value)){
		console.log(value);            
}


/*
	for(Type str: el){}
*/
//for(var index in object)
for(var num in age){
 console.log(age[num])   
}

2.5 Map 和 Set

1.Map

var map=new Map([['Anna',100],['Duo',99],['Tom',70]]);
var score=map.get('Anna');//通过key获取value
console.log(score);
map.set('admin',78)//新增或修改
map.delete('Anna');//删除

2.Set

无序不重复的集合

var set=new Set([1,2,3,4,4])//set可以去重
set.add(100);//添加
set.delete(2);//删除
console.log(set.has(2));//是否包含某个元素

es6新特性 for of

遍历数组

//通过for of 值或 for in 取下标
var arr =[3,4,5]
for(let x of arr){
    console.logz(x)
}

遍历map

var map=new Map([['Anna',100],['Duo',99],['Tom',70]]);

for(let m of map){
    console.log(m)
}

遍历set

var set=new Set([1,2,3,4,4])
for(let s of set){
    console.log(s)
}

3.函数及面向对象

3.1定义函数

定义方式1

绝对值函数

function absoluteValue(x){
    if(x>=0){
       return x;
    }else{
      		return -x;     
   	     }
}

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

如果没有执行retrun,函数执行完也会返回结果，结果就是undefined

定义方式2

var abs=function absoluteValue(x){
    if(x>=0){
       return x;
    }else{
       return -x;     
   	}
}

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs就可以调用函数！

调用函数

abs(10) //10
abs(-10)	//10

javaScript可以传任意个参数也可以不传参数

参数进来是否存在的问题？

假设不存在参数，如何规避？

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

arguments

arguments 是一个js免费赠送的关键字

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

var abs=function absoluteValue(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包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数

rest

以前

if(arguments.length>2){
	for(var i=2;i<arguments.length;i++){
        //......
    }
}

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function abs(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest参数只能卸载最后面，必须用…标识。

3.1变量的作用域

在JavaSrcipt中，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 x=2;
}

内部函数可以访问外部函数的成员，反之则不行

function qj(){
	var x=1;
    
    //内部函数可以访问外部函数的成员，反之则不行
    function qj2(){
        var y=x+1;
    }
    
    var z=y+1;	//Uncaught ReferenceError: x is not defined
}

假设，内部函数变量和外部函数的变量，重名！

function qj(){
    var x=1;
    
    function qj2(){
        var x='A';
        console.log('inner'+x)
    }
        console.log('inner'+x)
    	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);
   	 var 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

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

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

alert()这个函数也是一个window变量;

var x='xxx'
window.alert(x)
var old_alert=window.alert;
window.alert=function(){
    
};
//发现alert()失效了
window.alert('123');

//恢复
window.alert=old_alert;
window.alert(456);

jJavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没找到，报错RefrenceError

规范

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

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

//定义全局变量
XiaoSong.name='小松'
XiaoSong.add=function(a,b){
    return a+b;
}

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

JQuery

局部作用域let

function aa(){
    for(var i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1);
}

ES6 let关键字，解决局部作用域冲突问题！

function aa(){
    for(let i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1);//Uncaught ReferenceError;i is not  defined
}

建议使用let去定义局部作用域的变量

常量 const

在ES6之前，怎么定义常量，只有用全部大写的字母命名的变量就是常量；建议不要修改这样的值

var PI=‘3.14’;
console.log(PI);
PI='123';
console.log(PI);

在ES6引入常量关键字const

const PI=‘3.14’;//只读变量
console.log(PI);
PI='123';	//TypeError:Assignment to constant variable
console.log(PI);

3.2方法

定义方法

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

var komatsu = {
    name='Komatsu',
    bitrh=2020,
    
    //方法
    age:function(){
        //今年-出生的年
        var now =new Date().getFullYear();
        return now-this.bitrh;
    }
}

//属性
komatsu.name

//方法
komatsu.age()

this.代表什么？拆开上面的代码来看

function getAge(){
   //今年-出生的年
        var now =new Date().getFullYear();
        return now-this.bitrh;
}


var komatsu = {
    name='Komatsu',
    bitrh=2020,
    age:getAge  
    }
};

this是无法指向的，是默认只想调用它的那个对象；

apply

在js中可以控制this指向

function getAge(){
   //今年-出生的年
        var now =new Date().getFullYear();
        return now-this.bitrh;
}


var komatsu = {
    name='Komatsu',
    bitrh=2020,
    age:getAge  
    }
};

getAge.apply(komatsu,[]);//this,指向了komstsu，参数为空

4.内部对象

标准对象

	typeof 123
		"number"
    typeof '123'
        "string"
    typeof true
		"boolean"
    typeof NaN
		"number"
    typeof []
		"object"
    typeof {}
		"object"
	typeof Math.abs
		"function"
	typeof undefined
		"undefined"

4.1 Date

基本使用

var now =new Date();

now.getFullYear();	//年
now.getMonth();	//月
now.getDate();	//日
now.getDay();	//星期几
now.getHours();	//时
now.getMinutes();	//分
now.getSeconds();	//秒

now.getTime();	//实践戳	全世界统一	1970 1.1 0:00:00 毫秒数
console.log(new Date(1651206021499))
Fri Apr 29 2022 12:20:21 GMT+0800 (中国标准时间)

转化

now =new Date(1651206021499)

now.toLocaleString()//注意，调用是一个方法，不是一个属性

now.toGMTString();