JavaScript的使用以及JS常用函数（JS 遍历数组和集合）

JavaScript入门

• 学习总结
• • 1. 什么是 JavaScript
  • 2. JavaScript 的特点
  • 3. JS的使用
  • • 编写位置
    • 基本语法
    • 变量
    • 打印变量
    • 数据类型
    • innerHTML和innerText的使用和区别
    • 运算符
  • 3. 函数的定义
  • • 函数语法
    • 函数的调用
  • 4.面向对象
  • • 构造函数(类)定义
    • 创建对象和操作成员
    • 创建对象的快捷方式
  • 5.内置对象
  • • Date
    • String
  • 6.数组
  • • 数组的定义方式
    • 数组中的常用属性和方法
    • 数组的遍历方式
  • 7. DOM节点
  • 8. 综合小例题
• 总结

学习总结

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；
  2）非法标识符举例：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；

innerHTML和innerText的使用和区别

innerHTML：指的是从对象的起始位置到终止位置的全部内容，包括Html标签；
innerText ：指的是从起始位置到终止位置的内容，但它去除Html标签。

运算符

• 比较运算符
  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。

<script>
	// 把匿名函数赋值给一个变量
	var add = function (x, y) {
	    return x+y;
	};
	// 把add变量当做参数使用
	function printAdd(f) {
	    console.log(f);
	}
	// 调用 printAdd() 函数
	printAdd(3, 5);  // 输出结果为 8
</script>

• 参数
  1）调用函数时, 实参和定义函数的形参可以不一致

<script>
	add(); // add 函数被调用，但是参数都为
	undefined add(1,3,5,6); // 只会只有前两个，后面的自动忽略
</script>

　　2）查看函数被调用时带了哪些参数：arguments

<script>
	function doWork3(){
	  console.log(arguments); // 每个函数都内置了一个arguments属 性，用于存放调用时带入的实际参数值
	}
	doWork3(1,2,3);
	doWork3();
	doWork3("小狼","小码",18);
</script>

4.面向对象

构造函数(类)定义

<script>
	//如何使用JS来定义一个类(构造函数)
	function Person(name, age){
	  //添加属性
	  this.name = name;
	  this.age = age;
	  //添加方法
	  this.sleep = function(){
	     console.log("困了,睡一觉");
	  }
	}
</script>

创建对象和操作成员

<script>
	// 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);
</script>

创建对象的快捷方式

<script>
	var obj = {username:"小狼",age:"18"};
	console.log(obj.username);
	console.log(obj.age);
</script>

注意：属性名如果有特殊字符需要加引号括起来。

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对象中的秒

<script>
	var d = new Date();
	var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
</script>

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）最简单的一种循环遍历方法，也是使用频率最高的一种，通过索引的方式遍历数组；

<script>
	arr = [1, 2, 3, "a"];
	for(let i = 0; i < arr.length; i++) {
	    console.log(arr[i]);
	}
</script>

• 第二种：forEach
  1）数组里的元素个数有几个，该方法里的回调函数就会执行几次；
  2）参数：
  　　1>　第一个参数是数组里的元素；
  　　2>　第二个参数为数组里元素的索引；
  　　3>　第三个参数则是遍历的数组本身；
  3）数组自带的遍历方法，虽然使用频率略高，但是性能仍然比普通循环略低；

<script>
	arr = [1, 2, 3, "a"];
	arr.forEach(function (item, index, array) {
	    console.log(item);
	    console.log(index);
	    console.log(array);
	});
</script>

• 第三种：map
  1)遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回,参数和上面相同，只不过返回的是一个新数组；

<script>
	var arr = ["A","B","C","D"];
	var newArr = arr.map(function(item,index,array){
	    return item+index;
	});
	//newArr中的数据:["A1","B2","C3","D4"]
</script>

• 第四种：for-in
  1）可以遍历数组（获取数组的索引）；也可以遍历对象（获取对象的属性名）；

<script>
	//如果是遍历数组,x对应的是数组的索引
	let arr = ["A", "B", "C", "D"];
	for (let x in arr) {
	    console.log(i); // 输出数组索引
	    console.log(arr[i]); // 输出数组元素
	}

	//如果是遍历对象, x 对应的是属性名
	let obj = new Object();
	// 给 obj 对象增加属性
	obj.username = "肥羊";
	obj.age = 18;
	for (let x in obj) {
		// 输出属性名
	    console.log(x);
	    // 输出属性值
	    console.log(obj[x]);
	}
</script>

• 第五种：for-of
  1）遍历的是数组中的元素

<script>
	arr = [1, 2, 3, "a"];
	for (let item of arr) {
		// 输出的是每个数组的元素值
	    console.log(item);
	}
</script>

7. DOM节点

博客地址：DOM节点的使用（常用方法+代码）

8. 综合小例题

例题一：JS实现列表移动（通过document操作select标签）
例题二：用 JS（JavaScript ）实现增删改查
例题三：用 JS（JavaScript ）实现多选框的全选、反选、多选

总结

以上就是对 JavaScript 入门的总结了，代码仅供参考，欢迎讨论交流。
DOM节点的应用请看我下一篇博客：DOM节点的使用（常用方法+代码）