JavaScript基础01
什么是JavaScript
概述
JavaScript是一门世界上最流行的脚本语言
一个合格的后端成员,必须要精通JavaScript
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6
但是大部分浏览器还停留在支持es6代码上
开发环境 -- 线上环境 版本不一样
快速入门
引入JavaScript --> JavaScript中的内容 尽量使用 ' ' 来引
内部标签
<script>
alter('hello, world');
<script>
外部引用
<script src="js/lyq.js"></script>
基本语法功能
<!--JavaScript严格区分大小写-->
<script>
/** 1. 定义变量 变量类型 变量名 = 变量值
var score = 90;
alert(score); 弹窗
*/
/** 2. 条件控制
* if(score > 60 && score < 70){
* alert("60-70");
* }else if(score > 70 && score <80) {
* alert("70-80");
* }else {
* alert("other");
* }
*
*/
//console.log(score) 在浏览器的控制台打印变量 System.out.print();
</script>
浏览器必备调试须知 -->
数据类型
数值, 文本, 图形, 音频, 视频... 都是数据 都是数据类型
变量
var name = '小刘';
var _$ = '( $ _ $ )';
var _$ = '💴';
var 王者荣耀 = "倔强青铜";
在Java中也可以 String 王者荣耀 = "倔强青铜"; 这样命名变量名
public class Testvar {
public static void main(String[] args){
String 王者荣耀 = "倔强青铜";
System.out.println(王者荣耀);
}
}
number
js不区分小数和整数 --> 统一用number表示Number
NaN //not a nunmber
Infinity //表示无限大
字符串
'abc' , "abc"
布尔值
true, false
逻辑运算
&& 与
|| 或
! 非
比较运算符 --> Javascript特性
= 赋值符号
== 等于(类型不一样,值一样,结果也判断为true) 1 "1"
=== 绝对等于(类型一样,值一样,才会判断为true)
这是一个JS的缺陷, 坚持不要使用 == 进行比较
注意 -->
- NaN ===NaN , 输出结果为false 这个与所有的数值都不相等, 包括自己
- 只能通过 isNaN(NaN) 来判断这个数是不是NaN
null 和 undefined
- null 空
- undefined 未定义
数组
Java的数组必须是相同类型的对象,JS中不需要遵守
//为保证代码的可读性,尽量使用[]
var array = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);
取数组下标,如果越界了,就会
undefined
对象
对象是用大括号括起来, 数组用中括号
每个属性之间使用 逗号 隔开, 最后一个不需要添加
//Person person = new Person(1,2,3,4,5);
/**
* class Person {
* private int id;
* private String name;
* private String address;
* }
*
*/
var person = {
name: "LYQ",
age: 21,
tags: ['javascript', 'java', 'web', '...']
}
取对象的值 打印对象到浏览器控制台
person.name;
person.age;
person.tags;
浮点数问题
<script>
console.log((1/3) === (1- 2/3)); //false
console.log(Math.abs(1/3 - (1 - 2/3)) < 0.0000001); //true
</script>
尽量避免使用浮点数进行运算, 存在精度问题
严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.严格检查模式</title>
<!--
前提: IDEA 需要设置支持 ES6 语法
'use strict'; 严格检查模式, 预防Javascript的随意性导致产生的一些问题
必须写在Javascript的第一行
局部变量建议都使用 let 去定义
-->
<script>
i = 1; // 全局变量 不安全
var j = 2; // 局部变量 不清爽
let k = 3; // 局部变量 清爽 建议局本变量都使用let来声明
</script>
</head>
<body>
</body>
</html>
数据类型 详解
字符串
- 正常字符串我们使用 单引号, 或者双引号包裹
- 注意转义字符 \
\' //转义字符'
\n //换行
\t //tab键间隔
\u4e2d // 中 u#### Unicode字符
\x41 // A Ascll字符
//以上字符都要在 ""(字符串) 包裹内
- 多行字符串编写
'use strict'
console.log('a\'');
console.log("a");
//使用单引号进行 多行字符串编写会在回车后自动加上 + 来链接 但是输入结果不会换行 除非加转义字符
let msg = 'hello world' +
'你好' +
'一个新手程序员正在学习JavaScript';
//使用tab键 上面的` 飘符号进行 多行字符串编写 会根据你自己编辑的字符串形式 显示在浏览器弹框或者终端上
let msg02 = `hello world
你好 世界
一个新手程序员于2024-5-9在新乡学院
学习JavaScript
`;
console.log(msg);
alert(msg);
console.log(msg02);
alert(msg02);
- 模板字符串
//模板字符串
let name = "小刘";
let msg03 = `你好, ${name}`;
console.log(msg03);
alert(msg03);
- 以字符串长度为代表的字符串.属性
//字符串长度
var student = "student";
console.log(student.length);
//通过数组下标的形式打印出字符串的每一个元素
console.log(student[0]);
-
以字符串为代表的字符串.方法
console.log(student.toUpperCase()); console.log(student.toLowerCase()); //获取字符串以数组以0开始为下标的 位置下标数字 console.log(student.indexOf('t')); //截取字符串中的字符 //从第一个字符开始到最后 [] 包含第一个和最后一个 console.log(student.substring(1)); > tudent //从第i个字符开始,到第 j-1 个字符结束 [) 包含前面的下标字符 不包含后面的下标字符 console.log(student.substring(1,3)); > tu -
字符串的可变性 --> 不可变
数组
Array可以包含任意的数据类型
//数组
var array = [1,2,3,4,5,6];
//查看数组长度
console.log(array.length);
//通过数组下标进行取值
array[0]; //取值
array[0] = 1001; //赋值
//假如给array赋新值, 数组大小就会发生变化
array.lenth = 10;
> 10
console.log(array.length);
console.log(array);
//如果赋值过小, 数组元素就会丢失
array.length = 2;
> 2
console.log(array.lengrh);
console.log(array);
//indexOf,通过元素获得数组下标索引
array = [1,2,3,4,5,6,"1","2"];
array.indexOf(1);
> 0
array.indexOf("1")
> 6
//字符串的 "1" 与 数字 1 --> 是不一样的
//slice() 截取array数组的一部分, 返回一个新数组
array.slice(3); []
array.slice(1,5); [)
//类似于String中的substring, 但是在前端中一般都使用 slice
//pop: 弹出尾部元素 push: 压入元素到尾部
//类似于 栈数据结构
array.pop();
array.push();
//unshiift: 压入元素到头部 shift: 弹出一个头部的元素
array.shift();
array.unshift*();
//排序
array = ["B","C"];
array.push("A");
array.sort();
> ["A","B","C"]
//元素反转
array.reverse();
//拼接数组
//array.concat()并没有修改数组,只是返回一个新数组
array.concat([1,2,3]);
> ["C","B","A",1,2,3]
array
> ["C","B","A"]
//连接符join: 使用特定的字符串将数组链接起来 打印出拼接后的数组
array
> ["C"."B","A"]
//两者效果一样
array.join('-');
array.join("-");
"C-B-A"
//多维数组 下标同样从0开始
array = [[1,2,3],[5,6,7],["A","B","C"]]
array[1][1]
组数: 存储数据 --> (如何存, 如何取, 方法都可以自己实现)
对象
若干个键值对
//JavaScript对象: 使用键值对描述属性,属性之间使用逗号分割,最后一个属性不加逗号
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
}
//定义了一个person对象, 它有四个属性
var person = {
name: "xiaoLiu",
age: 21,
email: "6310@qq.com",
score: 69
}
在Javascript中所有的键都是字符串, 值是任意对象
person
{age: 21, email: '6310@qq.com', score: 69, address: 'China'}
person['age']
21
"age" in person
true
对象赋值
> person.name = "XiaoLiu"
< "XiaoLiu"
> person.name
< "XiaoLiu"
使用一个不存在的对象属性,不会报错 --> undefined
person.haha
undefined
动态的删减属性, 通过delete删除对象的属性
delete person.name
true
person
{age: 21, email: '6310@qq.com', score: 69}
动态的添加, 直接给属性添加新的值就行
person.address = "China"
'China'
person
{age: 21, email: '6310@qq.com', score: 69, address: 'China'}
判断属性值是否在这个对象中
'age' in person
"age" in person
true
'toString' in person
"toString" in person
true
判断一个属性是否是这个对象自身拥有的 --> hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
person.hasOwnProperty("age")
true
流程控制
forEach 循环
var age = [1,2,3,4,5,6,7,8,9,13,14,51,43];
//函数
age.forEach(function (value){
console.log(value)
})
for...in --> 打印值的下标
//for(var index in object){}
var age = [12, 134, 13, 43, 56, 78, 912];
for (var num in age) {
if (age.hasOwnProperty(num)) {
alert("2333");
console.log("存在");
console.log(age[num]);
}
}
for...of --> 打印值元素本身
var array = [3,4,5];
for(var element of array){
console,log(element);
}
Map 和 Set
var map = new Map([["tom",88],["jeery",77],["frank",66]]);
var name = map.get("tom"); //通过key获得value
map.set("administrator",631062); //新增 or 修改
map.delete("tom"); //删除
var set = new Set([1,1,11,22,33,33,44,55,66,77,77,99]);
set.add(11);
set.delete(1);
console.log(set.has(99)); //是否包含某个元素
iterator
遍历数组
var array = [3,4,5];
for(var element of array){
console,log(element);
}
遍历map
var map = new Map([["tom",88],["jerry",77],["frank",66]]);
for (let element of map) {
console.log(element);
}
(2) ['tom', 88]
(2) ['jerry', 77]
(2) ['frank', 66]
遍历set
var set = new Set([1,11,22,33,44,55,55,66,66,66,3,4,1,2,3])
for (let element of set){
console.log(element);
}
函数
定义函数
定义方式一: 后端人员偏用
function abs(x){
if(x >= 0){
return x;
}else {
return -x;
}
}
一旦执行到return 代表函数结束, 返回结果!
如果没有执行ruturn, 函数执行完也会返回结果, 结果就是 undefined
定义方式二: 前端人员偏用
var abs = function(x){
if(x >= 0){
return x;
}else {
return -x;
}
}
function(x){...} 这是一个匿名函数. 但是可以把结果赋值给abs, 通过abs就可以调用函数
参数问题: JavaScript可以传递任意个参数, 也可以不传递参数
参数进来是否存在的问题?
假设不存在参数, 如何规避?
var abs = function(x){
//手动抛出异常
if(typeof x !== "number"){
throw "Not a Number";
}
if(x >= 0){
return x;
}else {
return -x;
}
}
arguments
arguments 是一个JS免费赠送的关键字
代表 传递进来的所有参数, 是一个数组
function abs(x) {
console.log("x=> " + x);
for (var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
if (x >= 0){
return x;
}else {
return -x;
}
}
问题: arguments 包含所有的参数, 我们有时候想使用多余的参数来进行附加操作. 需要排除已有的参数
rest
以前:
function aaa(a,b,c) {
console.log("a=> " + a);
if (arguments.length > 2){
for (var i = 2; i < arguments.length; i++){
console.log(b);
console.log(c);
//...
}
}
}
ES6 引入的新特性, 获取除了已经定义的参数之外的所有参数
function aaa(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
rest 参数只能写在最后面, 必须用 ...标识
变量的作用域
在JavaScript中, var 定义的变量实际上是有作用域的
假设在函数体中声明, 则在函数体外不可使用 想要实现使用 --> 闭包
function demo01() {
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名, 只要在函数内部, 就不冲突
function demo01() {
var x = 1;
x = x + 1;
}
function demo02(){
var x = "A";
x = x + 1;
}
内部函数可以访问外部函数的成员, 反之不行
function demo03(){
var x = 1;
//内部函数可以访问外部函数的成员, 反之不行
function demo04(){
var y = x + 1;
}
var z = y + 1; //Uncaught ReferenceError: y is not defined
}
假设内部函数的变量与外部函数的变量重名
function demo04() {
var x = 1;
function demo05() {
var x = 'A';
console.log('内=> ' + x);
}
console.log('外=> ' + x);
demo05();
}
在JavaScript中 函数查找变量从自身函数开始查找, 有 '内' 向 '外' 查找.
假设外部存在这个同名的函数变量, 则内部函数回屏蔽外部函数的变量
提升变量的作用域
function demo06(){
var x = 'x' + y;
console.log(x);
var y = y;
}
执行结果 --> x undefined
说明 --> JavaScript执行引擎, 自动提升了y的说明, 但是不会提升变量y的赋值
等价于 -->
function demo07(){
// var x,y,z;
var y,x;
x = 'x' + y;
console.log(x);
y = 'y';
}
这个是在JavaScript成立之初就存在的特性. 平时要养成规范. 所有的变量定义都放在代码头部, 不要乱放, 便于代码维护
function demo08(){
var x =1,
y = x + 1,
z,i,a;
// 之后可以随意使用
z = x + 1;
i = z + 1;
a = i + 1;
console.log(a);
}
全款i变量
// 全局变量
var x = 1;
function demo09(){
console.log(x);
}
demo09();
console.log(x);
对象window
// 全局对象window
var x = '小刘学正在努力学Java';
alert(x);
alert(window.x); // 默认所有的全局变量, 都会自动绑定在window对象下
// 等价于 -->
window.alert(x);
window.alert(window.x); // 这里的window 就是浏览器
alter() 这个函数本身也是一个 window 变量
var x = '小刘正在努力学习JavaScript',
old_alert;
window.alert(x);
old_alert = window.alert;
// old_alert(x); 等价于 --> window.alert(x) 这样就可以在浏览器上弹出x
window.alert = function () {
};
window.alert('小刘已经学完了JavaScript基础部分'); // 发现alert() 失效了
//恢复
window.alert = old_alert;
window.alert('小刘开始学习mysql部分');
JavaScript实际上只有一个全局变量, 任何变量(函数也可以视为变量), 假设没有在函数作用范围内找到, 就会向外查找, 如果在全局作用域都没有找到, 报错 referenceError
规范 -->
由于我们所有的全局变量都会绑定到我们的window上. 如果不同的js文件, 使用了相同的全局变量, 冲突 --> 如何能够减少冲突?
// 唯一全局变量
var KuangApp = {};
// 定义全局变量
KuangApp.name = 'kuangshen';
KuangApp.studentName = '小刘';
KuangApp.add = function (a,b) {
return a + b;
}
把自己的代码全部放入自己定义的 唯一空间名字中. 降低全局匿名的问题
jQuery库
局部作用域 let
function demo11() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i + 1); // 问题? i 出了这个作用域还可以使用
}
demo11();
ES6 let关键字, 结局了局部作用域冲突的问题
function demo11() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i + 1); // 问题? i 出了这个作用域还可以使用
}
demo11();
function demo12() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i + 1); // Uncaught ReferenceError: i is not defined
}
demo12();
建议大家使用let 去定义局部作用域的变量
常量 --> const
在ES6之前, 怎么定义常量 --> 只有用全部大写字母命名的变量都是常量: 建议不要修改这样的值
//常量 --> 之前定义:
var PI = '3.14';
console.log(PI);
PI = '123'; //可以改变这个值
console.log(PI);
在ES6 引入了关键字 const
//ES6 引入了关键字 const
const PI = '3.14'; //只读变量
console.log(PI);
PI = '123'; // readonly --> Uncaught TypeError: Assignment to constant variable
console.log(PI);
方法
定义方法 -->
方法就是把函数放在对象的里面, 对象只有两个东西: 属性和方法
var XiaoLiu = {
name: '小刘',
birthday: 2003,
// 方法
age: function (){
// 年龄 = 今年 - 出生年
var nowAge = new Date().getFullYear();
return nowAge - this.birthday;
}
}
//属性
XiaoLiu.name
//方法, 一定要带()
XiaoLiu.age()
将上面的代码拆开 -->
function getAge() {
// 年龄 = 今年 - 出生年
var nowYear = new Date().getFullYear();
return nowYear - this.birthday;
}
var XiaoLiu = {
name: '小刘',
birthday: 2003,
age: getAge
}
getAge.apply(XiaoLiu,[]); // this, 指向了 XiaoLiu, 参数为空
//XiaoLiu.age() ok
//getAge() 在没有严格定义strict的情况下, NaN
this是无法指向的, 是默认指向调用它的那个对象
apply
在JavaScript中可以控制this的指向
function getAge() {
// 年龄 = 今年 - 出生年
var nowYear = new Date().getFullYear();
return nowYear - this.birthday;
}
var XiaoLiu = {
name: '小刘',
birthday: 2003,
age: getAge
}
var XiaoMing = {
name: '小明',
birthday: 2000,
age: getAge
}
getAge.apply(XiaoMing,[]); // this, 指向了 XiaoMing, 参数为空
浙公网安备 33010602011771号