javascript介绍
Web前端有三层:
HTML:从语义的角度,描述页面结构
CSS:从审美的角度,描述样式(美化页面)
JavaScript:从交互的角度,描述行为(提升用户体验)
其中JavaScript基础又分为三个部分:
ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
特点:
简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。
解释执行(解释语言):事先不编译、逐行执行、无需进行严格的变量声明。
基于对象:内置大量现成对象,编写少量程序可以完成目标
javascript语法
JavaScript对换行、缩进、空格不敏感。每一行语句末尾要加上分号,如果不加分号,压缩后将不能运行。
所有符号都是英文
js代码的引入
在body标签中放入<script type="text/javascript"></script>
标签:
<script type="text/javascript"></script>
变量和赋值
变量
var a=100;
命名规范:只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是javascript保留字。
保留字:
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
赋值
var a = "3";var b = 2;a = b;console.log(a); /*2*/console.log(b); /*2*/
输入、输出信息
弹出警告框
alert("这是一个警告!")
控制台输出console.log("")和输入框prompt()
var a = prompt('请输入你要说的话:');console.log(a);
基础数据类型
数值类型
在JavaScript中只要是数,就是number类型的。
var a=100;console.log(typeof a); //或者console.log(typeof (a)) 查看a变量的类型
小数的保留:
var num=1.235;var newNum = num.toFixed(2); //小数点后保留2位console.log(newNum); //1.23
字符串类型:string
定义:
var a = "abcd";var b = '哈哈哈';console.log(typeof a); //stringconsole.log(typeof b); //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),返回切割后的元素个数
分割
charAt()返回指定索引的位置:
var a = 'abcdef';var b = a.charAt(2);console.log(b); // c 索引超出范围返回空字符串
concat 返回字符串值,表示两个或多个字符串拼接:
var b = a.concat('xxxx');console.log(b); //abcdefxxxx
match()字符串匹配和正则匹配:
var b = a.match('a');console.log(b); // ["world", index: 6, input: "hello,world", groups: undefined]var b = a.match('A');console.log(b); // null// 正则var a = 'abcd,dcba'var r = a.match(/\w+/)console.log(r) // ["abcd", index: 0, input: "abcd,dcba", groups: undefined]// g表示匹配多次var r = a.match(/\w+/g)console.log(r)// ["abcd", "dcba"]
replace(a,b)将字符串a替换为字符串b:
var a = 'abcdef';var b = a.replace('c','xxxx');console.log(b); //abxxxxdef
indexOf()/search()查找字符的下标,如果找到返回字符的下标,找不到则返回-1:
var b = a.indexOf('c');console.log(b); // 2
slice(start,end)切片。左闭右开,分割数组,接收负参数:
var b = a.slice(-4,-1);console.log(b); // cde
substr(start,length) 返回一个字符串:从指定位置开始,取指定字符数:
var b = a.substr(3,2);console.log(b); // de
substring(indexStart,indexEnd) 切子字符串。顾头不顾尾:
var b = a.substring(1,3);console.log(b); // bcd
split('sep',n) 切割,根据n保留切割的数组长度:
var b = a.split('',2);console.log(b); // ["a", "b"]
布尔值boolean
var b = false;console.log(typeof b); // boolean
空元素null
var b = null;console.log(b) // 空对象. object
未定义undefined
var d;console.log(typeof d) // undefined
内置对象类型
数组Array
创建:
var npc = ['ergou','datou','tiedan'];var npc2 = new Array(); //使用构造函数的方式创建,使用new关键词对构造函数进行创建对象
赋值:
var arr = [];arr[0] = 123;arr[1] = '哈哈哈';arr[2] = '嘿嘿嘿';console.log(arr); //[123, "哈哈哈", "嘿嘿嘿"]
方法:
方法
说明
.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() #讲了函数再说
返回一个数组元素调用函数处理后的值的新数组
concat方法:列表的拼接:
var arr = ['123','哈哈哈','嘿嘿嘿'];var arr1 = ['啦啦啦','xxx'];var arr2 = arr.concat(arr1);arr2 // ["123", "哈哈哈", "嘿嘿嘿", "啦啦啦", "xxx"]
join方法:将数组中的元素使用指定的字符串连接起来,它会形成一个新的字符串
var arr = ['123','哈哈哈','嘿嘿嘿'];var arr1 = arr.join('');arr1 // "123哈哈哈嘿嘿嘿"
toString()方法:将数组转换成字符串
var arr = ['123','哈哈哈','嘿嘿嘿'];var arr1 = arr.toString();arr1 // "123,哈哈哈,嘿嘿嘿"
slice(start,end):切片(左闭右开)
var arr = ['123','哈哈哈','嘿嘿嘿'];var arr1 = arr.slice(1,2);arr1 // ["哈哈哈"]
pop方法:删除尾元素
var arr = ['张三','李四','王文','赵六'];var item = arr.pop();console.log(arr);//["张三", "李四","王文"]console.log(item);//赵六
push方法:向数组末尾添加一个元素或多个元素,并返回新的长度
var arr = ['张三','李四','王文','赵六'];var newLength= arr.push('小马哥');//可以添加多个,以逗号隔开console.log(newLength);//5console.log(arr);//["张三", "李四","王文","赵六","小马哥"]
reverse()方法:翻转数组
var arr = ['张三','李四','王文','赵六'];arr.reverse()arr // ["赵六", "王文", "李四", "张三"]
sort()方法:排序
var names = ['ergou','tiedan','datou'];names.sort();console.log(names);// ["datou", "ergou", "tiedan"]
Array.isArray(被检测的值):判断是否为数组
var b = 'qwe';Array.isArray(b); // false
shift():删除并返回数组的第一个元素
var arr = ['123','哈哈哈','嘿嘿嘿'];arr.shift(); // '123'arr // ["哈哈哈", "嘿嘿嘿"]
unshift():向数组的开头添加一个或更多元素,并返回新的长度
var arr = ['123','哈哈哈','嘿嘿嘿'];arr.unshift('xxx','哒哒哒'); // 5arr // ["xxx", "哒哒哒", "123", "哈哈哈", "嘿嘿嘿"]
清空数组的几种方式
var array = [1,2,3,4,5,6];array.splice(0); //方式1:删除数组中所有项目array.length = 0; //方式1:length属性可以赋值,在其它语言中length是只读array = []; //方式3:推荐
sort的问题
关于sort()需要注意: 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。 如果想按照其他标准进行排序,就需要提供比较函数,也就是自己提供一个函数提供排序规则,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下: 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。 若 a 等于 b,则返回 0。 若 a 大于 b,则返回一个大于 0 的值。示例:function sortNumber(a,b){ return a - b}var arr1 = [11, 100, 22, 55, 33, 44]arr1.sort(sortNumber)
数据类型之间的转换
parseInt():字符串转数字
var a = '5'var a = parseInt(a);console.log(typeof(a)) // "number"//带有自动净化的功能;只保留字符串最开头的数字,后面的中文自动消失。console.log(parseInt("2018你真帅!!")); //自动带有截断小数的功能:取整,不四舍五入。var a = parseInt(5.8) + parseInt(4.7);console.log(a);var a = parseInt(5.8 + 4.7);console.log(a);
parseFloat():字符串转小数
var a = parseFloat('5.8')+parseFloat('4.7');a // 10.5var a = parseFloat('5.8'+'4.8');a // 5.84
String()和.toString:转字符串
var n1 = 123;var str1 = String(n1);typeof str1 //"string"var num = 234;num.toString() //"234"typeof num.toString() // "string"
Boolean():任何数据类型都可以转成布尔值
var b1 = '123';Boolean(b1) // truevar b2 = -123;Boolean(b2) // truevar b3 = Infinity; // 无穷大Boolean(b3) // truevar b4 = 0;Boolean(b4) // falsevar b5 = NaN;Boolean(b5) // falsevar b6; // undefinedBoolean(b6) // falsevar b7 = null;Boolean(b7) // false
运算符
赋值运算符
以var x = 12,y=5来演示示例
比较运算符
var x = 5;
算术运算符
var a = 5, b = 2
'+': 字符串可相加,数字也可相加,字符串和数字也可以相加。值得注意的是,如果字符串和数字相加会自动把结果转换成字符串。如下:
console.log('吃了'+'么') //'吃了么'console.log(12+3) //15console.log('吃了'+3) //'吃了3'
'-':字符串-数值=数值
var a = '3';var b = 2;a-b // 1b-a // -1
逻辑运算符
&&与 ||或 !非
流程控制
if单分支:
var ji = 20;if(ji >= 20){ '大吉大利,今晚吃鸡'}// '大吉大利,今晚吃鸡'
if...else...:
var ji = 19;if(ji >= 20){ '大吉大利,今晚吃鸡'}else{ '继续努力'}// '继续努力'
if...else if...else:
if (true) { //执行操作}else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行}
case语句:
var gameScore = 'better';switch(gameScore){ case 'good': console.log('玩的好'); break; case 'better': console.log('玩的老牛逼了'); case 'best': console.log('恭喜你 成功吃鸡'); default: console.log('很遗憾')}
while 循环
var i = 1;while(i<=9){ console.log(i); i = i+1;}
do...while 循环
var i = 3;do{ console.log(i) i++;}while(i<10)
for循环
for(var i=1; i<=10; i++){ console.log(i); // 1,2,3,4,5,6,7,8,9,10}var arr = [1,2,3,4];for(n in arr){ console.log(n); // 0,1,2,3}
三元运算
var a = 1;var b = 2;var c = a>b ? a:b; //如果a>b成立返回a,否则返回bconsole.log(c); // 2
函数
定义:
function 函数名字(){}
调用:
函数名();
函数的参数和返回值:形参和实参
注意:实际参数和形式参数的个数,要相同;函数只能有一个返回值,如果要返回多个值,只要将其放在数组或对象中返回
console.log(sum(3,4));// 函数:求和function sum(a,b){ return a+b;}
伪数组:arguments
arguments代表的是实参。arguments只在函数中使用。
返回函数实参的个数:arguments.length
function fn(a,b,c) { console.log(arguments); console.log(fn.length); //获取形参的个数 console.log(arguments.length); //获取实参的个数 console.log("----------------");}fn(2,4,6,8);// Arguments(4) [2, 4, 6, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]// 3// 4
arguments是伪数组,是因为:arguments可以修改元素,但不能改变数组的长短。
function fn(a,b) { arguments[0] = 99; //将实参的第一个数改为99 arguments.push(8); //此方法不通过,因为无法增加元素}
匿名函数
// 匿名函数方式,多和其他函数配合使用,后面我们就会用到了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)