ange初识 js

天道酬勤，地道酬精，人道酬善，商道酬诚，业道酬精。
学好 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 的道路上越走越远，早日成为前端大佬。
雄关漫道真如铁，而今迈步从头越！