JS基础学习笔记（看珠峰视频记录）

最新推荐文章于 2021-11-09 18:37:01 发布

前端-Phoebe

最新推荐文章于 2021-11-09 18:37:01 发布

阅读量2.5k

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/qq_40621681/article/details/106425432

版权

常用的浏览器

webkit内核（V8引擎）

谷歌chrome
Safari
Opera >=V14
国产浏览器
手机浏览器
···

Gecko

火狐Firefox

Presto

Opera <V14

Trident

+IE
+IE EDGE开始采用双内核（其中包含chrome迷你）

谷歌浏览器的控制台（F12/Fn+F12）

ELements：查看结构样式，可以修改这些内容
Console：查看输出结果和报错信息，是JS调试的利器
Sources：查看项目源码
Network:查看当前网站所有资源请求信息（包括和服务器传输的HTTP报文信息）、加载时间等（根据加载时间进行项目优化）
Application：查看当前网站的数据存储和资源文件（可以盗图）

JS做客戶端語言

按照相关的JS语法，去操作页面中的元素，有时还要操作浏览器里面的一些功能
- ECMAScript3/5/6…:JS的语法规范（变量、数据类型、操作语句等）
- DOM（ document object model）：文档对象模型，提供一些JS的属性方法，用来操作页面中的DOM元素
- BOM( browser object model)：浏览器对象模型，提供一些JS的属性方法，用来操作浏览器的

JS中的变量 variable

变量：可变的量，在编程语言中，变量就是一个名字，用来储存和代表不同值得东西

    //ES3
    var a = 12;
    a = 13；
    console.log(a); //=>输出的是a代表的值12

    //ES6
    let b =100;
    b = 200;

    const c = 1000;
    c = 2000; //=>报错： CONST创建的变量，储存的值不能被修改（可以理解为叫做常量）

    //创建函数也相当于在创建变量
    function fn（）{
   }
    //创建类也相当于创建变量
    class A{
   }
    //ES6的模块导入也可以创建变量
    import B from './B.JS';
    //Symbol创建唯一值
    let n=Symbol（100）；
    let m-Symbol（100）；

JS中的命名规范

严格区分大小写

let Test=100;
console.log(test);//=>无法输出，因为第一个字母小写了

使用数字、字母、下划线、$，数字不能作为开头

let $box;//=>一般用JQ获取的以$开头
let _box;//=>一般公共变量都是_开头
let 1box;//=>不可以，但是可以写box1

使用驼峰命名法：首字母小写，其余每个有意义单词的首字母都要大写（命名尽可能语义化明显，使用英文单词）

let studentInformation;
let studentInfo;
//常用缩写：add/insert/create/new（新增）、update(修改)、delete/del/remove/rm(删除)、sel/select/query/get(查询)、info（信息）···

不能使用关键词和保留字
当下有特殊含义的是关键字，未来可能会成为关键字的叫保留字（）

var let const function···
//=>必须养成良好的写代码习惯，具有极客精神

JS中常用的数据类型

基本数据类型

数字 number
- 常规数字和NaN
字符串 string
- 所有用单引号、双引号、反引号（撇）包起来的都是字符串
布尔 boolean
- true/false
空对象指针 null
未定义 undefined

引用数据类型

对象数据类型 object
- {} 普通对象
- [] 数组对象
- /1？（\d|([1-9]\d+)）(.\d+)?$/ 正则对象
- Math数学函数对象
- 日期对象
- ···
函数数据类型 function

number数字类型

包含：常规数字＼NaN

NaN
not a number:不是一个数字，但它属于数字类型
NaN和任何值（包括自己）都不相等：NaN!=NaN，所以我们不能用相等的方式判断是否为有效数字
isNaN
检测一个值是否为非有效数字，如果不是有效数字返回TRUE，反正是有效数字返回FALSE
在使用isNaN进行检测时，首先会验证检测的值是否是数字类型，如果不是，先基于Number()这个方法，把值转换为数字类型，然后再检测

把其他类型值转换为数字类型

Number（[val]）
ParseInt/parseFloat([val],[进制])：也是转化为数字的方法，对于字符串来说，它是从左到右依次查找有效数字字符，直到遇到非有效数字字符，停止查找（不管后面你是否还有数字都不查找），把找到的数字返回
==进行比较的时候，可能要出现要把其他类型值转换为数字

string字符串数据类型

所有用单引号、双引号、反引号（撇 ES6模板字符串）包起来的都是字符串

把其他类型值转换为字符串

