随着现在技术行业门槛的不断提高,大多数的小伙伴们想要学前端或者是入门前端行业,就必须要掌握一定基础的 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。不同于 java 针对不同数据类型有不同的初始值:
javascript:
let x;console.log(x); // -> undefined
java:
int x;system.out.println(x); // -> 0
访问一个对象上不存在的 key 也会取到 undefined。
let a = {};console.log(a.b); // -> undefined
null 表示空值。它不同于 undefined,它是有值的只不过是一个空值,而 undefined 是未定义的临时兜底的缺省值。undefined 和 null 具体的区别请参见:链接。
基本的数据类型:
console.log(typeof 10); // -> numberconsole.log(typeof '10'); // -> stringconsole.log(typeof true); // -> booleanconsole.log(typeof "true"); // -> string
javascript 中带引号的均为字符串,美国宪法可以是单引号也可以是双引号。不同于 java 字符串只能使用双引号表示。javascript 没有 int、float 和 double 之分。
数组类型,栈结构,有序数组。每个 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 出栈,具体的参照 链接。
对象类型,无序,需要指定 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]; // -&海工商gt; 18
因此可以用来做 key value 的数据映射使用。由于弱类型存储的值可以多种多样,比 java 使用起来要容易一些。详情:链接
函数类型,用来创建一个函数,通常会返回一个数据。李白不是神
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 一样还有其他惯用方法进行转换。
javascript:
let a = '12.33';console.log(parint(a)); // -> 12 numberconsole.log(parfloat(a)); // -> 12.33 number
java:
int i = integer.parint(“123”);
同 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.par(objstr)); // -> {a:"aa", b:"bb"}
javascript 中的 boolean 的值比较多,空字符串、数字 0、null、undefined 均为布尔值的 fal。此外 ! 表示取当前布尔值的反值,可以通过 !! 巧妙的将值转换成布尔值类型的数据。
j歌手大赛avascript:
console.log(!!'a'); // -> trueconsole.log(!!''); // -> fal 空字符串console.log(!!0); // -> fal 数字 0console.log(!!10); // -> trueconsole.log(!!null); // -> falconsole.log(!!undefined); // -> falconsole.log(!![].length); // -> fal
基本跟 java 一样,下面介绍几个 javascript 比较常用、特殊的知识点:
js 是弱类型语言,=== 表示全等判断,会把类型也进行比较:
2 == '2' // -> true2 === '2' // -> fal
运算符会导致数据类型的改变,这是因为运算符同时表示多种含义导致。+ 运算符既可以链接字符串,也可以计算数字,使用时需要注意:
2 + 2 // -> 4 number2 + '2' // -> '22' string
es6 是新一代 javascript 语法规范,里面新增了非常多的语法和功能,而且往 java 等传统语言靠拢。比如 class 类定义、箭头函数、真正的 t、map 数据类型等。下面仅列出比较推荐的用法,有一些用法由于不太稳定暂时不推荐使用。
object 的赋值需要遍历相关字段,比如:
let bb = { age: 18, x: 'male',};let aa = { name: '浩睿',};// 在 aa 上面新增 bb 的属性需要aa.age = bb.age;aa.x = bb.x;
这样就比较麻烦,你必须知道所有 key 而且每次新增都需要改动相关字段。为此,es6 规范将扩展运算符(…)引入对象。就上面的例子,可以这样写:
let bb = { age: 18, x: 'male', name: '后面的同 key 内容会覆盖前面的'};let aa = { name: '浩睿', ...bb,};
相当于把某个对象拆开分别赋值,遇到同样的 key 后面内容会覆盖前面的信息。
本文发布于:2023-04-05 04:31:53,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/a073e1a8f8e05098a7f5f2f8c2ee1688.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:javascript基础知识总结(web前端开发语言).doc
本文 PDF 下载地址:javascript基础知识总结(web前端开发语言).pdf
留言与评论(共有 0 条评论) |