JavaScripts基础

Azureky
81 阅读12分钟

开发工具

常用的浏览器：谷歌、火狐

JS Typora也是用JS 来做的 JS能实现很多功能！

JS是轻量级的脚本语言，也是一种嵌入式语言，对象模型语言。JS的核心就是简单的两部分：

1.基本的js语法结构

2.标准库

JS这个要运行，要依靠宿主环境提供的API，才能实现其他复杂的操作和功能（例如浏览器就是一个最常见的宿主环境），另外还有服务器环境（操作系统）例如js可以运行在windows操作系统中

JS的强大也就体现在它能运用到很多宿主环境中

除了写不了硬件方面的操作，其他JS基本无所不能

JS代码的引入

  1. 将js代码写在HTML行内

  2. 写在script中

  3. 外部引入JS文件——注意这个时候再在script中写js代码，写了不报错但是也不会运行这个里面的js

注意：<script src='路径'></script>

JS的基本语法

变量

变量就是存储数据的容器

var h1=123,h3=345;

JS中的变量是区分大小写的 例如name与Name是两个不同的变量

注意变量的名字：只能由数字、字母、_(下划线)、$组成 且不能以数字开头

数据类型

数值、字符串、布尔、undefined、null、对象

数值和字符串

注意字符串要用英文的单引号或者双引号引起来

var str = '123';

Number 类型：

·数值字面量:数值的固定值的表示 法 1101024 60.5

·浮点数

.。浮点数的精度问题

浮点数

var n = Se-324;//科学计数法 5 乘以 1 0 的 -324 次方

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数

var result = 0.1+ 0.2;//结果不是 0.3，

而是 :0.30000000000000004console .log(o.07 * 100);

不要判断两个浮点数是否相等

·数据范围

最小值:Number .MIN-VALuE，//这个值为:5e-3245乘以10的-324次方

最大值:Number.MAX_VALUE，//这个值

为:1.7976931348623157e+308

无穷大:Infinity

无穷小: -Infinity

如果要在字符串中国使用引号 要加转义字符\

var str = '你好，我是'xxx'';

'我喜欢 "黑马"'程序员''

打印空格使用\b

如果想打印出一个\ ==> 就应该输入\\

其他数据类型

  • 获取字符串的长度：length 属性用来获取字符串的长度

    var str =’黑马程序猿Hello wor ld ' ;

    console.log(str .length);

  • 获取变量的类型：Typeof

    var age = 18;

    console . 1og(typeof age);// ‘ number '

  • 字符串拼接：

    字符串拼接使用＋连接

    1.两边只要有个是字符串，那么+就是字符串拼接功能

    2.两边如果都是数字，那么就是算术功能。

    ​

    //+既可以作为数学运算使用也可以作为字符串拼接使用

    //从前往后进行运算，如果两个变量都是数值型那么加号作为数学运算符

    //直到遇到一个字符串，此后所有的加号都是字符串拼接

    例如：12+34+'56'==> '4656'

    ​ '12'+34+56==>'123456'

  • Boolean 类型

    Boolean字面量：true 和 false,区分大小写

    计算机内部存储：true 为 1，false 为 0

  • Undefined 和 Null:

    1. undefined 表示一个声明了没有赋值的变量，变量之声明的时候值默认是undefined

    2. null 表示一个空**(空对象)**，变量的值如果想为 null，必须手动设置

  • 复杂数据类型：Object

    可以在谷歌浏览器中看到 字符串类型黑色显示，数值类型&布尔==>蓝色，null&未定义==>灰色

其他类型转为字符串类型

其他类型转换成字符串类型的方法有如下几种。

1、toString()

var num = 5;

console.1og(num. toString());

2、String()

s.toString();

String() 函数存在的意义:有些值没有 toString(),

这个时候可以使用 String().比如: undefined 和 null

3、拼接字符串方式

num + "", 当+两边一个操作符是字符串类型,一个操作符是其它类型的时候，会先把其它类型转换成字符串再讲行字符串拼接，返回字符串。

##如何将其他类型转换为数值类型

1、Number()

//var a =＂ 1＂；

//var b = Number(a);

var c = Number(＂a＂) ==> NAN 表示非数字

var d = Number(null) ==> 0 特殊注意！

var e = Number (underfind);==> NAN

2、parseInt

如果是以数字开头的，那么可以帮你转，后面如果跟了不是数字的，就直接丢掉

var a = parseInt(＂2＂); ==>2 成功转化

var b = parseInt(＂23k＂); ==> 23

var b = parseInt(＂k23＂); ==>NAN

var c = parseInt(null); ==>NAN(注意现在已经不能转换)

var d = parseInt(underfind); ==>NAN

3、parseFloat

如果是以数字开头的，那么可以帮你转，后面如果跟了不是数字的，就直接丢掉

var a = parseFloat(＂1.23df＂); ==>1.23

var b = parseFloat(＂1.3.4.5＂); ==>1.3

