JavaScript基础学习笔记

JavaScript基础学习笔记

一、js引入方式

1.内部引入方式

• head标签中写script标签
• body标签中写script标签
• body标签后写script标签（编译运行时script标签在body里）

2.外部引入方式

在html页面的head标签中使用link标签引入。

二、弹窗输出

1.alert弹窗

2.console输出

• console.log()：在控制台打印一般信息。（常用）
• console.warn()：在控制台打印警告信息。
• console.error()：在控制台打印错误信息。

三、变量与注释

1.标识符：变量、函数名、属性名

1.1命名规则：

• 首字符必须时字母、下划线或者$符号
• 其他字符可以时字母、数字、下划线或者$符号
• 建议使用驼峰命名法
• 见名知意

1.2变量强类型与弱类型区别

强类型：编译前进行数据类型的确定

弱类型：编译后确定数据类型（js的变量属于弱类型）

2.注释方式

单行注释：//

多行注释：/**/

四、数据类型

6种数据类型，typeof()得到数据的类型

1.数字型 Number

特殊值：NaN（not a number）

2.字符串类型 String

2.1字符串表示

''单引号、""双引号、反引号都可以表示

反引号可以换行写，当插入数据时，使用${…}

2.2 字符串操作

str.length：字符串长度

str.toUpperCase()：大写，str.toLowerCase()：小写

str=“123-34-fd”;str.split(“-”)：以-将字符串转为数组

str.indexOf(1) //字符串下标

截取字符串：str.substring(start,end) [);str.substr(start,length)

str.replace(x,y)：用y替换x

3.布尔类型 Boolean

值：true、false

4.未定义类型 Undefined

只声明未定义

5.空类型 Null

打印出的类型为Object

6.特殊类型 对象类型 Object

包含：标签、数组、对象、Math、Date、函数等

var people{ //people对象声明定义

​ name:“”

​ age:

}

people.name或者people[name]：获取people对象的名字。

delete people.name：删除name

五、运算符

1.算数运算符

加+、减-、乘*、除/、求余%、自增++、自减–

前++：先加再赋值，后++：先赋值再加（自减相同）

2.赋值运算符

=、+=、-=、*=、/=、%=

3.比较运算符

==等于 !=、<>不等于（只判断内容大小）

===恒等于 !==恒不等于（既判断内容大小又判断数据类型）

大于>、小于<、大于等于>=、小于等于<=

返回的结果是布尔值

4.逻辑运算符

&&逻辑与、||逻辑或、!逻辑非（取反）

5.三目运算符

判断条件? 真:假

六、数据类型转换

1.隐式转换

1.1 数字与字符串进行复合运算，+转换为字符串类型，其余是数字类型。

1.2 转换为布尔类型：非0为真、非空为真，空字符串、未定义变量、变量等于null都表示假。

2.强制转化类型：

2.1 当字符串有非数字时，使用Number()转换显示为NaN

2.2 字符串转数字类型或数字转数字时，可以使用parseInt、parseFloat

3.Math对象

• Math.floor() 向下取整
• Math.ceil() 向上取整
• Math.round() 四舍五入
• Math.max() 最大值
• Math.min() 最小值
• Math.random() 随机数[0,1）
• Math.pow(2，2) 2的2次幂
• Math.sqrt(9) 9的开方
• Math.abs() 绝对值

七、函数

作用：代码更加简洁、提高复用性

function 函数名（形参）{ //函数声明

​ 函数体

}

function（实参）//函数调用

有返回值时需要有变量接收。

八、作用域

1.全局作用域

在全局作用域声明的变量叫全局变量，全局作用域不能调用局部变量。

2.局部作用域

在局部作用域声明的变量叫局部变量

九、语句

1.for循环语句

for(var i=0;i<10;i++){代码块} 循环10次

for(var i in value){代码块} 遍历value值

2.while循环语句

while(条件){代码块}

3.do while循环语句

do{ 代码块 }while(条件) 至少执行一次

十、获取元素

1.通过id选择器获取元素

document.getElementById(“d1”) ；d1.innerHTML：得到d1中的内容

2.通过标签的名字获取元素

document.getElementsByTagName(“”)

3.通过class选择器获取元素

documen.getElementByClassName(“”)

十一、数组基本使用

1.数组创建方式

1.1 arr = new Array(1,2,3);

1.2 arr = new Array(3);

1.3 arr = [1,2,3];

2.数组的遍历

for(var i=0;i<arr.length;i++){

​ console.log(arr[i]);

}

arr.forEach(function(item,index){}) //函数做参数叫回调函数，item表示数组的每一个值，index是数组下标

newStr = arr.map(function(item){

​ return item;

}) //遍历数组将值赋给newStr

arr.sort(function(a,b){ //a，b数组相邻的两个值

​ return a - b;

}) //当返回值>0时，就交换a，b的顺序

3.数组操作

push() //在数组最后添加一个元素

pop() //删除数组的最后一个元素

shift() //删除数组的第一个元素

unshift() //在数组的开头添加一个元素

concat() //拼接数组，返回一个新的数组

splice(下标，删除元素的个数，新插入的元素列表) //能加能删

slice(start[,end]) //截取元素，返回一个新的数组，[]表示可选可不选

reverse() //反转数组

join(规则) //按照规则将数组转为字符串

indexOf(子元素) //从数组中查询子元素，返回下标，如未找到返回-1

十二、计时器

setTimeout(fn,time)：延迟time后，执行一次fn

setTimeout(function(){

​ 代码块

},1000) //一秒后执行代码块

setInterval(fn,time)：每次延迟time后，执行一次fn

setInterval(function(){

​ 代码块

},1000)

十三、日期对象

var date = new Date(); //获取当前的时间戳

var date = new Date();

date.getFullyear();//获取当前年份

date.getMonth()+1;//获取当前月份

date.getDate();//获取当前日期

date.getDayr();//获取当前星期几，0表示是星期日

date.getHours();//获取当前小时

date.getMinutes();//获取当前分钟

date.getSeconds();//获取当前秒数

date.getTime();//获取距离1970.1.1的毫秒数

十四、函数补充

1.arguments

当函数声明时没设置形参，可以遍历arguments

function add(){

​ for(i=0;i<arguments.length;i++){代码块}

}

n = add(1,2,3,4)

2.匿名函数 回调函数

add = function(){代码块}

console.log(add(1,2))

3.自执行函数

(function(a,b,c){

​ console.log(a+b+c);

})(1,2,3)

4.闭包

局部变量数据持久化，实现全局作用域调用局部变量

函数内部嵌套函数

造成一定的内存压力

function f1(){

​ var a=1;

​ function f2(){ return a;}

​ return f2;

}

x=f1()(); //x=1