JavaScript 基础入门
@
学习总结
1. 什么是 JavaScript
JavaScript（简称"JS"）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
2. JavaScript 的特点
1）是一种解释性脚本语言（代码不进行预编译）；
2）主要用来向 HTML（标准通用标记语言下的一个应用）；
3）可以直接嵌入 HTML 页面，但写成单独的js文件有利于结构和行为的分离；
3. JS的使用
编写位置
1）直接编写在HTML的 script 标签中（推荐写在 head 标签里面）；
2）编写在JS文件中，单独写一个文件（*.js）来存放JavaScript代码，需要时直接引入该js文件，方便代码的维护和重用性；
注意：script 标签不能同时引入 js 文件和编写其他 js 代码
注意：HTML中js的所有代码等候室顺序执行，出错则不再往下执行。
基本语法
-
JavaScript 中的标识符（不能以数字开头，不能是 js中 保留字或关键字）
1）合法标识符举例：indentifier、username、user_name、_userName、$username；
1）非法标识符举例：int、8.3、Hello World； -
JavaScript 严格区分大小写
1）username 和 userName 是完全不同的符号； -
JavaScript 程序的注释
1）/.../ 中可以嵌套 "/" 注释，但不能嵌套；
2）/**..文档注释.*/； -
JS中的重要关键字和保留字
1）typeof、var、delete、function
变量
-
作用
1）程序可以通过变量名来指定具体的对象内存，并通过变量名来获取对应的对象； -
声明：JS是弱类型语言，为严格区分数据类型
1）使用 var，例如 var username = "熊大"；
2）若变量没哟UC胡世华，默认是 undefined；
3）变量的类型也可以由值来决定，只是什么类型，则变量为什么类型，例：username=18；username为int类型；
注意：事先不声明变量而直接使用会报错；
打印变量
1）alert(变量名)；直接在浏览器中弹出对话框（需要点击确定，麻烦，不利于语法实践操作和测试）；
2）console.log(变量名)；(info、log、debug、warn、error）：在浏览器控制台打印内容；
数据类型
1）简单类型：String(''/"")、Number(100/11.2/4E3/3e2)、Boolean(true/false)、Null、undefined
2）对象类型：Object、Array、Function
注意1：js 中只有 "var 变量名=值"，不存在 "变量类型 变量名=值"；
注意2：变量名不能使用 name，name 是自带的一个成员变量，类型无法修改，所以结果一直未 String；
运算符
- 比较运算符
1）= 赋值运算符：用于把一个常量/变量的值赋值给另一个变量；
2）== 比较运算符：用于比较两个数据的值是否相等，不回去判断类型；
3）=== 比较运算符：先判断数据类型是否相等，然后再去判断值是否相等； - 逻辑运算符
1）在逻辑运算中 0、""、false、NaN、undefined、null 表示为 false，其他类型数据都表示true；
2）a && b：将 a，b 先转换为 Boolean类型，在执行逻辑与，若 a 为 false，则返回 a，否则返回 b；
3）a || b：将 a，b 先转换为 Boolean类型，在执行逻辑或，若 a 为 true，则返回 a，否则返回 b； - && 和 || 运算符的区别
1）&& 操作：&& 找 false，找到则返回对应的值，直到最后一个如果没有找到，则返回最后一个值；
2）|| 操作：|| 找 true，找到则返回对应的值，直到最后一个如果没有找到，返回最后一个值；
3. 函数的定义
函数语法
- 普通函数语法
1）参数和返回值都是可选，如果没有返回值，则默认返回 undefined；
function 函数名([参数名称1，参数名称2，...，参数名称N]) {
// 程序代码
return 值;
}
- 匿名函数语法
var 变量名 = function ([参数名称1，参数名称2，...，参数名称N]) {
// 程序代码
return 值;
}
- 箭头函数
1）箭头函数类似匿名函数，把匿名函数 function 去除，在参数右边加 => 即可，简介但可读性差。
<script>
// 无参单行函数体的箭头函数
var a = ()=> console.log("箭头函数");
a();
// 上面等价于下面
function f() {
console.log("箭头函数");
}
// 无参多行函数体的箭头函数
var b = ()=> {
console.log("箭头函数一");
console.log("箭头函数二");
};
b();
// 多个参数多行箭头函数
var c = (username, password)=> {
console.log(username);
console.log(password);
};
c("小肥羊", "admin");
// 一个形参的箭头函数
var d = user => console.log(user);
</script>
函数的调用
- 语法
var 变量 = 函数名(实参1, 实参2, 实参3, ...);
- 返回值
1）如果方法有返回值，那么变量接收到的结果为返回值，如果没有返回值，那么变量接收到的值为 undefined。
// 把匿名函数赋值给一个变量
var add = function (x, y) {
return x+y;
};
// 把add变量当做参数使用
function printAdd(f) {
console.log(f);
}
// 调用 printAdd() 函数
printAdd(3, 5); // 输出结果为 8
- 参数
1）调用函数时, 实参和定义函数的形参可以不一致
add(); // add 函数被调用，但是参数都为
undefined add(1,3,5,6); // 只会只有前两个，后面的自动忽略
2）查看函数被调用时带了哪些参数：arguments
function doWork3(){
console.log(arguments); // 每个函数都内置了一个arguments属 性，用于存放调用时带入的实际参数值
}
doWork3(1,2,3);
doWork3();
doWork3("小狼","小码",18);
4.面向对象
构造函数(类)定义
//如何使用JS来定义一个类(构造函数)
function Person(name, age){
//添加属性
this.name = name;
this.age = age;
//添加方法
this.sleep = function(){
console.log("困了,睡一觉");
}
}
创建对象和操作成员
// 1、使用构造函数来创建对象
var p = new Person("小狼", 10);
console.log(p);
// 访问对象中的成员
console.log(p.name);
console.log(p.age);
// 访问对象中的方法
p.sleep();
// JS中,可以单独为某一个对象添加成员
p.xxx = "ooo";
console.log(p);
- 创建对象的快捷方式
var obj = {user_name:"小狼",age:"18"};
console.log(obj.username);
console.log(obj.age);
注意：属性名如果有特殊字符需要加引号括起来。
5.内置对象
Date
1）Date() 返回当前日期和事件
2）getFullYear() 获取Date对象中四位数字的年份
3）getMonth() 获取Date对象中的月份(0~11)
4）getDate() 获取Date对象中的天(1~31)
5）getHours() 获取Date对象中的小时
6）getMinutes() 获取Date对象中的分钟
7）getSeconds() 获取Date对象中的秒
var d = new Date();
var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
String
* 属性:
length 字符个数
* 方法
1）charAt(index) 返回指定位置的字符
2）concat(string1,string2,string3,....) 拼接字符串
3）fromCharCode(num) 可接受一个指定的 Unicode 值，然后返回一个字符串
4）subString(start,stop) 提取字符串中两个指定的索引号之间的字符。
6.数组
数组的定义方式
-
创建数组对象
1）var arr = new Array(); -
类似数组中的静态初始化
1）var arr2 = new Array("西施","王昭君","貂蝉","杨贵妃");
2）var arr2 = new Array(1, 2, 3, 4); -
类似数组的动态初始化
1）var arr3 = new Array(4); //这里的4是数组的长度,而不是元素 -
简写
1）var arr4 = ["西施", "王昭君", "貂蝉", "杨贵妃"];
注意：对于 js 中的数组不会出现数组越界的异常，也不是定长的。
数组中的常用属性和方法
- 属性
1）length 属性，获取数组长度。 - 方法
1）concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。
2）join(separator)：把数组的所有元素放入一个字符串。元素通过指定的
分隔符进行分隔。
3）reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不
会创建新的数组）。
4）slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。
5）pop()：删除并返回数组的最后一个元素。
6）shift()：删除并返回数组的第一个元素。
7）push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。
8）unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
9）splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。
数组的遍历方式
- for
1）最简单的一种循环遍历方法，也是使用频率最高的一种，通过索引的方式遍历数组；
arr = [1, 2, 3, "a"];
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
- forEach
1）数组里的元素个数有几个，该方法里的回调函数就会执行几次；
2）参数：
1> 第一个参数是数组里的元素；
2> 第二个参数为数组里元素的索引；
3> 第三个参数则是遍历的数组本身；
3）数组自带的遍历方法，虽然使用频率略高，但是性能仍然比普通循环略低；
arr = [1, 2, 3, "a"];
arr.forEach(function (item, index, array) {
console.log(item);
console.log(index);
console.log(array);
});
- map
1)遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回,参数和上面相同，只不过返回的是一个新数组；
var arr = ["A","B","C","D"];
var newArr = arr.map(function(item,index,array){
return item+index;
});
//newArr中的数据:["A1","B2","C3","D4"]
- for-in
1）可以遍历数组（获取数组的索引）；也可以遍历对象（获取对象的属性名）；
//如果是遍历数组,i对应的是数组的索引
let arr = ["A", "B", "C", "D"];
for (let i in arr) {
console.log(i); //索引
console.log(arr[i]); //元素
}
//如果是遍历对象,name对应的是属性名
let obj = new Object();
// 给 obj 对象增加属性
obj.username = "小狼";
obj.age = 18;
for (let index in obj) {
console.log(index);
//属性名
console.log(obj[index]);
}
- for-of
1）遍历的是数组中的元素
arr = [1, 2, 3, "a"];
for (let item of arr) {
console.log(item);
}
总结
以上就是对 JavaScript 入门的总结了，代码仅供参考，欢迎讨论交流。
