js基础总结

已于 2022-07-21 22:28:29 修改
阅读量516 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2021-12-11 10:17:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48943782/article/details/121869576
版权
本文详细讲解了JavaScript的书写方式，包括行内JS、内部JS的使用，以及变量、常量、数据类型（基础和引用）、运算符、流程控制和数组、函数、对象、字符串等核心概念。深入解析了控制台输出、数据类型转换和运算符优先级，适合初学者理解JavaScript基础结构。
摘要由CSDN通过智能技术生成

一、js的书写方式

  • 行内js

  • 内部js

我们的JS如果是内部 也需要写到script标签中
script标签中的代码 当页面加载的时候 就会执行
script标签可以写在 html 页面的任何位置，包括 html标签外

类似于 alert confirm prompt 这三个语句 优先级别最高
它们会阻塞代码的运行 你如果不结束他们 后面的代码就不会走

  • 外部js

一旦script标签作为引入外部JS的时候 那么 其包裹的代码 将作废

二、JS中的输入和输出

1）输出
  • 控制台位置的输出
  • 页面上的弹出
  1. 控制台输出
 // 普通输出
 console.log("这是一条普通的消息");

 // 警告输出
 console.warn("这是一条警告输出")

 // 错误输出
 console.error("这是一条错误输出");
  1. 弹出输出
 //2.1普通弹框(alert)
 window.alert("这是一个普通的弹窗")
 alert("这是一个弹出")

 // 2.2具有选项的弹框(confirm)
 window.confirm("这是一个有选项的弹出")
 confirm("这是一个有选项的弹窗")

 // 2.3具有输入的弹框(prompt)
 window.prompt("这是一个有输入的弹出");
 prompt("这是一个有输入的弹出")

三、变量和常量

1. 含义：

常量则是不会改变的量
常量还有一种叫法 字面量
1 2 3.14 77 99 88 这都是常量

常量的修饰词
const PI=3.14;
// 这里用const声明的量 叫常量
// 开辟了一个新的空间 给这个空间命名为PI 这个空间里的值是3.14 
// 这个空间的类型 是一个常量 空间里面的值不能发生改变
console.log(PI);
PI = 3.15;//这里就会报错 因为常量 不能改变
console.log(PI);

变量就是用来存储数据的 数据又是存在内存中

name—wangcai
这里的name就是我们给内存空间起的别名
每一块内存空间 都有地址 如果说你想操作这块内存空间中的数据
通过地址访问这个内存空间
实际上说的对别名的操作 name=lisi 实际上是对内存空间进行操作

// 1.定义变量的第一种方式
a=1;//是直接将a定义到了window上面
console.log(a);
// 少了修饰词

// 2.定义变量的第二种方式
var b=1;//将a定义到了vo中  主栈
console.log(b);

// 3.定义变量的第三种方式
let c=1;
console.log(c);
2. 变量的注意事项：
1) 声明变量和定义变量的区别
var name="wc";      //定义一个变量
var age;            //声明一个变量 

//如果声明了一个变量，但是没有给他值
//请问 它的值是什么？undefined
2) 定义变量的2种方法
var name="wangcai";

var age;
age=18;
console.log(name,age);
3) 不使用var声明变量
//此时的a叫全局变量
a=1;
4) 全局变量和局部变量的分界点是函数
 var a=1;       //此时你的a是全局变量

 function fn(){
     var a=2;   //这里的a是在函数内部定义 所以是局部变量
     console.log("函数执行了");
     console.log(a);
 }
5) 如何一次性定义多个变量
var a=1,b=2;//等价于 var a=1 ;var b=2

var c=d=1; //等价于 var c=1 ;d=1

四、js中的数据类型

  • 五种基础数据类型

1.数字型 number
2.字符型 string
3.布尔型 Boolean
4.undefined
5.null

  • 三种引用数据类型

1.数组 array
2.函数 function
3.对象 object

  • typeof

判断数据类型 (基础数据类型)
是运算符 右结合性

