Web前端之JavaScript基础

JavaScript介绍
变量
- 变量类型
- - 基本的数据类型Number String Boolean underfined null
  - typeof运算符
  - 引用的数据类型Object Array Function
  - 算术运算符和赋值运算符
  - 比较运算符和逻辑运算符
  - 字符串 string对象
  - - 字符串方法：
    - 字符串和数值相互转换方法
    - 字符串切片方法
    - 字符串查找方法
    - 字符串常用方法
  - 数组Array
  - - 数组的栈和队列方法
    - 数组排序方法
    - 数组操作方法
    - 数组位置方法和迭代方法
    - 数组map()映射方法和forEach()遍历
    - join方法
  - if else语句
  - switch语句
  - 三目运算符
  - for循环
  - while循环和do while循环
函数
Object 对象
内置对象Array
Date日期对象
Globle对象
Math对象
- 方法
- - 求最大最小值方法
  - ceil() floor() round()方法
  - 随机数方法random()
  - - 获取随机整数
    - 获取随机颜色
    - 获取随机验证码

JavaScript介绍

Javascript（JS）是一种脚本语言，主要用于 Web。它用于增强 HTML 页面，通常可以嵌入 HTML 代码中。JavaScript 是一种解释型语言。因此，它不需要编译。JavaScript 以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果，接受可变文本，验证数据，检测用户的浏览器等。
JavaScript组成部分

JavaScript用途

嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等
基于Node.js技术进行服务器端编程。

JavaScript基本结构

<script type="text/javascript">//javascript语句;</script>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js文件的引入</title>   <!-- 外部的js --><script type="text/javascript" src="js/index.js"></script>
</head>
<body><!-- 内部的js --><script type="text/javascript">//编写js代码alert('hhhhhhaha');//一个弹出框</script>
</body>
</html>

注意：JavaScript代码的执行顺序是从上往下的。

变量

必须使用字母、下划线（_）、$ 开始。
多个英文字母驼峰：myName。驼峰法的意思是：除第一个单词之外，其他单词首字母大写。
不能使用js中关键字和保留字来进行命名。
变量名要严格区别大小写。

     var x=30;//变量初始化var y;//声明变量y=30;//变量赋值

变量类型

基本的数据类型Number String Boolean underfined null

①undefined：示例：var width;

变量width没有初始值，将被赋予值undefined

②null：表示一个空值，与undefined值相等

③number：

var iNum=23; //整数

var iNum=23.0; //浮点数

④Boolean：true和false 但是JS会把他们解析成1；0

⑤String：一组被引号（单引号或双引号）括起来的文本 var string1=“This is a string”;

typeof运算符

typeof检测变量的返回值；typeof运算符返回值如下：

①undefined：变量被声明后，但未被赋值.

②string：用单引号或双引号来声明的字符串。

③boolean：true或false。

④number：整数或浮点数。

⑤object：javascript中的对象、数组和null。

引用的数据类型Object Array Function

算术运算符和赋值运算符

包括+、-、*、\、%、++、- -、+=、-=等，优先级与数学类似
示例：

//算数运算符var x=10;var y=2;var sum=x+y;var en=x-y;var or=x*y;var op=x%y;//取余//优先级和数学类似//递增和递减以及赋值运算符//++ and --var x=3;x++;//相当于x=x+1;alert(x);var c=10;c+=5;//相当于c=c+5;

比较运算符和逻辑运算符

比较运算符："==="表示等同于，既比较当前的值又比较当前的数据类型，如果
不等则会返回false。"!=="不等同于，而"=="仅仅比较的是数值。
示例：

//比较var a=5;var astr='5';var isequal1=a===astr;console.log(isequal1);var isequal2=a==astr;console.log(isequal2);

逻辑运算符：&&与 ||或！非
示例：

     var salary=9500;var vocation=5;if(salary>9000&&vocation>=3){console.log('可以去逛街啦');}else if(salary>8000||vocation>=5){console.log('回家看看吧');}else{console.log('哪也不去');}

字符串 string对象

属性： length 返回字符串的字符长度
示例：

var str="this is JavaScript";
var strLength=str.length;      //长度是18

字符串方法：

注意：

