深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › javascript教程 › javascript基础教程（完整版）
返回列表 发新帖
查看: 1055|回复: 0

javascript基础教程（完整版）

[复制链接]
马不停蹄

UID
13
贡献
74
金币
0
主题
24
在线时间
10 小时
注册时间
2023-6-26
最后登录
2023-7-5
发表于 2023-6-28 16:20:23 | 1055 | 0 | 显示全部楼层 |阅读模式
马不停蹄 2023-6-28 16:20:23 1055 0 显示全部楼层
本帖最后由 马不停蹄 于 2023-7-3 19:07 编辑

javascript基础教程（完整版）

1，获取变量的类型
typeof
语法：
  1. var age = 18;
  2. console.log(typeof age);  // 'number'
复制代码
  • 字符串长度

length属性用来获取字符串的长度

  1. var str = '黑马程序猿 Hello World';
  2. console.log(str.length);
复制代码
字符串拼接使用 + 连接

  1. console.log(11 + 11);
  2. console.log('hello' + ' world');
  3. console.log('100' + '100');
  4. console.log('11' + 11);
  5. console.log('male:' + true);
复制代码
2，转换成字符串类型
toString()
  1. var num = 5;
  2. console.log(num.toString());
复制代码
String()
  1. var s = null;
  2. console.log(s.toString());
  3. console.log(String(s));

  5. // String()函数存在的意义：有些值没有toString()，
  6. // 这个时候可以使用String()。比如：undefined和null
复制代码
  • 拼接字符串方式
    num  +  ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

3，转换成数值类型
Number()
parseInt()
parseFloat()
+，-，-0 等运算
  1. var str = '500';
  2. console.log(+str);                // 取正
  3. console.log(-str);                // 取负
  4. console.log(str - 0);
复制代码
4，转换成布尔类型
  • Boolean()

  1. var a = Boolean('0');
  2. var b = Boolean(0);
  3. var c = Boolean('1');
  4. var d = Boolean(null);
  5. var e = Boolean(undefined);
  6. var f = Boolean(NaN);

  8. console.log(a,b,c,d,e,f); //true false true false false false

  10. // 0、''(空字符串) 、null、 undefined 、NaN 会转换成false  其它都会转换成true
复制代码
字符串、数值及布尔类型的数据类型转换

判断分支结构
if语句
语法结构
  1. if (/* 条件表达式 */) {
  2.   // 执行语句
  3. }

  5. if (/* 条件表达式 */){
  6.   // 成立执行语句
  7. } else {
  8.   // 否则执行语句
  9. }

  11. if (/* 条件1 */){
  12.   // 成立执行语句
  13. } else if (/* 条件2 */){
  14.   // 成立执行语句
  15. } else if (/* 条件3 */){
  16.   // 成立执行语句
  17. } else {
  18.   // 最后默认执行语句
  19. }
复制代码
// 判断一个数是偶数还是奇数
  1. var n = 10;
  2. if(n%2==0){
  3.     console.log('偶数');
  4. }else{
  5.     console.log('奇数');
  6. }
复制代码
三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法
代码如下：
  1. // 是否年满18岁
  2. var age = 18;
  3. var s = age>=18?'Yes':'no';
  4. console.log(s);
复制代码
switch语句
语法格式:
  1. switch (expression) {
  2.   case 常量1:
  3.     语句;
  4.     break;
  5.   case 常量2:
  6.     语句;
  7.     break;
  8.   …
  9.   case 常量n:
  10.     语句;
  11.     break;
  12.   default:
  13.     语句;
  14.     break;
  15. }
复制代码
/*
* 执行过程:
* 获取表达式的值,和值1比较,相同则执行代码1,遇到break跳出整个语句,结束
* 如果和值1不匹配,则和值2比较,相同则执行代码2,遇到break跳出整个语句,结束
* 如果和值2不匹配,则和值3比较,相同则执行代码3,遇到break跳出整个语句,结束
* 如果和值3不匹配,则和值4比较,相同则执行代码4,遇到break跳出整个语句,结束
* 如果和之前的所有的值都不一样,则直接执行代码5,结束
*/
  1. break可以省略，如果省略，代码会继续执行下一个case
  2. switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）
复制代码
数组的创建
  1. // 字面量方式创建数组
  2. var arr1 = []; //空数组
  3. // 创建一个包含3个数值的数组，多个数组项以逗号隔开
  4. var arr2 = [1, 3, 4];
  5. // 创建一个包含2个字符串的数组
  6. var arr3 = ['a', 'c'];
  7. console.log(arr1);
  8. console.log(arr2);
  9. console.log(arr3);

  11. // 可以通过数组的length属性获取数组的长度
  12. console.log(arr3.length);
  13. // 可以设置length属性改变数组中元素的个数
  14. arr3.length = 0;

  16. console.log(arr3[0]);//undefined
