JavaScript是一门世界上最流行的脚本语言。
Java、JavaScript 并没有什么关系。
一个合格的后端人员,必须要精通JavaScript
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上!
开发环境---线上环境,版本不一致
1、内部引入
<script>
//...
</script>
2、外部引入
ads.js
//...
test.html
<script src="ads.js"></script>
测试代码:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>MyFirstJavaScriptCoding</title>
<!-- <script>
alert(‘Hello,World‘);
</script> -->
<!--外部引入-->
<!-- 注意script标签必须成对出现 -->
<script src="js/qj.js"></script>
<!--不用显示定义type,也就默认是JavaScript-->
<script type="text/javascript">
</script>
</head>
<body>
<!--这里也可以放置-->
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!--JavaScript严格区分大小写-->
<script>
// 1.定义变量 变量类型 变量名 = 变量值;
var num = 1;
// alert(num);
// 2.条件控制
if(num == 1) {
alert("true");
}
//console.log(num) 在浏览器的控制台打印变量 相当于sout
</script>
</head>
<body>
</body>
</html>
数值、文本、图形、音频、视频...
变量
var num
number
JS不区分小数和整数、number
123//整数123
123.1//浮点数123.1
123e3//科学计数法
-99//负数
NaN// not a number
Infinity//表示无限大
字符串
‘abd‘ "abc"
布尔值
true false
逻辑运算
&&
||
!
比较运算符
= 赋值
== 等于(类型不一样、值一样,也会判断为true)
=== 绝对等于(类型一样、值一样,结果为true)
var a = ‘1‘;
undefined
var b = 1;
undefined
console.log(a == b);
VM1217:1 true
undefined
console.log(a === b);
VM1232:1 false
undefined
这是JS的缺陷,坚持不要使用 == 比较。
须知:
浮点数问题:
1/3 == (1 - 2/3)
false
尽量避免使用浮点数进行计算,存在精度问题
Math.abs(1/3 - (1-2/3)) < 0.00000001
true
null和undefined
数组
//保证代码的可读性,尽量使用[]
var arr = [1,2,3,‘hello‘,null,true];
new Array(1,2,3,‘hello‘,null,true);
取数组下标:如果越界了就会
undefined
对象
对象是大括号,数组是中括号
每个属性之间使用逗号隔开,最后一个不用写逗号
var person = {
name: "January",
age: 22,
tags: [‘js‘, ‘java‘, ‘python‘, ‘...‘]
}
取对象的值
person.name
"January"
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
前提:
IDEA需要设置支持ES6语法
‘use strict‘; 严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都是用let去定义
-->
<script>
‘use strict‘;
// 全局变量
let i = 1;
// ES6 let
</script>
</body>
</html>
1、正常字符串我们使用单引号或者双引号包裹
2、注意转义字符 \
\‘
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
3、多行字符串编写
//tab键上边esc键下边
console.log(`
你好,IU
你好,奈良
你好,世界
`)
4、模板字符串
let name = "xionglei";
let age = 22;
let msg = `你好啊, ${name}`;
5、字符串长度
str.length
6、字符串的可变性,不可变
7、大小写转换
//注意这里是方法,不是属性
name.toUpperCase();
name.toLowerCase();
8、获取指定字符串的索引
indexOf()
lastIndexOf()
9、截取字符串
substring()
slice()
split()
name.substring(1,3); //左闭右开 [1,3)
//slice() 与 substring() 功能基本相同,下面是不同点
name.substring(2,-2); //xi [0,2)
name.slice(2,-2); //ongl [2,name.length-2)即[2,6)
name.substring(-2,2); //xi [0,2)
name.slice(-2,2); //""
这些方法执行后都是返回新的字符串,不会改变原始字符串。
注意:
如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
String.split() 执行的操作与 Array.join 执行的操作是相反的。
Array可以包含任意的数据类型
arr = [1,2,3,4,5,6];//通过下标取值赋值
arr[0] = 1;
1、长度
arr.length
注意:假如给arr.length赋值,数组大小就会发生变化。如果赋值过小,元素就会丢失。
2、indexOf()
通过元素或得下标索引
arr.indexOf(2)
1
字符串的“1”与数字1是不同的。
3、slice()
截取Array的一部分,与字符串中的slice几乎相同。
4、push()
pop()
尾部
push(): 压入到尾部
pop() : 弹出尾部的一个元素
5、unshift()
shift()
头部
unshift(): 压入到头部
shift() : 弹出头部的一个元素
6、排序 sort()
arr = ["a","c","b"];
arr.sort();
> (3) ["a","b","c"];
7、元素反转
arr = ["a","b","c"];
arr.reverse();
> (3) ["c","b","a"]
8、concat()
arr = ["a","b","c"];
arr.concat(1,2,3);
(6)?["c", "b", "a", 1, 2, 3]
arr
(3)?["c", "b", "a"]
注意:concat() 并没有修改数组,只是返回了一个新数组。
9、连接符 join()
打印拼接数组,使用特定的字符串连接。
(3)?["c", "b", "a"]
arr.join("-");
"c-b-a"
10、多维数组
arr = [[1,2],[3,4],[‘5‘,"6"]];
(3)?[Array(2), Array(2), Array(2)]
arr[1][1];
4
11、fill()
给数组对应索引上的元素赋值
arr = [1,2,3];
(3)?[1, 2, 3]
arr.length = 10;
10
arr
(10)?[1, 2, 3, empty × 7]
arr.fill(0, 3, -1);
(10)?[1, 2, 3, 0, 0, 0, 0, 0, 0, empty]
数组:存储数据。(如何存 如何取,方法都可以自己实现)
若干个键值对
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
//定义了一个person对象,有四个属性
var person = {
name : "xionglei",
age : 22,
email : "xionglei1614@163.com",
score : 145
}
JavaScript中对象,{......}表示一个对象,键值对描述属性xxx: xxx,多个属性之间用逗号隔开,最后一个属性不加逗号!
JavaScript中所有的键都是字符串,值是任意对象
1、对象赋值
person.name = "IU";
"IU"
person.name
"IU"
2、使用一个不存在的对象属性,不会保存
person.IU
undefined
3、动态的删减属性
delete person.name;
true
person
{age: 22, email: "xionglei1614@163.com", score: 145}
4、动态的添加属性
person.IU = "IU";
"IU"
person
{age: 22, email: "xionglei1614@163.com", score: 145, IU: "IU"}
5、判断属性值是否在这个对象中! xx in XXX!
‘age‘ in person;
true
//继承
‘toString‘ in person;
true
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty
()
person.hasOwnProperty(‘toString‘);
false
person.hasOwnProperty(‘age‘);
true
if判断
let age = 3;
if(age < 3) {
alert("wuwu");
}else if(age === 3) {
alert("heihei");
}else{
alert("haha");
}
while 循环,避免死循环
let age = 90;
while(age < 100) {
console.log(age);
age++;
}
do{
console.log(age);
age++;
}while(age < 100);
for循环
for(let i = 0; i < 10; i++) {
console.log(i);
}
forEach循环
arr = [1,2,3,4,5,6,"1",‘2‘];
arr.forEach(function (value) {
console.log(value);
});
for...in
arr
(8)?[1, 2, 3, 4, 5, 6, "1", "2"]
for(let index in arr){
console.log(arr[index]);
};
ES6中的新特性
Map:
let map = new Map([[‘tom‘, 100], [‘jack‘, 90], [‘LiMing‘, 88]]);
undefined
map.get(‘tom‘);//获取
100
map.set(‘XiaoMei‘, 99);//新增或修改
Map(4)?{"tom" => 100, "jack" => 90, "LiMing" => 88, "XiaoMei" => 99}
map.delete(‘tom‘);//删除
Set: 无序不重复的集合
let set = new Set([3,1,1,1,2,2]);
set.add(4);//增
Set(4)?{3, 1, 2, 4}
set.delete(1);//删除
true
set.has(4);//判断是否存在
true
作业:使用iterator来遍历迭代Map、Set!
?
原文:https://www.cnblogs.com/BearBird/p/12632449.html