参考视频：JavaScript最新教程通俗易懂（狂神）
1. 什么是JavaScript 1.1 前端三要素- HTML（结构）：
- 超文本标记语言（Hyper Text Markup Language），
- 决定网页的结构和内容
- CSS（表现）：
- 层叠样式表（Cascading Style Sheets），
- 设定网页的表现样式
- JavaScript（行为）：
- 是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为
- JavaScript是一门世界上最流行的脚本语言
- JavaScript的开发只用了10天
- 一个合格的后端人员，必须精通JavaScript
JavaScript的起源故事
- ECMAScript ，它可以理解为是JavaScript的一个标准。
- 大部分浏览器都不支持最新版本，只支持最新版本的上一个版本。
- 开发环境与线上环境的不一致。
- 内部标签
- 外部引用
示例一：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="js/zach.js">script>
<script type="text/javascript">
script>
head>
<body>
body>
html>
alert('Hello World');
示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1. 定义变量 变量类型 变量名 = 变量值；
var score = 100;
// alert(num);
//2. 条件控制
if (score>=60 && score<80){
alert("[60,80)");
}else if (score>=80 && score<100){
alert("[80,100)");
}else{
alert("score:"+score);
}
//console.log(score); 在浏览器的控制台打印变量 System.out.println(score);
//少用alert
/*
注释
*/
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知：（360极速浏览器（调试专用））
- 数值、文本、图形、音频、视频… …
-
变量
var 王者荣耀 = "倔强青铜”; -
number
- js不区分小数和整数，Number
123 //整数123
123.1 //浮点数123.1
1.23e3 //科学计数法
-99 //负数
NaN //not-a-number
Infinity //表示无限大
- 字符串
'abc'
"abc"
- 布尔值
true
false
- 逻辑运算
&& //两个都为真，结果为真
|| //一个为真，结果为真
! //真为假，假为真
- 比较运算符（！重要！）
= //
== //等于（无论类型是否相同，只要值一样，结果就为true）
=== //绝对等于（类型一样，且值一样，结果为true）
- 这是一个JS的缺陷，坚持不要使用
==比较 - 注意：
NaN===Nan，返回false，NaN与所有数值不相等，包括自己- 只能通过
isNaN(NaN)来判断这个数是否是NaN
- 浮点数问题：
console.log((1/3) === (1-1/3))false- 尽量避免使用浮点数进行运算，会存在精度问题。
Math.abs(1/3-(1-2/3))<0.000000001 - 两者足够接近可算作true
- 尽量避免使用浮点数进行运算，会存在精度问题。
- null和undefined
- null 空
- undefined 未定义
- 数组
- Java的数组必须是相同类型的对象，JS不需要。
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello');
- 取数组下标时，如果越界了，就会报
undefined
- 对象
- 对象用大括号，数组用中括号。
- 每个属性之间使用逗号隔开，最后一个不需要添加符号
// Person person = new Person(1,2,3,4,5);
var person = {
name:"zach",
age:18,
tags:['js','java','web','...']
}
取对象的值
person.name
> "zach"
person.age
> 18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
'use strict';
严格检查模式，预防JavaScript的随意性产生的问题
适用前提：IDEA需要设置支持ES6语法
需要写在JavaScript的第一行
局部变量建议都用let定义
-->
<script>
'use strict';
//全局变量
let i = 1;
//ES6版本 推荐用let
</script>
</head>
<body>
</body>
</html>
- 正常字符串我们使用单引号或者双引号包裹。
- 注意转义字符
\
\'
\n
\t
\u4e2d \u### Unicode字符
\x41 Ascll字符
- 多行字符串编写
//~波浪号 和 tab之间的` 反单引号or反引号
var msg =
`hello
world
你好a
你好b`
- 模版字符串
//~波浪号 和 tab之间的` 反单引号or反引号
let name = "zach";
let age = 3;
let msg = `你好呀，${name}`
- 字符串长度
str.length
- 字符串的可变性：不可变。
- 大小写转换
//注意，这里是方法，不是属性了。
student.toUpperCase()
student.toLowerCase()
-
student.indexOf(“t”)
-
substring
[)
student.substring(1) //从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3)左闭右开
- Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6] //通过下标取值和赋值
arr[0]
arr[0] = 1
- 长度
arr.length
注意：假如给arr.length赋值，数组大小就会发生变化。如果赋值过小，元素会丢失。过大将会出现未定义的空值。
- indexOf，通过元素获得下表索引
arr.indexOf(2)
1
字符串的"1"和数字1是不同的
-
slice() 截取Array的一部分，返回一个新数组
-
push、pop *** 作尾部
push:压入尾部
pop:d出尾部的一个元素
-
unshift()、shift() *** 作头部
-
排序sort()
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
- 元素反转reverse()
(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]
- concat()
(3)["C","B","A"]
arr.concat([1,2,3])
(6)["C","B","A",1,2,3]
arr
(3)["C","B","A"]
注意：concat()不会修改数组，会返回一个新的数组
- 连接符join
打印拼接数组，使用特定的字符串连接
(3)["C","B","A"]
arr.join('-')
"C-B-A"
- 多维数组
arr = [[1,2],[3,4],[5,6]];
arr[1][1]
4
- 数组：存储数据（如何存，如何取，方法都可以自己实现！）
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象，它有四个属性！
var person = {
name:"zach",
age:18,
email:"123456789@qq.com",
score:0
}
- JS中的对象，{… …}表示一个对象，键值对描述属性xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
- JavaScript中的所有的键都是字符串，值是任意对象！
- 对象赋值
person.name = "zach"
"zach"
person.name
"zach"
- 使用一个不存在的对象属性，不会报错！undefined
person.haha
undefined
- 动态地删减属性，通过delete删除对象的属性
delete person.name
true
person
- 动态地添加属性，直接给新的属性添加值即可
person.haha = "haha"
"haha"
person
- 判断属性值是否在这个对象中！ xxx in xxx！
'age' in person
true
//继承
'toString' in person
true
- 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
- if判断
var age = 3;
if (age>3){//第一个判断
alert("haha");
}else if(age<5){//第二个判断
alert("kuwa");
}else {//否则...
alert("kuwa");
}
- while循环，要避免程序死循环
while(age<100){
age = age + 1;
console.log(age)
}
do{
age = age + 1;
console.log(age)
}while(age<100)
- for循环
for (let i = 0; i < 100; i++){
console.log(i)
}
- forEach循环：
- 5.1开始引入
var age = [1,2,3,4,5,6,7,8,9,10];
//函数
age.forEach(function(value){
console.log(value)
})
- for…in
//for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在")
console.log(age[num])
}
}
- ES6的新特性
- Map
//ES6 Map
//学生的成绩，学生的名字
// var names = ["tom","jack","haha"];
// var scores = [100,90,80];
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value
map.set('admin',123456); //新增或修改
map.delete("tom"); //删除
- Set：无序不重复的集合
var set = new Set([3,3,1,1,1,1]);//set可以去重
set.add(2); //添加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某个元素
- ES6的新特性
- 如何使用 iterator 来遍历迭代Map和Set？
- 遍历数组
- for-in：打印下标
- for-of：打印内容
var arr = [3,4,5]
for (var x in arr){
console.log(x)
}
- 遍历map
var map = new Map([["tom",100],["jack",90],["zach",80]]);
for (let x of map){
console.log(x)
}
- 遍历set
var set = new Set([5,6,7]);
for (let x of set){
console.log(x)
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）