Js基础知识复习

创建2021-03-09更新2021-08-25阅读时间29m

主要复习了Js的基础知识，变量，内部的方法等。

敲一遍Markdown

JS输入输出语句

1
2
3
4
5
6
// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出的 展示给用户的
alert('计算的结果是');
// console 控制台输出 给程序员测试用的  
console.log('我是程序员能看到的');

变量

变量声明var, let, const

  • 用 var 定义的全部变量，有时候会污染整个 js 的作用域。我们在如今的实战中，基本都是用的 ES6 语法，所以请尽量避免使用 var 定义变量。

  • 用 let 声明的变量，只在局部（块级作用域内）起作用。

  • const：定义常量在程序开发中，有些变量是希望声明后，在业务层就不再发生变化，此时可以用 const 来定义常量。常量就是值（内存地址）不能变化的量。

  • let 和 const 的特点【重要】
    不存在变量提升
    禁止重复声明
    支持块级作用域
    暂时性死区

  • 暂时性死区 DTC: ES6 规定：使用 let/const 声明的变量，会使区块形成封闭的作用域。若在声明之前使用变量，就会报错。

变量类型

  • JS中一共有六种数据类型
    基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。

  • 引用数据类型（引用类型）：Object 对象。

  • 数据类型之间最大的区别：
    基本数据类型：参数赋值的时候，传数值。
    引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。

字符串

  • 语法
    字符串型可以是引号中的任意文本，其语法为：双引号 “” 或者单引号 ‘’,
    只能成对使用，且双引号里不能放双引号，交替使用。

  • var f = haha; // 没使用引号，到这里会直接报错。因为会被认为是js代码，但是之前并没有定义 haha。

  • 转义字符
    在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义。

  • 拼接语法：
    字符串 + 任意数据类型 = 拼接之后的新字符串;

  • ES6中引入了模板字符串，让我们省去了字符串拼接的烦恼。

    1
    2
    3
    4
    var name = 'baidu';
    var age = '26';
    console.log('我是' + name + ',age:' + age); //传统写法
    console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式

  • 模板字符串中可以调用函数

    1
    2
    3
    4
    function getName() {
    	return 'baidu';
    }
    console.log(`www.${getName()}.com`); // 打印结果：www.baidu.com

布尔型

  • 布尔值：Boolean
    布尔型有两个值：true 和 false。主要用来做逻辑判断： true 表示真，false 表示假。

  • 布尔型和数字型相加时， true 按 1 来算 ，false 按 0 来算。

算术运算符

  • Js 里面用二进制进行运算,不推荐用小数运算,不精确

  • 隐式转换
    我们知道，”2”+1得到的结果其实是字符串21，但是”2”-1得到的结果却是数值1，这是因为计算机自动帮我们进行了“隐式转换”。
    也就是说，-、*、/、%这几个符号会自动进行隐式转换。例如：

    1
    2
    3
    var a = "4" + 3 - 6;
    console.log(a);
    输出结果：37

  • 10 + null 结果为 10。
    10 + undefined 结果为 NaN。
    任何数据类型和 undefined 运算都是 NaN;
    任何值和 null 运算，null 可看做 0 运算。

  • 逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false
    逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true
    &&比|| 的优先级高,分不清,用括号
    结果是true or false

  • 关系运算符：<、> <= >=等。关系运算符，得到的运算结果都是布尔值：要么是true，要么是false。

常用类型转换

  • 显示类型转换
    toString()
    String()
    Number()
    parseInt(string)
    parseFloat(string)
    Boolean()

  • 隐式类型转换
    isNaN ()
    自增/自减运算符：++、—-
    正号/负号：+a、-a
    加号：+
    运算符：-、*、/

  • 隐式类型转换（特殊）
    逻辑运算符：&&、||、！ 。非布尔值进行与或运算时，会先将其转换为布尔值，
    然后再运算，但运算结果是原值。

循环

循环的目的：可以重复执行某些代码

1
2
3
4
5
6
7
8
9
// 打印倒三角形案例
var str = '';
for (var i = 1; i <= 10; i++) { // 外层循环控制行数
    for (var j = i; j <= 10; j++) { // 里层循环打印的个数不一样  j = i
        str = str + '★';
    }
    str += '\n';
}
console.log(str);
1
2
3
4
5
6
7
// break 退出整个循环
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log('我正在吃第' + i + '个包子');
}

数组

创建方式

1
2
3
var arr = new Array(); // 创建了一个空的数组
var arr = []; // 创建了一个空的数组
var arr1 = [1, 2, 'pink老师', true];

数组遍历,添加长度,都可以用length方法

翻转数组

从后往前,赋值给新数组

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//var arr = [5, 4, 3, 2, 1];
  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);

函数

函数就是封装了一段可以被重复执行调用的代码块 目的： 就是让大量代码重复使用

1
2
3
4
5
6
7
8
9
10
function getSum(num1, num2) {
          var sum = 0;
          for (var i = num1; i <= num2; i++) {
              sum += i;
          }
          console.log(sum);
      }
getSum(1, 100);
getSum(10, 50);
getSum(1, 1000);

