JavaScript学习笔记(一) JavaScript 快速入门

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量560 收藏 1
点赞数 1
分类专栏： JavaScript 笔记 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Late_whale/article/details/107715713
版权

文章目录

JavaScript入门

请永远保持一颗怀疑之心，因为文字所记录的，不一定是真实。---- 布拉德·瑞德

基础知识

变量

JavaScript定义变量时不需要指定其类型，用关键字var声明即可，变量名不能为JavaScript中的关键字，不能以数字开头；

var name；//声明变量name，未赋值的变量值均为undefined
var age=20；
var sex=’女‘；

输出

通常使用浏览器console控制台(浏览器中F12,选择console)调试JavaScript代码

//所有语言的入门仪式
console.log("Hello JavaScript")
//代码输入后 按下回车即可

在这里插入图片描述

输出变量

var name="JavaScript";
var sex;
console.log("Hello "+name);
//console.log(age);//未声明的变量 会报错
console.log(sex);//未赋值的变量 输出为undefined

在这里插入图片描述

注释

//单行注释

/*
多行注释
*/
数据类型
数值

JavaScript中数值没有int，float之分；统一用Number；使用和其他语言一样

var a=20; //整数
var b=20.0; //浮点数
var c=2.0e1; //科学计数法
var d=NaN; //非数字
var e=Infinity; //无穷大
console.log(a,b,c,d);
//所有的运算与其他语言一致
console.log("a+b:",a+b);
console.log("a-b:",a-b);
console.log("a*b:",a*b);
console.log("a/b:",a/b);

在这里插入图片描述

字符串

JavaScript和python一样，单引号和双引号都可用于标识字符串

var name='JavaScript'; //单引号
console.log(name);
name="JavaScript"; //双引号
console.log(name);
name="'字符串中有单引号'"
console.log(name);
name='"字符串中有双引号"'
console.log(name);
//通过转义字符\来取消单、双引号的意义
name='字符串\'中既有单引号\"\"又有双引号'
console.log(name);

在这里插入图片描述

多行字符串

//用反引号(位于tab键上)标识多行字符串(ES6标准，有些浏览器可能不支持)
var str=`多行
字符串
一`;
console.log(str);
//在每一行的后面加\n
var str='多行\n'+
'字符串\n'+
'二';
console.log(str);

在这里插入图片描述

模板字符串

ES6(需要浏览器支持才行)新增一种模板字符串来方便字符串拼接

var name="Maria";
var place="CSDN";
var str=`Hello ${name}, this is ${place}`;
console.log(str);

在这里插入图片描述

字符串索引

字符串和数组一样，可以通过索引来访问其中的元素

var str=`Hello, this is csdn`;
console.log(str[0],str[5]);
//超过索引的下标不会报错，返回值为undefined
console.log(str[str.length+1],str[str.length+1])

在这里插入图片描述

JavaScript中字符串不可变，直接对字符串元素进行修改后不会有任何效果

var str=`Hello, this is csdn`;
console.log(str[0],str[5]);
str[0]='M';
str[5]='o';
console.log(str[0],str[5]);

在这里插入图片描述
常用方法

这些方法不会改变源字符串的值，而是返回一个新的字符串

方法作用
toUpperCase()将字符串全变为大写
toLowerCase()将字符串全变为小写
indexOf()返回指定字符串在目标字符串中出现的位置
substring()返回指定索引区间的字符串

var str=`Hello, this is csdn !`;
//toUpperCase() 
console.log(str.toUpperCase(),str);
//toLowerCase()
console.log(str.toUpperCase() ,str);
//indexOf() 返回的是c出现的索引
console.log(str.indexOf('csdn'),str);
//substring()
console.log(str.substring(0,5),str);

在这里插入图片描述

布尔值