number 数据类型
1)最大值和最小值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(10/0);//Infinity无穷大
console.log(-10/0);
2)进制
// 10进制 16进制 8进制 2进制
    var c=110;
    console.log(c);//此时的C是10进制
    var d=012;
    console.log(d);//0表示什么  八进制 
    var e=01476;
    console.log(e);//0表示8进制 6*8^0+7*8^1+4*8^2+1*8^3
    // 0001100111110
    var f=0xa;
    console.log(f);//0x开头的是16进制
3)NaN ：Not a Number
    // 如何判定一个变量是否是NaN
    // isNaN
    console.log(isNaN(10*"abc"));
    console.log(c == d);//false
    console.log(c  = d);//10
4)在JS中 尽可能不要对小数进行运算
// 因为对小数运算的时候 会默认的转成2进制 但是小数转成2进制之后 和原本的数据 不等价
// 如果说你想对小数运算 先把小数变成整数 
// 一些简单的运算符 == === > < >= <= 得到的结果都是布尔类型
// console.log(Number);
undefined 和 null
<script>
    var a;
    console.log(typeof a);  //undefined

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

    var c=undefined;
    console.log(c);   //undefined
    console.log(typeof c);//undefined
</script>

五、数据类型转换

1.转换成字符串类型

方法：

a.通过toString(函数)
b.通过 + - (运算符)
c.通过构造器(强制类型转换)（显示类型转换）

a.通过toString(函数)转换

  • 将数字转成字符串
    var a=123;
    console.log(a.toString());
    console.log(typeof a.toString());

    console.log(String(a));
    console.log(typeof String(a));
  • 将布尔转成字符串
    var b=false;
    console.log(b.toString());
    console.log(typeof b.toString());
  • 将undefined转成字符串
    var c;
    // undefined使用toString 不行
    // console.log(c.toString());
    // console.log(typeof c.toString());
    // String构造器
    console.log(String(c));
    console.log(typeof String(c));
  • 将null转成字符串
    var d=null;
    console.log(String(d));
    console.log(typeof String(d));

b.通过 + - (运算符)转换

    var aa=1;
    var bb=1;
    console.log(aa+bb);//这里的+ 是相加运算符
    var cc="hello";
    var dd="js";
    console.log(cc+dd);//hello js  此时的+起的是 拼接字符串的作用
    console.log(aa+cc);//此时的+ 拼接 1hello 隐式类型转换
    // 在JS中规定 +左右两边的数据类型不一致的时候 就会将数据变成一致后在计算
  • 注意
    // 注意点1 不能对数字直接toString
    // console.log(123.toString()); 不能直接对数字进行toString
       console.log((123).toString());//如果真的想这样做 给数字+括号
    // 注意点2 
    console.log((123).toString(2));
    // 将123转换成二进制数字所对应的字符串
2.转换成数字类型

转数字的方法 3种
1)构造器 强制类型转换
2)运算符 + -
3)parseInt parseFloat

1)构造器 强制类型转换

  • 字符串转数字
// 字符串是数字字符串
    var a="123";
    console.log(Number(a));  //123
    console.log(typeof Number(a));//num

// 字符串是空串
    var b="";//0 空串转成数字 就是0
    console.log(Number(b));
    console.log(typeof Number(b));

// 有数字有字符
    var c="1x2c";//NaN 有字符有数字 通过构造器转过来的就是NaN
        console.log(Number(c));
        console.log(typeof Number(c));
  • 布尔转数字
 var d=false;  //false 0
 var e=true;   //true 1
 console.log(Number(d),Number(e));
 console.log(typeof Number(d),typeof Number(e));
 console.log(Number(c==d));
  • undefined转数字
 var f; //NaN
 console.log(Number(f));
 console.log(typeof Number(f));
  • null转数字
 var g=null; //0
 console.log(Number(g));
 console.log(typeof Number(g));