字符串的创建，有两种书写方式（单引号和双引号）
用字符串的时候不能嵌套，除了使用单双引号外还可以使用转义字符\达到转义的效果，在第一个字符和最后一个字符的后面加上转义字符

     var name='would you like "it"?';alert(name);var str="I'm \"ppt\"";//使用转义字符\alert(str);

字符串和数值相互转换方法

//字符串和数值相互转换var str='11112.579355';console.log(parseInt(str));//11112,转换整型，当转换字符串时，当发现不是一个数值的时候，便停止解析，只保留前面的结果console.log(parseFloat(str));//11112.579355console.log(typeof parseFloat(str));//numberconsole.log(Number(str));//对当前字符串解析，如果是数值则直接输出数值11112.579355。如果不是，则会返回NaN（not a number）。var a=Number(str);console.log(isNaN(a));//如果a的值是数值则会返回true，如果不是则返回falsevar num=1313.2465;//强制类型转换console.log(num.toString());console.log(String(num));//隐式转换console.log(''+num);console.log(''.concat(num));console.logNumber((num.toFixed(2));//toFixed(2) 2指的是指定小数点后的位数（进位方式是四舍五入），不指定的话得到的结果是整型数值

字符串切片方法

slice()和substring()基本上是类似的，substr()有所不同
这三个方法通常都会接收一两个参数

//字符串切片方法var str='hello world';//切片 console.log(str.slice(2));//切片，llo world，将前两个字符切掉console.log(str.substring(2));//同上console.log(str.substr(2));//同console.log(str.slice(2,4));//顾头不顾尾，头切尾不切。第一个参数是起始位置，第二个参数是结束位置。为llconsole.log(str.substring(2,4));//同上console.log(str.substr(2,6));//第一个参数是起始位置，第二个参数是返回的字符数，为llo wo。console.log(str.slice(-3));//rld，一共11个字符，11-3=8，把前八个字符都切掉console.log(str.slice(-3,-1));//相当于console.log(str.slice(8,10));

字符串查找方法

//查找var str='hello world';console.log(str.indexOf('l'));//2console.log(str.lastIndexOf('l'));//9console.log(str.indexOf('l',5));//9,从第五个开始往后找console.log(str.lastIndexOf('l',4));//3,从第四个开始往后找//查找当前字符在字符串中的所有位置var sub='Discover interesting projects and people to populate your personal news feed.';var arr=[];var pos=sub.indexOf('o');while(pos>-1){//找到当前字符o对应的位置arr.push(pos);pos=sub.indexOf('o',pos+1);}console.log(arr);

字符串常用方法

     console.log(str.length);//获取字符串长度11console.log(str.charAt(1));//获取指定的字符。这里指的是获取str中第一个字符也就是econsole.log(str.charCodeAt(1));//获取指定的字符对应的编码。这里是获得字符串中e的 Unicode 编码101console.log(str.concat('ppt','yang ge'));//拼接字符串，通常情况不适用它来做拼接，而使用+来做多个字符的拼接var strr='     hello world       ';console.log(strr.trim());//trim()方法清除当前字符串的前后空格var strrr='yammy SHE';console.log(strrr.toLowerCase());//toLowerCase()把所有字符转小写console.log(strrr.toUpperCase());//toUpperCase()把所有字符转大写

数组Array

数组是值的集合，每个值都有一个序列号，从0开始。数组中每个索引都有一个相应的值。
创建数组：
var 数组名称=new Array(size);new指的是数组的关键字，size指的是数组中可存放的元素总数。
为数组元素赋值：
示例：

     var shopping=['赫莲娜','海蓝之谜','李艳艳','刘昊然'];var rand=['Lux',[2,5,7],shopping];//嵌套，二维数组

访问数组：
示例：

     var item1=rand[0];console.log(item1);rand[0]='吴磊';console.log(rand);var a=rand[1][2];console.log(a);// 访问数组长度console.log('数组的长度是：'+rand.length);

常用属性：length 获取数组元素的个数,即最大下标加1

数组的栈和队列方法

//栈方法（lifo last-in-first-out）  //push()往数组的最后一项添加内容var newlength=yaner.push('王俊凯');console.log(newlength);//push方法输出的是数组的最新长度console.log(yaner);//pop()从数组末尾删除最后一项var lastItem=yaner.pop();//pop方法输出的是删除的最后一项的内容console.log(lastItem);console.log(yaner);//队列方法 fifo 先进先出 shift() unshift()//unshift()在数组第一项添加进内容newlength=yaner.unshift('龚子琪');//unshift()输出的是数组的最新长度console.log(newlength);console.log(yaner);//shift()从数组开头删除第一项var firstItem=yaner.shift();console.log(firstItem);//shift方法输出的是删除的第一项的内容console.log(yaner);

