JavaScript基础语法学习笔记

1、JS的书写位置

1) 行内式JS

<input type="button" value="点我" onclick="alert('Hello world')" />

• HTML中使用双引号，JS中使用单引号
• 可读性差、引号易错，不建议使用

2) 内嵌式JS

<script>
    alert('Hello World!');
</script>

• 最常用

3) 外部式JS

<script src="my.js"></script>

• script标签中间不可以写代码

2、注释写法

//单行注释

/*多行注释
多行注释
*/

3、JS输入输出语句

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制台打印
prompt(msg)	浏览器弹出输入框，取出值均为String

3、JS变量

//声明
var age;
//赋值
age = 18;
//变量初始化
var age = 18;

声明的特殊情况

情况	说明	结果
var age;console,log(age)	只声明 不赋值	undefined
console.log(age)	不声明 不赋值	报错
age = 10; console.log(age);	不声明 只赋值	10

数据类型

简单数据类型	说明	默认值
Number	数字型，包含整型河浮点型	0
Boolean	布尔值，true/false，等价于1，0	false
String	字符串	“”
Undefine	var a; 声明但未赋值, a = undefined	undefined
Null	var a = null;声明了变量a为空值	null

1) Number

进制转换

//1、八进制 0开头
var num1 = 010;
//2、十六进制 0x开头
var num3 = 0x9;

特殊值

alert(Infinity); //无穷大，大于任何数
alert(-Infinity); //无穷小，小于任何数
alert(NaN); //Not a number，代表一个非数值(仍是Number类)

isNaN() //判断是否为NaN，返回true/false

2) String

转义符

转义符	解释说明
\n	换行符,n=newline
\	斜杆\
\’	单引号
\"	双引号
\t	tab缩进
\b	空格，b=blank

字符串长度

str.length

字符串的性质

• 字符串的不可变性：
  指的是里面的值不可变，重新赋值是地址变了，开辟了一个新的内存空间
• 基本包装类型：
  可以使用.length，.indexOf()

indexOf()

str = 'Hello world';
str.indexOf('o',4); //从4开始往后开始找

根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符(index字符串的索引号)	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码	strcharCodeAt(0)
str[index]	获取指定位置处的字符	HTML5特性，与charAt()等效

字符串操作

拼接、截取

方法名	说明
concat(str1,str2,str3…)	等效于+
substr(start,length)	从start位置开始，length取的个数
slice(start,end)	从start位置开始，截取到end位置，end取不到[start,end)
substring(start,end)	基本和slice相同，但是不接受负值

替换与转数组

//1.替换字符 replace(‘被替换的字符’,'替换为的字符') 只会替换第一个字符
str.replace('a','b'); //注意返回值为数组
//替换所有的方法
while(str.indexOf('o' !== -1){
    str = str.replace('o','*');
}
//2.字符串转数组split('分隔符')
str.split(','); //与join转字符串相反

3) Undefined & null

var v = undefined +1;//结果为NaN

var v = null +1;//结果为1

4) typeof

console.log(typeof num);//无括号

console.log(typeof null);//结果为Object

5) 数据转换

转字符串

方法	说明	案例
toString()	转字符串	var num = 1; alert(num.toString());
String()	强制转换字符串	var num = 1;alert(String(num));
加号拼接字符串	和字符串拼接的都为字符串	var num = 1;alert(num + “String”);

转数字型

方法	说明	案例
parseInt(string)函数	String->Int	parseInt(‘78’)
parseFloat(string)函数	String->Float	parseFloat(‘72.21’)
Number()强制转换	String->Number	Number(‘12’)
js隐式转换(- * /)	利用算数运算隐式转换为数值型	‘12’ - 0

parseInt & parseFloat特性

parseInt('3.94') // 3 取整，省略小数部分
parseInt('120px') //120 自动去掉数字后面的字母
parseInt('rem120px') //NaN 开头必须是数字

转布尔型

Boolean(v)

• ‘’、0‘NaN、null、undefined = false
• 其他=true

4、运算符

逻辑中断

&& || !遇假往后，遇真中断

5、流程控制

if语句

if(条件表达式){
    
}else if{
    
}else{
    
}

switch语句

switch(表达式){
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    ....
    default:
        执行最后的语句;
}

6、循环

for循环

for(var i = 1; i <= 100; i++){
    
}

while循环

while(条件表达式){
    
}

do while循环

do{
    循环体
} while(条件表达式){
    
}

7、数组

数组创建

//1、利用new创建
var arr = new Array();
var arr = new Array(2); //创建大小为2的数组
var arr = new Araay(2,3); //创建内容为[2,3]的数组
//2、利用数组字面量创建数组
var arr = [1,2,3];

