Web前端入门到精通必会JS的属性和常用方法,应同学留言要求,今天抽时间整理总结了Web前端实际开发中必会的变量、基本数据类型、表达式与操作符、流程控制语句、数组,核心知识点与常用方法,用不到可以直接不用学了,省的浪费时间 !已经做成了网页版,方便查缺补漏,建立属于自己的知识库!
对于web前端最难的JS部分,我们要做一次瘦身但又不失重点难点,不论是对于初学者还是已经工作的同学来说都能用得上,毕竟开发中不是时时刻刻都会用到所有的属性和方法,很容易就忘记了 !记得收藏起来!!
总结:JS语法与变量、基本数据类型、表达式与操作符、流程控制语句、数组,核心知识点与常用方法,经典版
JavaScript书写位置
单词 | 功能描述 |
script | 将JavaScript代码写在html文件中,例如: //此处写JavaScript代码 |
引入.js格式的文件,例如: |
输出语句
单词 | 功能描述 |
alert() | 弹出警告框 |
console.log() | 控制台输出 |
变量
单词 | 功能描述 |
var | 使用var可以声明变量,例如:var num = 1;表示声明一个名称为num,值为1的变量 变量的合法命名: 1、只能由数字、字母、下划线和$组成,但不能以数字开头 2、不建议使用关键字和保留字 3、严格区分大小写,A和a是两个不同的变量 |
检测数据类型
单词 | 功能描述 |
typeof | 检测值或者变量的数据类型 |
NaN相关知识
单词 | 功能描述 |
NaN | 表示非数字,是一个特殊的数值 |
isNaN() | 用来检测一个值是否为NaN ,是的话返回true,否则返回false |
数据类型
单词 | 功能描述 |
Number | 数值类型,所有的数字不分大小、不分正负、不分正负,都是数值类型 |
String | 字符串类型,使用双引号或者单引号包裹的值 |
Boolean | 布尔类型,true表示真,false表示假 |
Undefined | 1、变量没有赋值,默认为undefined 2、变量声明提升时,变量的值也为undefined undefined的类型也为undefined |
Null | null表示空,用typeof检测null,结果为object |
字符串的常用属性
单词 | 功能描述 |
length | 表示字符串的长度 |
字符串的常用方法
单词 | 功能描述 |
charAt() | 获取指定位置的字符 |
substring() | 提取字符串中,介于两个指定下标之间的字符 |
substr() | 在字符串中指定的位置处,提取指定数目的字符 |
slice() | 提取字符串的某个部分,类似于substring() ,不同之处: 1、substring() 可以自动交换参数的位置,而slice()不行。 2、slice()的第一个参数可以是负数,而substring()不行 |
toUpperCase() | 把字符串转换为大写 |
toLowerCase() | 把字符串转换为小写 |
indexOf | 返回字符串中指定字符首次出现的索引 |
数据类型转换
单词 | 功能描述 |
Number() | 将其他类型的值转换为数字 |
parseInt() | 可以将参数转成整数 |
parseFloat() | 可以将参数转成浮点数 |
String() | 将其他类型的值转换成字符串,例如:String(123) |
toString() | 将其他类型的值转换成字符串,例如:(6).toString() 和String()的区别: 1、toString()无法转换null和undefined,String()可以转换null和undefined 2、toString()可增加进制参数,将字符串进行进制转换,String()不能转换进制 3、写法不同,可参考上述例子 |
Boolean() | 将其他类型的值转换为布尔值 |
window下的方法
单词 | 功能描述 |
prompt() | 弹出输入框 |
复杂数据类型
单词 | 功能描述 |
Array、Object、Function | 数组、对象、函数 |
算术运算符
单词 | 功能描述 |
+ | 加法运算符。加号有两种作用,分别是加法和连字符 1、加号两边的操作数都是数字,则为加法 2、有一个操作数为字符串,则为连字符 |
- | 减法运算符 |
* | 乘法运算符 |
/ | 除法运算符 |
% | 取余运算符。例如:a%b代表a除以b的余数,8 %5 = 3 |
Number下的方法
单词 | 功能描述 |
toFixed() | 指定小数点后面的位数 |
Math方法
单词 | 功能描述 |
Math.pow(x,y) | 返回x的y次幂(不常用,了解即可) |
Math.sqrt() | 返回一个数的平方根(不常用,了解即可) |
Math.ceil() | 向上取整 |
Math.floor() | 向下取整 |
关系运算符
单词 | 功能描述 |
> | 大于 |
< | 小于 |
>= | 大于等于 |
<= | 小于等于 |
== | 等于 |
!= | 不等于 |
=== | 全等于 |
!== | 不全等于 |
逻辑运算符
单词 | 功能描述 |
! | 非 |
&& | 与 |
|| | 或 |
赋值运算符
单词 | 功能描述 |
= | 赋值 |
+= | 快捷赋值,例如: a+=1等价与a=a+1 |
-= | 快捷赋值,例如: a-=1等价与a=a-1 |
*= | 快捷赋值,例如: a*=1等价与a=a*1 |
/= | 快捷赋值,例如: a/=1等价与a=a/1 |
%= | 快捷赋值,例如: a%=1等价与a=a%1 |
++ | 自增运算 ,例如: var num1 = 3; num1++ console.log(num1)//num的值为4 |
-- | 自减运算,例如: var num2 = 3; num2-- console.log(num2)//num2的值为2 |
条件语句
单词 | 功能描述 |
if | 当指定条件为 true 时,执行if语句对应的代码 |
if...else | 当条件为 true 时,执行if语句对应的代码 当条件为 false 时,执行else语句对应的代码 |
if...else if... | 满足条件时,执行它所对应的代码 |
case | 在switch中使用,表示要匹配的每一种情况 |
default | 在switch中使用,表示默认情况,当不满足所有的case条件时,会执行默认情况 |
switch | 根据不同的条件来执行不同的动作。示例: switch (month) { case 1: alert("这个月有31天") break; case 4: alert("这个月有30天") break; default: alert("请输入正确的月份!!") } |
boolean_expression ? true_value : false_value | 三元运算符,当条件表达式boolean_expression为真,执行表达式true_value,为假时执行表达式false_value |
循环语句
单词 | 功能描述 |
for | 循环执行一段代码 示例: for(var i = 0; i <10;i++) { console.log(i); } |
while | 条件为真时循环执行代码块 |
do-while | while 循环的变体,语法: do{ 循环体 }while(循环执行条件) 注意事项: 1、do-while循环在检查条件之前一定会执行一次循环体 2、如果条件为真,就会继续执行循环体 3、如果条件为假,则会终止循环 |
break和continue语句
单词 | 功能描述 |
break | 用于退出循环 1、在switch中使用,用于跳出switch语句 2、在循环for、while中使用,直接跳出循环 |
continue | 跳出当前循环,继续执行下一次循环 |
数组的定义
单词 | 功能描述 |
Array | 数组, 用来存储一组值 |
new | 与Array结合使用,创建数组,示例:new Array() (new是JavaScript中的一个关键字,用来实例化对象的,后面的面向对象章节中会有详细的讲解,目前了解即可) |
数组类型的判断
单词 | 功能描述 |
Array.isArray() | 检测数据是否是一个数组,返回布尔值 |
数组常用的属性
单词 | 功能描述 |
length | 返回数组长度 |
数组的常用方法
单词 | 功能描述 |
push() | 在尾部插入新项 |
pop() | 删除数组的最后一项 |
unshift() | 在头部插入新项 |
shift() | 删除数组的第一项 |
splice() | 用于添加或删除数组的元素 |
slice() | 从已有的数组中返回选定的元素 |
concat() | 合并多个数组 |
reverse() | 颠倒数组中元素的顺序 |
indexOf() | 返回指定元素的索引值,如果不存在返回-1 |
includes() | 判断一个数组是否包含指定的值,返回布尔值 |
| 用于数组排序(涉及到函数知识,在函数一节再进行详细的讲解) |
join() | 将数组转成字符串 |
字符串的常用方法
单词 | 功能描述 |
split() | 将字符串转成数组 |
最好的高效学习方法之一,就是要不断地实践+总结+分享,到最后能够融会贯通,运用自如 ,一起加油 !
关注我下篇接着分享以下内容:
- JS函数(算法,递归与克隆,作用域和闭包)
- DOM(节点操作,事件,定时器,延时器,动画),BOM 相关
- 面向对象(上下文规则,构造函数与类,原型原型链,内置对象,设计模式)
- 正则表达式相关
【有关HTML/HTML5,CSS/CSS3的总结已经在往期的笔记中已发】
宠粉福利 做我的粉丝我宠你这期的是JS的基础,下期笔记再总结 JS的高级部分的内容,一个个来梳理,喜欢记得点赞收藏关注了 ??还需要总结什么?
留言就好 ^_^ 看还能挖出点啥干货不