此专栏适用于已经入门JavaScript的同学做复习回顾使用,因为讲解具有跳跃性不推荐零基础的新手学习~
因为我们的文档页面是从上往下加载的,所以先得有标签 所以我们 标签应该写到
标签的下面。
JavaScript 是区分大小写,分号虽然可有可无,但还是推荐加上,这样会更加规范一些。
prompt:
:输入框,返回值即为输入内容。
窗口输出
windoe.alert()
:浏览器弹出警告框来输出信息。
<script>
alert("这是弹出窗口输出");
</script>
页面输出
document.write()
:写入HTML输出。
<script>
document.write("这是页面输出");
</script>
控制台输出
console.log()
:浏览器在控制台输出信息。
在Google 浏览器上按 F12 键可打开浏览器的控制台。
<script>
alert("这是弹出窗口输出");
</script>
在JavaScript
里用 var
、let
、const
来声明变量。
JavaScript
是弱类型语言,变量可以存放不同类型的值。
var
:作用域很大,相当于全局变量,且允许重复声明。
let
:作用域较小,仅在所在代码块内有效,且不允许重复声明。
const
:用来声明一个只读的常量,一旦声明,就不能改变 。
在计算机中,不同的数据所需占用的存储空间是不同的。
为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
变量是用来存储值的所在处,他们有名字和数据类型。
变量的数据类型决定了如何将代表这些知道位存储到计算机的内存中。
JavaScript 是一种弱类型或者说是动态语言,这意味着不用提前声明变量类型,在程序运行过程中,类型会被自动确定。
JS数据类型分为:简单数据类型和复杂数据类型
五种简单数据类型:number、 string、boolean、undefined
number:数字(整数、小数、NaN)。
八进制 0~7 在程序里面数字前面加0,表示八进制。
var num = 010;
八进制: 010 十进制 :8
十六进制 0~9 a ~f 在程序里面数字前面加0x,表示十六进制。
var num = a;
八进制: a 十进制 :10
数字的最值
Number.MAX_VALUE
Number.MIN_VALUE
无穷大:Infinity
console.log(Number.MAX_VALUE * 2); Infinity 正无穷大
console.log(-Number.MIN_VALUE * 2); -Infinity 负无穷大
非数字:NaN
console.log('pink老师'-100); NaN
用来判断是否是数组,若是数字返回true,不是则返回false。
console.log(is NaN(12)); true
console.log(is NaN('12')); false
string:字符、字符串,单双引号都行,推荐使用单引号。
外单内双
var str = '我是你"爸爸"'
str.length 获取字符串长度
var str = '我是你"爸爸"'
console.loh(str.length)
var str1 = new String("abc");
var str2 = "abc";
alert(str3.lenth);
var str4 = ‘abc’;
aler(str3.length);
var str4 = ’ abc ’ ;
trim():去除字符串前后两端的空白字符串。
字符串的拼接
数值相加,字符相连
console.log('沙漠'+'骆驼') 沙漠骆驼
console.log('pink老师'+18) pink老师18
console.log('pink老师'+18) pink老师18
console.log('pink'+true) pinktrue
console.log('12'+12) 1212
console.log(12+12) 24
boolean:布尔。true 是 1 false 是 0
undefined:当声明的变量未初始化是,该变量的默认值是 undefined.
null:对象为空,类型为object
typeof(变量) 可以变量查看数据类型.
类型 | 例 | 结果 |
---|---|---|
string | typeof “小白” | “string” |
number | typeof 18 | “number” |
boolean | typeof true | “boolean” |
undefined | typeof undefined | “undefined” |
null | typeof null | “object” |
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
通过控制台的颜色判断属于哪种数据类型
黑色 | 字符串 |
---|---|
蓝色 | 数值 |
灰色 | undefined 和 null |
概念:算术运算使用的符号,用于执行两个变量或值的算术运算。
运算符 | 描述 | 实例 |
---|---|---|
+ | 加 | 10 + 20 =30 |
- | 减 | 10 - 20 =-10 |
* | 乘 | 10 * 20 =200 |
/ | 除 | 10 / 20 =0.5 |
% | 取余数(取模) | 返回出发的余数 9 % 2 =1 |
浮点数值的最高精度是17位小数,但在进行算数计算时其精确度远远不如整数
var result = 0.1 +0.2; //结果不是0.3,0.30000000000000004
console.log(0.07 * 100); //结果不是7,而是7.000000000000001
比较运算符是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。
运算符名称 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于号 | 1 < 2 | true |
> | 大于号 | 1 > 2 | false |
>= | 大于等于号(大于或者等于) | 2 >= 2 | true |
<= | 小于等于号(小于或者等于) | 3 <= 2 | false |
== | 判等号(会转型) | 37 == 37 | true |
!= | 不等号 | 37 != 37 | false |
=== !== | 全等 要求值和数据类型都一致 | 37 === ‘37’ | false |
等号
符号 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边给左边 |
== | 判断 | 判断两边值是否相等(注意此时有隐士转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
== 等于:
1.判断类型是否一样,如果不一样,则进行类型转换,转换成一样的之后进行下一轮比较
2.再去比较其值
=== 全等于
1.判断类型是否一样,如果不一样,直接返回false
2.再去比较其值
console.log(18 == '18'); //true
console.log(18 === '18'); //false
逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | “逻辑与”,简称"与" and | true && false |
|| | “逻辑或”,简称"或" or | true || false |
! | “逻辑非”,简称"非" not | !true |
短路运算的原理:当有多个表达式时,左边的表达式可以确定结果是,就不再继续运算右边的表达式的值。
语法:表达式1&&表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值位假,则返回表示时1
’‘ null undefined NaN 均为假,其余都是真的
console.log(123 && 456); //456
console.log(0 && 456); //0
console.log(123 && 456 && 789); //789
前面的结果影响着后面的结果是否要执行。
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算数运算符 | 先 * / 后 + - |
4 | 关系运算符 | >, >= , < , <=, |
5 | 相等运算符 | ,!=,=,!== |
6 | 逻辑运算符 | 先 && 后 ||(先与后或) |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
1.一元运算符里面的逻辑非优先级很高
2.逻辑与 比 逻辑或 优先级高
3.练习题
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换:
方式 | 说明 | 案例 |
---|---|---|
toString() | 转成字符串 | var num = 1; alert(num.toString()); |
String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num =1; alert(num+“我是字符串”); |
//1.把数字型转换为字符串型 toString() 变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
//2.强制转换
console.log(String(num));
+“aba” 编译器识别到+号,后面的字符串就自动转为数字等价于 + NaN,一般使用parseInt。
console.log(+“aba” ); NaN
方式 | 说明 | 案例 |
---|---|---|
parselnt(string)函数 | 将string类型转成整数数值型 | parselnt(‘78’) |
parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat(‘78.21’) |
Number()强制转换函数 | 将string类型转换为数值型 | Number(‘12’) |
js 隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12’-0 |
// 1.parseInt()
var age = prompt('请输入您的年龄')
console.log(parseInt(age)); 数字型18
console.log(parseInt('3.14')); 取整
console.log(parsenInt('3.97')); 不会四舍五入
console.log(parsenInt('3.97')); 会去掉单位
// 2.parseFloat()
console.log(parsentFloat('3.14')); 保留小数
console.log(parsentFloat('120px')); 120,去掉单位
// 3.利用Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
// 4.利用了算术运算 - * / 隐式转换
console.log('12'-0);
console.log('123'-120);
console.log('123'*1);
1.注意 parseInt 和 parseFloat ,这两个是重点
2.隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型.
方法 | 说明 | 案例 |
---|---|---|
Boolean()函数 | 其他类型转成布尔值 | Boolean(‘true’); |
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('小白')); //true
console.log(Boolean(12)); //true
JS 中 用 function 关键字来进行定义。
形参不需要写类型声明,返回值也不需要写类型声明,可以在函数内部直接使用return 返回即可。
方式一:命名函数(关键字自定义函数
function add(a,b){
return a + b ;
}
方式二:匿名函数(函数表达式
匿名函数声明方式和声明变量差不多,只不过变量里面存的是值,而函数里面存放的是函数。
var add = function(a,b){
return a+b;
}
add() //add是变量名,不是函数名
实参个数尽量与形参匹配
let ans = add(1,2);//3
如果在函数调用时实参多余形参,多余的实参不会被形参接收。
let ans = add(1,2,3);//3
如果在函数调用时实参少于形参,未接收到值的形参会被定义为 undefined。
getsum(1); //NaN
arguments是函数内置的对象,里面存放了所有传递过来的实参。
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点
①:具有 length 属性
②:按索引方式储存数据
③:不具有数组的 push , pop 等方法
// 函数声明
function fn() {
console.log(arguments); //里面存储了所有传递过来的实参
console.log(arrguments.length); // 3
console.log(arrguments[2]); // 3
}
// 函数调用
fn(1,2,3);
例如:利用arguments求任意个数的最大值
function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(2, 4, 5, 9)); // 9
console.log(maxValue(12, 4, 9)); // 12
return 只能返回一个变量。
function (a,b){
return a,b;
}
console.log(fn(1,2));
function (a,b){
return [a+b,a-b,a,b];
}`在这里插入代码片`
console.log(fn(1,1));// 2,0,1,1
作用域:就是限定变量名称的可用性的代码范围。
作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
JavaScript (ES6前) 中的作用域有两种:
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 JS 文件。
作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
块作用域由 {} 包括在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循环语句中使用,如下面的Java代码:
if(true){
int num = 123;
System.out.println(num); // 123
}
System.out.println(num); // 报错
1
2
3
4
5
JS 中没有块级作用域(在ES6之前)
if(true){
int num = 123;
alert(num); // 123
}
alert(num); // 123
在JavaScript中,根据作用域的不同,变量可以分为两种:
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量),特殊情况下,在函数内未使用 var 声明的变量也是全局变量。
内部函数访问外部函数的变量,采取的是链式查找的方式来决定取哪个值,这种结构我们称为作用域链。
var num = 10;
funtion fn() { //外部函数
var num = 20;
function fun() { //内部函数
console.log(num); // 20 ,一级一级访问
}
}
先来看几个问题。
变量未声明。
console.log(num);
// 结果是多少?
//会报错 num is undefined*
先变量调用放到变量声明之前。
console.log(num); // 结果是多少?
var num = 10;
// undefined
将函数调用放到自定义函数声明之前。
// 命名函数(自定义函数方式):若我们把函数调用放在函数声明上面
fn();
function fn() {
console.log('11');
}
//11 正常执行
将函数调用放到匿名函数声明之前。
// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面
fn();
var fn = function() {
console.log('22');
}
// 报错
JS 代码是由浏览器中的JavaScript 解释器来执行的,JavaScript 解释器在运行 JavaScrpt 代码的时候分为两步:预处理和代码执行。
预解析只会发送在通过 var 定义的变量和 function 上。
这样我们就能很好的解决 为什么变量声明之间访问值为 undefined ,为什么函数声明之前可以调用函数。
变量预解析也叫做变量提升、函数提升。
变量提升:变量的声明会被提升到当前作用域的最上面,注意:变量的赋值不会被提升。
先变量调用放到变量声明之前。
console.log(num); // 结果是多少?
var num = 10;
输出结果: undefined
相当于执行了以下代码
var num; // 变量声明提升到当前作用域最上面
console.log(num);// undefine
num = 10; // 变量的赋值不会提升
函数提升:函数的声明会被提升带当前作用域的最上面,但不会调用函数。
将函数调用放到自定义函数声明之前。
fn();
function fn() {
console.log('11');
}
相当于执行了以下代码
函数的声明会被提升带当前作用域的最上面,但不会调用函数。
function fn() {
console.log('11');
}
fn();
将函数调用放到匿名函数声明之前。
fn();
var fn = function() {
console.log('22'); // 报错
}
相当于执行了以下代码
函数的声明会被提升带当前作用域的最上面,但不会调用函数。
var fn();
fn();
fn = function(){
}
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object):
对象字面量:就是花括号 { }
里面包含了表达这个具体事物(对象)的属性和方法
{ }
里面采取键值对的形式表示
var person = {
name = "zhangsan"
age : 23,
eat : function(){
alert("干饭");}
};
调用
alert(person.name);
aler(person.age);
alert(person['name']);
aler(person['age']);
person.eat();
跟之前的 new Array()
原理一致:var 对象名 = new Object();
使用的格式:对象.属性 = 值
var obj = new Object();
obj.name = '张三丰';
obj.name = '18';
obj.sex = '男';
obj.sex = '男';
obj.sayHi = function(){
console.log('hi~');
}
console.log(obj.name);
console.log(obj['name']);
obj.sayHi();
构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初值,它总与new 运算符一起使用。
我们可以把对象中的一些公共的属性与方法抽离出来单独封装到这个函数里面。
使用构造函数时需要注意:
语法如下:
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){
}
}
new 构造函数名();
实例:
构造函数名字首字母要大写。
构造函数里面属性和方法前面必须加 this。
构造函数不需要return 就可以返回结果。
调用构造函数必须使用new。
我们只要new Star() 调用函数就创建了一个对象,即对象的实例化 。
function Star(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
var ldh = new Star('刘德华',18,'男');// 对象实例化
console.log(typeof ldh);// object对象,调用函数返回的是对象
console.log(ldh.name);
console.log(ldh.['sex']);
ldh.sing('冰雨');
new
new 构造函数可以在内存中创建了一个空的对象。
在 this 指向这个新的对象。
执行构造函数里面的代码,给这个新对象添加属性和方法。
for … in 语句用于对数组或者对象的属性进行循环操作。
语法如下:
for(变量 in 对象名字){
//在此执行代码
}
语法中的变量是自定义的,他需要符合命名规范,通常我们会将这个变量写为 k 或者 key
for(var k in obj){
console.log(k); //这里的 k 是 属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
var obj = {
name: '秦sir',
age: 18,
sex: '男',
fn:function() {
};
};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
//for in 遍历我们的对象
//for (变量 in 对象){}
//我们使用for in 里面的变量 我们喜欢写k 或者key
for(var k in obj){
console.log(k); // k 变量 输出得到的是属性名
console.log(obj[k]); // obj[k] 得到的是属性值
}
ok以上就是对 CSS快速入门 的全部讲解啦,很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我,我后期再补充完善。
pink老师入门视频教程