chapter 1 、JS----从入门到熟练的小白之路（持续更新....)

煎饼狗子啊
263 阅读9分钟

前言：分享个人从一名小白跨行业转前端的学习历程，会持续更新。对于零基础童鞋而言是满满的干货哦😜 正在学习的以及想要学习而迟迟没行动起来的盆友们，冲鸭~~~

一、初识JS

定义:轻量级的弱脚本动态编程语言，具备一定的逻辑和编程思想（面向对象[oop]=>Object Oriented Programming>） 编程语言常见的编程思想：面向对象/面向过程

  • 面向对象：
    • 1）java
    • 2）c++
    • 3）php
    • 4）c#（.net）
    • 5）javascript
    • 6） ......
  • 面向过程：
    • 1）C语言

二、js的主要组成部分

1）ECMAScript：js的核心语法；
2）DOM：（document object model）文档对象模型，是操作dom元素的一些方法和属性
3）BOM：（browser object model）浏览器对象模型，是操作浏览器的一些方法和属性

三、js引入的三种方式

终于可以上代码啦~~~ 😺

1、行内式引入（通过事件属性引入）

<body>
  <div onclick="alert('1')">点我</div>
</body>

2、内嵌式引入

<script>
  alert('1')
</script>

注意：内嵌式就是js代码用’script‘标签包裹着，并且这个标签可以放在任意的位置，但是如果放在head里面并且去操作dom元素会拿不到dom元素。解决方案后续更新到获取元素方法的时候再分享~

3、外链式引入

1）创建一个xx.html文件 2）创建一个xx.js文件 3）在html文件中通过link标签引入

1.html

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
       <!-- ~~在这呢~~ -->
      <link rel="stylesheet" href="1.js"> 
    </head>

    <body>  </body>
    
</html>

1.js

alert('1')

四、常用的调试方法

console.log()   打印 

alert()        弹框信息

五、变量和数据类型

1、变量

定义：一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。

var average=80;
average=90;
console.log(average)   //90

1-1、创建变量的六种方式

var  声明一个变量
function  声明一个函数
let 声明一个变量 （es6）
const 声明一个常量（es6）值不能更改
class 类（es6)
import 基于es6的模块导入

1-2、变量命名规范

 1.区分大小写
 2.不能取名为关键字、保留字
 3.名字以数字，字母、下划线、$ 符号组成，（但是不能以数字开头）
 4.命名要有语义化：
    小驼峰命名法    例如：myName
    大驼峰命名法    例如：MyName
    下划线命名法    例如：my_name

2、js数据类型

2-1、原始数据类型（基本数据类型）

2-1-1、number 数字

A、定义：整数、小数、负数、NaN (not a number)......

B、把其他的数据类型转换为number

Number( )
Number("1px") //NaN
Number("")   //0
Number(true)    //1
Number(false)    //0
Number(null)   //0
Number(undefined)   //NaN
Number({})    //NaN
Number([])   //0
Number([1])  //1
Number([1,2])   //NaN

其他数据类型转数字的规则总结：

1、字符串转数字：
    空字符串：0
    数字：数字
    包含了非有效数字：NaN
2、布尔值
    true：1
    false：0
3、null：0
4、undefined：NaN
5、引用数据类型：先隐式调用toTring（),先将其转换为字符串，在转换为数字，如果是普通对象.toString( )

parseInt（字符串，进制）

把字符串按照指定的进制数进行转换，整数型,进制范围：2-36 不写就是10进制。从左往右，如果遇到非有效数字就停止转换，如果第一个就是非有效数字，就是NaN。

parseFloat（字符串，进制）

转换为浮点型，可以查到小数点。从左往右，遇到除了小数点以外的非有效数字就停止转换

C、NaN永远不等于任何一个数据，包含它自身。所以在判断是不是有效数据的时候，只能用isNaN 这个方法进行判断

NaN==NaN======> false

D、判断一个数据是否是一个有效数据：isNaN

它返回的是一个布尔值，如果结果是false代表是一个有效数字，如果返回值是true，代表是非有效数字。如果不是数字类型，先调用Number方法转换之后再进行判断

isNaN(1)==>false;
isNaN("2")===> false;
isNaN(true)===>false;
isNaN(false)===>false;
isNaN(null)===>false;
isNaN(undefined)===>true;
isNaN({'name':'lili'})=>true;
isNaN([1,2])=>true
isNaN([1])=>false

2-1-2、string 字符串

A、定义：把字符用单引号或者双引号包括起来就是字符串类型

获取字符串的长度：length

var a="hello";
console.log(a.length)==>5

索引：每个字符都有一个下标，叫做索引，索引是从0开始的

  • 第一个字符索引：0
  • 最后一个字符索引：[变量].length-1
  • 获取当前索引位置对应的字符：[变量][索引值]，例如下面的：a[0]
var a="hello"
console.log(a[0])===>"h"   获取到第一个字符
console.log(a.length-1)    获取最后一个字符的索引值 
console.log(a[a.length-1]) 获取最后一个字符

字符串的加减乘除

遇到+号，除了数学运算还有可能是字符串的拼接，遇到减、乘、除先把字符串转化成number数据类型再计算

var a="xiaohui";
console.log(a+null);====>"xiaohuinull"
console.log("6"*"3")===>18
console.log("6"/2)===>3
console.log("6"-2)===>4

2-1-3、boolean 布尔值

A、定义：只有两个值：true\false

B、把其它值强制转化成布尔类型用

  • Boolean()

  • ！[值] -----------取反

  • ！！[值] -----------相当于Boolean（） C、其他数据类型转布尔值规则总结：

    只有以下五种值，转化后是false，其余都是true：
    0 NaN null "" undefined