2)运算符± 转换

 // 1.和字符串搭配
 var aa="111"
 console.log(+aa);  //111
 console.log(typeof  +aa);  //number
 console.log(typeof  -aa);  //number
 // +相加运算 +拼接字符 +隐式类型转换
 var bb="";   
 console.log(+bb);   //0
 console.log(-bb);	 //-0
 console.log( typeof +bb);
 var cc="1c2x";
 console.log(+cc);   //NaN   
 console.log(-cc);	 //NaN
 console.log(typeof +cc);

 // 2.和布尔搭配
 console.log(+false);//0
 console.log(typeof +false);//number
 console.log(+true);//1
 console.log(typeof +true);//number

 // 3.和null搭配
 console.log(+null);//0
 console.log(typeof +null);//number
 console.log(-null);//-0
 console.log(typeof -null);//number

 // 4.和undefined搭配
 console.log(+undefined);//NaN
 console.log(typeof +undefined);
 console.log(-undefined);//NaN
 console.log(typeof -undefined);

3)parseInt parseFloat 转换

 // 1.以数字开头的字符串
 var aaa="1x2c";
 console.log(parseInt(aaa));//1
 console.log(typeof parseInt(aaa));//number

 // 2.以字母开头的
 var bbb="x1c2";
 console.log(parseInt(bbb));//NaN
 console.log(typeof parseInt(bbb));//number
 var ccc="3.1415926asd"
 console.log(parseInt(ccc));//3
 console.log(parseFloat(ccc));//3.1415926
3.转换成字符串类型

0
NaN
undefined
null
空串
转换成字符串是 false 其余都是true

六、js中的运算符

1.算术运算符

运算符有优先级别
先* / 后+ -
如果优先级别一样的时候 从左往右
= 赋值运算符 右结合性 从右往左

1) 加法运算符
  • 任何非数值类型的数据参与加法运算之前，都会隐式转换成数值类型后在参与运算
  • 任何数据和NaN运算后，结果都是NaN
  • 任何数值类型和字符串相加后，+都会变成字符串拼接运算符，而不是相加运算符
2) 减法运算符
  • 任何非数值类型的数据参与减法运算之前，都会隐式转换成数值类型后在参与运算
  • 任何数据和NaN运算后，结果都是NaN
  • 任何数据和字符串相减后，都会把字符串变成数值类型后在运算
特殊：
console.log(-"1ab");//NaN
3) 自增自减运算符

需要注意的是 常量不能++ 或者–
console.log(1++);
console.log((1+1)++);

 // 自增运算符 ++ 让数据+1
 // 自减运算符 -- 让数据-1
 var num=10;
 console.log(num+1);//11 这里并没有改变num的值
 console.log(num+=1);//11  num=num+1 num=11 整体的值是右值
 console.log(num++);//11 此时的num是11 所以旧值是11 所以num++整体的值是11
 console.log(++num);//13  此时到这里的时候 num的值是12
 // num++ 整体值是旧值
 // ++num 整体值是新值
4) 关系运算符

< > >= <= == === != !==
只要是运算符 就有一个整体的值 对于关系运算符来说 整体的值是true或者false
注意点：

1.对于非数值类型的数据来说 都会先转成数值类型进行判断
2.对于关系运算符来说 任何数据和NaN做对比 结果都是false
3.如果参与比较的双方都是字符串类型，那么不会转换成数值作比较 而是转成对应unicode编码作比较

5) 三目表达式

表达式1 ? 结果1 : 结果2
如果表达式的值为 true 那么整体的结果就是结果1
如果表达式的值为 false 那么整体的结果就是结果2

七、js中的流程控制

  1. if 判定条件框中 最后都会转成boolean
  2. 在判断的时候 常量可以写到==的左边 但是我们一般情况下 不这样写
    但是常量不能写赋值运算符的左边
if(123 == a){
    console.log(2);
}

//常量不能写赋值运算符的左边
if(123=a){
    console.log(3);
}
  1. if语句后面的{}不写的时候,如果条件成立,只会执行if后面的第一条语句 也就是说相当于给第一条语句加了一个{}

数组

如何创建数组
  1. 直接声明
  2. 可以通过构造器来创建数组
var arr=new Array(10)
// 这里的括号中的10 是数组的长度