复制代码
  1. var arr1 = [a,b,c]; // 一维数组
  2. var arr2 = [a,b,c,[d,e]]; // 二维数组
  3. var arr3 = [a,b,c,[d,e,[f,g]]]; // 三维数组
  4. var arr4 = [a,b,c,[d,e,[f,g,[h,t,y]]]]; // 四维数组
复制代码
遍历数组
for循环数组遍历的基本语法：
  1. for(var i = 0; i < arr.length; i++) {
  2.         // 数组遍历的固定结构
  3. }
复制代码
for循环示例：
  1. var arr1 = [1, 3, 4];
  2. for(var i = 0;i<arr1.length;i++){
  3.     console.log(arr1[i]);
  4. }
复制代码
whil循环示例：
  1. var arr1 = [1, 3, 4];
  2. var i = 0;
  3. while(i<arr1.length){
  4.     console.log(arr1[i]);
  5.     i++;
  6. }
复制代码
将数组转为字符串并以 | 分割
  1. //把数组中的每个名字后面拼接一个|然后以字符串的方式输出
  2. var names = ["卡卡西", "佐助", "凤姐", "鸣人", "黑崎一护"];
  3. var str = "";//空的字符串,用来存储最后的拼接的结果的字符串
  4. //不停的遍历数组的数据,并且拼接字符串
  5. for (var i = 0; i < names.length - 1; i++) {
  6.     str += names[i] + "|";//拼接字符串的方式
  7. }
  8. str += names[names.length - 1];
  9. console.log(str);
复制代码
函数的返回值
  1. //声明一个带返回值的函数
  2. function 函数名(形参1, 形参2, 形参...){
  3.   //函数体
  4.   return 返回值;
  5. }

  7. //可以通过变量来接收这个返回值
  8. var 变量 = 函数名(实参1, 实参2, 实参3);
复制代码
JavaScript中的对象
  1. var obj1 = {};//得到一个空对象
  2. var obj2 = {name:'张三',age:18};//得到拥有两个属性的对象
  3. //得到拥有两个属性和一个方法的对象
  4. var obj3 = {
  5.     name:'张三',
  6.     age:18,
  7.     fei:function(){
  8.         console.log('你上天啊！');
  9.     }
  10. }
复制代码
new Object() 创建对象 （内置构造函数）
  1. var person = new Object();

  3. person.name = 'lisi';
  4. person.age = 35;
  5. person.sayHi = function(){
  6.     console.log('Hello,everyBody');
  7. }
复制代码
自定义构造函数创建对象
  1. function Person(name,age,job){
  2.       this.name = name;
  3.       this.age = age;
  4.       this.job = job;
  5.       this.sayHi = function(){
  6.         console.log('Hello,everyBody');
  7.       }
  8. }
  9. var p1 = new Person('张三', 22, 'actor');
复制代码
  • 遍历对象的属性

通过for..in语法可以遍历一个对象

  1. var obj1 = {
  2.     name:'路飞',
  3.     age : 17,
  4.     sex : '男',
  5. }

  7. for(var k in obj1){
  8.     console.log(k);
  9.     console.log(obj1[k]);
  10. }
复制代码
注意：使用for …in语法，同样可以遍历数组
注意：如果属性名或方法名，是一个变量，则使用对象[变量名] 语法
  • 删除对象的属性

  1. var obj1 = {
  2.     name:'路飞',
  3.     age : 17,
  4.     sex : '男',
  5. }

  7. console.log(obj1.age); //17
  8. delete obj1.age;  //删除对象中指定的属性
  9. console.log(obj1.age); // undefined
复制代码
跟数学相关的运算直接使用Math中的成员即可
  1. console.log(Math.PI); //圆周率3.141592653589793
  2. Math.random();//介于 0 和 1 之间的伪随机数。

  4. Math.ceil(6.6);//获取大于或等于提供数值的最小整数--向上取整
  5. Math.floor(8.8);//获取小于或等于提供数值的最大整数--向下取整
  6. Math.round(9.9);//四舍五入
  7. Math.max(10,20,15);//取多个值中的最大值
  8. Math.min(10,20,15);//取多个值中的最小值
  9. Math.pow(10,2);//返回x的y次幂
  10. Math.sqrt(100);//求平方根
复制代码
求10-20之间的随机数
  1. Math.floor(Math.random() * (max - min)) + min;
复制代码
Date对象（构造函数）
创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。
  1. // 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
  2. var now = new Date();
  3. console.log(now.getTime());        // 获取距1970年1月1日（世界标准时间）起的毫秒数
  4. console.log(now.valueOf());        // valueOf用于获取对象的原始值,与getTime()方法相同

  6. Date构造函数的参数
  7. 1. 毫秒数 1498099000356                new Date(1498099000356)
  8. 2. 日期格式字符串  '2015-5-1'         new Date('2015-5-1')
  9. 3. 年、月、日……                                  new Date(2015, 4, 1)   // 月份从0开始
复制代码

javascript交互, js教程
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表