【Java学习笔记】——JavaScript

快速入门

引入Javascript

1. 内部标签

<script>
//JavaScript代码（单行注释）
/*
*多行注释
*JavaScript严格区分大小写
*/
alert('Hello');
</script>

2. 外部引入

<script src="abc.js"></script>

---

基本语法入门

1. 定义变量：数据类型 变量名 = 值；
   var num = 1;(JavaScript里面的数据类型一律为var)
2. 条件控制
   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>

---

数据类型

字符串

1. 正常字符串用 单引号/双引号包裹
2. 转义字符 \
3. ES6中支持：多行字符串编写

<script>
	// `` 这个是单引号，是tab键上面一个，一般叫piao（飘）
	var str = `
		你好
		Hello
		Bonjour
		`
</script>

4. 模板字符串
5. 字符串长度
6. 字符串不可变
7. 大小写转换
8. 获取下标
9. 截取字符串 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]

1. 长度

    arr.length
    注意：假如给arr.length赋值，数组的大小会发生改变
    			多出来的空间为undifine，如果赋值过小，元素会丢失。
   

2. indexof

    arr.indexof(2);
    通过元素获得下标
   

3. slice （） 截取数组中的一部分，
   返回一个新的数组，类似于String中的substring

    arr.slice(2);//截取下标2开始到末尾
    arr.slice(1,5);//截取下标1到5之间的元素；左闭右开区间
   

4. push() / pop() 尾部

    arr.push('a','b');//在数组末尾压入这两个元素
    arr.pop('a');//将元素 b 从数组尾部弹出
   

5. unshift() / shift() 头部

    arr.unshift('a','b');//在数组头部压入这两个元素
    arr.shift('a');//将元素 b 从数组头部弹出
   

6. 排序 sort()

    arr.sort();//默认升序
   

7. 元素反转 reverse()

    arr.reverse();
   

8. 数组拼接 concat()

    arr.concat([1,2,3]);
    注：只是拼接了一下，返回了一个新数组，原数组arr并没有改变。
   

9. 连接符 join

    打印拼接数组，使用特定的字符串连接
    arr.join('-');
   

10. 多维数组

    arr = [[1,2],[3,4],[5,6]];
    arr[1][1];//4
    

对象

若干个键值对
注：JavaScript中所有的键都是字符串，值是任意类型。

var 对象名 = {
   
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}

var person = {
   
	name: 'Matilda',
	age: 20,
	sex: 'Male'
}

1. 对象赋值

    person.name = '输入自己想要的值';
    直接改
   

2. 使用一个不存在的属性，不会报错，显示undefined

    person.boy;//undefined
   

3. 动态删减对象属性

    delete person.name
   

4. 动态的添加属性

    person.boy = 'boy'
   

5. 判断属性值是否存在某对象中

    'age' in person
    //父类的值也能判断
    'toString' in person
   

6. 判断一个属性是否是这个对象自身拥有的hasOwnProperty（）

   person.hasOwnProperty('age')
   

流程控制

1. if 判断

2. while 循环

3. for 循环

    for(let i = 0; i < 100; i++){}
    ES6中局部变量用let，ES5用var
   

4. 遍历数组 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