47 前端学习4-JavaScript
Posted 纳福川Donner
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了47 前端学习4-JavaScript相关的知识,希望对你有一定的参考价值。
一、javascript概述
1.ECMAScript和JavaScript的关系
1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的,但是没有称其为JavaScript,有两个方面的原因。一是商标,JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。
二、JavaScript引入方式
script标签内写代码
<script> // 在这里写你的JS代码 </script>
引入额外的js文件
<script src="myscript.js"></script>
三、注释
// 这是单行注释
/*
这是
多行注释
*/
四、基础语法
1. 结束符
js代码要以分号(;)为结束符。
2. 变量声明
js定义变量时,需要使用var或者let声明变量。
变量名的定义规范:
- 可以使用下划线_,数字,字母,$组成,不能以数字开头。
- 声明变量使用 (var/let 变量名;)的格式来进行声明。其中var声明的变量影响全局,let声明的变量只在局部有效,不会影响全局。
var a = 'aaa';
var b = 18;
变量名的注意事项:
- 变量名区分大小写。
- 推荐使用驼峰式命名规则。
- 保留字不能用做变量名。
五、数据类型
js拥有动态类型,也就是同一个变量名可以指向不同数据类型的值。
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "aaa" // 此时x是字符串
1. 数值
js不区分整型和浮点型,就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
还有一个特殊的NaN,也是数值类型,表示不是一个数字(not a number)。
和python一样,js也可以将字符串类型的数字强制类型转换成数值的类型。
parseInt("123") // 返回123
parseInt(123abc) // 返回123,只要字符串中有数字,就将数字拿出来。
parseInt("ABC") // 没有数字只有字符串,就返回NaN
parseFloat("123.456") // 返回123.456
2. 字符串
js中的打印为console.log
var a = "Hello"
var b = "world;
var c = a + b; // js推荐使用+号做字符串的拼接
console.log(c); // 得到Helloworld
字符串的常用内置方法:
方法 | 说明 |
---|---|
.length | 返回长度 |
.trim() | 移除两边空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回索引为n的字符 |
.concat(value, ...) | 将value拼接到前面一个字符串后面 |
.indexOf(substring, start) | 返回某个字符的索引位置 |
.substring(from, to) | 根据索引获取子序列,不可以识别负数 |
.slice(start, end) | 切片,可以识别负数 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
3. 布尔值
true和false。都是小写。
var a = true;
var b = false;
4. null和undefined
- null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
- undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined
null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。
简单来说,null有数据类型,而undefined连类型都没有。
5. 对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
5.1 数组
类似于python中的列表。也是用中括号索引取值。
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
常用方法:
方法 | 说明 |
---|---|
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
.concat(val, ...) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
6. 常用方法
6.1 forEach()
作用:for循环取出每一个数,教给函数处理。
函数放一个形参,则对应每一个元素;
放两个形参,对应每一个元素和该元素的索引。
var lis = [11,22,33,44,55]
lis.forEach(function(index){
console.log(index)
})
/*
11
22
33
44
55
*/
6.2 splice()
后面至少跟三个参数:第一个:起始元素的位置,第二个:被替换元素的个数,第三个及后面的:要替换上的元素。
lis = [11,22,33,44]
lis.splice(1,1,88,99)
/*lis = [11, 88, 99, 33, 44]*/
6.3 typeof
类型查询运算符
typeof "abc" // "string"
typeof null // "object"
typeof true // "boolean"
typeof 123 // "number"
六、运算符
1. 算术运算符
+ - * / % ++ --
var x=10;
var res1=x++; //先等于号,后++,++为+1
var res2=++x;
2. 比较运算符
> >= < <= != == === !==
1 == “1” // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
3. 逻辑运算符
&& || !
与 或 非
4. 赋值运算符
= += -= *= /= 和python一样
七、流程控制
1. if - else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
2. if- else if -else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
3. switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
4. for
for (var i=0;i<10;i++) {
console.log(i);
}
5. while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
6. 三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
x
10
八、函数
1. 函数的定义
JavaScript中的函数和Python中的非常类似,只是定义方式有点区别。
// 普通函数定义
function f1() {
console.log("Hello world!");
}
// 带参数的函数
function f2(a, b) {
console.log(arguments); // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
// 带返回值的函数
function sum(a, b){
return a + b;
}
sum(1, 2); // 调用函数
// 匿名函数方式
var sum = function(a, b){
return a + b;
}
sum(1, 2);
// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
(function(a, b){
return a + b;
})(1, 2);
也可以使用 箭头:=> 来定义函数
var f = v => v;
// 等同于
var f = function(v){
return v;
}
如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
}
2. 函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(arguments.length); console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1
}
add(1,2)
输出:
3
2
1
注意:
函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。
九、内置对象和方法
1. 自定义对象(字典)
JavaScript的对象(Object)本质上是键值对的集合(相当于python的字典),但是只能用字符串作为键。
var myObject = new Object()
myObject.username = 'aaa'
myObject.password = 123
myObject.age = 18
console.log(myObject)
{username: "aaa", password: 123, age: 18}
2. Date对象
//方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
2019/11/17 下午10:26:50
//方法2:参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
2004/3/20 上午11:12:00
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
2020/4/3 上午11:12:00
//方法3:参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
1970/1/1 上午8:00:05
console.log(d3.toUTCString());
Thu, 01 Jan 1970 00:00:05 GMT
//方法4:参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());
2004/3/20 上午11:12:00 //毫秒并不直接显示
Date对象的方法:
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月(0-11)真正的月份需要+1
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
3. Json对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
以上是关于47 前端学习4-JavaScript的主要内容,如果未能解决你的问题,请参考以下文章