【Java学习笔记】——JavaScript
快速入门
引入Javascript
- 内部标签
<script>
//JavaScript代码（单行注释）
/*
*多行注释
*JavaScript严格区分大小写
*/
alert('Hello');
</script>
- 外部引入
<script src="abc.js"></script>
基本语法入门
- 定义变量：数据类型 变量名 = 值；
var num = 1;(JavaScript里面的数据类型一律为var) - 条件控制
if-else 语句，和Java里一样
tips：浏览器必备调试JavaScript代码须知
- 在浏览器控制台Console直接输入JavaScript代码查看错误
- console.log();在浏览器控制台打印想要检查的部分
- 在浏览器Source界面下可以添加断点来检查代码
数据类型
数值、文本、图形、音频、视频…
js不区分整数和小数
- number
浮点数运算会产生精度丢失 - 字符串
- 布尔值
- 逻辑运算 && || ！
- 比较运算符 （=== 绝对等于，值一样，类型也一样才为true）
须知：(NaN为非数值型值)- NaN===NaN，这个值与所有数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
- null 和 undefined
- 数组()
//为了保证代码的可读性，建议使用[]
var arr = [1,2,3,'Hello',null,true];
//如果取数组元素越界了不会报错，而是显示undefined
- 对象
对象用大括号{}，数组用中括号[ ]
每个属性之间用逗号隔开，最后一个不用
<script>
var person = {
name : "Matilda",
age : 20,
tags : ['java','web','js','...']
}
</script>
严格检查模式strict
<script>
<!--
前提:需要IDEA支持ES6语法
预防JavaScriptdd 随意性产生的一些问题
必须写在JavaScript第一行
局部变量建议用let去定义
-->
'use strict';
// i = 1; 不加strict 可以正常使用，是个全局变量，会存在一些问题
//加了let定义之后变成局部变量，用strict检查更严谨
let i = 1;
</script>
数据类型
字符串
- 正常字符串用 单引号/双引号包裹
- 转义字符 \
- ES6中支持：多行字符串编写
<script>
// `` 这个是单引号，是tab键上面一个，一般叫piao（飘）
var str = `
你好
Hello
Bonjour
`
</script>
- 模板字符串
- 字符串长度
- 字符串不可变
- 大小写转换
- 获取下标
- 截取字符串 substring
<script>
let name = 'Matilda';
let age = 20;
//用piao
let msg = `你好呀，${
name}`
//字符串长度
console.log(name.length);
//转换大小写
console.log(name.toUpperCase());
//获取下标
console.log(name.indexOf('t'));
//截取字符串
console.log(name.substring(1));//从下标 1 截取到末尾
console.log(name.substring(1,3));//从下标1 截取到下标 2，左闭右开区间
</script>
数组
JavaScript中数组可以包含各种类型的数据
var arr = [1,2,3,4,5,'Matilda',null]
-
长度
arr.length 注意：假如给arr.length赋值，数组的大小会发生改变 多出来的空间为undifine，如果赋值过小，元素会丢失。 -
indexof
arr.indexof(2); 通过元素获得下标 -
slice （） 截取数组中的一部分，
返回一个新的数组，类似于String中的substringarr.slice(2);//截取下标2开始到末尾 arr.slice(1,5);//截取下标1到5之间的元素；左闭右开区间 -
push() / pop() 尾部
arr.push('a','b');//在数组末尾压入这两个元素 arr.pop('a');//将元素 b 从数组尾部弹出 -
unshift() / shift() 头部
arr.unshift('a','b');//在数组头部压入这两个元素 arr.shift('a');//将元素 b 从数组头部弹出 -
排序 sort()
arr.sort();//默认升序 -
元素反转 reverse()
arr.reverse(); -
数组拼接 concat()
arr.concat([1,2,3]); 注：只是拼接了一下，返回了一个新数组，原数组arr并没有改变。 -
连接符 join
打印拼接数组，使用特定的字符串连接 arr.join('-'); -
多维数组
arr = [[1,2],[3,4],[5,6]]; arr[1][1];//4
对象
若干个键值对
注：JavaScript中所有的键都是字符串，值是任意类型。
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var person = {
name: 'Matilda',
age: 20,
sex: 'Male'
}
-
对象赋值
person.name = '输入自己想要的值'; 直接改 -
使用一个不存在的属性，不会报错，显示undefined
person.boy;//undefined -
动态删减对象属性
delete person.name -
动态的添加属性
person.boy = 'boy' -
判断属性值是否存在某对象中
'age' in person //父类的值也能判断 'toString' in person -
判断一个属性是否是这个对象自身拥有的hasOwnProperty（）
person.hasOwnProperty('age')
流程控制
-
if 判断
-
while 循环
-
for 循环
for(let i = 0; i < 100; i++){} ES6中局部变量用let，ES5用var -
遍历数组 forEach 循环
var arr = [1,23,4,5,6,7,8]; //第一种 ：es5.1特性 arr.forEach(function(value) { console.log(value); }) //第二种：这里的num为数组元素的下标（不建议使用） for (var num in arr) { console.log(age[num]); } //第三种：这里的num为数组元素 for (var num of arr) { console.log(num); }
Map 和 Set
ES6新特性
- Map：
<script>
let map = new Map([['Matilda',100],['Leon',90],['Mike',80]]);
let score = map.get('Matilda');
console.log(score);
//添加键值对
map.set('Lucy',60);
//删除
map.delete('Matilda');
</script>
- Set：无序不重复的集合
<script>
let set = new Set([11,2,3,,4,6]);
set.add(5);
set.delete(5);
//判断是否存在某元素
console.log(set.has(5));
</script>
- 遍历 Map/Set ：iterator
<script>
//遍历Map
for (let value of map) {
console.log(value);
}
//遍历Set
for (let value of set) {
console.log(value);
}
</script>
函数及面向对象
定义函数
定义方式一
绝对值函数：
function abs (x) {
if (x >= 0) {
return x;
}
else {
return -x;
}
}
如果没有通过 return 结束函数，函数会返回undefined
定义方式二
匿名函数
//匿名函数
var abs = function (x) {
if (x >= 0) {
return x;
}
else {
return -x;
}
}
调用函数
abs