JavaScript中undefined(未定义)，null(空)，false(bool中的false)，0(数值0），NaN(非数值)，""或’’(空字符串，引号间无内容)bool值为false，其余全为true

console.log(!!"");//!!转化为bool运算
console.log(!!'');
console.log(!!undefined);
console.log(!!null);
console.log(!!false);
console.log(!!0);
console.log(!!NaN);

在这里插入图片描述

布尔运算符

运算符描述
&&，与运算双目运算符 参与运算的两个布尔值均为true，运算结果就为true
||，或运算双目运算符 参与运算的两个布尔值中有一个为true，运算结果就为true
!，非运算单目运算符，将参与运算的布尔值取反

比较运算符

常见的比较运算符有>,>=,<,<=;其按照逻辑返回true，false

console.log(2>1);//true
console.log(2>3);//false

相等运算符

运算符描述
==双等号在比较时会自动转换类型再进行比较
===三等号不会自动转化类型，类型不一致就返回false；一致再比较值
console.log(false == 0); // true
console.log(false == ""); // true
console.log(false === 0);// false
console.log(false === ""); // false

在这里插入图片描述

NaN的判断不能用相等运算符，常用isNaN()判断

console.log(isNaN(NaN)); // true

在这里插入图片描述

不限小数在比较时，也不能直接用相等运算符，常求差的绝对值小于某个极小数

console.log(1/3==1-2/3) //false
console.log(1/3==1/3) //true
console.log(Math.abs(1/3-(1-2/3))<1e-10) //true

在这里插入图片描述

数组

JavaScript数组中可以存放任意类型

var array=[1,-1,1.0,'1',true,null,NaN,[1,2,3]];
console.log(array);

在这里插入图片描述

array.length

array.length,返回数组的长度，修改array.lenth会导致数组元素个数的变化

var array=[1,-1,1.0,'1',true,null,NaN];
console.log(array.length);
array.length=10 //加大length 未定义的元素为empty
console.log(array);
array.length=5 //减小length
console.log(array);
array[7]=7;
console.log(array);

在这里插入图片描述

常用方法

方法作用
indexOf()返回指定元素在数组中的索引
slice()截取指定索引部分的数组元素，并以新数组返回
push()在数组的末尾添加元素
pop()删除数组末尾的元素
unshift()在数组的头部添加元素
shift()删除数组的第一个元素
sort()按默认顺序对数组元素进行排序
reverse()反转数组元素
splice()从指定的索引开始删除若干元素，再从该位置添加若干元素
concat()在当前数组后面加上另一个数组，并返回组合之后的数组(原数组不变)
join()将数组中每个元素用指定字符串连接起来并返回连接后的字符串
var array=[1,-1,1.0,'1',true,null,NaN];

/*
indexOf,slice,push,pop,unshift,shift
*/
console.log(array.indexOf(true)); //4
console.log(array.slice(2,4)); //索引从2到4不包括4  [1, "1"]
array.push('push'); //添加push元素到数组末尾
array.pop(); //删掉push元素
array.unshift('unshift'); //添加unshift元素到数组头部
array.shift(); //删除shift元素

/*
splice
*/
//删除索引从0开始的三个元素，并添加三个元素
array.splice(0,3,"Java","Pyhton","JavaScript");  //返回被删除的元素
//只删除 不添加
array.splice(0,3);  //返回被删除的元素
//只添加 不删除
array.splice(0,0,"Java","Pyhton","JavaScript");  //返回[]

/*
concat join
*/
var arrayTest=['test'];
array.concat(arrayTest); //返回array数组后接上arrayTest的新数组
array.join('-'); //返回类似A-B-C-D的字符串

多维数组

数组元素中又有数组即为多维数组

var array=[1,[2,3,4],5];
console.log(array[1][0])//2
console.log(array[1][1])//3
console.log(array[1][2])//4
对象

JavaScript 中对象与python字典类似，由{}包含多个键值对(逗号隔开)组成

//定义一个person对象
var person={
		name:'Maria',
		age:20,
		sex:"女"
};
console.log(person);
console.log(person.name); //通过.运算符访问属性
console.log(person.birthday); //不存在的属性 返回undefined

在这里插入图片描述

JavaScript 对象的属性可以动态增加或删除

var person={
		name:'Maria'
};
console.log(person.age); //undefined
person.age=20;
console.log(person.age); //20
delete age; //返回被删掉属性的值 20
console.log(person.age); //undefined
delete birthday; //删除不存在的属性没有任何效果

in操作符 可用于判断某对象是否拥有某对象

var person={
		name:'Maria'
};
console.log('name' in person); //true
console.log('age' in person); //false

对象会继承父对象的属性，如所有对象都含有object的属性；hasOwnProperty()用于判断是否是自身拥有的属性

var person={
		name:'Maria'
};
console.log('name' in person); //true
console.log('age' in person); //false
console.log('toString' in person); //继承而来的 true
console.log(person.hasOwnProperty('name')); //true
console.log(person.hasOwnProperty('toString')); //false

在这里插入图片描述

条件判断

JavaScript中也是if–else；if–else if–else 与java相同

/*
if--else
*/
if(条件语句)
{
	语句块;
}
else{
	语句块;
}
/*
if--else if--else 
*/
if(条件语句)
{
	语句块;
}
else if(条件语句){
	语句块;
}
else{
	语句块;
}

注意： if elseif …… else 语句中，只要判断到某个条件成立之后就不会继续执行了。

循环

for循环

与java类似的for循环

var array=[10,11,12,13];
for(var i=0;i<array.length;i++)
{
	console.log(array[i]);//循环输出数组中的值
	//10 11 12 13
}

for in

若对对象进行遍历则会将其所有属性输出

var person={
		name:'Maria',
		age:20,
		sex:"女"
};
for (var pro in person)
{
	console.log(pro);//循环输出对象的属性
	//name age sex
}

JavaScript中数组也是一个对象，数组中元素的索引就是其属性

var array=[10,20,30];
for (var index in array) {
    console.log(index); // '0', '1', '2' 这里遍历得到的string
    //console.log(typeof index); //typeof 用于判断类型
    console.log(array[index]); // 10 20 30
}

while循环

与java一致

while(循环条件)
{
	语句块；
}

do while循环

与java一致

do
{
	语句块；
}while(循环条件);
Map

Map是ES6新引入的数据结构，与python中字典结构类似，使用比字典方便许多

var person=[['kangkang',14],['ben',13],['linda',15]];
var map1=new Map(person) //用二维数组初始化
console.log(map1.get('ben')) //用键来求值 13
var map2=new Map() //定义一个空Map
map2.set('xiaoming',12); //添加键值对到Map中
map2.set('xiaoming',15); //对同一个key多次赋值，其value为最后一次的值
map2.get('xiaoming'); //15
map2.delete('xiaoming'); //删除该key-value对
Set

Set是ES6新引入的数据结构，Set中只有key没有value；set不会存放重复元素

//初始化与Map类似，用数组或空Set
var set1 = new Set(); // 空Set
var set2 = new Set([1, 2, 3]); // 数组
set1.add(4); //添加元素
set1.delete(4); //删除元素
Iterable

for of

JavaScript中Array Map Set都属于iterable类型，iterable类型可用for of进行遍历

/*
Map
*/
var person=[['kangkang',14],['ben',13],['linda',15]];
var map1=new Map(person) //用二维数组初始化
for(var value of map1){
	console.log(value) //['kangkang',14],['ben',13],['linda',15]
}
/*
Set
*/
var set1 = new Set([1, 2, 3]); 
for(var value of set1){
	console.log(value) //1,2,3
}
/*
Array
*/
var array=[10,20,30,40];
//for of 遍历数组的值
for(var value of array){
	console.log(value) //10,20,30,40
}
//for in 遍历数组的属性
for(var index in array){
	console.log(index) //0，1，2，3
}

注意： for in对数组遍历的属性，for of遍历的是数组元素的值

forEach()

iterable内置了forEach()方法，接受一个函数作为参数，每次迭代时自动回调该函数;

//Array
var array=[10,20,30];
array.forEach(function (element, index, array) {
    // element: 指向当前元素的值 位置first
    // index: 指向当前索引 位置second
    // array: 指向Array对象本身 位置 third
    //这三个参数位置在使用时需要对应好
    console.log('element = ' + element + ', index = ' + index);
    //lement = 10, index = 0 lement = 20, index = 1 lement = 30, index = 2
});

//Map
var person=[['kangkang',14],['ben',13],['linda',15]];
var map1=new Map(person) 
map1.forEach(function (value, key, map) {
	//value 当前键值对的值 位置first
	//key 当前键值对的键 位置second
	//map Map对象 位置third
    console.log(value);
});

//Set
var set = new Set([1,2,3]);
set.forEach(function (element, sameElement, set) {
 	// element: 指向当前元素的值 位置first
    // sameElement: 指向当前元素的值 位置second
    // set: 指向Set对象本身 位置third
    console.log(element); //1 2 3
});

注意： forEach官方的回调函数参数有三个，在使用时参数的个数没有限制，如果要使用到官方参数，则第一个参数就是element 元素的值，依次类推，比三个多了也没什么意义。

最后

可以关注一下我的公众号，最近开始写公众号，我会在上面分享一些资源和发布一些csdn上发布不了的干货；有问题也可以在公众号上留言
在这里插入图片描述

点个关注是对博主最大的支持

Late whale
关注
专栏目录
javaScript笔记总结1
xyyojl的博客
03-19 171
学编程,要勤奋 编程语言包括脚本语言 javascript直译式脚本语言:脚本语言现在其实是属于一个泛指,通过依赖一个解析执行器,不需要编译(解析这个语法的解析器) 动态类型:在我们运行时,我们变量的类型,声明变量的时候,不需要指定变量的数据类型,只需要赋值 弱类型:隐式类型转换 基于原型:/类:继承通过原型,具有灵活性 了解jsvascript的历史 javascript...
JavaScript学习笔记(二) JavaScript函数
Late_whale的博客 作者：代码搬运工老李的二师兄
08-03 551
JavaScript函数、作用域、常量、解析赋值、方法、装饰器、高阶函数、闭包、箭头函数、generator
JavaScript快速入门（学习笔记整理）
Chen_Sir____的博客
04-13 1109
JavaScript学习目录一、初识JavaScript二、怎样引入JavaScript文件1、直接写在需要的位置2、脚本块方式（同css）内联样式表3、引入独立的（同css外联样式表）三、JavaScript基本语法1、JavaScript中的变量2、JavaScript中的注释 一、初识JavaScript JavaScript是运行在浏览器上的脚本语言，简称js，不需要手动编译，以普通文档形...
JavaScript进阶之浅谈Set集合
YXGR
06-04 2353
JavaScript进阶之浅谈Set集合Set集合概述Set集合的属性和方法(常用)size属性add方法delete方法has方法clear方法forEach方法 Set集合概述 Set集合和Arry数组很相似，但是Set集合存储的是key也就是说Set集合中不可以存在两个值和数据类型都相等的key Set集合不可以用下标取值 Set集合没有length属性而是size Set集合可以通过Ar...
JavaScript第一章学习笔记
Jasmyn1的博客
04-24 2919
脚本语言 1、常见的脚本语言：JavaScript、VBScript、Perl、PHP、Python等； 2、非脚本语言：C、C++、Java、C#等 3、脚本语言与非脚本语言的区别： (1)非脚本语言一般需要编译、链接，生成独立的可执行文件后才能运行； (2)脚本语言依赖于解释器，只在被调用时自动进行解释或编译。 注意： 在编写JavaScript代码时，应注意基本的语法规则，避免程序出错，具体...
JavaScript入门基础速学笔记
17bdw的编程备份笔记
05-10 161
变量 关键字var var myVariable = ‘bob’; 数据类型 字符串 var myVariable = ‘Bob’; 数字 var myVariable = 10; 布尔 var myVariable = true; 数组 var myVariable = [1,‘Bob’,‘Steve’,10]; 对象 var myVariable = document.querySelector(‘h1’); 注释 //和/**/ 运算符 加减乘除 +、-、*、/ 赋值运算符 = 相等，测试
JavaScript入门(学习笔记)
FightingTang的博客
03-06 712
文章目录历史HelloWorldJS代码编写的位置JS语法注释符号字面量和变量变量声明标识符数据类型字符串数值型布尔型Null型Undefined型Object型基本数据类型和引用数据类型内存结构类型转换转为String转为Number（数值）转为Boolean运算符算数运算符一元运算符逻辑运算符赋值运算符关系运算符相等运算符条件运算符(三元运算符)运算符优先级typeof运算符in 运算符instanceof运算符代码块流程控制条件判断条件分支循环注意事项面向对象对象创建对象的属性遍历对象属性函数函数创建
JavaScript 入门 新手学习笔记
11-17
这篇"JavaScript入门新手学习笔记"提供了全面的学习资源，适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点： 1. **基础语法**：JS的基础包括变量（var、let、const）、数据类型（如字符串、数字、...
JavaScript学习笔记（一）
01-08
JavaScript学习笔记（一）主要介绍了JavaScript的基本概念、历史以及快速入门知识，包括如何引入JavaScript、基本语法、数据类型和严格模式。以下是对这些知识点的详细解释： 1. **JavaScript概述**： JavaScript...
JavaScript从入门到精通学习笔记
07-19
### JavaScript从入门到精通学习笔记 #### 一、JavaScript简介 **1.1 JavaScript是什么** JavaScript 是一种轻量级的编程语言，主要被用于客户端（浏览器端）的脚本语言，能够实现动态网页效果，增强用户体验。...
整理Javascript基础入门学习笔记
01-19
了解什么是变量？...在JavaScript中，一段信息就是一个值（value）。值有不同的类型，大家最熟悉的类型是数字。字符串（string）值是包围在引号中的一个或多个单词。 数字 任何数字值。数字可以带
JavaScript学习笔记
04-10
### JavaScript学习笔记 #### JavaScript简介 JavaScript是一种广泛使用的脚本语言，主要应用于Web前端开发，用来为网页添加交互性。JavaScript不仅可以操作HTML和CSS，还能处理数据、响应用户输入，并与服务器通信...
禁用chrome浏览器跨域请求拦截
Late_whale的博客 作者：代码搬运工老李的二师兄
07-27 2022
前言 之前在调用百度API境外路线规划时，在老师的帮助下(我自己还不会Ajax)使用ajax跨域请求来获取路线数据，但chrome对跨域请求却不怎么友好，虽然也能用，但我还是搜了一下怎么解决掉这个问题。 禁用流程 新建一个chromeUser目录 //如 E:/chromeUser 找到chrome的启动图标，一般桌面上就有chrome的启动图标 没有的就找到chrome的安装路径，然后自己创建一个快截方式即可 右键图标，选择创建快捷方式 在目标一栏中，输入(user-data-dir 即为
浏览器端调用百度API获取路线数据，手动实现境外路线规划
Late_whale的博客 作者：代码搬运工老李的二师兄
07-28 1064
前言 前两天老师带我们的nybike项目中，需要自己添加一个地图功能，我很幸运的选中了路线规划(之前我还一直以为可以像国内的那样，几句代码就可以实现了)，可现实很骨感，在经过无数次心力交瘁之后，才堪堪实现了这个破功能。 思路 申请ak 首先是申请一个服务端ak，因为浏览器端没有境外路线规划权限 百度地图应用创建 查看api 查看web API，弄清使用的方式 百度地图web API 总结： 通过http请求来获取路线数据，请求中起点终点经纬度必填，ak必填 观察数据 通过api中的例子，换上自己的ak，
JavaScript学习笔记(四) 运算符大全
Late_whale的博客 作者：代码搬运工老李的二师兄
09-13 791
文章目录算术运算符加法运算符其他算术运算符对象的相加余数运算符自增/减运算符数值、负数运算符指数运算符赋值运算符比较运算符非相等运算符严格相等运算符严格不相等运算符相等运算符不相等运算符 算术运算符 加法运算符：x+y 减法运算符：x-y 乘法运算符：x*y 除法运算符：x/y 余数运算符：x%y 自增运算符：x++、++x 自减运算符：x–、--x 数值运算符：+x 负数运算符：-x 加法运算符 JavaScript中加法与大多数语言一致，加号可连接字符串。 console.log(1+1);
JavaScript学习笔记(三) JavaScript标准库
Late_whale的博客 作者：代码搬运工老李的二师兄
08-04 319
javascript 包装对象，Date对象，JSON对象，re(RegExp)对象
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 920
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 670
【代码】【JavaScript】LeetCode：707设计链表。
JavaScript学习笔记：从入门到精通
JavaScript入门时，首先要了解脚本的位置，通常放置在HTML的`<head>`或`<body>`标签内。编写第一个简单的JavaScript程序，可以是从显示一个对话框开始，比如使用`alert()`函数。同时，为了提高代码可读性，会用到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值