学习小笔记-前端-JS基础

目录

基础：

变量：

数据类型

运算符

流程控制

循环

数组

函数

作用域

JS预解析

对象

JS内置对象

Math

Date

数组对象

字符串对象

 数据类型内存分配

---

基础：

分为：ECMAScript（标准化编程语言），DOM（文档对象模型），BOM（浏览器对象模型）

书写形式：

1.行内式

<input type="button" value="啊吧啊吧" onclick="alert('啊吧啊吧啊吧')">

2.内嵌JS

<script>
    alert('啊吧啊吧');
</script>

3.外部JS文件

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

注释：//（Ctrl+/）与/**/（Shift+Alt+A）

基础输入输出：

alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

---

变量：

1.声明变量：var age //var是JS关键字，用来声明变量

2.赋值

初始化=声明+赋值。

未赋值值为undefined。

---

数据类型

JS为弱类型语言；是动态语言，变量的数据类型是可以变化的。

数据类型：简单数据类型（Number，Bollean，String，Undefined，Null），复杂数据类型（object，Array，Date等）。

复杂数据类型使用new关键字创建。

Number：数字前面加0表示八进制；加0x表示十六进制。

console.log(Number.MAX_VALUE);    //1.7976931348623157e+308
console.log(Number.MIN_VALUE);    //5e-324
console.log(Infinity);    //Infinity无穷大
console.log(-Infinity);    //-Infinity无穷小
console.log(NaN);    //一个非数值

isNaN    //判断是否是数字，是数字则返回false，不是数字则返回true。

String：建议使用单引号。使用引号的嵌套关系，则外双内单或外单内双。

\n	换行符
\\	斜杠\
\'	单引号
\"	双引号
\t	tab缩进
\b	空格

var str = '啊吧啊吧';
console.log(str.length);    //检测输出字符串的长度

console.log('abab'+srt);    //字符串拼接
console.log(srt+18);    //字符串拼接    啊吧啊吧18
var age = 18;    console.log(srt+age);    //字符串拼接    啊吧啊吧18
console.log('12'+18);    //字符串拼接    '1218'

Boolean：可以直接参与运算。

Undefined：变量未赋值，则为undefined。

var str = '啊吧啊吧';
var ariable = undefined;
console.log(variable+srt);    //undefined啊吧啊吧
console.log(variable+1);    //NaN

Null

var str = '啊吧啊吧';
var space = null;
console.log(variable+srt);    //null啊吧啊吧
console.log(variable+1);    //1

 获取数据类型typeof

var num=10;
console.log(typeof num);    //number
var str='abab';
console.log(typeof str);    //string
var flag=true;
console.log(typeof flag);    //bollean
var vari=undefined;
console.log(typeof vari);    //undefined
var timer=null;
console.log(typeof timer);    //object

数据类型转换

toString()	转成字符串	var num = 1; alert(num.toString());
String()	转成字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num+"字符串");
parseInt(String)	string转整数数值（向下取整，自动去掉单位字母（如px））	parseInt（'78'）
parseFloat(String)	string转浮点数数值（自动去掉单位字母（如px））	parseFloat('78.21')
Number()	string转数值型	Number('12')
js隐式转换（- * /）	运用算数运算隐式转换为数值型	'12' - 0 '12' * 1 '12' / 1
Boolean()	其他型转换为boolean	Boolean('')

console.log(Boolean(''));    //false
console.log(Boolean(0));    //false
console.log(Boolean(NaN));    //false
console.log(Boolean(null));    //false
console.log(Boolean(undefined));    //false
console.log(Boolean());    //其他皆为true

JS：解释性语言；Java：编译性语言

---

运算符

算数运算符

递增递减运算符

比较运算符

!==与===表示全等，要求值和数据类型都一致

逻辑运算符

赋值运算符

优先级

小括号>一元运算符＞算数运算符＞关系运算符＞相等运算符＞逻辑运算符＞赋值运算符＞逗号运算符

---

流程控制

顺序

if判断

三元表达式

条件表达式 ? 表达式1 : 表达式2

switch分支

---

循环

---

数组

创建数组：

1.利用new创建数组；2.利用数组字面量创建数组

数组中可以放任意类型的数据

var arr = new Array();    //1.利用new创建数组
var arr = [];    //2.利用数组字面量创建数组
var arr = [1,2,'abab',true];

获取元素：索引

console.log(arr);    //Array(4)
console.log(arr[2]);    //abab

求数组长度

console.log(arr.length);

增加数组元素

var arr = [1,2,'abab',true];
arr.length = 7;    //1.修改数组长度
console.log(arr[4]);    //undefined
arr[4] = 'ababab';    //2.增加数组元素

