javascript基础知识总结_web前端开发语言

javascript基础知识总结_web前端开发语言 随着现在技术行业门槛的不断提高，大多数的小伙伴们想要学前端或者是入门前端行业，就必须要掌握一定基础的 JavaScript 语言知识，本文档将介绍绝大部分常用的 JavaScript 语言基础知识且将同样概念添加 Java 语言进行对比，帮助你快速学习理解。

语言概述JavaScript 是一门脚本语言，用在网页上增强页面功能，是一门动态语言因此不需要进行编译、部署。

JavaScript 是弱类型的语言，语法比较简单，掌握基本语法之后怎么写都可以，比 Java 灵活的多，同时不需要依赖 IDE，任何文本编辑器都可以进行开发。

当然如果你用 IDEA 等 IDE 更是锦上添花。

JavaScript 比较常见的运行环境就是 Web 浏览器，比如 Chrome 直接打开 console 输入 JavaScript 代码即可运行实时看到结果：提示：在 Chrome 中，右击网页选择『检查』即可打开开发者工具，可以切换到 console 面板。

详情可以看如何使用控制台。

提示：控制台比较常用的有 console.log方法，它可以打印一些内容、变量值等到你的控制台辅助开发，等同 Java 中的 System.out.println方法。

语法基础变量定义*let 定义普通变量（推荐），详情：链接。

*const定义常量，后面只能读不能写，详情：链接。

*var 定义普通变量，不建议使用。

var 由于缺失某些特性，不建议使用，关于 let 和 var 的对比，详情见：链接。

由于 JavaScript 是弱类型语言，因此你不需要声明变量的数据类型。

JavaScript:let x = 20;Java:float x = 20.0;double x = 20.0;int x = 20;具体支持的数据类型参照下面文档。

数据类型数据类型基础知识详见：链接 ，这里针对常用的几种进行重点讲解。

基础类型包括：Undefined、Null、Boolean、Number、String，引用类型包括：Object、Array、Function。

当一个变量值为引用类型的时候，直接赋值其他变量传递的是引用。

同样的，引用的数据在某个地方改变了值会影响所有调用这个变量的地方。

这跟 Java 里面引用概念一样。

undefined 和 null声明一个变量没有赋值，直接访问当前变量可以得到 undefined。

不同于 Java 针对不同数据类型有不同的初始值：JavaScript:let x;console.log(x); // -> undefinedJava:int x;System.out.println(x); // -> 0访问一个对象上不存在的 key 也会取到 undefined。

let a = {};console.log(a.b); // -> undefinednull 表示空值。

它不同于 undefined，它是有值的只不过是一个空值，而 undefined 是未定义的临时兜底的缺省值。

undefined 和 null 具体的区别请参见：链接。

基本的数据类型（number、boolean、string）基本的数据类型：console.log(typeof 10); // -> numberconsole.log(typeof '10'); // -> stringconsole.log(typeof true); // -> booleanconsole.log(typeof "true"); // -> stringJavaScript 中带引号的均为字符串，可以是单引号也可以是双引号。

不同于 Java 字符串只能使用双引号表示。

JavaScript 没有 int、float 和 double 之分。

数组（array）数组类型，栈结构，有序数组。

每个 item 可以是任意类型的值，数据类型类似 Java 的 ArrayList ，比如：// 字符串数组['string', 'aaa']// 对象和字符串混合数组[{ aa: 'aaa', bb: 'bbb',}, 'string']// 函数数组[() => { return '这是一个函数'}, () => { return '这是一个函数'}]如果需要取得特定需要的值，直接获取（比如获取第一个数据）：JavaScript：array[0];Java：list.get(0);数组是有序的，遍历数组需要使用流程控制语句 for 等。

为了方便，array 内置了一些数组常用 *** 作方法可以简化常用 *** 作，详情可见：链接。

比较常用 forEach 和 map 方法，可以重点关注下用法。

简易循环举例：JavaScript:let list = [];list.push('aa');list.push('bb');for(let i=0; i<list.length; i++) { console.log(list[i]);}list.forEach((val, i) => { console.log(val, i);});Java:List<String> list = new ArrayList<String>();list.add('aa');list.add('bb');for(int i=0; i<list.size();i++) { System.out.println(list.get(i));}list.forEach((val) -> { System.out.println(val);});相比 Java 的 add *** 作，JavaScript array 的出栈入栈删除的方法名略有不同，常见的 push 入栈、pop 出栈，具体的参照 链接。

对象（object）对象类型，无序，需要指定 key 等信息关联值，类似 Java 的 HashMap，比如：JavaScript：let obj = { name: 'string 字符串', home: { province: '山东' }};obj.age = 18;console.log(obj.home.province);let key = 'age';console.log(obj[key], obj['age']);delete obj.name;Java:HashMap<String , Double> obj = new HashMap<String , Double>();obj.put('age', 18);obj.get('age');obj.remove('age');如果不确定 key 的值（变量）可以使用如下方法调用：let key = 'age';obj[key]; // -> 18因此可以用来做 key value 的数据映射使用。

