一.JavaScipt基本介绍
JavaScipt简称 JS 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,作为开发Web页面的脚本语言出名
JavaScipt基于原型编程,多范式的动态脚本语言,并支持面向对象,命令式和申明式(如函数数式编程)
js代码编写的位置
HTML和JS都被直接提供给浏览器来执行和渲染。每个浏览器都有一个相应的JS引擎。JS代码的执行需要依赖于HTML，不能单独执行。
注意:方式一不可以和方式二放在一个标签中杂糅使用
直接编写在HTML的script标签中
HTML中js的所有代码都是按顺序执行的，出错误就不在往下执行,SyntaxError错误则都不执行,错误代码出现,终止后续代码执行
编写在js文件
单独编写一个js文件来存放js代码,然后在需要使用的html文件中引入js文件
这样做的好处就是可以把js文件和html文件分离,一个js文件可以被多个html文件使用,维护起来也方便
二.变量
变量的作用
系统为之设置一个标识,程序可以通过变量名来指向具体的对象内存,并通过变量名来获得对应的对象
变量声明
-
JS是弱类语言,未严格区分数据类型 ,如果值没有初始化,默认值就是undefined
-
var和let可以代替所有类型,值是什么类型,变量就是什么类型
var可以声明同名变量,后声明的覆盖前声明,let同名就会报错
常量是用const声明变量,值不可以修改
let username;
alert(username); // undefined
let username = "小狼"; // 声明的同时赋值，可声明同名变量，会覆盖前面的变量
alert(username);
username = 18; // 单独赋值，需注意值的类型的合理性
let age = 10;
// let age = 20; // 错误，SyntaxError，解开则整个js文件无法执行
alert(age);
const email="[email protected]"; // 声明常量，值不可修改
// email="[email protected]"; // TypeError 错误使用
变量的打印方式
- alert(变量名),直接在浏览器中弹出对话框
- 方式二console.log(变量名); (info ,log ,debug.warn,error)打印的字体颜色不同;在浏览器控制台中打印容
数据类型
- Number 数值
- 整数常量
- 实数常量
- 特殊数值
三.特殊的运算符
比较运算符 = 和 == 以及 === 之间的区别：
= 赋值运算符：用于把一个常量/变量的值赋值给另外一个变量
== 比较运算符：用于比较两个数据的值是否相等，不会去判断类型 console.log("18" == 18 );
=== 比较运算符：先判断数据类型是否相等，然后再去判断值是否相等 console.log("18" === 18);
在逻辑运算中 0、""、false、NaN、undefined、null 表示为 false，其他类型数据都表示 true
-
&& 和 || 运算符的区别
&& 操作：从左往右依次判断，返回第一个为 false 的值，否则返回最后一个为 true 的值； **&& 找 false ,找到则返回对应的值,直到最后一个如果没有找到,则返回最后一值.** || 操作：从左往右依次判断，返回第一个为 true 的值，否则返回最后一个为 false 的值。 **|| 找 true ,找到则返回对应的值,直到最后一个如果没有找到,返回最后一个值**
四.函数的定义和调用
//普通函数的定义,有参有返回
function doWork1(name) {
return name;
}
//普通函数的定义,无参无返回
function doWork2() {
console.log("无参无返回");
}
//普通函数的调用
let ret1 = doWork1("小明");
console.log(ret1);
doWork2();
//====================================
//匿名函数,用一个变量的值来存在,没有固定的函数名称
let add = function (a, b) {
return a + b;
};
//========匿名函数调用========
let ret2 = add(1.2);
console.log(ret2);
function printAddRet(fun){
let ret = fun(1,2);
console.log(ret);
}
printAddRet(add);
//当我们并不知道函数带了什么参数时可以用arguments来查看带了什么参数
//=======================================
//箭头函数
let add2 = (a, b) => a + b;
//无参单行函数体箭头函数
let fun1 = () => console.log("无参单行函数体箭头函数");
//无参多行函数体箭头函数
let fun2 = () => {
console.log("无参多行函数体箭头函数");
console.log("无参多行函数体箭头函数");
};
//一个形参数的箭头函数
let fun3 = name => console.log(name);
//多个形参数多行函数体的箭头函数
let fun4 = (name, age) => {
console.log(name);
console.log(age);
};
//========箭头函数调用========
console.log(add2(1, 3));
fun1();
fun2();
fun3("小小");
fun4("大大",22);
//用箭头函数做回调
printAddRet((a, b) => a + b);
注意箭头函数没有arguments
五.数组
1.数组的定义
// 创建数组对象
let arr = new Array();
//类似数组中的静态初始化
let arr2 = new Array("西施","王昭君","貂蝉","杨贵妃");
let arr2 = new Array(1, 2, 3, 4);
//类似数组的动态初始化
let arr3 = new Array(4);
//这里的4是数组的长度,而不是元素 简写
let arr4 = ["西施", "王昭君", "貂蝉", "杨贵妃"];
对于 js 中的数组不会出现数组越界的异常，也不是定长的
2.数组的方法
- 属性 length 属性，获取数组长度。
- 方法 concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。
- join(separator)：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
- reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不会创建新的数组）。
- slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。
- pop()：删除并返回数组的最后一个元素。
- shift()：删除并返回数组的第一个元素。
- push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并 返回新的长度。
- unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素， 并返回新的长度。
- splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。
3.数组的遍历
//数组的遍历
let arr = ["a", "b", "c", "d"];
//1 使用for循环
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log("==========数组自带的foEach==========");
//2 使用数组自带的foEach方法(函数)来做遍历操作
arr.forEach(function (ele, index, arr) {
console.log(ele, index);
});
//3 使用数组自带的map方法来遍历操作,可以在遍历每个元素的基础上来返回一个新的值从而形成一个新的数组
console.log("==========数组自带的map==========");
let newArr = arr.map(function (ele, i, arr) {
console.log(ele, i);
return ele+":" +i;
});
console.log(newArr);
//4使用for in 来遍历数组的索引 使用for of 来遍历数组的属性值
console.log("==========for in 来遍历数组的索引==========");
for (let i in arr) {
console.log(arr[i]);
}
//使用for in可以来遍历对象的属性名
console.log("==========for in 来遍历对象的属性名==========");
let object = new Object();
object.username="小狼";
object.age=16;
for (let name in object){
console.log(name,object[name]);
};
六.构造函数和对象
1.构造函数的定义
//如何使用JS来定义一个类(构造函数)
function Person(name, age){
//添加属性
this.name = name;
this.age = age;
//添加方法
this.sleep = function(){
console.log("困了,睡一觉");
}
}
//通过字面式创建对象
var obj = {username:"小狼", age:"18"};
console.log(obj.username);
console.log(obj.age);
2.操作对象和成员
// 使用构造函数来创建对象
let p = new Person("小狼", 10); console.log(p);
// 访问对象中的成员
console.log(p.name);
console.log(p.age);
// 访问对象中的方法
p.sleep();
p.name="小码";
// JS中,可以单独为某一个对象添加成员
p.xxx = "ooo";
console.log(p);
let p2 = new Person("xxx",10);
console.log(p2);
注意事项
构造函数注意事项: 此时 Person 称之为构造函数，也可以称之类，构造函数就是类 。
p1, p2 均为 Person 的实例对象。 Person 构造函数中 this 指向 Person 实例对象, 即 new Person( ) 出来的对象。
构造函数首字母大写，这是规范，官方都遵循这一个规范，如 Number() Array()。