数组排序方法

//数组排序var values=[4,2,8,25,15,9];//数组倒序 revers()方法values.reverse();console.log(values);sort() 实现数组排序，升序、降序values.sort();console.log(values);//[15, 2, 25, 4, 8, 9],默认是按照ASⅡ码排序的function compare1(a,b){//a位于b之前return a-b;}values.sort(compare1);console.log(values);//升序排序function compare2(a,b){return b-a;}values.sort(compare2);console.log(values);//降序排序

数组操作方法

操作方法 concat()数组合并 slice()删除 splice()替换

//操作方法 concat() slice() splice()//1.concat()数组合并var colors=['pink','seagreen','brown','purple','orange'];var newColors=colors.concat('blue');//["pink", "seagreen", "brown", "blue"]var newColors;newColors=colors.concat({name:'yyyyy'},['aaaa','rrrr']);console.log(newColors);//2.slice() 删除//slice可以接收一到两个参数，将当前数组中的一个或者多个项创建一个新数组newColors=colors.slice(1,2);//1是数组索引的起始位置，2是结束位置 顾头不顾尾 ["seagreen"]newColors=colors.slice(-2,-1);//相当于；slice(3,4) 一共5个，5-2,5-1//splice()删除 插入 替换//删除var names=['潘','李','沈','梁','上官','潘','南宫','潘'];names.splice(2,1);//["潘",李","梁"...]，第一个参数指的是从第几个字符开始删除，第二个参数指的是删除的字符个数names.splice(2,0,'娄','顾');//2指的是插入字符的位置,0指的是不删任何元素，后面加的是你要插入的元素names.splice(1,1,'欧阳');//把李换成欧阳

数组位置方法和迭代方法

//位置方法 indexOf()  lastIndexOf()alert(names.indexOf('潘'));alert(names.lastIndexOf('潘'));alert(names.indexOf('潘',3));//2指的是从数组的第二项元素开始往后查找alert(names.lastIndexOf('潘',2));//2指的是从数组的第二项元素开始往前查找alert(names.indexOf('潘撒'));//-1,如果查不到结果会返回-1//迭代方法filter()将数组的元素进行过滤var numbers=[1,2,3,5,7,8,22,44,13];var filterResult=numbers.filter(function(item,index,array){//array可写可不写console.log('item:'+item);console.log('index:'+index);console.log('array:'+array);return item>20});console.log(filterResult);

数组map()映射方法和forEach()遍历

//map()方法，映射，var mapResult=numbers.map(function(item,index,array){return item*2;});console.log(mapResult);//遍历当前数组for(var i=0;i<mapResult.length;i++){console.log(mapResult[i]);}//map方法应用var oldArray=[{name:'YSL',price:350},{name:'dior',price:300},{name:'burberry',price:310}];var newNames=oldArray.map(function(item,index){return item.name})var newPrice=oldArray.map(function(item,index){return item.price;})console.log(newNames);//将数组中所有name输出console.log(newPrice);//将数组中所有price输出//forEach()遍历mapResult.forEach(function(item,index){console.log(item);})

join方法

     var yaner=['易烊千玺','刘昊然','吴磊'];var b=yaner.join('*');//join方法可以自定义用任意符号对数组元素进行分割console.log(b);//输出   易烊千玺*刘昊然*吴磊

if else语句

条件语句用于基于不同条件执行不同的动作。
使用 if 来规定要执行的代码块，如果指定条件为 true
使用 else 来规定要执行的代码块，如果相同的条件为 false
使用 else if 来规定要测试的新条件，如果第一个条件为 false
使用 switch 来规定多个被执行的备选代码块
示例：

     var weather='snowing';if(weather==='sunny'){console.log('天气晴朗好心情');}else if(weather==='rain'){console.log('阴雨连绵');}else if(weather==='snowing'){console.log('下雪应该品茶');}else{alter('输入天气有误');}

switch语句

