前端基础-----JavaScript详解
1、JavaScript是什么
- JavaScript是世界上最流行的脚本语言
- 发明:布兰登艾奇是一种在客户端运行的脚本语言。不需要编译，操作过程由js解释器逐行解释和执行。
- 功能：表单动态特效、网页特效、服务开发、桌面程序、app，控制硬件等
历史：
- ECMAScript可以理解为是JavaScript的一个标准
- 最新版本已经到了ES但大多数浏览器仍然只支持es5代码上
- 开发环境----线上环境，版本不一致
2、快速入门
2.1、引入JavaScript
<script> alert('hello world'); </script> 2）引入外部js文件
<script src="qj.js"></script> 2.2.基本语法入门
<script> // 1.变量，不管类型，直接赋值就行。var var num = 1; // alert(num); //2.条件控制 if(num<2){
alert("true"); } /* * 多行注释 * */ //JavaScript严格区分大小写 //console.log(num)打印浏览器控制台上的变量！ </script> 浏览器调试：
elements：审查元素
console：控制台
sources：查看源代码和debug调试
application：保存数据
2.3、 数据类型
数字、文本、图形、音频
1）number
- js不区分整数和小数，都用number
123 //整数123 123.1 //浮点数123.1 1.123e3 //科学计数法 -99 //负数 Nan //not a number Infinity //表示无限大 2）字符串
'abc',"abc" 3)布尔值
true false
4)逻辑运算
&& 两个都为真 结果为真
|| 一个为真 结果为真
！ 真即假 假即真
4)比较运算符
= 赋值
== 等于(类型不同，值相同，也会判断为true）
=== 绝对等于(类型值相同，结果相同true）
须知;
- NaN === Nan (false) ,Nan不等于所有的值，包括你自己
- 只能通过isNaN（NaN）判断这个数字是否正确NaN
浮点数问题：
console.log((1/3) === (1- 2/3)) //false 尽量避免使用浮点数进行操作，存在精度问题！
5）null和undefined
- null 空
- undefined 未定义
6）数组
var arr=[1,2,3,4,5,'hello',null,true]
js中数组可以是不同类型的对象
取数组下标：如果越界了，就会报undefined
7）对象
对象是大括号，数组是中括号
var person{
name:"xqh",
age:3,
tags:['js','java','web']
}
取对象的值：
person.name
>"xqh"
person.age
>3
2.4、 严格检查模式strict
'use strict';//严格检查模式，预防js的随意性导致产生的一些问题,写在javascript代码的第一行
//局部变量建议都使用let去定义
//ES6 let
let i = 1;
3、数据类型详解
3.1、 字符串
1、正常字符串我们使用单引号或者双引号包裹
2、注意转义字符 \
\n
\t
\u4e2d //unicode字符
\x41 //ascll字符
3、多行字符串编写
var msg = ` hello world java `
4、 模板字符串
let name = "xqh";
let age = 3;
let smg = `你好呀。${
name}`
5、字符串长度
console.log(str.length);
6、 字符串不可变性
var str = "student";
console.log(str[0]);//s 可以通过下标打印出字符串的每一个字母
console.loh(str);//student 字符串不可变
7、大小写转换
//注意，这里是方法，不是属性
student.toUpperCase();
student.toLowerCase()
8、获取指定下标
student.indexof('t')//1
9、 substring
//包前不包后
student.substring(1)//从第一个字符串截取到最后一个字符串
3.2、 数组
var arr = [1,2,3,4,5,6]
console.log(arr)
1、长度
console.log(arr.length); //6
- 注意：给arr.length赋值，数组大小就会发生变化，可变。如果赋值过小，元素就会丢失
2、indexof
通过元素获得下标索引
arr.indexof(2);
3、 slice() 截取Array的一部分，返回一个新数组
var arr = [1,2,3,4,5,6];
arr.slice(3)//[4,5,6] 从下标为3开始，包括3，一样是包前不包后
4、 push pop
arr.push('a','b')//往数组尾部添加元素
arr.pop()//弹出尾部的一个元素
5、unshift（） ，shift（）头部
arr.unshift('a','b')//往数组头部添加元素
arr.shift()//弹出头部的一个元素
6、排序
arr.sort()
7、 元素反转
arr.reverse
8、 concat() 拼接
arr.concat([1,2,3])//返回尾部拼接一个数组
//原数组不变
注意：并没有修改数组，只是会返回一个新的数组
9、连接符join
var arr = [1,2,3]
console.log(arr.join('-'))//1-2-3
打印拼接数组，使用特定的字符串连接
10、多维数组
arr = [[1,2],[3,4],["5","6"]];
consple.;og(arr[1][1]);
//4
3.3、 对象
若干个键值对
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
var person = {
name:"xqh",
age:3,
score:100
}
js中对象，{…}表示一个对象，键值对描述属性 ，多个属性之间使用逗号隔开，最后一个属性不加逗号
1、 对象赋值
person.age = 8;
2、 使用一个不存在的对象属性，不会报错！ undefined
3、 动态的删减属性
delete person.name;
4、动态添加
person.sex = "男"；
直接给新的属性添加值即可
5、判断属性值是否在这个对象中 xxx in xxx
'age' in person;//true
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString') //false
3.4、流程控制
//1.判断语句
if(){
}else if{
}else{
}
//2.循环
while(){
}
for(let i =0;i<100;i++){
console.log(i);
}
//3.数组循环
age.forEach(function(value)){
console.log(value)
}
//打印出索引
for(var num in object){
console.log(num)
}
//遍历元素
let str = [1,23,4,6];
for (let number of str) {
console.log(number);
}
3.5、 Map 和 Set
ES6新特性
Map：
var map=new Map([['tom',100],['jack',90]]);
var name = map.get('tom');
console.log(name); //100 通过key获得value
map.set('admin',60);
console.log(map)//添加一对键值对
for(let x of map){
console.log(x);
}//遍历map
Set：无序不重复的集合
var set = new Set([3,1,1,1]);//set可以去重
set.add();//增加
set.delete();//删除
let set = new Set([1,23,1,1])
console.log(set.has(23));//检查是否还有元素
var set = new Set([5,6,7]);
for(let x of set){
console.log(x);
}//遍历set
4、 函数及面向对象
4.1、定义函数
- 定义方式一：
//定义一个绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//调用
abs(10); //10
一旦执行到return，代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
- 定义方式二：
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
abs(10); //10
function(x){…}这是一个匿名函数。但是可以把结果赋值给abs，通过abs可以调用函数
-
参数问题：javaScript可以传任意个参数，也可以不传递参数
假设不存在参数，如何规避？
var abs = function(x){ //手动抛出异常来判断 if(typeof x!== 'number'){ throw 'not a Number'; } if(x>=0){ return x; }else{ return -x; } }假设传了很多个参数？
var abs = function (x){ console.log("x=>"+x); for(var i =0;i<arguments.length;i++){ console.log(arguments[i]); } if (x>=0){ return x; }else{ return -x; } } abs(12,34,55,55) //x=>12 12 34 55 55arguments是一个JS免费赠送的关键字；代表，传递进来的所有的参数，是一个数组
-
rest：ES6引入的新特性，获取除了已经定义的参数之外的所有参数
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
/* aaa(1,2,3) a=>1 b=>2 [3] */
//当要传入多个参数时，这样可以获取除了已经定义的参数之外的所有参数
4.2、 变量的作用域
- 在函数体中声明，则在函数体外不可以使用
- 如果两个函数使用了相同的变量名，只有在函数内部，就不冲突
- 内部函数可以访问外部函数的成员，反之不行
function qj(){
var x = 1;
function qj2() {
var y = x+1;//2 里面的可以用外面的
}
var z = y +1;//报错，y is not defined 外面的不能用里面的
}
- 内部函数变量和外部函数的变量重名，函数查找变量从自身函数开始，然后由内向外查找。
- js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
- 养成规范：所有的变量定义都放在函数的头部，便于代码维护
全局函数
var x = 1;
function f() {
console.log(x);
}
f();
console.log(x);
全局对象 window
- 默认所有的全局变量，都会自动绑定在window对象下
- alert（） 这个函数本身也是一个window变量，所以可以被覆盖
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错
- 减少冲突-----把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
//唯一全局变量
var KuangApp={
};
//定义全局变量
KuangApp.name = "hua";
KuangApp.add = function (a, b) {
return a+b;
}
var a = KuangApp.add(2,3);
console.log(a);
局部作用域 let
- 解决局部作用域冲突的问题
- 建议使用let去定义局部作用域的变量
常量const
-
ES6引入常量关键字const
const PI = '3.14';
4.3、 方法
- 定义方法
var kaungshen = {
name:'java',
birth:2020,
//方法
age:function () {
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
kaungshen.name
//方法，一定要带（）
kaungshen.age()
方法就是把函数放在对象（函数）的里面，对象只有两个东西：属性和方法
this默认指向调用它的那个函数
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen={
name:'xqh',
birth:2001,
age:getAge
}
/* kuangshen.age() this指向了kuangshen函数 21 getAge() //因为this对象没有调用函数，则指向window，而window里没有birth这个属性，所以NaN NaN */
用apply可以改变this指向其他的函数
getAge.apply(kuangshen,[]);//21
//用apply使this指向kuangshen函数，不再是只能指向调用它的函数
5、内部对象
5.1、 Date
- 基本使用
var now =new Date();//获取当前时间
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getTime();//时间戳
console.log(new Date(1234554322345));//时间戳转化为时间
- 转换
now.toLocaleString
5.2、JSON
- json是什么
- 是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
- 任何js支持的类型都可以用JSON表示
- 格式
- 对象都用{}
- 数组都用【】
- 所有的键值对都是用key：value
- JSON字符串和JS对象的转化
var user={
name:"qinjiang",
age:3,
sex:'男'
}
//对象转化为json字符串
var jsonuser = JSON.stringify(user);
//json字符串转化为对象，参数为json字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
5.3、Ajax
- 原生的js写法 xhr异步请求
- JQuey封装好的方法
- axios请求
6、面向对象编程
- 原型
var Student={
name:"qh",
age:3,
run:function (){
console.log(this.name+"run...");
}
};
var xiaoming={
name:"xiaoming"
};
//小明的原型是Student
xiaoming.__proto__=Student;
xiaoming.run()
//可以调用student里的方法 xiaomingrun...
- class继承
es6引入
1、定义一个类，属性，方法
//定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
var xiaoming = new Student("xiaoming");
xiaoming.hello();//hello
2、继承
class Xiaoxuesheng extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一个小学生')
}
}
var xiaohong = new Xiaoxuesheng(xiaohong,45);
7、 操作BOM对象
BOM：浏览器对象模型
JavaScipt诞生就是为了能够让他在浏览器中运行！
- IE 6~11
- Chrome
- Safari
- FireFox
1、window
window.innerHeight
817
window.outerHeight
920
//获取窗口宽度高度
window代表浏览