天道酬勤,地道酬精,人道酬善,商道酬诚,业道酬精。
学好 js,走遍天下都不怕。js是一门很有意思的语言,已经成为了前端工程师的一门必修课,在前端知识中占据很大的比重。我之前的博客许久不用让我不小心丢了,所以又重新注册了一个新的博客,以后我会定期整理一些我前端学习中的笔记和心得,不定期免费分享给,希望对你有所帮助。本人前段小菜鸟,能力有限,水平一般,不足之处,多多包涵。
js简介
js全称JavaScript,是一种专为与网页交互而设计的脚本语言,内容主要由三部分组成(先简单了解 )
- ECMAScript,由ECMA-262定义,提供核心语言功能;
- 文档对象模型(DOM),提供访问和操作网页内容的方法和接口;
- liulanqiduixiangmoxing(BOM),提供与浏览器交互的方法和接口。
js的诞生也是一件很有意思的事情,据说是作者为了应付公司要求十天左右就写出来的,有兴趣的可以上网百度一下。
js基本语法
js中大量借鉴了 C 以及其他 C 语言(如Java和Perl)的语法,学习js语法的时候可以与其他语法进行比较。
- 区分大小写
变量a和变量A是两个不同的变量。
var a = 1; //定义变量a
var A = 2; //定义变量A
- 忽略空白符(空格、换行、tab)
结果不影响,代码解析是会自动忽略空白符。
var a = 1;
var a = 1 ;
- 语句结尾分号可加可不加
推荐加上分号,因为加上可以避免很多的错误,也会增加代码的性能。
var a = 1
var a = 2;
- 注释(单行和多行)
//这是一个当行注释
/*
这是一个多行注释
*/
- 标识符
所谓标识符,就是指变量、函数、属性的名字,或者函数的参数。标识符可以按照是按照以下格式规则组合的一或多个字符:
- 第一个字符必须是一个字母、下划线(_)活一个美元符号($);
- 其他字符可以是字母、下划线、美元符号或数字。
关于变量
变量就是内存中的一个空间。
变量名:内存空间的别名 对变量名的操作就是对内存空间的操作
变量值:存储在内存空间中的状态(数据)
在JS中定义变量:
var a = 110; // 定义了一个变量,变量的名是a ,变量的值是110;
变量分类:
- 全局变量 :全局变量在函数外部和内部都能访问到
- 局部变量 : 局部变量只能在函数内部访问到
// 声明一个变量
var a = 110;
// 声明一个函数
function f() {
//在函数里面访问全局变量
console.log(a);
var b = 666; // 局部变量
console.log(b); // 函数内部是可以访问到局部变量
}
// 调用函数
f(); // 一个函数没有调用相当于这个函数没有写
console.log(a); //在函数外面访问全局变量
console.log(b); //b is not defined 函数外面是访问不了函数局部变量
js数据类型
js 数据类型的产生是为了针对不同的数据类型,分配不同的空间。js数据类型有五种基础数据类型包括 number 类型、string 类型、boolear 类型、undefined 类型和 null 类型,和一种复杂数据类型是 object 类型。
typeof 是一个特殊操作符,可以用来检测非定变量的数据类型。
typeof操作符
对一个值使用typeof操作符可以返回以下某个字符串。
- " number " —— 如果这个值是数值
console.log(typeof 123);//结果" number "
- " string " —— 如果这个值是字符串
console.log(typeof "abc");//结果" string "
- " boolean " —— 如果这个值是布尔值
console.log(typeof false);//结果" boolean "
- " undefined " —— 如果这个值未定义
var name; //变量声明后默认取得undefined值
//var age; //变量未声明
alert(name); //结果" undefined "
alert(age); //结果产生错误
- " object " —— 如果这个值是对象或null
console.log(typeof null) // 结果 " object "
- " function " —— 如果这个值是函数
function f(){}
console.log(typeof f) // 结果 " function "
number类型
number数据类型具有以下特点:
- number 数据类型对应的值有无数个
- 在 js 中number数据类型是不分整数和小数,都是number
- number具有最大值和最小值
console.log(Number.MAX_VALUE); //求最大值
console.log(Number.MIN_VALUE); //求最小值
- number可以通过不同进制显示(10进制、16进制、8进制)
var c = 123; // 10进制
var d = 0x123; // 16进制 以零x打头 0~f
var e = 0123; // 8进制 以零打头 0~8
- JS中不要对小数运算 要运算先转成整数 得到的结果可能不对
consoel.log((1-0.7)==0.3);
//正确答案应为true,结果却显示false
//"=="是运算符,判断两侧是否相等
- 输出是一个非数字类型的值,显示NaN(Not a Number )
console.log("abc"*100); // 结果显示NaN
string数据类型
- string数据类型对应的数据也有无数个。
- 在 js 中 使用 " " 或 ’ ’ 把字符串包起来,不包 js 会给它当成变量。
- 单引号不要嵌套单引号,双引号不要嵌套双引号,可以外单内双或外双内单。
boolean数据类型
boolean数据类型对应的值就两个,true和false。
注意:true 和 True 不一样的,因为 js是区分大小写的。
undefined数据类型
undefiend是一个数据类型,这种数据类型对应的值是undefiend。
当一个变量没有赋值,那么它的值就是undefined,这个值的类型也是undefined。
当一个函数没有返回值,那么默认返回undefined。
null数据类型
null也是一个只有一个值的数据类型,这个特殊的值是null。
object数据类型
js中的对象其实就是一组数据和功能的集合。
js数据类型转化
在 js 中有时会将一种数据类型转化为另一种数据类型,转化方式可分为两种,隐式类型转化和强制类型转化。
隐式类型转化
隐式类型转化是静悄悄地,不知不觉地就进行了类型转化
var res = 123 + "abc"; // 123被隐式转化成字符串
console.log(res); // 123abc
console.log(typeof res); // string
在JS中,下面的值转成false,其它值都转成true:
- 0
- -0
- " "
- undefined
- null
强制类型转化
写代码进行强制转化
console.log(parseInt(3.14)); // 把小数转成整数
console.log(parseInt("3.14abc")); // 尝试把小数或非数字转成整数
console.log(Number("abc123")); // NaN
console.log(Number("123abc")); // NaN
console.log(Number("123")); // 123
console.log(String(123456)); // 123456
代码执行阶段
js 代码在执行时可分为两个阶段:
- 预编译
- 代码执行
这两个阶段所做的事情是不一样的。
预编译
预编译阶段的本质就是提升,提升可分为两种:
- 把加varde变量进行提升,变量声明会提升,变量的赋值是不会提升,提升到了代码段最前面。
- 把使用function声明的函数进行提升,提升的是整个函数声明,提升到了代码段最前面。
关于定义变量和声明变量:
定义变量:var a = 110; 定义 = 声明+赋值 是这个整体
声明变量:var a = 110; 说的声明仅仅是说var a,后面是赋值
//先预编译,将var提升到代码的最前面
console.log(a); // undefined
var a = 110;
console.log(a); // 110
//使用function定义了一个函数
//函数名是f 函数值是{}
//预编译会提升整个函数
function f() {
console.log("f...")
}
f(); //函数调用
代码的执行
代码是自上到下,一行一行的执行。
// ++在前和++在后,对于i的值来说,都是加1操作
// 整体也有一个值 此时++在前和++在后就不一样
var i = 0;
var r1 = i++; // i++整体也有一个值
var r2 = ++i; // ++i整体也有一个值
console.log(i); // 2
console.log(r1); // ++在后,整体的值是一个旧值 0
console.log(r2); // ++在前,整体的值是一个新值 2
加var和未加var变量的区别
//在全局代码中,加var会提升,没有var的不会提升。
console.log(a);
a = 110; // a is not defined
//不管加没加var的全局变量,都会作为window的属性
var a = 1;
b = 2;
console.log(window.a)
console.log(window.b)
//没有加var的变量,只能作为全局变量,只要是全局变量,肯定是window的属性
function f() {
a = 666;
}
f()
console.log(window.a)
//加var的局部变量,不会作为window的属性
function f() {
var a = 666;
}
f()
console.log(a)
//访问一个对象上不存在的属性,结果就是undefined
console.log(window.a) // undefined
了解函数
函数是在任何编程语言都有的概念。在JS中定义函数有两种形式
- 函数定义
- 函数表达式
函数的定义
//函数定义 f叫函数名 ()是函数特有的标识 {} 叫函数体
//定义 = 声明 + 赋值
function f() {
console.log("hello")
console.log("js")
console.log("vue")
}
//函数调用
f(); // 调用函数时,就会把函数体中的代码都执行了
函数的返回值
function f() {
return 666;
}
// 函数的返回值是返回到了函数调用处
var a = f(); // 函数调用
console.log(a);
console.log(f()); // f()得到的就是函数的返回值
//一个函数如果没有返回值,默认返回undefiend
function f(){
}
console.log(f()); // undefined
给函数传递数据
function f(a,b) { // a b叫形式参数 形参
// 形参就是函数内部的局部变量
return a+b;
}
// 1 2叫实际参数 实参
var r = f(1,2); // 函数调用的过程就是实参向形参赋值的过程
console.log(r);
let和const声明变量
let 和 const 是 js 新增的两个关键词。
- let 声明的变量只在 let 命令所在的代码块内有效。
- const 声明一个只读的常量,一旦声明,常量就不能改变。
let声明
let声明的变量没有提升(另一种解释是let声明的变量也提升,仅仅是没有初始化)
console.log(a);
let a = 110;
// Cannot access 'a' before initialization
let 配合 { } 也可以形成块级作用域
if(true){
var a = 110; // 全局变量
// b只能在当前的{}中被访问到 出了块就访问不了
let b = 666; // let + {} 形成块级作用域
}
console.log(b); // b is not defined
使用let声明的变量不会挂载到window上
let a = 110;
console.log(window.a);
// undefined 访问一个对象上没有属性,得到的就是undefined
使用let不能重复声明
let a = 1;
let a = 2;
console.log(a);
// Identifier 'a' has already been declared片
const 声明
const声明的常量没有提升
console.log(a);
const a = 1;
// Cannot access 'a' before initialization
const 配合 { } 也可以形成块级作用域
if(true){
const a = 111;
}
console.log(a); // a is not defined
使用const声明的常量不会挂载到window上
const a = 1;
console.log(window.a); // undefined
使用const不能重复声明
const a = 1;
const a = 2;
console.log(a);
// Identifier 'a' has already been declared
const在声明常量时,必须赋值
const a;
a = 1;
console.log(a)
//Missing initializer in const declaration
小结
js 学习是一个漫长的过程,起初你可能会感受到枯燥乏味,但当你真正的投入 js 的大海中,你就会发现 js 的世界是那么的美妙,你会深刻感受到 js 的魅力,而不再认为 js 只是一个小小的脚本语言。希望你能在 js 的道路上越走越远,早日成为前端大佬。
雄关漫道真如铁,而今迈步从头越!