数组增加

//1、根据下标添加
var arr = [1,2,3];
arr[3] = 4;
//2、使用push添加
arr.push(1,2); 
//1）直接写要添加的元素，用逗号分割
//2）push返回结果是数组长度，原数组会直接发生变化
//3、使用unshift添加
arr,unshift(1,2);//追加到数组最前面，返回性质与push相同

数组删除

//1、pop删除
arr.pop();
//1）不跟参数，删除最后一个
//2）返回值是删除的元素
//2、shift删除
arr.shift(); //性质同上

数组排序

//1、翻转数组
arr.reverse();
//2、数组排序（冒泡排序)
arr.sort(); //根据先排第一位，再排第二位的方式，如[1,13,15,2,3]

//按数字大小排序方法（比较器）
arr.sort(function(a,b)){
    return a - b; //升序排序
}

数组索引

//1、indexOf()
arr.indexOf('blue'); //返回数组元素的索引号，没有则返回-1
//2、latsIndexOf()
arr.lastIndexOf(); //从后往前找

数组转字符串

//1.toString()
arr.toString(); //输出为1,2,3的格式
//2.join(分隔符)
arr.join('-'); //改分隔符为-

判断是否为数组

1、instanceof运算符
console.log(arr instanceof Array);
2、Array.isArray()
console.log(Array.isArray(arr));

8、函数

函数声明

1.利用函数关键字自定义函数（命名函数）
function f1(a,b,c){
    //函数体
    return 0;
}
f1();

2.函数表达式（匿名函数）
var fun = function(){
    //函数体
}
fun(); //变量名，不是函数名

arguments

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

function fn(){
    console.log(arguments); //里面存储了所有传递过来的实参
}

fn(1,2,3);
//打印结果
Arguments(3)[1,2,3,calle:f,Symbol(Symbol.iterator):f]

Arguments特性：

• 伪数组
• 1.具有length
• 2.按照索引的方式存储
• 3.没有pop()、push()等数组的方法

9、作用域

局部变量、全局变量

ES5中没有块级作用域，ES6中有。

块级作用域即{}内作用域，如if{} while{}等

10、预解析

JS解释器执行代码分为两步：

1、预解析 把所有var和function提升到当前作用域的最前面

2、代码执行 按照代码书写顺序从上往下执行

预解析分为：

1、变量预解析（变量提升）：把变量声明提升，赋值不提升（可以调用在声明前，但值为undefined）

2、函数预解析（函数提升）：把函数声明提升，不调用函数（可以调用写在声明前）

11、对象

创建对象

//1、用var创建对象
var obj = {
    uname: '张三',
    age: 18,
    sex: '男',
    sayHi: function(){
        console.log('hi');
    }
};

//2、用 new Object创建对象
var obj = new Object();
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
    console.log('hi~');
}

//3、构造函数
function 构造函数名(属性){
    this.属性 = 值；
    this.方法 = function(){
        
    }
}
new 构造函数名();
//构造函数的首字母必须大写

遍历对象属性

for(var k in obj){
    console.log(k); //得到的是属性名
    console.log(obj[k]);//得到的是属性值
}

12、内置对象

Math对象

Math.PI //圆周率，是一个属性
Math.max() //max方法
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() //四舍五入
Math.abs() //绝对值

Math.random() //返回一个浮点数[0,1)

Date对象

//Date()日期对象 是一个构造函数 必须用new来调用创建
var date = new Data();
date.getFullYear() //获取当年
date.getMonth() //获取当月（0-11）
date.getDate() //获取当天日期
date.getDay() //获取星期几（周日0-周六6）
date.getHours() //获取当前小时
date.getMinutes() //获取当前分钟
date.getSeconds() //获取当前秒

//获取时间戳
date.valueOf()
date.getTime()
var date1 = +new Date();

13、基本包装类型

var str = 'andy';
console.log(str.length);

按道理基本数据类型没有属性和方法，而对象才有，以上代码可以执行是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：(String、Number、Boolean都会进行包装)

//1、生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
//2、赋值给我们声明的字符变量
str = temp;
//3、销毁临时变量
temp = null;

14、简单数据类型与复杂类型

值类型与引用类型

• 值类型：简单数据类型/基本数据类型，再存储时变量中存储的是值本身

string, number , boolean, undefined, null

• 引用类型：复杂数据类型，再存储变量中存储的是仅仅是地址（引用）

通过new关键字创建的对象，如Object、Array、Date等

堆和栈
1、栈（操作系统）：用操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放在栈中

2、堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收