javascript

JavaScript

• js介绍
• js变量和赋值
• 输入输出信息
• 基础数据类型
• 内置数据类型
• 数据类型之间的转换
• 运算符
• 流程控制
• 函数
• 面向对象(了解))
• 正则的用法

1.js介绍

• JavaScript分为三层

  • ECMAScript : JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句等

  • DOM : 文档对象模型,操作网页上的元素的API,比如让盒子移动变色轮播图等

  • BOM : 浏览器对象模型,操作浏览器功能的部分API,比如让浏览器自动滚动

• 优点

  • JavaScript对初学者比较友好

  • JavaScript是有界面效果的(比如C语言就只有白底黑字)

  • JavaScript是弱变量型的语言,变量只需要用var来声明,而java中的变量的声明,要根据变量的类型来定义

• 特点

  • 简单易用:可以使用任何的文本编辑器编写,只需要浏览器就能执行程序

  • 解释执行(解释语言) ; 事先不编译,逐行执行,无需进行严格的变量声明

• 语法要求

  • JavaScript对换行缩进空格不敏感

  • 所有的符号都是英文的

• js代码的引入

  • 在页面中，我们可以在body标签中放入<script type=”text/javascript”></script>标签对儿，<script type=”text/javascript”></script>标签对儿

2.js变量和复制

• 变量

  • 变量有命名规范: 只能有字母数字下划线,美元符号$构成,且不能以数字开头,并且不能是JavaScript中的保留字,变量区分大小写

• 赋值

  • 将等号右边的值,赋值给左边的变量,等号右边的变量的值不变

