JavaScript 基础

一、简单数据类型

1.声明变量特殊情况

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

2.Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果)

var variable;
console.log(variable); // undefined 
console.log('你好' + variable); // 你好undefined 
console.log(11 + variable); // NaN 
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空(学习对象时，我们继续研究null)

console.log('你好' + vari); // 你好null 
console.log(11 + vari); // 11 
console.log(true + vari); // 1

3.数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变 量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换:

• 转换为字符串类型：变量.toString() String(变量) 变量 + ‘‘
• 转换为数字型：parseInt(变量) parseFloat(变量) Number(变量) 利用算数运算 - * / 隐式转换
• 转换为布尔型：Boolean(变量)

二、函数

1.形参和实参

在JavaScript中，形参的默认值是undefined。

实参个数多于形参，只取到形参的个数

实参个数少于形参，多的形参定义为undefined，结果为NaN

2.return 语句

如果函数没有 return ，返回的值是 undefined

return 语句之后的代码不被执行。

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

如果没有return 则返回 undefined

3.arguments 的使用

只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments

function fn() {
    // console.log(arguments); // 里面存储了所有传递过来的实参
    // console.log(arguments.length);
    // console.log(arguments[2]);
    // 可以按照数组的方式遍历arguments
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
     }
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);

4.伪数组

并不是真正意义上的数组

1. 具有数组的 length 属性

2. 按照索引的方式进行存储的

3. 它没有真正数组的一些方法 pop() push() 等等

5.函数的两中声明方式

1. 利用函数关键字自定义函数(命名函数)

function fn() {}
fn();

2. 函数表达式(匿名函数)

var 变量名 = function() {};
变量名();

var fun = function(aru) {
    console.log('我是函数表达式');
    console.log(aru);
}
fun('hello world');

(1) fun是变量名 不是函数名

(2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数

(3) 函数表达式也可以进行传递参数

6.变量的作用域

如果在函数内部 没有声明直接赋值的变量也属于全局变量

function fun(aru) {
    num = 20;
}

7.预解析（面试考点）

js引擎运行js 分为两步

(1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面

(2). 代码执行 按照代码书写的顺序从上往下执行

预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）

(1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作

因此 函数表达式 调用必须写在函数表达式的下面

console.log(num); // undefined
var num = 10;
// 相当于执行了以下代码
// var num;
// console.log(num);
// num = 10;

fun(); // 报错
var fun = function() {
    console.log(22);
}
// 相当于执行了以下代码
// var fun;
// fun();
// fun = function() {
//     console.log(22);
// }

(2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

fn(); // 不报错
function fn() {
    console.log(11);
}
// 相当于执行了以下代码
// function fn() {
//     console.log(11);
// }
// fn();

案例：

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 以下代码
// function f1() {
//     var a;
//     a = b = c = 9;
//     // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
//     // 集体声明  var a = 9, b = 9, c = 9;
//     console.log(a);
//     console.log(b);
//     console.log(c);
// }
// f1();
// console.log(c);
// console.log(b);
// console.log(a);

//结果：9 9 9 9 9 报错

三、对象

1.对象创建方法

利用对象字面量创建对象

// var obj = {};  // 创建了一个空的对象 
var obj = {
    uname: '张三疯',
    age: 18,
    sex: '男',
    sayHi: function () {
        console.log('hi~');
    }
}

console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();

利用 new Object 创建对象

var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}

console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();

利用构造函数创建对象

1. 构造函数名字首字母要大写
2. 构造函数不需要return 就可以返回结果
3. 构造函数的属性和方法前面必须添加 this

function Star(uname, age, sex) {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function (song) {
        console.log(song);
    }
}
var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
// console.log(typeof ldh);
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
var zxy = new Star('张学友', 19, '男');
console.log(zxy.name);
console.log(zxy.age);
zxy.sing('李香兰')

2.new关键字执行过程

1. new 构造函数可以在内存中创建了一个空的对象
2. this 就会指向刚才创建的空对象
3. 执行构造函数里面的代码 给这个空对象添加属性和方法
4. 返回这个对象

3.遍历对象

var obj = {
    name: 'pink老师',
    age: 18,
    sex: '男',
    fn: function() {}
}
// 使用 for in 遍历的对象
// for (变量 in 对象) {

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

4.内置对象

Math对象

Math数学对象不是一个构造函数 ，所以不需要new 来调用 而是直接使用里面的属性和方法即可

Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() // 四舍五入 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max() // 求最大值
Math.min() // 求最小值
Math.random() // 返回一个随机的小数  0 =< x < 1
// 得到两个数之间的随机整数 并且 包含这2个整数
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Date对象

Date对象是一个构造函数 必须使用new 来调用创建我们的日期对象

// 1. 使用Date  如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数常用的写法  数字型  2021, 10, 01  或者是 字符串型 '2021-10-1 8:8:8'
var date1 = new Date(2021, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月 
var date2 = new Date('2021-10-1 8:8:8');
console.log(date2);

格式化日期 年月日

var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年  2021
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 输出 xxxx年 x月 x日 星期x
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

格式化日期 时分秒

var date = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数

// 1. 通过 valueOf()  getTime()
var date = new Date();
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2. 简单的写法 (最常用的写法)
var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
console.log(date1);
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());

倒计时效果

// 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
// 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
// 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
// 转换公式如下： 
//  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
//  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
//  m = parseInt(总秒数 /60 %60 );     //   计算分数
//  s = parseInt(总秒数%60);            //   计算当前秒数
function countDown(time) {
    var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
    var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
    var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
    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 + '秒';
}
console.log(countDown('2019-5-1 18:00:00'));
var date = new Date();
console.log(date);

四、数组

1.创建数组的两种方式

// 1. 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);

// 2. 利用new Array()
// var arr1 = new Array();  // 创建了一个空的数组
// var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素 
var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);

在同一个数组中可以存放任意的数据类型

如：var arr1 = [1, 2, ’ test’, true];

2.新增数组元素 修改length长度

var arr = ['red', 'green', 'blue'];
console.log(arr.length);
arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 
console.log(arr);
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined

数组长度可以自动检测里面元素变化

3.冒泡排序

var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 
    for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
        // 内部交换2个变量的值 前一个和后面一个数组元素相比较
        if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr);

4.检测是否为数组

// (1) instanceof  运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

5.添加删除数组元素的方法

1. push() 在我们数组的末尾 添加一个或者多个数组元素

// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕之后，返回的结果是 新数组的长度 
// (4) 原数组也会发生变化
var arr = [1, 2, 3];
// arr.push(4, 'pink');
console.log(arr.push(4, 'pink'));
console.log(arr);

2. unshift() 在数组的开头 添加一个或者多个数组元素

// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕之后，返回的结果是 新数组的长度 
// (4) 原数组也会发生变化
console.log(arr.unshift('red', 'purple'));
console.log(arr);

3. pop() 可以删除数组的最后一个元素

// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后，返回的结果是 删除的那个元素 
// (4) 原数组也会发生变化
console.log(arr.pop());
console.log(arr);

4. shift() 可以删除数组的第一个元素

// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是 删除的那个元素 
// (4) 原数组也会发生变化
console.log(arr.shift());
console.log(arr);

案例：筛选数组

// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        // newArr[newArr.length] = arr[i];
        newArr.push(arr[i]);
    }
}
console.log(newArr);