var c = parseFloat(＂h34＂); NAN

var d = parseFloat(unll); NAN

var d = parseFloat(underfind); NAN

布尔类型转换

var b =Boolean(0); ==>false

var b1 =Boolean(2); ==>true

关于字符串转为布尔型：只要字符串里面有东西 那么都为true 只有个空格也算有东西

var a =Boolean(‘0’); ==>true

var c =Boolean(‘2’); ==>true

var f =Boolean(' ') ==>true

var d =Boolean(null); ==>false

var e =Boolean(underfined) ==>false

JS操作符与运算符

自增自减(重要)：

案例 1：// var n1 = 5;

//++n1; n1变成了6

// var n2= 6;

//console.log(n1+ ++n2); ==>13

//console.log(n1); ==>6

//console.log(n2); ==>7

操作符在变量前面，先进行自身运算，再进行其他运算

案例 2：// var n1 = 5;

//++n1; n1变成了6

// var n2= 6;

//console.log(n1+ n2++); ==>12

//console.log(n1); ==>6

//console.log(n2); ==>7

操作在变量的后面，先进行其他运算，再进行自身运算

案例 3: var a=1;

var b= ++a + a++; ==>(++a)=2; a=2; b=(++a)+a=2+2=4; a=3

console.log(b); 4

console.log(a); 3

案例 4：var a =1;

var b = a++ + ++a; ==>(a++)=1; a=2; (++a)=3; a=3 b=1+3=4

Console.log(b);

Console.log(a);

逻辑运算符的优先级

先运算 && 再运算 ||

var a=1;

var b=2;

var c=0;

console.log(a || c && b) 结果为 1

注意啊！布尔运算的结果不是只能返回1或者0呀

逻辑或运算 a||b，从左边开始，返回第一个转化为布尔值后值为true的 表达式的运算结果，如果全部为false则返回最后一个表达式的运算结果

例如 var f == true && 22；

返回的是22（可以理解为：因为第一个已经是true了，决定在后面那个）

比较运算符

== != （不比较数据类型） var a = '2'; var b = 2; a==b是对的

=== !== 全等比较（比较数据类型）

JS是一种弱类型语言 ==> 变量的数据类型存在自动转换

运算符的优先级

1.（）括号优先级最高

2.++ -- ！一元运算符（只涉及到一个变量）

3.+ - * / %算数运算符（也是先乘除后加减）

4.关系运算符 > < >= <=

5.相等运算符 == != === !==

6.逻辑运算符 先&&后||

7.赋值运算 =

数组

1.字面量方式构建数组

var arr1=[ ];

var arr2=[1,'d'];

2.构造函数方式创建数组

var arr3 = new Array(1,'d');

  • 获取数组长度：arr3.length

数组里面能有数组；数组里又有数组的情况==>多维数组

var a1 = [1,4,'k','1'];

var a2 = [6,7,a1,'t'];（二维数组）

数组的维度可以无限

多维数组中元素的获取：

