JavaScript基础篇
1.JS引入方式
①嵌入式
//单行注释
/*
多行注释
* /
<script type="text/javascript">
alert("我是嵌入在页面内的JS")
</script>
②外链式
<script type="text/javascript" src="js/1.js"</script>
1.js如下:
alert("我是外部JS")
③行内式
<a href="javascript:alert('我是行内的JS');">我是行内的JS</a>
<input type="button" onclick="alert('Hello');" value="test">
综合应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
alert("欢迎光临！");
document.write("<font color=red>开启JavaScript学习之旅</font>");
console.log("123")
</script>
</body>
</html>
2. 基本语法
注释
单行注释
// 这是单行注释
多行注释
/*
这是多行注释
*/
2.1. 变量
2.1.1. 定义规则
由大小写字母、数字、下划线和美元符号（$）组成。
不能以数字开头。
严格区分大小写。
不能使用JavaScript中的关键字命名。
要尽量要做到“见其名知其意”。
JavaScript中变量通常利用var关键字声明，并且变量名的命名规则与标识符相同。
2.1.2. 变量的使用
未赋初始值的变量，默认值会被设定为undefined。
行末的分号表示语句结束。
变量与变量之间的逗号（,）操作符，可实现一条语句同时完成多个变量的声明。
2.1.3. 变量的作用域
- 1)在方法体中,未引用var关键字去定义的变量,相当于一个给windows添加了该属性, 此时该变量是一个全局变量
-
- 在for循环中定义的var 变量,在跳出该循环时, 依然可以去调用该变量
2.2. 数据类型
2.2.1. 数据类型转换
可以使用 typeof 运算符来确定 JavaScript 变量的数据类型
typeof "mrfan" // 返回 "string"
typeof 7 // 返回 "number"
typeof NaN // 返回 "number"
typeof false // 返回 "boolean"
typeof [3,2,3,4] // 返回 "object"
typeof {name:'mrfan', age:62} // 返回 "object"
typeof new Date() // 返回 "object"
typeof function () {} // 返回 "function"
typeof myCar // 返回 "undefined" *
typeof null // 返回 "object"
具体获取数据类型的方式console.log(Object.prototype.toString.call(null))
Object.prototype.toString.call(变量)
①把数值转换为字符串
全局方法 String() 能够把数字转换为字符串。
它可用于任意类型的数字、文字、变量或表达式：
②把字符串转换为数值
全局方法 Number() 可把字符串转换为数字。
包含数字的字符串（比如 “3.14”）转换为数字（比如 3.14）。
空的字符串转换为 0。
其他字符串将转换为 NaN（Not a number，不是数字）。
③自动类型转换
如果 JavaScript 尝试操作一种“错误”的数据类型，它会试图将该值转换为“正确”的类型。
④注意点
- 以0开头的数值是一个八进制的数字,一旦进行使用Number()进行转换时,如果该数值不符合八进制规则那么将自动将0去掉,直接转为数值.若符合八进制规则将按八进制转换为十进制的方式进行转换.
- null 或 undefined 或"" 调用Number() 结果
- 其它
2.2.2. let关键字
在ES6中，可以通过let关键字声明一个块级作用域（可以理解为{}之间的代码）的本地变量。
它与var关键字的区别是，let关键字在块级作用域内不能重复定义同名的变量，且该变量仅在块级作用范围内有效。
2.3. 流程控制
2.3.1 选择结构
if语句
//if单分支语句
if ( 判断条件 ) {
代码段
}
//if双分支语句
if ( 判断条件 ) {
代码段1;
} else {
代码段2;
}
//if多分支语句
if (条件1) {
代码段1;
} else if(条件2) {
代码段2;
}
...
else if(条件n) {
代码段n;
} else {
代码段n+1;
}
switch语句
switch (表达式) {
case 值1：代码段1; break;
case 值2：代码段2; break;
...
default: 代码段n;
}
2.3.2. 循环结构
while语句
while ( 循环条件 ) {
循环体
……
}
do {
循环体
……
} while (循环条件);
for语句
// for ( ①; ②; ④ )
for (var i = 0; i < 5; ++i) {
console.log('*'); // ③
}
2.3.3. 跳转语句
概念：跳转语句用于实现程序执行过程中的流程跳转。
常用的跳转语句：有break和continue语句。
break与continue的区别：break语句可应用在switch和循环语句中，其作用是终止当前语句的执行，跳出switch选择结构或循环语句，执行后面的代码。而continue语句用于结束本次循环的执行，开始下一轮循环的执行操作
2.4 函数
2.4.1 函数基本定义
函数的定义由以下4部分组成：
关键字function
函数名：可由大小写字母、数字、下划线（_）和$符号组成，但是函数名不能以数字开头，且不能是JavaScript中的关键字
参数：是外界传递给函数的值，它是可选的，多个参数之间使用“,”分割
函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。 返回值：在调用函数后若想得到处理结果，在函数体中可用return关键字返回
//无参函数
function greet() {
console.log('Hello everybody!');
}
//有参函数
function maxNum(a, b) {
a = parseInt(a);
b = parseInt(b);
return a >= b ? a : b;
}
//有参函数 定义默认值，即未赋值时使用的值（简单用法）
function sum(arg0=10, arg1=20,arg2=30){
console.log(arg0+arg1+arg2);
}
2.4.2 函数参数获取
获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。
实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。
其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
function transferParam(arg1,arg2) {
console.log(arguments.length);
console.log(arguments);
}
利用该方式获取最大值
function max(arg0,arg1){
let m=0;
for(let i=0;i<arguments.length;i++){
if(temp < arguments[i]){
temp = arguments[i]
}
}
console.log(m);
}
2.4.3 匿名函数
概念：匿名函数指的是没有函数名称的函数。
作用：可以有效的避免全局变量的污染以及函数名的冲突问题。
说明：既是函数表达式的另一种表示形式，又可通过函数声明的方式实现调用。
2.4.3.1 函数表达式中省略函数名
var fn = function sum(num1, num2) {
return num1 + num2;
};
fn();
2.4.3.2 自调用方式
(function (num1, num2) {
return num1 + num2;
})(2, 3);
2.4.3.3 处理事件
document.body.onclick = function () {
alert('Hi, everybody!');
};
2.4.4 应用
2.4.4.1 求总和（参数处理）
sum(arg0,arg1,arg2)，求所有参数和
当有实参时，使用实参;
当没有实参时，使用其默认值
参数默认值分别是10,20,30
有3种方法，如下：
function sum(arg0=10, arg1=20,arg2=30){
return (arg0+arg1+arg2);
}
function sum(arg0, arg1,arg2){
if(arg0==undefined) arg0=10;
if(arg1==undefined) arg1=20;
if(arg2==undefined) arg2=30;
return (arg0+arg1+arg2);
}
function sum(arg0, arg1,arg2){
arg0 = arg0 || 10;
arg1 = arg1 || 20;
arg2 = arg2 || 30;
return (arg0+arg1+arg2);
}
2.4.4.2 已知1个参数，和未知参数n个
假设有一个函数total（）用来计算某人的总薪酬和除底薪外的其他项目。
（除底薪外其他项目不一定每个人都有）
薪酬=底薪+提成+交通补贴+餐费
function total(a,...rest){
var other = 0;
for(var i=0;i<rest.length;i++){
other += rest[i];
}
console.log("总工资: "+(a+other));
}
2.4.4.3 利用arguments求最大值
利用arguments对象，实现求n个数中的最大值（每个数单独作为函数参数，不是数组）,例如getMax(4,200,-5,45,9)
function getMax(){
var max = arguments[0];
for(var i = 1;i<arguments.length;i++){
if(arguments[i]>max) max=arguments[i];
}
return max;
}
2.4.4.4 定义一个匿名函数,并只执行一次
定义一个匿名函数，只执行一次，用来初始化游戏状态：在页面中加载一个10*10的表格，表格宽和高均为700px。
!function(r=10,c=10){
var htmlData = "<table style='width:700px;height:700px;border-collapse: collapse;'>\n";
for(let i=0;i<r;i++){
htmlData += "<tr style='border=1;'>\n";
for(let j=0;j<c;j++){
htmlData += "<td style='border:1px solid black;:'></td>";
}
htmlData += "</tr>\n";
}
htmlData += "</table>";
document.write(htmlData);
}();
2.4.5 箭头函数
概念： ES6中引入了一种新的语法编写匿名函数，我们称之为箭头函数。
特点：一个箭头函数表达式的语法比一个函数表达式更短。
定义一个函数，用来返回两个参数中的较大者。
var fn1 = (n1, n2) =>{ return (n1>n2)?n1:n2 };
console.log(fn1(11,500));
//函数体只有一句话,可以不加花括号和return
var fn2 = (n1, n2) => (n1>n2)?n1:n2
console.log(fn2(11,500));
2.4.6 闭包函数
在JavaScript中，内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。此时就可以使用“闭包”来实现。
所谓“闭包”指的就是有权访问另一函数作用域内变量（局部变量）的函数。它最主要的用途是以下两点：
可以在函数外部读取函数内部的变量。
可以让变量的值始终保持在内存中。
注意: 由于闭包会使得函数中的变量一直被保存在内存中，内存消耗很大，所以闭包的滥用可能会降低程序的处理速度，造成内存消耗等问题。
2.4.6.1基本使用
有一个局部变量K，编写函数change，实现调用change，K自加1
function change(){
var k = 0;
function a(){
k++;
return k;
}
return a;
}
// 利用匿名函数
function change(){
var k = 0;
return function(){
k++;
return k;
};
}
var f = change();
f();
console.log(f());
2.4.6.2 应用
假设要开发一个游戏，分配给你的任务是编写全局方法add和minus，用来加命和减命，并返回的命的条数。要求命的条数保存在变量lives中,且必须为局部变量。（lives初始值设为10，且初始化lives的函数只执行1次）
!function(lives=10){
var lives= lives;
window.add = function(){
lives++;
return lives;
};
window.minus = function(){
lives--;
return lives;
}
}();
add();
add();
add();
minus();
console.log(add());
相关案例
1. 素数
求1-100内的素数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
let flag=1;
for(let i=1;i<=100;i++){
if(i==1){
continue
}else{
flag=1
for(let j=2;j<i;j++){
//被整除就不是素数
if(i%j==0){
flag=0;
break;
}
}
if(flag)
document.write(i+" ")
}
}
</script>
</body>
</html>
2. 倒三角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function printTri(x)
{
//放进段落,段落居中，自然就居中了
document.write("<p align='center'>");
for (var i = 1; i <= x; i++)
{
for (var j = 1; j <= x - i + 1; j++)
{
document.write(" ");
var icon = "*";
document.write(" " + icon +" ");
}
document.write("<br>");
}
document.write("</p>");
}
printTri(10);
</script>
</body>
</html>
3. 倒三角变形
输入一个行数小于等于5时,出现漏斗性状,大于5出现倒三角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var strHtml = "<p align='center'>";
var n = prompt("输入一个正整数");
n = parseFloat(n) && Number(n);
if(!isNaN(n)){
if(n>5){
for (var i = 1; i <= n; i++)
{
for (var j = 1; j <= n - i + 1; j++)
{
strHtml += " ";
var icon = "*";
strHtml += " " + icon +" ";
}
strHtml += "<br>";
}
strHtml += "</p>";
}else{
for (var i = 1; i <= n; i++)
{
for (var j = 1; j <= n - i + 1; j++)
{
strHtml += " ";
var icon = "*";
strHtml += " " + icon +" ";
}
strHtml += "<br>";
}
for (var i = n; i > 0; i--)
{
for (var j = 1; j <= n - i + 1; j++)
{
strHtml += " ";
var icon = "*";
strHtml += " " + icon +" ";
}
strHtml += "<br>";
}
strHtml += "</p>";
}
document.write(strHtml)
}else{
alert("请输入数字!!!")
}
</script>
</body>
</html>
4. 判断一个数的位数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function digit(num){
n = Math.abs(num);
var count = 0;
while(n){
n = parseInt(n/10);
count++;
}
return count;
}
console.log(digit(123));
</script>
</body>
</html>
5.十进制转为二进制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<label>
请输入一个数: <input id="oct" type='text' placeholder="请输入数值">
</label>
<button id="get">转换</button><br />
<span>结果是:
<span id="result" style="display: none;background-color: yellow;"></span>
</span>
</head>
<body>
<script>
var temp = ""
function change(n){
if(n<2){
temp += n;
}else{
change(parseInt(n/2));
temp += n%2 ;
}
}
document.getElementById("get").onclick = function(){
change(document.getElementById("oct").value)
document.getElementById("result").innerText = temp
document.getElementById("result").style.display = ""
temp =""
}
</script>
</body>
</html>
6. 制作一个简易计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#bt{
width:300px;
margin:0 auto
}
#add{
margin-left:80px;
}
</style>
</head>
<body>
<div id="bt">
<h1>简易计算器</h1>
<label>第一个数:<input type="text" id="n1" placeholder="请输入数值"/></label><br /><br />
<label>第二个数:<input type="text" id="n2" placeholder="请输入数值"/></label><br /><br />
<button id="add" onclick="calc(add)">+</button>
<button id="sub" onclick="calc(sub)">-</button>
<button id="mul" onclick="calc(mul)">*</button>
<button id="div" onclick="calc(div)">/</button><br /><br />
<div>
计算结果:
<input type="text" id="result" placeholder="计算结果不可输入值" readonly/>
</div>
</div>
<script>
function calc(func){
var result = document.getElementById("result");
var n1 = Number(document.getElementById("n1").value);
var n2 = Number(document.getElementById("n2").value);
n1 = parseFloat(n1) && Number(n1);
n2 = parseFloat(n2) && Number(n2);
if(isNaN(n1) || isNaN(n2)){
alert("请输入数字");
return;
}
result.value = func(n1,n2);
}
function add(n1,n2){
return n1+n2;
}
function sub(n1,n2){
return n1-n2;
}
function mul(n1,n2){
return n1*n2;
}
function div(n1,n2){
return n1/n2;
}
</script>
</body>
</html>
7. 升级版的计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#bt {
background-color: #596271;
width: 400px;
margin:0 auto;
}
#result{
width:380px;height:40px;margin:10px;font-size:30px;
}
.gn {
width: 80px;
height: 35px;
margin: 8px;
color: white;
background-color: #cc0000;
}
.num{
width: 80px;
height: 35px;
margin: 8px;
color: white;
background-color: #6492b1;
}
.yunsuan{
width: 80px;
height: 35px;
margin: 8px;
color: white;
background-color: #66bb00;
}
input:hover{
background-color: palegreen;
}
</style>
</head>
<body>
<div id="bt">
<input id="result" type="text" dir="rtl"/><br>
<input type="button" class="gn" value='(' onclick="change(this)"></input>
<input type="button" class="gn" value=')'onclick="change(this)"></input>
<input type="button" class="gn" value='CE'onclick="change(this)"></input>
<input type="button" class="gn" value='AC'onclick="change(this)"></input><br>
<input type="button" class="num" value='7'onclick="change(this)"></input>
<input type="button" class="num" value='8'onclick="change(this)"></input>
<input type="button" class="num" value='9'onclick="change(this)"></input>
<input type="button" class="yunsuan" value='/'onclick="change(this)"></input><br>
<input type="button" class="num" value='4' onclick="change(this)"></input>
<input type="button" class="num" value='5' onclick="change(this)"></input>
<input type="button" class="num" value='6' onclick="change(this)"></input>
<input type="button" class="yunsuan" value='*' onclick="change(this)"></input><br>
<input type="button" class="num" value='1' onclick="change(this)"></input>
<input type="button" class="num" value='2' onclick="change(this)"></input>
<input type="button" class="num" value='3' onclick="change(this)"></input>
<input type="button" class="yunsuan" value='-' onclick="change(this)"></input><br>
<input type="button" class="num" value='0' onclick="change(this)"></input>
<input type="button" class="num" value='.' onclick="change(this)"></input>
<input type="button" class="yunsuan" value='=' onclick="change(this)"></input>
<input type="button" class="yunsuan" value='+' onclick="change(this)"></input><br>
</div>
<script>
function change(opt) {
var number = opt.value;
switch (number) {
case "=":
result.value = eval(result.value);
break;
case "AC":
result.value ="";
break;
case "CE":
temp= result.value.toString();
result.value = temp.substr(0,temp.length-1);
break;
default:
//将按钮的值赋值给input输入框
result.value += number;
break;
}
}
</script>
</body>
</html>
3. 数组
概念：数组是存储一系列值的变量集合
数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。
数组元素：每个数组元素由“下标”和“值”构成。
3.1 创建数组
- 实例化Array对象的方式
- 直接使用“[]”的方式。
3.1.1 使用Array对象创建数组
实例化Array对象的方式创建数组，是通过new关键字实现的。
// 元素值类型为字符串
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array(); 或 var arr2 = new Array;
3.1.2 使用“[]”创建数组
直接法“[]”与Array()对象的使用方式类似，只需将new Array()替换为[]即可。
var weather = ['wind', 'fine',]; // 相当于：new Array('wind', 'fine',)
var empty = []; // 相当于：new Array
// 控制台输出mood：(5) ["sad", empty × 3, "happy"]
var mood = ['sad', , , ,'happy'];
3.2 数组的基本操作
3.2.1 数组的长度
Array对象提供的length属性可以获取数组的长度，其值为数组元素最大下标加1。
var arr1 = [78, 88, 98];
var arr2 = ['a', , , , 'b', 'c'];
console.log(arr1.length); // 输出结果为：3
console.log(arr2.length); // 输出结果为：6
数组的length属性不仅可以用于获取数组长度，还可以修改数组长度。
- 若length的值大于数组中原来的元素个数，则没有值的数组元素会占用空存储位置。
var arr1 = [];
arr1.length = 5;
console.log(arr1); // 输出结果：(5) [empty × 5]
var arr2 = [1, 2, 3];
arr2.length = 4;
console.log(arr2); // 输出结果：(4) [1, 2, 3, empty]
- 若length的值等于数组中原来的元素个数，数组长度不变。
var arr3 = ['a', 'b'];
arr3.length = 2;
console.log(arr3); // 输出结果：(2) ["a", "b"]
- 若length的值小于数组中原来的元素个数，多余的数组元素将会被舍弃。
var arr4 = ['hehe', 'xixi', 'gugu', 'jiujiu'];
arr4.length = 3;
console.log(arr4); // 输出结果：(3) ["hehe", "xixi", "gugu"]
3.2.2 访问数组元素
var navList = ['首页','课程中心','教师介绍','学员故事','免费资源','联系我们'];
// 使用常规的for循环获取元素
for(let i=0;i<navList.length;i++){
console.log(navList[i])
}
// 使用for in遍历
for(let i in navList){
console.log(navList[i])
}
//使用for of去获取相应的值
for(let i of navList){
console.log(i)
}
3.2.3 数组元素的添加
元素的添加与修改元素的方式：“数组名[下标]”。
var height = [];
height[5] = 183;
height[0] = 175;
height[3] = 150;
3.2.4 数组元素的修改
修改元素与添加元素的使用相同，区别在于修改元素是为已含有值的元素重新赋值。
var arr = ['a', 'b', 'c', 'd'];
arr[2] = 123;
arr[3] = 456;
3.2.5 数组元素的删除
可以利用delete关键字删除该数组元素的值。
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu); // 输出结果：(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1]; // 删除数组中第2个元素
console.log(stu); // 输出结果：(3) ["Tom", empty, "Lucy"]
3.3 数组的方法
3.3.1 栈和队列方法
| 方法名称 | 功能描述 |
|---|---|
| push() | 将一个或多个元素添加到数组的末尾，并返回数组的新长度。 |
| unshift() | 将一个或多个元素添加到数组的开头，并返回数组的新长度。 |
| pop() | 从数组的末尾移出并返回一个元素，若是空数组则返回undefined。 |
| shift() | 从数组的开头移出并返回一个元素，若是空数组则返回undefined。 |
- push()和unshift()方法的返回值是新数组的长度。
- pop()和shift()方法返回的是移出的数组元素。
3.3.2 检索方法
| 方法名称 | 功能描述 |
|---|---|
| includes() | 用于确定数组中是否含有某个元素，含有返回true，否则返回false。 |
| Array.isArray() | 用于确定传递的值是否是一个 Array，是返回true，不是返回false。 |
| indexOf() | 返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1 |
| lastIndexOf() | 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1 |
var data = ['peach', 'pear', 26, '26', 'grape'];
// 从数组下标为3的位置开始检索数字26
console.log(data.includes(26, 3)); // 输出结果：false
// 从数组下标为data.length - 3 的位置查找数字26
console.log(data.includes(26, -3)); // 输出结果：true
// 判断变量data是否为数组
console.log(Array.isArray(data)); // 输出结果：true
3.3.3 数组转字符串
| 方法名称 | 功能描述 |
|---|---|
| join() | 将数组的所有元素连接到一个字符串中。 |
| toString() | 返回一个字符串，表示指定的数组及其元素。 |
var arr = ['a','b','c'];
console.log(arr.join()); // 输出结果：a,b,c
console.log(arr.join('-')); // 输出结果：a-b-c
console.log(arr.toString()); // 输出结果：a,b,c
3.3.4 其它方法
| 方法名称 | 功能描述 |
|---|---|
| sort() | 对数组的元素进行排序，并返回数组。 |
| fill() | 用一个固定值填充数组中指定下标范围内的全部元素 |
| reverse() | 颠倒数组中元素的位置 |
| splice() | 对一个数组在指定下标范围内删除或添加元素 |
| slice() | 从一个数组的指定下标范围内拷贝数组元素到一个新数组中 |
| concat() | 返回一个合并两个或多个数组后的新数组 |
- slice()和concat()方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会原数组产生影响。
- splice()方法的第1个参数的值等于或大于数组长度时，从数组末尾开始操作；当该值为负数时，则下标位置等于数组长度加上指定的负数，若其值仍为负数，则从数组的开头开始操作。
注意: sort 方法,数组项会先根据toString()函数将其值转换成字符串在进行比较，是按UNICODE进行比较的，然后根据这个进行排序。
//利用sort给数值类型排序
var ary2 = [12,8,11,2,1];
ary2.sort(function(a,b){return a-b;})
console.log(ary2);
3.4 回调函数
- 把回调函数作为参数的数组方法的语法：
array.map(callbackfn[,thisArg]);
参数说明：
array：必需参数，一个数组对象。
callbackfn：必需参数，最多可以接收三个参数的函数。对于数组中的每个元素，都会调用 callbackfn 函数一次。
thisArg：可选参数，callbackfn函数中的this，如果省略 thisArg，则是undefined，
- 回调函数的语法：
Function callbackfn (item, index, array);
参数说明：
item：数组元素的值。
index：数组元素的数字索引。
array：包含该元素的数组对象。
| 方法名 | 返回值 |
|---|---|
| findIndex | 返回第一个符合条件的值的索引下标 |
| find | 返回第一个符合条件的值 |
| filter | 返回所有符合条件的数组 |
| some | 返回数组中是否有一个元素通过的布尔值 |
| every | 返回是否全部通过的布尔值 |
| forEach | 返回undefined |
| map | 返回一个数组 |
利用findIndex匹配第一个第一个姓李的同学
//基本使用
var nameList = ["张小小","王二小","李三","赵四","李六"];
function f(item,index,arr){
return item.charAt(0)=="李";
}
var res = nameList.findIndex(f);
console.log(res);
// 利用匿名函数
var res = nameList.findIndex(function(item){
return item.substr(0,1) == "李";
})
// 利用箭头函数
var res = nameList.findIndex(item => item.substr(0,1) == "李")
3.5 深浅拷贝
简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝；如果B没变，那就是深拷贝。
浅拷贝指的就是仅拷贝对象的地址，这样会使被拷贝的对象会因为拷贝的对象的数据改变而改变
// 浅拷贝
var a=[1,2,3];
var b=a;
b[0]="add";
console.log(a);
console.log(b);
深拷贝是指拷贝一个对象的数据之前先给拷贝的对象创建一个堆地址，这样当拷贝的对象指向的堆中的数据改变时，被拷贝的对象堆中的数据并不会被改变
//深拷贝方式如下:
//循环遍历 实现深拷贝
var a=[1,2,3];
var b = [];
for(var i in a){
b[i] = a[i]
}
//利用回调函数 实现深拷贝
var a=[1,2,3];
var b = a.map(function(item){
return item;
})
//ES6传播算子... 实现深拷贝
var a=[1,2,3];
b=[...a]
//利用slice方法 实现深拷贝
var a=[1,2,3];
var b=a.slice();
// 利用concat方法 实现深拷贝
var a=[1,2,3];
var b=a.concat();
编写一个函数, 一个多维数组，实现深拷贝
function deepCopy(arr){
var temp=[];
for(var i in arr){
if(Array.isArray(a[i])){
temp[i] = deepCopy(arr[i]);
}else{
temp[i]=a[i];
}
}
return temp;
}
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
