JavaScript
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位字符串的规则