• 注释

  • 单行注释(//)是ctrl + /,多汗注释(/* */)是ctrl + shift +/

3.输入输出信息

• 弹出警告框 : alert语句

• 控制台输出console.log("")和输入框prompt()

4.基础数据类型

• number

  • JavaScript中只要是数就是数值型的(number),无论整数,浮点数,无论大小,无论正负,都是number类型的

• string ; 字符串类型

  • 常用方法

    • 方法	说明
      .length #不加括号的是属性	返回长度
      .trim() #得到一个新值	移除空白
      .trimLeft()	移除左边的空白
      .trimRight()	移除右边的空白
      .concat(value, ...) #s1='hello';s.concat('xx');得到helloxx	拼接
      .charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串	返回第n个字符
      .indexOf(substring, start) #这个start是从索引几开始找，没有返回-1	子序列位置
      .substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
      .slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它	切片
      .toLowerCase() #全部变小写	小写
      .toUpperCase() #全部变大写	大写
      .split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数	分割

• 布尔值 : boolean

• 空元素 : null

• 未定义 : undefined

5.内置数据类型

• 数组.Array

  • 数组的创建

    •  var colors = ['red','color','yellow']; //字面量方式创建（推荐）
       var colors2 = new Array();//使用构造函数（后面会讲）的方式创建 使用new关键词对构造函数进行创建对象

  • 数组的赋值

    •  var arr = [];
       //通过下标进行一一赋值
       arr[0] = 123;
       arr[1] = '哈哈哈';
       arr[2] = '嘿嘿嘿'

  • 数组的常用方法

    • 方法	说明
      .length	数组的大小
      .push(ele)	尾部追加元素
      .pop()	获取尾部的元素
      .unshift(ele)	头部插入元素
      .shift()	头部移除元素
      .slice(start, end)	切片
      .reverse() #在原数组上改的	反转
      .join(seq)#a1.join('+')，seq是连接符	将数组元素连接成字符串
      .concat(val, ...) #连个数组合并,得到一个新数组，原数组不变	连接数组
      .sort()	排序
      .forEach() #讲了函数再说	将数组的每个元素传递给回调函数
      .splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
      .map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

  • json对象

    •  var str1 = '{"name": "chao", "age": 18}';
       var obj1 = {"name": "chao", "age": 18};
       // JSON字符串转换成对象
       var obj = JSON.parse(str1); 
       // 对象转换成JSON字符串
       var str = JSON.stringify(obj1);

  • 日期: Date

    • 定义

      • 创建日期对象只有构造函数一种方式,使用关键字new

      •  var myDate = new Date();  //创建了一个date对象

    • 常用方法

      • 

  • RegExp对象

    •  //RegExp对象
       ​
       //创建正则对象方式1
       // 参数1 正则表达式(不能有空格)
       // 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)
       ​
       // 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
       ​
       // 创建RegExp对象方式（逗号后面不要加空格），假如匹配用户名是只能字母开头后面是字母加数字加下划线的5到11位的
       var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //注意，写规则的时候，里面千万不能有空格，不然匹配不出来你想要的内容，除非你想要的内容本身就想要空格，比如最后这个{5,11},里面不能有空格
       ​
       // 匹配响应的字符串
       var s1 = "bc123";
       ​
       //RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
       reg1.test(s1);  // true
       ​
       // 创建方式2，简写的方式
       // /填写正则表达式/匹配模式（逗号后面不要加空格）
       var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; 
       ​
       reg2.test(s1);  // true
       ​
       注意，此处有坑：如果你直接写一个reg2.test()，test里面啥也不传，直接执行，会返回一个true，用其他的正则规则，可能会返回false，是因为，test里面什么也不传，默认传的是一个undefined，并且给你变成字符串undefined，所以能够匹配undefined的规则，就能返回true，不然返回false
       ​
       ​
       // String对象与正则结合的4个方法
       var s2 = "hello world";
       ​
       s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o,
       s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
       s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割，得到一个新值，原数据不变
       s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换
       ​
       // 关于匹配模式：g和i的简单示例
       var s1 = "name:Alex age:18";
       ​
       s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
       s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
       s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写
       ​
       ​
       // 注意事项1：
       // 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
       // 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
       // 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
       // 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
       // 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
       // 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。
       ​
       var reg3 = /foo/g;
       // 此时 regex.lastIndex=0
       reg3.test('foo'); // 返回true
       // 此时 regex.lastIndex=3
       reg3.test('xxxfoo'); // 还是返回true
       // 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号，把匹配规则写的确定一些，尽量不用上面这种的写法/xxx/。
       ​
       // 注意事项2(说出来你可能不信系列)：
       // 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(undefined)，然后将这个undefined又转为字符串"undefined",去进行匹配了, 并且/undefined/.test()默认返回true。
       var reg4 = /^undefined$/;
       reg4.test(); // 返回true
       reg4.test(undefined); // 返回true
       reg4.test("undefined"); // 返回true

  • 数学相关 Math

    • 常用方法

    • 

6.数据类型之间的转换

• parseint() : 字符串转数字

• parseFloat() : 字符串转小数

• String() 和.toString() : 转字符串

  •  var n1 = 123;
     var str1 = String(n1);
     console.log(typeof str1);
     ​
     var num = 234;
     console.log(num.toString())

• Boolean() : 任何数据类型都可以转成布尔值

  •  var b1 = '123';  // true
     var b3 = -123;  // true
     var b4 = Infinity; //表示正无穷大 true
     ​
     var b2 = 0;       // false
     var b5 = NaN;     //false
     var b6;              //表示undefined //false
     var b7 = null;    //false

7.运算符

• 字符串可以相加,数字也可以相加,字符串和数字也可以相加,但是会自动把结果转换成字符串

• 字符串 - 数值 = 数值

8.流程控制

• if单分支

• if...else...

• if...else if...else

• case语句

  •  var gameScore = 'better';
     switch(gameScore){
     //case表示一个条件 满足这个条件就会走进来 遇到break跳出。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
         case 'good':
         console.log('玩的很好')
         //break表示退出
         break;
         case  'better':
         console.log('玩的老牛逼了')
         break;
         case 'best':
         console.log('恭喜你 吃鸡成功')
         break;
     ​
         default:
         console.log('很遗憾')
     }

• while循环

• do-while循环

  •  //不管有没有满足while中的条件do里面的代码都会走一次
     var i = 3;//初始化循环变量
     do{
     ​
         console.log(i)
         i++;//更新循环条件
     ​
     }while (i<10) //判断循环条件

• for循环

• 三元运算符

  •  var a = 1
     var b =2
     var c = a>b ? a:b  //如果a>b成立返回a，否则返回b
     console.log(c)

9.函数

• 函数的定义

  •  function 函数名字(){
     ​
         }

• 函数的调用

  • 函数名();

• 函数的参数和返回值:形参和实参

  • 注意: 实际参数和形式参数的个数,要相同

  • 注意: 函数只能返回一个值,如果要返回多个值,只能将其放在数组或者对象中返回

• 伪数组 : arguments

  • arguments代表的是实参,arguments只在函数中使用

  • 返回函数实参的个数 : arguments.length

  • 获取形参的个数 : 函数名.length

  • 之所以说arguments是伪数组,是因为; arguments可以修改元素,但是不能改变数组的长短

• 匿名函数

  •  // 匿名函数方式，多和其他函数配合使用，后面我们就会用到了
     var sum = function(a, b){  //在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响你使用
       return a + b;  
     }
     sum(1, 2);

• 自执行函数

  •  // 立即执行函数，页面加载到这里，这个函数就直接执行了，不需要被调用执行
     (function(a, b){
       return a + b;
     })(1, 2);  //python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)

• 函数的全局变量和局部变量

  • 局部变量: 在函数内部使用var声明的是局部变量,只有函数内部能访问它,函数运行完毕就会消失

  • 全局变量: 在函数外部声明的变量是全局变量,网页上的所有脚本和函数都鞥呢访问它,全局变量会在页面关闭后删除

• 作用域

  • 函数内部查找变量,如果找不到会再到外部查找,逐步找到最外层

10.面向对象(了解)

• 创建对象的几种常用方式

  • 使用object或对象字面量创建对象

  • 工厂模式创建对象

  • 构造函数模式创建对象

  • 原型模式创建对象

 

11正则的用法

•  创建一个正则:
   var reg = RegExp('正则表达式')  //注意,写在字符串中所有带的元字符都会被转义,应该写作\
   var reg2 = /正则表达式/  //内部的元字符就不会转义了
   reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false
   ​
   在字符串中应用正则
   var exp = 'alex3714'
   exp.match(/d/)    //只匹配从左到右的第一个
   exp.match(/d/g)   //匹配所有符合规则的 返回一个数组
   var exp2 = 'Alex is a big sb'
   exp2.match(/a/) //只匹配小写a
   exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来
   exp2.match(/a/ig) //不区分大小写并匹配所有
   ​
   exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置
   exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果
   exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值
   ​
   小问题1
   var reg2 = /d/g     //正则表示要匹配多个值
   reg2.test('a1b2c3')  //多次test会的到true true true false 继续test会循环之前的结果
   ​
   小问题2
   var reg3 = /w{5,10}/
   reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则