[val].toString()
字符串拼接
- 经典例题：

   let a = 10 + null + true + [] + undefined + '珠峰' + null + [] + 10 + false ;
   console.log(a);

    //    结果是：'11undefined珠峰null10false'
    //    - 分析：    10 + null -> 10 <br>
    //            10 + true -> 11 <br>
    //            11 + [] -> 11 + '' -> '11'  空数组变为数字，要先经历变为空字符串，遇到字符串，啥都不要想，直接变成字符串拼接<br>
    //            '11' + undefined -> '11undefined' <br>
    //                   ··· <br>
    //            结果为：'11undefined珠峰null10false' 
    //    - 把引用数字类型转化为数字，先把他基于toString方法转换为字符串，然后再转化为数字
    //    把字符串转化为数字，只要字符串中包含任意一个非有效数字字符（第一个点除外）结果都是NaN，空字符串会变成数字零
       console.log(Number('12.5'));//=>12.5
       console.log(Number('12.5px'));//=>NaN
       console.log(Number('12.5.5'));//=>NaN
       console.log(Number(''));//=>0


       //布尔转换为数字
       console.log(Number(true));//=>1
       console.log(Number(false));//=>0
       console.log(isNaN(false));//=>false
       console.log(isNaN(true));//=>false

       //null->0 undefined->NaN
       console.log(Number(null));//=>0
       console.log(Number(undefined));//=>NaN  
       console.log(Number({
   name:'10'}));//=>NaN
       console.log(Number({
   }));//=>NaN

       //把引用数字类型转化为数字，先把他基于toString方法转换为字符串，然后再转化为数字
       //{}/{xxx:'xxx'}.toString() =>"[object object]"=>NaN
       console.log(Number([]));//=>0
       //[].toString() -> ''
       console.log(Number([12]));//=>12
       //[12].toString() -> '12'
       console.log(Number([12,23]));//=>NaN
       //[12,23].toString() -> '12,23'
   	
   	   console.log(Number(Symbol(13))); //=>Cannot convert a Symbol value to a number

boolean布尔数据类型

只有两个值 true/false

把其他类型值转换为布尔类型

只有 0、NaN、’’、null、undefined 五个值转换为FALSE，其余都转换为TRUE（而且没有任何特殊情况）

Boolean([val])
!/!! 取反（！：先转为布尔，然后取反）（！!：取反再取反，只相当于转换为布尔，<=> Boolean）
条件判断

null/ undefined

null和undefined都代表的是没有
null:意料之中（一般都是开始不知道值，我们手动先设置为null，后期再给予赋值操作）


let num = null;//=>let num = 0; 一般最好用null作为初始空值，因为零不是空值，在栈内存中有自己的存储空间（占了位置）
···
num=12;
// - undefined：意料之外（不是我能决定的）
let num;//=>创建一个变量没有赋值，默认值是undefined
···
num = 12;