Boolean("16px")
Boolean("0")
Boolean("null")

2-1-4、null 和undefined

A、相同点：

• 都是基本数据类型，都存在栈内存中，都表示空、没有的意思

B、不同点：

• undefined ：变量声明了，但是没赋值，默认值就是undefined

• null：表示一个变量，将来可能会指向某个对象，但是目前还不确定空间地址，可以先赋值为null,或者是主动释放对象的引用

C、以后具体的场景运用：

null 是空的对象指针:
    1、在我们不确定一个变量具体数据类型的时候，我们可以先赋值为null，后面可以再给具体的值。
    2、获取页面中不存在的元素时候
    3、如果我们想要清除对象的空间地址时候，我们可以赋值为null
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义，undefined 出现的场景：
    1、只声明了，没有定义
    2、在获取对象中没有的属性对应的属性值时
    3、函数里面给了形参，但是调用的时候，没有传实参
    4、函数没有设置返回值的时候

var num;
console.log(num); //undefined

var obj={"name":"xiaohui"}
console.log(obj.age)===>undefined

function total(n,m){
   console.log(n);//undefined
}
total()

function total1(n,m){
    var total=n+m
}

var a=total1(n,m);
console.log(a)=======>undefined

2-1-5、symbol 唯一

Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。每个从Symbol()返回的symbol值都是唯一的。

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1);
// expected output: "symbol"

console.log(symbol2 === 42);
// expected output: false

console.log(symbol3.toString());
// expected output: "Symbol(foo)"

console.log(Symbol('foo') === Symbol('foo'));
// expected output: false

2-1-6、BigInt 可以表示任意大的整数。

js里面单纯的数字是有一个范围的

可以在一个整数字面量后面加 "n" 的方式定义一个 BigInt ，如：10n，或者调用函数BigInt()。

const theBiggestInt = 90071992547499999n;

const biggest = BigInt(90071992547499999);
// ↪ 9007199254740991n

2-2、引用数据类型

2-2-1、Object 对象数据类型

A、定义：把多组键值对用大括号包起来 ,并且属性与属性之间用“逗号”进行分割

B、语法：

var obj={
      属性名1：属性值，
      属性名2：属性值
       ......
}
var obj={
   "name":"xiaohui",
   "age":18
  
}

C、属性名和属性值

• 属性名：就是用来描述某种特征或者特点的名字，（又被称作键，key）

• 属性值：就是这个特征的具体值（又被称作值，value）

• 合称键值对

D、基本操作：增、删、改、查

  • 1、【获取】：属性值的获取
    • 对象的属性名一般都是字符串格式(还可以是数字格式)，属性值可以是任意类型数据
    • 对象.属性名
    • 对象['属性名'] 注意：如果对象里面没有这个属性名，得到的值就是“undefined”
var obj={
   "name":"xiaohui",
   "age":18
}

console.log(obj.name);
console.log(obj["name"])
  • 2、【增、改】

如果原来的对象中没有那个属性名，就是新增，如果有就是修改

var obj={
   "name":"lili",
   "age":18
}
obj.name="dawei";====>修改
obj.sex="男"=====》 增加
console.log(obj)
  • 3、【删除】
  • 彻底删除 delete 对象["属性名"]
  • 只是让对象中的属性值为空， obj【"属性名"】=null；
var obj={
   "name":"xiaohui",
   "age":18
}

delete obj["age"];
obj.name=null;
console.log(obj);
  • 4、思考
var obj={
    name:"xiaohui",
    age:18
}
var name="changfu";
console.log(obj.name);
console.log(obj["name"]);
console.log(obj[name]);
  • 5、属性名是数字格式 对象的属性名只能是数字或者字符串，如果是数字的话不能用obj.数字，会报错： Uncaught SyntaxError: Unexpected number； //语法错误
var obj={
    name:"xiaohui",
    age:18,
    0:100
}

console.log(obj[0]);===>100
console.log(obj.0);====>Uncaught SyntaxError: Unexpected number

六、浅谈js运行机制（堆栈内存和不同数据类型的操作方式）

1、堆（heap）栈（stack）内存

浏览器加载页面，运行代码的时候：

  • 每打开一个页面，就会从计算机的内存条中分配出两块内存：堆内存（heap）和栈内存（stack）
  • 堆内存（heap）：
    • 主要存放引用数据类型的值
  • 栈内存（stack）：
    • 给代码提供可执行的环境
    • 存贮基本数据类型的值

2、思考

var a=12;
var b=a;
console.log(b);
var obj1={"name":"lili","age":12};
var obj2=obj1;
obj2.age=18;
console.log(obj1.age);

3、分析

1、浏览器打开页面的时候会划分两块内存，堆内存和栈内存：

  • 栈内存的作用：

    • 1、给js提供一个可运行的环境
    • 2、存储基本数据类型的值

  • 堆内存的作用：

    存放引用数据类型，对象的话存贮的就是键值对，如果是函数，把整个函数当成字符串进行存储 2、代码自上往下执行 （之前还有一个变量提升阶段，会在以后分享）

     ====》  基本数据类型：存在栈内存中，  按值操作
 ====》  引用数据类型的值比较复杂，存在堆内存中，按引用地址的操作

3、赋值操作的三步曲：

  • 先创建值
  • 再创建变量
  • 最后把创建的变量和值关联在一起 练习题

1、

var a={
        n:12
      }
var b=a;
b={
    n:13
  }
console.log(a.n);

2、

var obj={
    n:10,
    b:obj.n*10
}
console.log(obj.b);

3、

var ary1=[3,4];
var ary2=ary1;
ary2[0]=1;
ary2=[4,5];
ary2[1]=2;
ary1[1]=0;
console.log(ary1,ary2);
avatar
文章
阅读
粉丝