由于弱类型存储的值可以多种多样，比 Java 使用起来要容易一些。

详情：链接函数（function）函数类型，用来创建一个函数，通常会返回一个数据。

JavaScript:function fun(a, b) { return a + b;}fun(1, 2); // -> 3;Java:public static int fun(int a, int b) { int result; result = a + b; return result;}fun(1, 2);函数是一个可执行的小程序，根据参数处理一些逻辑并返回一段新的数据，在 JavaScript 中用非常多，为此 ES6（新版 JavaScript 语言规范）新增了箭头函数语法，用来简化函数书写：let add = function(a, b) { return a + b;};等同于let add = (a, b) => { return a + b;};循环语句中也非常直观方便：list.forEach((a, b) => { console.log(a + b);});箭头函数有个重要的特点就是自动绑定了当前的作用域，作用域的概念，JavaScript 和 Java 的一样，JavaScript 中可以使用 bind、call、apply 三个方法改变函数执行的作用域，简单区别如下：bind 方法，创建一个新的函数的引用并绑定到一个作用域特定作用域上面，同时支持传参。

bind(作用域对象, 参数1, 参数2)apply、call 方法，直接调用执行该函数，在执行的时候将函数内部的作用域绑定到参数指定的作用域。

call(作用域)这几个方法详情：链接箭头函数声明和特性：链接函数作用域：链接链接设置函数参数的默认值：链接类型转换类型转换可以通过调用类型的类进行转换，比如将变量 a 转换成 Number 类型，可以使用：JavaScript:let a = '10';a = Number(a);Java:int x;(double)x;除了这种比较正规的方法之外，跟 Java 一样还有其他惯用方法进行转换。

转换 number 类型JavaScript:let a = '12.33';console.log(parseInt(a)); // -> 12 numberconsole.log(parseFloat(a)); // -> 12.33 numberJava:int i = Integer.parseInt(“123”);转换 string 类型同 Java 每个类型的值都含有 toString() 方法。

let a = 12.33;console.log(a.toString()); // -> '12.33'将 Object 转成 JSON 字符串let obj = { a: 'aa', b: 'bb'};console.log(JSON.stringify(obj)); // -> '{"a":"aa","b":"bb"}'let objStr = '{"a":"aa","b":"bb"}';console.log(JSON.parse(objStr)); // -> {a:"aa", b:"bb"}转换 boolean 类型JavaScript 中的 boolean 的值比较多，空字符串、数字 0、null、undefined 均为布尔值的 false。

此外 ! 表示取当前布尔值的反值，可以通过 !! 巧妙的将值转换成布尔值类型的数据。

JavaScript:console.log(!!'a'); // -> trueconsole.log(!!''); // -> false 空字符串console.log(!!0); // -> false 数字 0console.log(!!10); // -> trueconsole.log(!!null); // -> falseconsole.log(!!undefined); // -> falseconsole.log(!![].length); // -> false流程控制、比较、运算符等流程控制if：链接switch：链接for: 链接while: 链接比较：链接运算符：链接基本跟 Java 一样，下面介绍几个 JavaScript 比较常用、特殊的知识点：== 和 === 的区别JS 是弱类型语言，=== 表示全等判断，会把类型也进行比较：2 == '2' // -> true2 === '2' // -> false+ 运算符会改变数据类型运算符会导致数据类型的改变，这是因为运算符同时表示多种含义导致。

+ 运算符既可以链接字符串，也可以计算数字，使用时需要注意：2 + 2 // -> 4 number2 + '2' // -> '22' stringES6 新版语法增强功能ES6 是新一代 JavaScript 语法规范，里面新增了非常多的语法和功能，而且往 Java 等传统语言靠拢。

比如 class 类定义、箭头函数、真正的 Set、Map 数据类型等。

下面仅列出比较推荐的用法，有一些用法由于不太稳定暂时不推荐使用。

…obj 扩展运算符object 的赋值需要遍历相关字段，比如：let bb = { age: 18, sex: 'male',};let aa = { name: '浩睿',};// 在 aa 上面新增 bb 的属性需要aa.age = bb.age;aa.sex = bb.sex;这样就比较麻烦，你必须知道所有 key 而且每次新增都需要改动相关字段。

为此，ES6 规范将扩展运算符（…）引入对象。

就上面的例子，可以这样写：let bb = { age: 18, sex: 'male', name: '后面的同 key 内容会覆盖前面的'};let aa = { name: '浩睿', ...bb,};相当于把某个对象拆开分别赋值，遇到同样的 key 后面内容会覆盖前面的信息。