var a2 = ['路飞','那么美' ,['巴基’，'小丑',['乔巴'，'索降']]];

例如要获取'乔巴'：

['路飞','那么美' ,['巴基’，'小丑',['乔巴'，'索降']]] ==>a2[2]

['巴基’，'小丑',['乔巴'，'索降']] ==>a2[2][2]

['乔巴'，'索降'] ==>a2[2][2][1]

函数的声明和调用

问题：

1.回调函数是啥？

2.闭包是啥？

声明方式

1.关键字声明：

function 函数名(can1,can2,can3,...){

​ 代码

}

2.表达式声明：

var f(函数名) = function(can1,can2,can3,...){

​ 代码

}

注意：函数中return之后，不管有什么代码，都不会再执行

匿名函数与自调用

匿名函数：函数本身是没有名字的

例如：var fun = function(){

}

调用：fun(); ==>也就是将这个函数取过来加个小括号就能调用这个函数

将函数直接赋值给fun变量 后面直接拿这个变量名fun当作函数的名字

自调用函数(也叫做立刻执行函数)：用括号将这个匿名函数括起来==>表明这个一个整体 然后后面加一个括号表示调用这个函数。

(function(){

​ alert(123);

})();

函数本身也是一种数据类型 typeof fun ==> function

把函数当作参数传入

  1. 无参函数
function test1(Func){
    Func();
}

function test2(){
    alert("我是test2");
}

test1(test2);  //将test2这个无参函数传递给test1
  1. 有参函数
function test1(Func){
    Func(mydata);
}

function test2(data){
    alert(data);
}

test1(test2("hello"));  //将test2这个无参函数传递给test1

3.匿名函数

function test1(Func){
    Func("hello");
}

test1(function(data){
    alert(data);
});  //这里就是传进了一个匿名函数

把函数当作返回值传出

把函数返回到外面才执行

function test(){
    let say = function(){
        console.log('Hi');
    }
    return say;
}

let fun = test();
fun();

变量提升

JS代码的运行分为两个阶段：

1.解析阶段：语法检查==>变量及函数进行声明

2.运行阶段：变量的赋值==>代码流程的执行

console.log(a);   ==>  var a;
var a=2;               console.log(a); 
                       a=2;

变量提升的意思就是：在代码流程运行之前，变量已经在解析阶段被声明了

作用域以及变量提升总结

如果函数声明和变量声明重名了，那么函数声明会覆盖变量声明

原因：变量提升==>导致变量声明在前，函数声明在后，因此覆盖

但是：最后console.log(a)==>1 这是因为赋值a=1在声明函数之后，所以又覆盖

作用域链（考点）

原理就是：如果在当前作用域中找不到这个变量，那么就一层一层（向上级作用域）向上找变量，在哪里先找到了就用哪个（到头可以找到全局作用域，要是还没有就会报错），这个过程形成的链条就叫做作用域链。

JS中的对象

对象的声明及使用

对象声明中，是以键值对的形式表示的

1.字面量声明对象（对象中数据都是键值成对存在的）

var obj1 = {age:12,tall:180,name:'hoho',fly:function(){}};

2.实例化方式声明对象（内置构造函数）

var obj2 = new Object();

3.实例化自定义构造函数方式声明对象：

自定义构造函数：

function Fun(){

}

实例化自定义构造函数:

var f = new Fun();

var obj2 = {
   age:12,
   tall:190,
   name:'hoho',
   fly:function(){
       console.log(3);
   }
}

获取对象的属性或方法：对象.属性名

console.log(obj2.tall);

obj2.fly();

this是个对象（this永远指向的是一个对象）

重点：

this在什么情况下指向什么对象？

this.属性名

方法中的this就是这个方法所在的对象

注意，在普通函数中也是有this的，这个this指向全局对象（window）

function f(){
   console.log(this);
}

this的指向

this运行在哪个对象下（被哪个对象调用），就指向哪个对象

1702871281593.png

在这里输出age=16;

虽然this是写在o1下的，但是在o2中，o1.fun已经被当作一个值传递给了o2，然后o2.fun()调用这个fun()函数，因此是o2调用的，所以指向o2，所以返回o2.age ==> 16

对象的遍历及删除

for ... in 可以用来循环遍历对象、循环遍历数组

for(键 in 对象) 遍历对象

for (var k in obj1){
	console.log(o1[k]);
}

for (var k in arr){
    console.log(arr[k]);
}

删除对象中的属性：

delect obj1.age;

包装对象

三种原始类型：数值、字符串、布尔

（在一定条件下可以自动转为对象类型）==> 称为包装对象

例如：var v1 = new Number(123);

​ console.log(v1);

这三种原始类型，可以自动当作对象来调用，可以调用各种属性及方法

如果包装对象使用完成，会自动立即销毁

var a ='234';

a.length; 在.的这一刻 自动变为对象

标准库对象（内置对象）

一般就是包装对象的父对象

Math数字对象

Math.abs( )取绝对值

var n = -2;
var n2 = Math.abs(n);
console.log(n2);

Math.random( )返回一个浮点数，返回的随机数范围是[0,1)

想要返回范围在(a,b]之间的值：

Math.random( )*(b-a)+a

时间对象

//与Math不同 这里要实例化构造函数获取时间对象
var date = new Date(); 
console.log(n);

var n = Date.now();
console.log(n);
//返回的是从1970年1月1日00：00：00到现在经历的毫秒数

date.getHours() ==> 获取小时数

date.getDate() ==> 获取天数

date.getFullyear() ==> 获取年份

date.getMonth() ==> 得到的是当前月份-1（JS中的月份数组是从0开始的）

JS中获取的时间是计算机本地时间

Array数组对象

arr.push(k); ==>向数组末尾添加数组k

arr.pop(); ==> 将数组末尾的数字删除一个

以下方法不会改变现有的数组，而是建一个新数组：

  • 浅拷贝（数组的复制）：

arr2 = arr.slice(2,4) 复制下标[2,4)的数

  • 数组合并：

arr3 = arr.concat(arr1)

  • 将数组中的元素连接成一个字符串:

默认用逗号隔开

arr.join(); ==> 1,2,3,4

arr.join('-'); ==> 1-2-3-4

String字符串对象

str.indexOf('d'); ==> 返回字符串中第一次出现这个字符d的位置

str.substr(a,b); ==> 从下标a的数开始，往后shub个数，把这些数截取出来

str.toLowerCase(); ==> 全部字符转为小写

str.toUpperCase(); ==> 全部字符转为大写

str.replace('a','k'); ==> 返回：字符串中的‘a’全部替换为‘k’（原字符串不会改变）

str.trim();==>从一个字符串两端删除空白字符 包括空格 回车键等（在让客户输入密码时有用）

@author：Azuerky

ps: 第一篇js的笔记整理，之后还会更新js重点以及react笔记，欢迎各位大佬指正==

avatar
文章
阅读
粉丝