/* 对象的属性名不能是引用数据类型值 */
		// =====基于 对象[属性名] 的方式操作，需要保证属性名是一个值（字符串/数字/布尔等都可以），如果不是值而是一个变量，它会把变量存储的值作为对象的属性名进行操作
		// =====基于 对象.属性名 的方式操作，属性名就是点后面的

		/* let n = 100;
		let obj = {
			1: 100
		};
		// console.log(obj[1]);
		// console.log(obj.1); //=>Uncaught SyntaxError: missing ) after argument list 基于点的方式操作有自己的局限性，属性名不能是数字的，不能 对象.数字属性，此时只能用 对象[数字属性]

		// console.log(obj[1]);
		// console.log(obj['1']); //=>其它非字符串格式作为属性名和字符串格式没啥区别

		// obj.n = 200; //=> {n:200}  n是属性名（数据格式是字符串）
		// obj['n'] = 200; //=> {n:200} 和上面的情况一样
		// obj[n] = 200; //=> {100:200} => obj[100]=200   n本身是一个变量（n和'n'的区别：前者是一个变量，后者是一个字符串的值），它代表的是所存储的值100（是一个数字格式）
		// obj[m] = 200; //=>Uncaught ReferenceError: m is not defined m这个变量没有被定义
		// obj[true] = 300; //=>{true:300}
		// obj[undefined] = 400; //=>{undefined:400}

		console.log(obj); */

		/* let n = {
			x: 100
		};
		let m = [100, 200];
		let obj = {};
		obj[n] = "珠峰"; //=>obj[{x:100}] 但是对象不能作为属性名，需要把其转换为字符串 =>{"[object Object]":"珠峰" }
		obj[m] = "培训"; //=>obj[[100,200]] =>{ "100,200":"培训" }
		console.log(obj); 

		//=>如果非要让属性名是个对象，只能基于ES6中的新数据结构 Map 处理

object对象数据类型-普通对象

{[key]:[value],…}任何一个对象都是由零到多组键值对（属性名：属性值）组成的（并且属性名不能重复）
数组是特殊的对象数据类型

数据类型的区别（堆栈底层机制）

以图片的和例子的形式呈现
在这里插入图片描述

下面贡献一道例题，采用画图的形式呈现出来：

// 例题1
    let n = [10,20];
    let m = n;
    let x = m;
    m[0] = 100;
    x = [30,40];
    x[0] = 200;
    m = [50,60];
    m = x;
    m[1] = 300;
    n[2] = 400;
    console.log(n,m,x);

答案分析如下：
在这里插入图片描述

再来一道阿里的面试题

    let a = {
   
        n : 1
    };
    let b = a;
    a.x = a = {
   n:2};
    console.log(a.x);
    console.log(b);

答案分析如下：
在这里插入图片描述

JS中的数据类型检测

（类型）typeof [val]:用来检测数据类型的运算符
- 基于typeof检测出的结果
  1.首先是一个字符串
  2.字符串中包含对应的类型
局限性
1.typeof null => “object"但是null并不是对象
2.基于typeof无法细分出当前值是普通对象还是数组对象等，因为只要是对象数据类型，返回的结果都是"object”

console.log(typeof 1);   // 输出 =>"Number"
//比如下面一个小例子，就可以体现出你是否理解这个知识并判断你是否具有极客精神

console.log9(typeof typeof typeof []);  // => "string"
//分析如下：
//typeof [] => "object"
//typeof "object" => "string"
// 因为typeof检测的结果都以字符串形式输出,所以只要两个和两个以上同时检测，最后结果必然"string"

在这里插入图片描述

（运算符）instanceof :用来检测当前实例是否属于某个类
（构造器）constructor :基于构造函数检测数据类型（也是基于类的方式）
Object.prototype.toString.call() :检测数据类型最好的办法

JS中的操作语句：判断、循环

判断

条件成立干什么？不成立干什么？

if/else if/else
三元运算符
switch case

1.if/else

if(条件){
   
    条件成立执行
}else if(条件2){
   
    条件2成立执行
}
···
else{
   
    以上条件都不成立
}

let a = 10;
if(a <= 0) {
   
    //条件可以多样性：等于、大于、小于的比较/一个值或者取反等 => 最后都是要计算出是true还是false
    console.log('哈哈');
}else if(a>0 && a<10){
   
    console.log('呵呵');
}else if(a == 10){
   
    console.log('嘿嘿');
}else {
   
    console.log('嘻嘻');
}

2.三元运算符
三元运算符：简单的IF/ELSE的特殊处理方式
语法：条件？条件成立处理的事情：条件不成立处理的事情；
1.如果处理的事情过多，可以用括号包起来，每一件事情用逗号分隔
2.如果不需要处理事情，可以用null/undefined占位

下面引用一个例子说明三元运算符

let a = 10;
if(a > 0){
   
    if( a < 10){
   
        a++;//=>a+=1  a=a+1   =>自身累加1
    } else {
   
        a--;;//=>a-=1  a=a-1   =>自身累减1
    }
} else {
   
    if(a > -10){
   
        a += 2;
    }
}
a > 0 ? ( a < 10 ? a++ : a--) : ( a > -10 ? a+=2 : null);//三元运算符形式表达

3.switch case

//===========================switch case :一个变量在不同值得情况下的不同操作
//1.每一个case结束后都要加上break，不加break，当前条件执行完成后，后面条件不论是否成立都要执行，直到遇到break为止（不加break可以实现变量在某些值时做相同的事情）
//2.default等价于else，以上都不成立干的事情
//3.每一个case的比较都是用===“绝对相对”
/* let a = 10;
switch(a){
    case  1:
        console.log('haha');
        break;
    case  1:
        console.log('hdada');
        break;
     case  1:
        console.log('mimi');
        break;
    default :
        console.log('wuwu');
} */

下面是一个案例具体讲基于JS如何实现业务需求

<!DOCTYPE html>
<html lang="en">

<head>

最低0.47元/天解锁文章

前端-Phoebe

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
JS基础学习笔记（看珠峰视频记录）

常用的浏览器webkit内核（V8引擎）谷歌chromeSafariOpera >=V14国产浏览器手机浏览器···Gecko火狐FirefoxPrestoOpera <V14Trident+IE+IE EDGE开始采用双内核（其中包含chrome迷你）谷歌浏览器的控制台（F12/Fn+F12）ELements：查看结构样式，可以修改这些内容Console：查看输出结果和报错信息，是JS调试的利器Sources：查看项目源码Network:
复制链接

扫一扫