// new出来的一定是一个对象 所以你说数组是对象 也没问题
console.log(typeof arr); //object

// 通过new创建数组的时候 如何直接给值
var arr1=new Array("1","2","3")
如何给数组赋值
  1. 可以在定义的时候 直接赋值
var a=[1,2,3]
  1. 可以通过下标来赋值
var a=[];  //堆空间
a[0]=1; 
a[1]=2;
数组的增删改查
增(push && unshift)
 var arr=["hello","js"];
 // push 添加的位置是最后
 arr.push("666")

 // unshift 添加的位置是最前面
 arr.unshift("我是老大");
删(pop && shift)
 删除后面元素 pop()
 // ()里不需要写参数
 // pop()整体的值是我们删除掉的元素
 var arr=["hello","js","666"];

 前面删 shift()
 // shift()整体的值是我们删除掉的元素
 console.log(arr.shift());//hello

 var arr1=[1,2,3,4,5,6,7,8,9,10,13,15,16,19];
 删除指定位置的元素 splice()
 // splice(),有两个参数,第一个参数我们要删除的下标的位置,删除几个
 // 注意点 splice删除一个元素后，数组中下标对应的值都发生了偏移
 arr1.splice(0,1)
查 ( indexof )

indexof 就是查找你这数组中有没有这个元素 如果有返回元素的下标 如果没有返回 -1

 var arr=[1,2,3,4,5,6,7,8,9,10];