---

函数

1.声明函数，2.调用函数

function 函数名(){    //声明
    函数体;
}
function 函数名(形参1，形参2){
    函数体;
}
函数名();    //调用
函数名(实参1，实参2)；

若实参个数多于形参个数，则只取前几个；若实参个数小于形参个数，多的形参定义为undefined。

函数若没有return，则返回undefined

arguments的使用：arguements对象存储了传递的所有实参。arguements展示形式是一个伪数组，具有的特点：1.具有length属性；2.按照索引方式存储数据；不具有数组push，pop等方法。

声明函数的两种方式：

function fun(){
}

var fun = function(){    //fun是变量名，不是函数名，变量里面存的是函数
}

---

作用域

全局作用域：整个script标签或单独的js文件。注意：在函数内部赋值但没声明变量也是全局变量；形参也可以看作全局变量。

局部作用域：一个函数内部

块作用域：es6之前没有。

作用域链：小域可以访问大域变量。链式查找访问机制。

---

JS预解析

JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

1.预解析会把js里面所有的var和function提升到当前作用域的最前面。

2.代码执行：按代码书写顺序从上往下执行

3.预解析分为变量提升和函数提升。变量提升：吧所有变量声明提到最前面，不提升赋值操作。函数提升：吧所有函数声明提升到最前面，不调用函数。

---

对象

对象：一组无序的相关属性和方法的集合。

属性：事物特征。方法：事物行为。

创建对象：1.利用字面量创建对象；2.利用new Object创建对象；3.利用构造函数创建对象。

构造函数首字母大写。构造函数类似于class，用构造函数创建对象的过程也称为对象的实例。

//1.对象字面量创建对象：{}
var obj = {
    uname: 'abab',    //属性使用键值对
    age: 18,    //逗号隔开
    sex:'man'
    sayHi: function(){    //方法冒号后面跟一个匿名函数
        console.log('abab');
    }
}
console.log(obj.uname);    //调用：对象名.属性名。
console.log(obgj['age']);    //调用：对象名['属性名']。
obj.sayHi();    //调用：对象名.属性名。

//2.利用new Object创建对象
var obj = new Object();
obj.uname = 'abab';    //用=等号赋值的方法添加对象属性和方法
obj.age = 18;
obj.sex = 'man';
obj.sayHi = function(){
    console.log('abab');
}

//3.构造函数创建对象
function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){}
}
new 构造函数名();
//实例
function Person(uname,age,sex){    //构造函数首字母大写，不需要return
    this.name = uname;
    this.age = age;
    this.sex = sex;
}
var me = new Person('abab',18,'man');    //创建对象
console.log(me.name);    //使用
console.log(me.age);

new的过程：

1.在内存中创建一个新的对象

2.this指向空对象

3.指向函数代码，为空对象添加属性和方法

4.返回这个对象

遍历对象：for...in语句可以对数组和对象的属性进行循环操作。

for(var k in obj){
    console.log(k);    //k变量地呼出得到属性名
    console.log(obj[k]);    //obj[k]输出得到属性值
}

---

JS内置对象

JS对象：自定义对象，内置对象，浏览器对象（JS API）。

文档：MDN：http://developer.mozilla.org/zh-CN/

Math

Math 不是一个构造器。Math 的所有属性与方法都是静态的。

Math - JavaScript | MDN

常用：

Math.max()；

Math.abs()：绝对值；

三个取整方法：Math.floor()（向下取整）；Math.ceil()（向上取整）；Math.round()（四舍五入）

Math.random()：返回随机小数[0,1)。

Date

创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。

Date - JavaScript | MDN

var date = new Date();    //创建了一个Date
console.log(date);
var date1 = new Date(2019,10,1);
var data2 = new Date(2019-10-1 8:8:8);
console.log(date1);    //Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)
console.log(date2);    //报bug
/*
new Date();
new Date(value);
参数常用写法：数字型：2019, 10, 01
new Date(dateString);
字符串型：'2019-10-01 8:8:8'
强烈不推荐使用Date构造函数来解析日期字符串
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
*/

方法：

getFullYear()	获取当前年
getMonth()	获取当前月（0-11）
getDate()	获取当前几号
getDay()	获取当前星期几（日：0-六：6）
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒

//获取Date毫秒数（时间戳），距离1970年1月1日的毫秒数：
var date = new Date();
//1
console.log(date.valueOf());
console.log(date.getTime());
//2
var date1 = +new Date();
concole.log(date1);
//3    H5新增
concole.log(Date.now());

案例：倒计时：