6.翻转数组

var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);

7.数组排序

// 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
    //  return a - b; 升序的顺序排列
    return b - a; // 降序的顺序排列
});
console.log(arr1);

8.获取数组元素索引

// 1. indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找// // 只返回第一个满足条件的索引号 
// 如果在该数组里面找不到元素，则返回的是 -1  
// var arr = ['red', 'green', 'blue', 'pink', 'blue'];
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));
// 2. lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4

案例：数组去重（面试考点）

// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
// 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
// 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
// 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
// 封装一个 去重的函数 unique 独一无二的 
function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
console.log(demo);

9.数组转换为字符串

// 1. toString() 将数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join(分隔符) 
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink

五、字符串

1.基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

// 下面代码有什么问题?
var str = 'andy'; console.log(str.length);
// 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把 基本数据类型包装为复杂数据类型，其执行过程如下 :
// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

2.字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变 // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
    str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

3.根据字符返回位置

// str.indexOf('要查找的字符', [起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找

案例：查找字符串中某个字符出现的位置以及次数（面试考点）

// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
// 核心算法：先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
// 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);

4.根据位置返回字符

// 1. charAt(index) 
var str = 'andy';
console.log(str.charAt(3));
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}
// 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
console.log(str.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str[0]); // a

案例：判断一个字符串中出现次数最多的字符，并统计其次数（面试考点）

// 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
    age: 18
}
if (o['sex']) {
    console.log('里面有该属性');
} else {
    console.log('没有该属性');
}
// 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
// 核心算法：利用 charAt(） 遍历这个字符串
// 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
// 遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); // chars 是 字符串的每一个字符
    if (o[chars]) { // 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);
console.log('最多的字符是' + ch);

5.字符串操作方法

// 1. concat('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red'));

// 2. substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符

// 3. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
    str1 = str1.replace('o', '*');
}
console.log(str1);

// 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
var str2 = 'red,pink,blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));

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

1.基本概念

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

• 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。包括string ，number，boolean，undefined，null
• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型。通过 new 关键字创建的对象(系统对象、自定义对象)，如 Object、Array、Date等

注意：简单数据类型 null 返回的是一个空的对象 object

var timer = null;
console.log(typeof timer); //object

2.内存分配

• 简单数据类型：存放在栈里面 里面直接开辟一个空间存放的是值
• 复杂数据类型：首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据 真正的对象实例存放在堆空间中

3.参数传递

• 简单数据类型：函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈 空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
• 复杂数据类型：函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地 址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。