欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript基础知识总结(web前端开发语言)

程序员文章站 2023-11-17 22:15:10
随着现在技术行业门槛的不断提高,大多数的小伙伴们想要学前端或者是入门前端行业,就必须要掌握一定基础的 javascript 语言知识,本文档将介绍绝大部分常用的 javascript 语言基础知识且将...

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

语言概述

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

javascript 是弱类型的语言,语法比较简单,掌握基本语法之后怎么写都可以,比 java 灵活的多,同时不需要依赖 ide,任何文本编辑器都可以进行开发。当然如果你用 idea 等 ide 更是锦上添花。

javascript 比较常见的运行环境就是 web 浏览器,比如 chrome 直接打开 console 输入 javascript 代码即可运行实时看到结果:

javascript基础知识总结(web前端开发语言)

提示:在 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); // -> undefined

java:

int x;
system.out.println(x); // -> 0

访问一个对象上不存在的 key 也会取到 undefined。

let a = {};
console.log(a.b); // -> undefined

null 表示空值。它不同于 undefined,它是有值的只不过是一个空值,而 undefined 是未定义的临时兜底的缺省值。undefined 和 null 具体的区别请参见:链接。

基本的数据类型(number、boolean、string)

基本的数据类型:

console.log(typeof 10); // -> number
console.log(typeof '10'); // -> string
console.log(typeof true); // -> boolean
console.log(typeof "true"); // -> string

javascript 中带引号的均为字符串,可以是单引号也可以是双引号。不同于 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 number
console.log(parsefloat(a)); // -> 12.33 number

java:

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'); // -> true
console.log(!!''); // -> false 空字符串
console.log(!!0); // -> false 数字 0
console.log(!!10); // -> true
console.log(!!null); // -> false
console.log(!!undefined); // -> false
console.log(!![].length); // -> false

流程控制、比较、运算符等

  • 流程控制if:链接switch:链接for: 链接while: 链接
  • 比较:链接
  • 运算符:链接

基本跟 java 一样,下面介绍几个 javascript 比较常用、特殊的知识点:

== 和 === 的区别

js 是弱类型语言,=== 表示全等判断,会把类型也进行比较:

2 == '2' // -> true
2 === '2' // -> false

+ 运算符会改变数据类型

运算符会导致数据类型的改变,这是因为运算符同时表示多种含义导致。+ 运算符既可以链接字符串,也可以计算数字,使用时需要注意:

2 + 2 // -> 4 number
2 + '2' // -> '22' string

es6 新版语法增强功能

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 后面内容会覆盖前面的信息。