文章目录
JavaScript语言基础
一、概述
1. 简述
- 简述：JavaScript（简称“JS”）作为开发Web页面的脚本语言而出名的，是一门世界上最流行的脚本语言，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格，学好JavaScript语言十分重要！！
- 历史：JavaScript在1995年由Netscape(网景通信公司)的Brendan Eich发明推出，在网景导航者浏览器上首次设计实现而成，最初将其脚本语言命名为LiveScript，因为Netscape与Sun公司合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。Ecma(欧洲计算机制造商协会)以JavaScript为基础制定了ECMAScript标准；最新版本已经到es6版本，但是大部分浏览器还只停留在支持 es5 代码上。
2. 引入JS代码的方法
- 内部标签
<script>
//代码内容
</script>
//不用显示定义type，也默认就是 javascript
<script type="text/javascript">
//代码内容
</script>
- 外部引入
<script src="test.js"> </script>
注意：
直接访问js代码，显示的是纯文本内容，可以通过域名加路径访问：
<script src="hhtp://ip/路径/文件名.js"></script>
二、基本语法
1. 数值
js不区分小数和整数，Number
1234 //整数123
1234.12 //浮点数123.1
1.23e45 //科学计数法
-1234 //复数
NaN //not a number
Infinity //表示无限大
2. 字符串
// 正常字符串我们使用 单引号，或者双引号包裹
'abcdefg'
"abcdefg"
\n; //换行
\t; //一个字符的空格
str.length; //字符串的长度
//多行字符串编写
var msg =
`hello
world
你好
世界`
大小写转换：
//这里是方法，不是属性了
student.toUpperCase()
student.toLowerCase()
字符串截取：
student.substring(1) //从第一个字符截取到最后一个字符
student.substring(1,3) //截取第一个第二个字符,区间表示[1,3)
3. 布尔值
true;
false;
4. 运算符
算术运算符
+ //加法
- //减法
* //乘法
/ //除法
% //余数
++ //自增
-- //自减
逻辑运算符
&& //和运算符:两个都为true，结果为true
|| //或运算符:一个为true，结果为true
! //非运算符:true为false，false为true
赋值运算符
= x=y //将y值赋给x
+= x+=y //即：x=x+y
-= x-=y //即：x=x-y
*= x*=y //即：x=x*y
/= x/=y //即：x=x/y
%= x%=y //即：x=x%y
用于字符串：把两个或多个字符串变量连接起来，使用 + 运算符
s1=“Hello”;
s2=“World”;
s3=txt1+txt2;
s3结果为：HelloWorld
若需要给连接后的字符串加上空格，需要将空格插入某个字符串中：
s1="Hello ";
s2=“World”;
s3=txt1+txt2;
s3结果为：Hello World
比较运算符
== //等于 var x=5; x==8; 结果为false
=== //绝对等于（值和类型均相等） var=5; x==="5" 结果为fasle var=5; x===5; 结果为true
!= //不等于
!== //不绝对等于（值和类型有一个不相等，或两个都不相等）
注意：
NaN===NaN，这个与所有的数值都不相等，包括自己，只能通过 isNaN(NaN) 来判断这个数是否是 NaN
5. 数组
Java的数值必须是相同类型的对象，js中不需要这样
//Array可以包含任意的数据类型
var arr = [1,2,3,4,'hello',null,true];
new Array(1,12,3,4,4,5,'hello');
var arr = [1,2,3,4,5,6];
arr.length //数组长度
6
arr.indexOf(2) //通过元素获得下标索引
1
arr.slice(1,3) //截取arr下标1,2之间的元素，返回一个新数组，类似于String中的substring
[2,3]
push() //压入到尾部
pop() //弹出尾部的一个元素
unshift() //压入到头部
shift() //弹出头部的一个元素
arr.sort()//数组排序 不区分大小写
var arr2 = ["B", "C", "A"]
arr2.sort()
["A", "B", "C"]
arr.reverse() //数组反转
var arr3 = ["A", "B", "C"]
arr3.reverse()
["C", "B", "A"]
concat() //连接两个或多个字符串
var arr4 = ["C", "B", "A"]
arr4.concat([1,2,3])
["C", "B", "A", 1, 2, 3] //concat()并没有修改数组，只是会返回一个新的数组
join() //连接符
var arr5 = ["C", "B", "A"]
arr5.join('-')
"C-B-A"
//多维数组
var arr6 = [[1,2],[3,4],["5","6"]];
arr6[1][1] //取值
4
取数组下标：产生越界，就会出现 undefined
7. 自定义对象
var person = {
name: "张三",
age: 20,
tags: ['aaa','bbb','ccc','...']
}
//取对象的值
person.name
张三
//对象赋值
person.name = "李四"
//判断对象属性是否存在
'age' in person
true
//判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age')
true
//删除对象的属性
delete person.name
8. 严格检查格式（strict）
预防JavaScript的随意性导致产生的一些问题（前提：IEDA 需要设置支持ES6语法）
'use strict' //必须写在JavaScript的第一行
//当你定义变量i，使用严格检查格式时，下面的代码中的i会变红,局部变量建议都使用 let 去定义
i = 1;
9. 流程控制
9.1 if 判断
var age = 3;
if (age>3){ //第一个判断
alert("aaa"); //alert: 弹窗
}else if(age<5) { //第二个判断
alert("bbb");
}else { //否则
alert("ccc");
}
9.2 while 循环
while(判断条件){
}
do{
}while(判断条件)
9.3 for 循环
for (let i = 0; i < 100 ; i++) {
console.log(i)
}
9.4 forEach 循环
var arr = [1,2,3,4,5,6,7,8]
arr.forEach(function (value) { //函数 function
console.log(value)
})
9.5 for in 循环
var arr = [1,2,3,4,5,6,7,8]
for (var num in arr){
if (arr.hasOwnProperty(num)){
console.log(arr[num])
}
}
三、ES6 的新特性
map&set
//map:通过键获得值
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value！
map.set('admin',123456); //新增或修改！
map.delete("tom"); //删除！
//遍历(迭代) let of
for (let x of map){
console.log(x)
}
//Set:无序不重复的集合
var set = new Set([1,2,3,4,1])
//Set(4) {1, 2, 3, 4} //四个元素 分别为{1, 2, 3, 4}
set.add(2); //添加！
set.delete(1); //删除！
//Set(3) {2, 3, 4} //三个元素 分别为{2, 3, 4}
set.has(3); //是否包含某个元素！
//true
//遍历 let of
for (let x of set) {
console.log(x)
}
//下篇再见…谢谢
扫一扫
2982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