switch 语句用于基于不同条件执行不同动作。计算一次 switch 表达式，把表达式的值与每个 case 的值进行对比，如果存在匹配，则执行关联代码。
解决多个if else-if嵌套关系，让其不那么臃肿。
注意：小心break cash穿透
示例：

var english='中';switch(english){case'优':alert(1);break;case'良':alert(2);break;            case'中':alert(3);//编写switch语句，小心break cash穿透       case'及格':alert(4);break;          default:alert(5);break;         }

三目运算符

三目元算符：条件？true时执行：false时执行

var isresult=2>4?'真的':'假的';

for循环

for循环语法：
for（初始化条件1；结束条件2；递增条件3）{
//run this code 4
}
运行顺序：1243

break；跳出当前循环，中止循环
continue；跳出当前循环，下次循环继续进行
示例：

     var i;var sum=0;for ( i = 0; i <= 9; i++) {if(i===8){// break;//中止循环continue;//跳出当前循环，下次循环继续进行}sum=sum+i;}document.write(sum);//将内容打印在页面上

while循环和do while循环

while循环 先判断再执行
do while循环 先执行一次，再判断要不要继续执行

     //while循环var sum=0; //求100以内的偶数和var n=100; //初始化条件while(n>0){ //判断循环结束的条件sum=sum+n;n=n-2; //递增条件}alert(sum);//do-while 先执行一次，再判断要不要继续执行var sum=0;var i=1;do{sum=sum+i;i++;}while(i<=100);document.write(sum);

函数

通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数，一个函数的参数在三到四个左右
由函数执行的代码被放置在花括号中：{}
函数返回值 通过return关键字
函数表达式 两种写法

1.function subtraction(a,b){return a-b;}var multiplication=function(a,b){return a*b;}

2.匿名

(function(){var you='yangge';var hello=function(){alert('hey '+you);}window.second=hello;
})();

函数作用：封装重复性代码。
函数作用域：

函数外部的变量称为全局变量
函数内部的变量是局部变量
全局污染：若声明了全局变量，全局变量就会绑定到window上，不同的javascript文件如果使用了相同的全局变量，或者定义了相同命名的顶层函数，都会造成命名冲突，并且很难被发现，即造成了全局变量的污染，是作用域的冲突。通过匿名函数来解决
示例：

(function(){var you='yangge';var hello=function(){alert('hey '+you);}window.second=hello;
})();

Object 对象

创建方式：字面量创建
在js里，一切皆为或者皆可以被用作对象。可通过new一个对象或者直接以字面量形式创建变量（如var i=“aaa”)，所有变量都有对象的性质。注意：通过字面量创建的对象在调用属性和方法时会被对象包装器暂时包装成一个对象，具有对象的性质。如
var str=“我不是一个真的对象”;
alert(str.length); //str被暂时包装成一个String对象，可调用该对象的属性和方法
不过这并不意味着它就是一个对象了，typeof(i)的值为仍String。
而通过new的对象，如
var str=new String(“aaa”)；
typeof(“str”)==Object;//true
示例：

//对象（属性和方法）字面量创建  姓名，年龄，身高，爱好（动作）var person={name:'muziyang',age:24,height:187,hobby:function(a){alert('很好');return a+' 阳光男孩';}}//查看对象中内容console.log(person);console.log(person.name);console.log(person.hobby(187));

内置对象Array

是用于构造数组的全局对象，数组是类似于列表的高阶对象。
创建数组的方法：
1.通过字面量：var arr = [1,2,3]; 里面的参数直接作为数组里的值。
2.通过构造器：var arr = new Array(1,2,3,4,5,6); var arr2 = new Array(6);当构造器里的参数为一个时，作为数组实例的length属性。
示例：

var colors=new Array();//相当于colors=[];if(Array.isArray(colors)){//对数组进行操作colors[0]='哈哈';colors[1]='啦啦';colors[2]='科科';var a=colors.toString();//把数组变为字符串console.log(a);console.log(typeof a);console.log(colors);}

Date日期对象

获取当前时间：

     var now=new Date();console.log(now);//获取当前时间//几种不同的输入方式var time=new Date('December 25,1995 13:00:00');var time=new Date(1995,3,22);//年 月 日，这里的月是0-11，所以3指的是4月var time=new Date(1995,3,22,14,33,20);//年 月 日 时 分 秒

获取当前时间常用方法：

     //获取当前时间的常用方法console.log(now.getDate());//获取月份的第几天（1-31）console.log(now.getMonth()+1);//获取月份（0-11），出来的值要加一console.log(now.getFullYear());//获取年份console.log(now.getDay());//获取一星期中的第几天（0-6）星期天是0console.log(now.getHours());//获取小时（0-23）console.log(now.getMinutes());//获取分钟（0-59）console.log(now.getSeconds());//获取秒（0-59）

日期格式化方法：

//日期格式化方法console.log(now.toDateString());//Mon Jul 15 2019 星期 月份 日期 年份console.log(now.toTimeString());//17:19:11 GMT+0800 (中国标准时间)时 分 秒 时区

三种常用的调用当前时间的方法：

//三种常用的方法console.log(now.toLocaleDateString());//2019/7/15 console.log(now.toLocaleTimeString());//下午5:24:57 console.log(now.toLocaleString());//2019/7/15 下午5:26:18 最常用console.log(now.toUTCString());//Mon, 15 Jul 2019 09:28:04 GMT 不常用

返回用数字时钟格式的时间：

     var now=new Date();var hour=now.getHours();var minute=now.getMinutes();var second=now.getSeconds();var temp=''+(hour>12?hour-12:hour);if(hour===0){temp='12';}temp=temp+(minute<10?':0':':')+minute;temp=temp+(second<10?':0':':')+second;     temp=temp+(hour>=12?' P.M':' A.M');console.log(temp);//输出为  7:42:32 P.M

Globle对象

提供了两个方法
对我们当前的一些特殊符号，比如说空格，来进行编码，编成utf-8的方式
encodeURI()只能对空格解析进行编码
encodeURIComponent()对空格和：\ 所有等符号解析，编码使用最多的方法
解码
decodeURI()只能对空格解析
decodeURIComponent()对空格和：\ 所有等符号解析，对应encodeURIComponent()
用什么方式编码就要用什么方式解码。
示例：

     //URIvar uri='http://www.apeland.cn/web index.html?name=asjgbkxj';//编码console.log(encodeURI(uri));//http://www.apeland.cn/web%20index.html?name=asjgbkxjconsole.log(encodeURIComponent(uri));//http%3A%2F%2Fwww.apeland.cn%2Fweb%20index.html%3Fname%3Dasjgbkxj//解码console.log(decodeURIComponent(uri));

window对象在目前的环境下，相当于我们的globle对象
在整个ECMAScript里面，整个js对象中的顶层对象就是window

Math对象

提供一些计算属性

方法

求最大最小值方法

//方法 min() max()var max=Math.max(1,45,66,78,2,3);var min=Math.min(1,45,66,78,2,3);var arr=[3,5,666,77,2,34];var max=Math.max.apply(null,arr);//求数组中的最大数值，十分简便。相当于Math.max(arr[0],arr[1],arr[2]...)

ceil() floor() round()方法

//ceil() floor() round()var num=14.234;console.log(Math.ceil(num));//15 Math.ceil()天花板函数 。结果往前进一位console.log(Math.floor(num));//14地板函数 结果去除后面小数点console.log(Math.round(num));//14标准的四舍五入

随机数方法random()

//随机数 random() 0<=random<1console.log(Math.random());

获取随机整数

//1.获取min到max之间的随机整数
function randomInteger(min,max){return Math.floor(Math.random()*(max-1)+min);}

获取随机颜色

//2.获取随机颜色 rgb(0~255,0~255,0~255)
function randomColor(){//var r=random(0,256),g=random(0,256),b=random(0,256);var r=Math.floor(Math.random()*256),g=Math.floor(Math.random()*256),b=Math.floor(Math.random()*256);//模板字符串``var result=`rgb(${r},${g},${b})`;return result;
}var rc=randomColor();//调用函数console.log(rc);document.body.style.backgroundColor=rc;//在页面上显示颜色

获取随机验证码

//3.随机验证码 四位 数字+字母（大写）function createCode(){//设置默认的空字符串var code='';//设置长度var codeLength=4;//var randomCode=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];for(var i=0;i<codeLength;i++){//设置随机范围0~36            var str=randomInteger(0,36);code=code+randomCode[str];}return code;}var bb=createCode();//调用函数console.log(bb);document.write(`<h1>${bb}</h1>`);//在页面上显示随机验证码