// 查这个数组中是否有6
 for(var i=0;i<arr.length;i++){
     if(arr[i]==6){
         console.log("有");
     }
 }

 if(arr.indexOf(12)!= -1){
     console.log("有");
 }else{
     console.log("没有");

函数初识

如何声明一个函数
  1. function 函数名(){}
  2. var a=funtion(){}
  3. var b=new Function(‘x’,‘y’,‘return x+y’)
返回值

返回值会返回到 函数调用处
如果一个函数没有返回值，那么它的默认返回是 undefined
return 后面的代码不会执行

对象

什么是对象？

对象是属性的无序集合

创建对象
var person={
    // 对象上的属性
    name:"zhangsan",
    age:"15",
    sex:"man",
    height:"186cm",
    weight:"75kg",
    // 对象上的方法
    say:function(){
        console.log("我是"+this.name);
    }
}
访问对象上面的属性
  • 通过打点调用对象上的属性
console.log(person.name);
  • 通过方括号，属性名
console.log(person["height"]);
对象属性的增删改查
 // 增
 person.address="bj";
 // 访问一个对象上没有的属性的时候 就是undefined

 // 删
 delete person.address;

 // 改
 person.name="lisi"

字符串

字符串可以像数组一样访问

  var str="asd"
  console.log(str[0]);//1

  var str1 = new String("hello js")
  // new出来的一定是一个对象
  console.log(str1.toUpperCase());
  console.log(typeof str);
  // 立即封装
  console.log(str.toUpperCase());
  console.log(typeof str);//string
split分割

split 分割 将字符串按照指定的标识符进行分割
var newArr=str.split(“,”)

join拼接

将数组中的每一项进行拼接,中间的连接单位 是你的参数
console.log(newArr.join(" "));

阿飞学不会吖
关注
JavaScript基础知识总结
qq_56756602的博客
08-21 666
基本语法（数量，数据类型和运算符）、逻辑分支语句、IF 条件分支结构、SWITCH 条件分支结构、三元运算（扩展）等、程序的三种结构、循环语句（while 、do-while 、for）及跳转语句（break与countinue的区别 ）计数器和break与continue的连用、document.write()等、JavaScript的函数、函数的封装（有参、无参、有无返回值的基本用法）、预解析、函数的作用域、变量使用规则、作用域链、递归函数以及简单的了解对象,数组的运用
JS基础总结
02-28
这篇文档适合刚接触JS和对JS知识点不熟悉的同志。新手的话可以边学边参考文档；有一定基础的可以查漏补缺，便于复习和查阅。
JS基础总结 （针对初学者总结）
岁月如歌去，十年弹指间
05-28 614
JS易遗忘点总结 1.js引入方式 （1）外部引入 &lt;script src=”index.js”&gt;&lt;script&gt; （2）写在HTML内 （3）写在&lt;script&gt;内 2. js基本数据类型 （1）numberstring Boolean undefined null 对象 symbol 3.创建方式 （1）...
JavaScript基本知识总结(全)_js基础知识点总结
2401_84434331的博客
07-12 890
/对象的实例创建//直接量创建总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了使用通过调用函数来使用。比如：sum（）注意:在声明函数的前后都可以调用。JS可以在任何位置进行调用函数 当调用该函数时，会执行函数内的代码函数可以不带参数,参数可以写多个,用逗号隔开5,函数的类型。
js基础知识总结
5big的博客
08-07 298
一、js的简介         js(JavaScript的缩写) 是 Web 脚本语言，可用于 HTML 和 web。可在web中增加设计效果，校验表单，辨别浏览器，建立cookies等，可适用不同的主流浏览器。 二、js的基础知识 1.js的引入html的两种方式 (1).直接写在html中，要写在 与 标签之间。 可写在head中，确保函数被调用前已经加载完成 也可写在
JS 总结
lduzhenlin的专栏
05-04 1170
目录 JS 语言基础 JS 简介 JS 注释 JS 基本数据类型 JS 类型转换 JS 运算符 JS循环语句 JS事件 JS 对象 JS BOM Window Navigator Screen History Location JS DOM HTML DOM节点概念 HTML DOM 节点属性 HTML DOM 元素节点操作 HTML DOM 节点的增删...
读书笔记：Javascript基础总结Dom事件原生函数正则.zip
最新发布
07-19
读书笔记：Javascript基础总结Dom事件原生函数正则
JavaScript基础知识总结.xmind
02-23
通过思维导图的方式，快速了解掌握JavaScript的基本内容
js总结
&&&思考中前行～～
05-09 2905
1javascript基础：         (1)javascript是什么，能做什么事情？             javascript是网景公司开发的用于与页面进行交互的脚本语言。javascript程序在浏览器端运行，一般写在.js结尾的文件中。             主要的功能是：                 a.表单验证（前端验证），即对用户的数据进行验证。比如用户名是否
JS总结（大全）
04-22
JS总结JS总结JS总结JS总结JS总结JS总结JS总结JS总结JS总结JS总结JS总结
js基础知识点总结-入门级别
05-31
js基础知识点总结-入门级别，适合初学者。
JS总结(一)
随便吧
03-29 669
1.前端校验用js实现，后台校验用各种语言实现。2.java对大小写敏感且使用Unicode字符集。3.函数内部用var声明是局部变量，只能在函数中使用，函数外声明或者不带var(即使在函数内部)为全局变量，网页上的所有脚本和函数都能访问它，页面关闭后被销毁，设置的全局变量或函数，可覆盖window对象的变量或函数。4.===直接进行比较，==会尝试的进行类型转换document.getEleme...
JS基础知识总结
LYONEF的博客
09-17 3176
Day01初识js 一、如何编写js 1、前端的应用：网页开发（html+css+JavaScript）、app开发、移动端开发、游戏开发、服务器开发、可视化数据开发 2、JavaScript：实现网页交互的脚本语言 3、交互：用户输入数据->程序接收并处理数据->返回处理结果 《—| 4、如何编写js： 1. 通过浏览器窗口编写 2. 通过html页面中的script标签内部进行JavaScript编写 3. 通过通过script标签的src属性引入js文件 二、js代码运行顺序 1
Js基础知识总结
qq_43403676的博客
04-25 3915
Js基础知识包括逻辑运算符、比较运算符、条件运算符数据类型等
JavaScript基础概述与核心技术点总结
本资源是一份全面的JavaScript基础总结，涵盖了该编程语言的关键知识点，旨在帮助学习者和开发者更好地理解和应用JavaScript。主要内容包括： 1. JavaScript概述： - JavaScript是客户端脚本语言，由Netscape公司...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值