function countDown(time) {
            var nowTime = +new Date();    //当前毫秒数
            var input = +new Date(time);    //输入时间的毫秒数
            var times = (input - nowTime) / 1000;    //剩余时间的秒数
            var d = parseInt(times / 60 / 60 / 24);
            d = d<10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h<10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);
            m = m<10 ? '0' + m : m;
            var s = parseInt(times % 60);
            s = s<10 ? '0' + s : s;
            return(d+'天'+h+'小时'+m+'分'+s+'秒');
        }

数组对象

数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。

Array - JavaScript | MDN

构造函数创建数组：

var arr = new Array();    //创建空数组
var arr = new Array(2);    //创建数组，长度为2
var arr = new Array(2,3);    //创建数组[2,3]

检测是否为数组：

//instanceof运算符
var arr = [];
var obj = {};
console.log(arr instanceof Array);    //true
console.log(obj instanceof Array);    //false
//Array.isArray()    H5新增方法
console.log(Array.isArray(arr));    //true

添加删除方法：

push()	末尾添加一个或多个元素，修改原数组	返回新的长度
pop()	删除最后一个元素，数组长度减一，无参数，修改原数组	返回删除元素的值
unshift()	向数组开头添加一个或更多元素，修改原数组	返回新的长度
shiift()	删除第一个元素，数组长度减一，修改原数组	返回第一个元素的值

反转数组：arr.reverse();

冒泡排序：arr.sort();

//sort的成功形式：
arr.sort(function(a,b){
    return a-b;    //升序排列
    //return b-a;    //降序排序
});

数组索引：
 

indexOf()	数组中查找给定元素的第一个索引	存在则返回索引号；不存在则返回-1
lastIndexOf()	在数组中最后一个索引	存在则返回索引号；不存在则返回-1

转字符串：

toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	吧数组中所有元素转换为一个字符串	返回一个字符串

其他：

concat()	连接两个或多个数组，不影响原数组	返回一个新数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(begin,end)，影响原数组	返回被删除项目的新数组

---

字符串对象

基本包装类型：吧简单数据类型包装成复杂数据类型。

字符串的值不变，看上去改变了内容，实际上是改变了地址，内存中新开辟了一块地址空间。

由于字符串的所有方法都不会修改字符串本身，所以操作完成后会返回一个新的字符串。

根据字符返回位置：

indexOf()	字符串中查找给定字符的第一个索引	存在则返回索引号；不存在则返回-1
lastIndexOf()	在字符串中最后一个索引	存在则返回索引号；不存在则返回-1

//str.indexOf('要查找的字符',[起始的位置])
var str = 'abcdfsda';
console.log(str.indexOf('a',3));    //从索引号是3 的位置开始往后查找
//lastindexOf也可以设定起始查找位置

根据位置返回字符：

charAt(index)	返回指定位置的字符
cahrCodeAt(index)	获取指定位置处字符的ASCII码
str[index]	获取指定位置处字符        H5新增

判断对象中是否有某个属性：对象['属性名']

var o = {
    age: 18
}
if(o['age'])
{console.log('里面有该属性');}
else
{console.log('里面没有该属性');}

案例：获取一组字符串中出现次数最多的字符：

//1.获取字符和其最大值
var str = 'fdfsafewfsdfwefadsaf';
var o = {};
for(var i = 0; i < str.length; i++)
{
    var chars = str.charAt(i);
    if(o[chars]){
        o[chars]++;
    }else{
        o[chars] = 1;
    }
}
console.log(o);
//2.遍历对象
var max = 0;
var ch = '';
for(var k in o){
    //k为属性名，属性值为o[k]
    if(o[k] > max){
        max = o[k];
        ch = k;
    }
}
console.log(max + '  ' + ch);

字符串其他操作方法：

concat(str1,str2,str3)	连接两个或多个字符串。等效于+。+更常用
substr(start,length)	从start来时，length取的个数
slice(start,end)	从start开始，截取到end的位置，end取不到
substring(start,end)	从start开始，截取到end的位置，end取不到，不接受负值
replace('被替换的字符','替换为的字符')	替换字符串中的字符，只替换第一个字符
split('分隔符')	字符串转换为数组
toUpperCase()	转换大写
toLowerCase()	转换小写

---

 数据类型内存分配

堆与栈

简单数据类型直接存储在栈中。

复杂数据类型首先在栈中存放地址，然后这个地址指向存储在堆里面的数据。

简单数据类型：函数传参时，将实参复制一份给了形参。

复杂数据类型：函数传参时，将实参（地址）赋值给了形参，在函数内改变值会影响到原实参。