auguments使用

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fn() {
           // 里面存储了所有传递过来的实参  arguments = [1,2,3]
           // 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);
       // 伪数组 并不是真正意义上的数组
       // 1. 具有数组的 length 属性
       // 2. 按照索引的方式进行存储的
       // 3. 它没有真正数组的一些方法 pop()  push() 等等

变量作用域

js的作用域（es6）之前 ： 全局作用域 局部作用域
es6之后: 块级作用域
块级作用域 {} if {} for {}

闭包

变量的空间没有消失,提高效率

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 作用域链  ： 内部函数访问外部函数的变量，
采取的是链式查找的方式来决定取那个值 
这种结构我们称为作用域链   就近原则
var num = 10;
function fn() { // 外部函数
	var num = 20;
	function fun() { // 内部函数
		num++;
		console.log(num);
	}
	fun();
	fun();
	fun();
}
fn();

创建对象

对象字面量创建对象

var obj = {}; // 创建了一个空的对象 

1
2
3
4
5
6
7
8
var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');
                }
            }

(1) 里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
(2) 多个属性或者方法中间用逗号隔开的
(3) 方法冒号后面跟的是一个匿名函数

// 2. 使用对象
// (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
console.log(obj.uname);
// (2). 调用属性还有一种方法 对象名[‘属性名’]
console.log(obj[‘age’]);
// (3) 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号
obj.sayHi();

构造函数

构造函数可以批量创建函数
要new一个对象,开辟新空间

1
2
3
4
5
6
7
8
9
10
11
// new 构造函数名();
    function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(sang) {
            console.log(sang);

        }
    }
    var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象

new关键字执行过程

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

Math对象

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

  • 绝对值方法

    1
    2
    3
    4
    console.log(Math.abs(1)); // 1
    console.log(Math.abs(-1)); // 1
    console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
    console.log(Math.abs('pink')); // NaN

  • 三个取整方法

    (1) Math.floor() 地板 向下取整 往最小了取值
    (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
    (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取

  • Math对象随机数方法
    random() 返回一个随机的小数 0 =< x < 1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
    // Math.floor(Math.random() * (max - min + 1)) + min;
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    console.log(getRandom(1, 10));
    // 5. 随机点名  
    var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
    // console.log(arr[0]);
    console.log(arr[getRandom(0, arr.length - 1)]);

Date对象

Date() 日期对象

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

1
2
3
4
5
6
7
8
9
10
11
12
var arr = new Array(); // 创建一个数组对象
var obj = new Object(); // 创建了一个对象实例
// 1. 使用Date  如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);

// 2. 参数常用的写法  数字型  2019, 10, 01 
或者是 字符串型 '2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月 
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);

格式化日期

1
2
3
4
5
6
7
8
9
10
11
12
13
// 格式化日期 年月日 
 var date = new Date();
 console.log(date.getFullYear()); // 返回当前日期的年  2019
 console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
 console.log(date.getDate()); // 返回的是 几号
 console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
 // 我们写一个 2019年 5月 1日 星期三
 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]);

Date总的毫秒数

1
2
3
4
5
6
7
8
9
// 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 倒计时效果
// 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('2021-2-21 18:00:00'));
setInterval(function(){
       console.log(countDown('2021-2-21 18:00:00'));
   },1000);
var date = new Date();
console.log(date);

数组常用方法

创建数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 创建数组的两种方式
// 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);

检测是否是数组

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

添加删除方法

可以栈操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1. push() 在我们数组的末尾 添加一个或者多个数组元素
 // (1) push 是可以给数组追加新的元素
 // (2) push() 参数直接写 数组元素就可以了
 // (3) push完毕之后，返回的结果是 新数组的长度 
 // (4) 原数组也会发生变化*******************************

2. unshift 在我们数组的开头 添加一个或者多个数组元素
 // (1) unshift是可以给数组前面追加新的元素
 // (2) unshift() 参数直接写 数组元素就可以了
 // (3) unshift完毕之后，返回的结果是 新数组的长度 
 // (4) 原数组也会发生变化*******************************
 
3. pop() 它可以删除数组的最后一个元素 
 // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
 // (2) pop() 没有参数
 // (3) pop完毕之后，返回的结果是 删除的那个元素 
 // (4) 原数组也会发生变化*******************************

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

筛选数组

创建新数组,符合条件添加

数组排序

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

获取数组索引

1
2
3
4
5
6
7
返回数组元素索引号方法  indexOf(数组元素)  
// 作用就是返回该数组元素的索引号 从前面开始查找
// 它只返回第一个满足条件的索引号 
// 它如果在该数组里面找不到元素，则返回的是 -1  

// 返回数组元素索引号方法  lastIndexOf(数组元素)
// 作用就是返回该数组元素的索引号 从后面开始查找

数组转字符串

1
2
3
4
5
6
7
8
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

字符串常用方法

字符串不可变

字符串的不可变性,不要大量的拼接字符串

查找

根据字符返回位置 str.indexOf(‘要查找的字符’, [起始的位置])
可以看出字符串可以用下标查找

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

查找出现最多次数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
 // o.a = 1
 // o.b = 1
 // o.c = 1
 // o.o = 4
 // 核心算法：利用 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);

其他操作方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 字符串操作方法
// 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);

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

博客学习

js ES6解构赋值
js map 和set
jsDOM三之事件类型
你一定要知道的JS的BOM
速记js面试一定会出的防抖和节流

ES6基础之——new Set
js中in关键字的使用方法