From 41efaab9570aa5e3dc7c44503eff7673b8de209b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=98=8E=E6=9D=B0?= <3090356592@qq.com> Date: Tue, 11 Oct 2022 00:43:14 +0800 Subject: [PATCH] 1010 --- ...60\347\273\204\344\275\234\344\270\232.md" | 58 ++ ...72\347\241\200\350\257\255\346\263\225.md" | 749 ++++++++++++++++++ .../221010\346\225\260\347\273\204.md" | 366 +++++++++ 3 files changed, 1173 insertions(+) create mode 100644 "15\345\220\264\346\230\216\346\235\260/\344\275\234\344\270\232/221010-\346\225\260\347\273\204\344\275\234\344\270\232.md" create mode 100644 "15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221006javascript\345\237\272\347\241\200\350\257\255\346\263\225.md" create mode 100644 "15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221010\346\225\260\347\273\204.md" diff --git "a/15\345\220\264\346\230\216\346\235\260/\344\275\234\344\270\232/221010-\346\225\260\347\273\204\344\275\234\344\270\232.md" "b/15\345\220\264\346\230\216\346\235\260/\344\275\234\344\270\232/221010-\346\225\260\347\273\204\344\275\234\344\270\232.md" new file mode 100644 index 0000000..637814e --- /dev/null +++ "b/15\345\220\264\346\230\216\346\235\260/\344\275\234\344\270\232/221010-\346\225\260\347\273\204\344\275\234\344\270\232.md" @@ -0,0 +1,58 @@ +```js +var text ='I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'; +//将上述字符串去除标点空格后统计有多少个单词 +const arr=text.split(""); +const arr1 =arr.filter( + function(i){ + if(i!=','&&i!='.'){ + return i + } + } +) +var text1= arr1.join(""); +const arr3=text1.split(" "); +console.log('单词一共有'+arr3.length+'个'); + + + +const arr4 = [87,85,74,70,43,59,65] + +// 0.将元素65 与43 调换位置 +// arr4.splice(4,3,65,59,43); +// console.log(arr4); + +// 1.移除第一个元素87,并在开头添加 元素86 +// arr4.shift(); +// arr4.unshift(86); +// console.log(arr4); + + +// 2.移除最后一个元素43, 并在末尾添加1 +// arr4.pop(); +// arr4.push(1); +// console.log(arr4); + +// 3.在 70 65 之间插入 元素 68 +// arr4.splice(4,5,43,59,68,65); +// console.log(arr4); + +// 4.删除元素65 +// arr4.pop(); +// console.log(arr4); + +// 5.使用map返回一个新的数组new_arr,要求新数组new_arr比原来数组大2 +const arr5= arr4.map( + function(i){ + return i*2 + } +) + +// 6.筛选数组new_arr返回new_arr1,要求new_arr1: 能被2整除 +const arr6=arr4.filter( + function(i){ + if(i%2==0){return i} + } +) +console.log(arr6); +``` + diff --git "a/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221006javascript\345\237\272\347\241\200\350\257\255\346\263\225.md" "b/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221006javascript\345\237\272\347\241\200\350\257\255\346\263\225.md" new file mode 100644 index 0000000..c624b97 --- /dev/null +++ "b/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221006javascript\345\237\272\347\241\200\350\257\255\346\263\225.md" @@ -0,0 +1,749 @@ +# 一、JavaScript简介 + +JavaScript 是一种解释型的脚本语言,被大量地应用于网页中,用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作,控制页面的行为表现,提高用户体验,因而已经成为前端开发人员必须掌握的语言之一。 + +JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言,是由 Netscape(网景通信公司)开发的嵌入到 HTML 文件中的基于对象(Object)和事件驱动(Event Driven)的脚本语言。在 HTML 基础上,使用 JavaScript 可以开发交互式(网页)Web。JavaScript 的出现使得网页和用户之间实现了实时、动态和交互的关系。 + +## (一)JavaScript的引入 + +**使用script标签进行引入** + +### 1. + +**使用 + ``` + + ==注意:代码中不能出现字符串,会被当成结束的标签。想避免这个问题只需要加上转义字符“\”。一般写在或者的底部== + +2. **要包含外部文件中的js,就必须使用src属性。这个属性值是一个url,指向包容js代码的文件:** + + ```javascript + + ``` + +**** + +## (二)javascript的输出 + +### 1.页面输出 + +```js + +``` + +### 2.控制台的输出 + +**按F12弹出控制台** + +```js + +``` + +### 3.弹窗输出 + +```js +alert('内容') +``` + +********* + +## (三)严格检查模式strict + +- 前提: IEDA 需要设置支持ES6语法 +- 'use strict';严格检查模式,预防Javascript的随意性导致产生的一些问题 +- 局部变量建议都使用Let 去定义~ + +```js + +``` + +练习:测试你的浏览器是否支持ES6模板字符串,如果不支持,请把模板字符串改为+连接的普通字符串: + +``` +'use strict'; +``` + +// 如果浏览器支持模板字符串,将会替换字符串内部的变量: + +```js +var name = '小明'; +var age = 20; +console.log(`你好, ${name}, 你今年${age}岁了!`); +``` + +*********** + +# 二、语法基础 + +## (一)语法 + +### 1.区分大小写 + +**JavaScript是严格区分大小写的,也就是abc和Abc会被解析器认为是两个不同的东西。** + +### 2.标识符 + +**所谓标识符,就是指给变量、函数、属性或函数的参数起名字。** + +标识符可以是按照下列格式规则组合起来的一或多个字符: + +- 第一个字符必须是一个字母、下划线( _ )或一个美元符号( $ )。 + 其它字符可以是字母、下划线、美元符号或数字。 +- 按照惯例,ECMAScript 标识符采用驼峰命名法。 +- 标识符不能是关键字和保留字符。 + +### 3.注释 + +JS中的注释和Java的的一致,分为两种: + +- 单行注释:`// 注释内容` ==快捷键:ctrl+/== +- 多行注释:`/* 注释内容 */` + +### 4.语句 + +js中的语句以分号结尾。省略分号意味由解析器确定语句在哪里结尾 + +```js +let sum=a+b //可以但不推荐 +var diff =a+b;//推荐 +``` + +多条语句可以合并到一个c语言风格的代码块中。代码块由一个左花括号"{"开始右花括号结束"}" + +if之类的控制语句只在指向多条语句时要求必须有代码块。不过,最好是始终在控制语句中使用代码块: + +```js +//有效,但容易导致错误,应该避免 +if(test) + console.log(test); +//推荐 +if(test) + { + console.log(test); + } +``` + +******** + +## (二)变量 + +js变量是松散类型的,意思是变量可以用于保存任何数据。每个变量只不过是一个用于保存任意值的命名占位符。有3个关键字可以声明变量var、let、const。==其中var在ECMAScript的所有版本中都可以使用==,而const和let只能ECMAScript6及更晚的版本中使用 + +### 1.var关键字 + +**声明变量:** + +```js +var message; +``` + +这行代码定义了一个名为message的变量,可以用它保存任何类型的值。 + +**变量初始化**:**声明和赋值同时进行** + +```js +var message="hi"; +``` + +这里,message被定义为一个保存字符串值hi的变量。**像这样初始化变量不会将他标识为字符串类型,只是一个简单的赋值。随后,不仅可以改变保存的值,也可以改变值的类型:** + +```js +var message='hi'; +message=100;//合法,但不推荐 +``` + +这个例子,变量message首先被定义为一个保存符串值hi的变量,然后又被重写为保存了数值100.虽然不推荐改变变量保存值的类型,但是这在ECMAScipt中是完全有效的。 + +**如果需要定义多个变量,可以在一条语句中用逗号分隔每个变量(及可选的初始化):** + +```js +var message="hi",found=false,age=29; +``` + +*********** + +### 2.var声明作用域 + +==使用var操作符定义的变量会成为包含它的函数的局部变量==。比如使用var在函数内部定义一个变量,就意味着该变量将在函数退出时被销毁: + +```js +function test() +{ + var e='hi';//局部变量 +} +twst(); +console.log(e);//出错! +``` + +==我们可以在函数内定义变量时省略var,可以创建一个全局变量== + +```js +function test(){ + e="hi";//全局变量 +} +test(); +console.log(e);//'hi' +``` + +去掉之间的var操作符之后,e就变成了全局变量。只要调用一次函数test,就会定义这个变量,并且可以在函数外部访问到。 + +******* + +### 3.var声明提升 + +使用var时下面的代码不会报错。这是因为使用这个关键字声明的变量会自动提升到函数作用域顶部: + +```js +function foo(){ + console.log(age); + var age=26; +} +``` + +之所以不会报错,是因为ECMAScript运行时把它看成等价于如下代码: + +```js +function too(){ + var age; + console.log(age); + age=26; +} +foo();//undefined +``` + +这就是所谓的提升(hoist),也就是把所有变量都拉到函数作用域的顶部。此外,反复使用var声明同一个变量也没有问题; + +********** + +### 4.局部变量let + +在块级作用域里声明let变量 + +```js +var a='8'; +var b='8' +function too(){ + let a =5; + b=5;//这是全局变量 + console.log(a);//5 +} +console.log(a);//'8' +consloe.log(b);//5 +``` + +********** + +## (三)数据类型 + +**JavaScript中一共有5种基本数据类型:** + +- 字符串型(String) +- 数值型(Number) +- 布尔型(Boolean) +- undefined型(Undefined) +- null型(Null) + +这5种之外的类型都称为Object,所以总的来看JavaScript中共有六种数据类型。 + +********** + +### 1.typeof操作符 + +使用typeof操作符可以用来检查一个变量的数据类型。 + +使用方法: + +```js +typeof 数据 +--示例: +console.log(typeof 123); +console.log(typeof "Hello,World!"); +console.log(typeof ("你好"))//返回string类型,typeof是一个操作符不是函数,不需要参数(但是可以使用参数) +console.log(typeof true); +console.log(typeof undefined); +console.log(typeof null); +``` + +对一个值使用typeof操作符会返回以下字符串之一: + +- "undefined"表示值为定义; +- "boolean"表示为布尔值; +- "string"表示为字符串; +- "number"表示为数值; +- "object"表示为对象(不是函数)或unll; +- "function"表示为函数; +- "symbol"表示为符号; + +********* + +### 2.Undefined + +Undefined 类型只有一个值,即特殊的 undefined。 + +**在使用 var 声明变量但未对其加以初始化时,这个变量的值就是 undefined。** + +==注意:使用typeof对没有初始化和没有声明的变量,会返回“undefined”。== + +*********** + +### 3.Null + +Null 类型是第二个只有一个值的数据类型,这个特殊的值是 null。 + +undefined值实际上是由null值衍生出来的,所以如果比较undefined和null是否相等,会返回true。 + +==注意:从语义上看null表示的是一个空的对象指针,所以使用typeof检查null会返回一个Object。== + +******* + +### 4.Boolean + +Boolean有两个字面值:true和falss这两个布尔值不同于数值,因此True不等于1,Falss不等于2 + +==注意:布尔值字面量true和falss是区分大小写的,因此True和Falss(及其他大小混写显示)是有效标识符,但是不是布尔值== + +要将其它的数据类型转换为Boolean,只能使用Boolean()函数。 + +- 使用Boolean()函数 + - 数字 —> 布尔 + - 除了0和NaN,其余的都是true + - 字符串 —> 布尔 + - 除了空串,其余的都是true + - null和undefined都会转换为false + - 对象也会转换为true + +********* + +### 5.Number + +Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。 + +Number表示的数字大小是有限的,如果超过了这个范围,则会返回 ±Infinity。 + +- 最大值:+1.7976931348623157e+308 +- 最小值:-1.7976931348623157e+308 +- 0以上的最小值:5e-324 + +**特殊的数字:** + +- Infinity:正无穷 + +- -Infinity:负无穷 + +- NaN:非法数字(Not A Number) + +**其它的进制:** + +- 二进制:0b 开头表示二进制,但是,并不是所有的浏览器都支持 +- 八进制:0 开头表示八进制 +- 十六进制:0x 开头表示十六进制 + +==注意:使用typeof检查一个Number类型的数据时(包括NaN 和 Infinity),会返回"number"。== + +******************* + +**转换为Number类型** + +有三个函数可以把非数值转换为数值:Number()、parseInt() 和parseFloat()。 + +Number()可以用来转换任意类型的数据 + +parseInt()只会将字符串转换为整数 + +```js +var a = "123"; +a = parseInt(a); +``` + +parseFloat()可以将字符串转换为浮点数。 + +```js +var a = "123.456"; +a = parseFloat(a); +``` + +==注意:如果对非String使用parseInt()或parseFloat(),它会先将其转换为String然后在操作== + +*********** + +### 6.string + +String用于表示一个字符序列,即字符串。字符串需要使用 **单引号** 或 **双引号** 括起来。 + +字符串字面量及其含义: + +- \n 换行 +- \t 制表 +- \b 空格 +- \r 回车 +- \\\ 反斜杠 +- \‘ 单引号 +- \“ 双引号 + +**特点:** + +字符串是不可变的,一旦创建,它们的值就不能变了。要修改某一个变量中的字符串值,必须先销毁原始的字符串,然后将包含新值的另一个字符串保存到该变量,如: + +```js +var lang='java' +lang=lang+'script' +``` + +#### **a.转换为字符串:** + +有两种方式把一个值转换为字符串。首先是几乎所以值都有的toString()方法。这个方法唯一的用途就是返回当前值的字符串等价物。如: + +```js +var a=11; +var b=a.toString(); +``` + +字符串也有toString()方法(只是简单的返回自身的一个副本),==Null和undefined值没有toString()方法== + +如果你不确定一个值是不是Null和undefined值可以使用String()转型函数,它始终会返回表示相应类型的字符串: + +示例: + +```js +var a=11; +var b=true; +var c=null; +var d; +console.log(String(a))//"11" +console.log(String(b))//"true" +console.log(String(c))//"null" +console.log(String(d))//"undefined" +``` + +****** + +### 7.数组 + +数组是一组按顺序排列的集合,集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如: + +```js +[1, 2, 3.14, 'Hello', null, true]; +``` + +上述数组包含6个元素。数组用[]表示,元素之间用,分隔。 + +另一种创建数组的方法是通过Array()函数实现: + +```js +new Array(1, 2, 3); // 创建了数组[1, 2, 3] +``` + +然而,出于代码的可读性考虑,强烈建议直接使用[]。 + +数组的元素可以通过索引来访问。请注意,索引的起始值为0: + +```js +var arr = [1, 2, 3.14, 'Hello', null, true]; +arr[0]; // 返回索引为0的元素,即1 +arr[5]; // 返回索引为5的元素,即true +arr[6]; // 索引超出了范围,返回undefined +``` + +********* + +### 8.对象 + +JavaScript的对象是一组由键-值组成的无序集合,例如: + +```js +var person = { + name: 'Bob', + age: 20, + tags: ['js', 'web', 'mobile'], + city: 'Beijing', + hasCar: true, + zipcode: null +}; +``` + +JavaScript对象的键都是字符串类型,值可以是任意数据类型。上述person对象一共定义了6个键值对,其中每个键又称为对象的属性,例如,person的name属性为'Bob',zipcode属性为null。 + +要获取一个对象的属性,我们用对象变量.属性名的方式: + +person.name; // 'Bob' person.zipcode; // null + +************* + +## (四)运算符 + +运算符也叫操作符,通过运算符可以对一个或多个值进行运算并获取运算结果。 + +比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回(number string boolean undefined object) + +### 1.算术运算符 + +- 加法 + +- 减法 - +- 乘法 * +- 除法 / +- 求余数 % +- 自增 ++ +- 自减 -- +- 二的三次方2**3 + +### 2.关系运算符 + +大于 > + +小于 < + +大于等于 >= + +小于等于 <= + +### 3.赋值运算符 + +=、+=、-=、*=、/=、%= + +### 4.逻辑运算符 + +和 &&、或 ||、非 ! + +### 5.比较运算符 + +比较运算符用来比较两个值是否相等,如果相等会返回true,否则返回false。 + +**使用 == 来做相等运算** + +- 当使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后在比较 + +**使用 != 来做不相等运算** + +- 不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false,不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false + +**使用 === 来做全等运算** + +- 用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换,如果两个值的类型不同,直接返回false + +**使用 !== 来做不全等运算** + +- 用来判断两个值是否不全等,它和不等类似,不同的是它不会做自动的类型转换,如果两个值的类型不同,直接返回true + +********** + +### 6.三元运算符 + +```js +result=(age<18)?"年龄太小":"年龄合适"; + +``` + +*********** + +## (五)选择分支语句 + +### 1.if..else + +```js +if (a >= 80)//判断条件 +{ +console.log("优秀"); +} +else if (a >= 60) +{ +console.log("合格"); +} +else//否则 +{ +console.log("不合格"); +} +``` + +**其中else语句是可选的。如果语句块只包含一条语句,那么可以省略{}:** + +``` +var age = 20; +if (age >= 18) + alert('adult'); +else + alert('teenager'); +``` + +==省略{}的危险之处在于,如果后来想添加一些语句,却忘了写{},就改变了if...else...的语义== + +==JavaScript把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true== + +****** + +### 2.switch-case + +```js +switch (语句) { + case 表达式1: + 语句... + case 表达式2: + 语句... + default: + 语句... +} +``` + +示例: + +```js +var today = 1; +switch (today) { + case 1: + console.log("星期一"); + break; + case 2: + console.log("星期二"); + break; + case 3: + console.log("星期三"); + break; + default: + console.log("输入错误"); +} +``` + +==为了避免不必要的条件判断,建议在每一个条件后面都加上break== + +********** + +## (六)循环语句 + +属于基本控制语句,只要满足一定的条件就会一直执行,最基本的循环语句: + +- while +- do..while +- for + +### 1.while + +while语句是一种先测试循环语句,即先检查退出条件,再执行循环体内的代码 + +```js +var i=1;//初始值 +while (i <= 10)//判断条件 +{ +sum = sum + i;//循环体 +i++;//迭代 +} +console.log(sum) +``` + +***** + +### 2.do-while + +do-while语句是一种==后测试循环语句==,即循环体中的代码执行后才会对退出条件进行求值。==换句话说,循环体内的代码至少执行一次。== + +```js +do{ + 语句... +}while(条件表达式); +``` + +示例:输出1-10 + +```js +var i = 1; +do { + console.log(i); + i++; +} while (i <= 10); +``` + +******** + +### 3.for + +for也是先测试语句,要避免死循环,最常用来遍历数组 + +```js +var sum = 0; +for (var i = 1; i <= 100; i++) + //条件初始化 条件判断 迭代 +{ +sum += i;//循环体 +} + console.log(sum); +``` + +******** + +### 4.forEach循环 + +```js +var age=[1,2,3,4,5] +//函数 +age.forEach(function(value){ + console.log(value) + }) +``` + +***** + +### 5.for ... in + +==for循环的一个变体是for ... in循环,它可以把一个对象的所有属性依次循环出来:== + +```js +var o = { + name: 'Jack', + age: 20, + city: 'Beijing' +}; +for (var key in o) { + console.log(key); // 'name', 'age', 'city' +} +``` + +==要过滤掉对象继承的属性,用hasOwnProperty()来实现:== + +```js +var o = { + name: 'Jack', + age: 20, + city: 'Beijing' +}; +for (var key in o) { + if (o.hasOwnProperty(key)) { + console.log(key); // 'name', 'age', 'city' + } +} +``` + +#### a.遍历数组 + +由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for ... in循环可以直接循环出Array的索引: + +```js +var a = ['A', 'B', 'C']; +for (var i in a) { + console.log(i); // '0', '1', '2' + console.log(a[i]); // 'A', 'B', 'C' +} +``` + +==请注意,for ... in对Array的循环得到的是String而不是Number。== + +******** + +### 6.跳转控制 + +- break:结束最近的一次循环,可以在循环和switch语句中使用。 +- continue:结束本次循环,执行下一次循环,只能在循环中使用。 +- ==return:是跳出当前函数而不往下继续执行。== \ No newline at end of file diff --git "a/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221010\346\225\260\347\273\204.md" "b/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221010\346\225\260\347\273\204.md" new file mode 100644 index 0000000..74870f0 --- /dev/null +++ "b/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221010\346\225\260\347\273\204.md" @@ -0,0 +1,366 @@ +# 三、字符串和数组 + +***** + +## (一)字符串 + +正常字符串我们使用单引号,或者双引号包裹 + +### 1.注意转义字符\ + +- \n 换行 +- \t 制表 +- \b 空格 +- \r 回车 +- \\\ 反斜杠 +- \‘ 单引号 +- \“ 双引号 +- \u#### unicode字符 +- \x41 Ascll字符 + +******** + +### 2.多行字符串编写 + +```js +//按钮在esc下面 tab上面 +var msg=`这是 + 一个 + 多行 + 字符串` +``` + +***** + +### 3.模板字符串 + +以前要把多个字符串连接起来,可以用+号连接: + +```js +var name = '小明'; +var age = 20; +var message = '你好, ' + name + ', 你今年' + age + '岁了!'; +alert(message); +``` + +如果有很多变量需要连接,用+号就比较麻烦。ES6新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量: + +```js +var name = '小明'; +var age = 20; +console.log(`你好, ${name}, 你今年${age}岁了!`) +``` + +```js +//跟c#不一样的是要在每一个变量前面加$ +string str = $"我的名字是{Name},今年{Age}岁";//这个是c# +``` + +******* + +### 4.字符串常用方法 + +```js +var s = 'Hello, world!'; +s.length; // 13 +``` + +要获取字符串某个指定位置的字符,使用类似Array的下标操作,索引号从0开始: + +```js +var s = 'Hello, world!'; + +s[0]; // 'H' +s[6]; // ' ' +s[7]; // 'w' +s[12]; // '!' +s[13]; // undefined 超出范围的索引不会报错,但一律返回undefined +``` + +==需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果==: + +```js +var s = 'Test'; +s[0] = 'X'; +alert(s); // s仍然为'Test' +``` + +**JavaScript为字符串提供了一些常用方法,注意,调用这些方法本身不会改变原有字符串的内容,而是返回一个新字符串:** + +#### toUpperCase + +**toUpperCase()把一个字符串全部变为大写:** + +```js +var s = 'Hello'; +s.toUpperCase(); // 返回'HELLO' +``` + +****** + +#### toLowerCase + +**toLowerCase()把一个字符串全部变为小写:** + +```js +var s = 'Hello'; +var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower +lower; // 'hello' +``` + +******* + +#### indexOf[找下标] + +**indexOf()会搜索指定字符串出现的位置:** + +```js +var s = 'hello, world'; +s.indexOf('world'); // 返回7 +s.indexOf('World'); // 没有找到指定的子串,返回-1 +``` + +******* + +#### substring[截取] + +**substring()返回指定索引区间的子串:** + +```js +var s = 'hello, world' +s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello' +s.substring(7); // 从索引7开始到结束,返回'world' +``` + +********** + +## (二)数组 + +**Array可以包含的任意的数据类型** + +```js +var arr=[1,2,3,4,5,6] +console.log(arr)//会直接遍历输出数组 +``` + +Array可以通过索引把对应的元素修改为新的值,因此,对Array的索引进行赋值会直接修改这个Array: + +```js +var arr = ['A', 'B', 'C']; +arr[1] = 99; +arr; // arr现在变为['A', 99, 'C'] +``` + +请注意,如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化: + +```js +var arr = [1, 2, 3]; +arr[5] = 'x'; +arr; // arr变为[1, 2, 3, undefined, undefined, 'x'] +``` + +### 1.长度 + +```js +arr.length//输出数组长度 +``` + +==注意:加入给arr.length赋值,数组大小就会发送变化== + +```js +var arr = [1, 2, 3]; +arr.length; // 3 +arr.length = 6; +arr; // arr变为[1, 2, 3, undefined, undefined, undefined] +arr.length = 2; +arr; // arr变为[1, 2] +``` + +==大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,JavaScript的Array却不会有任何错误。在编写代码时,不建议直接修改Array的大小,访问索引时要确保索引不会越界。== + +******** + +### 2.常用方法 + +#### indexOf + +与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置: + +```js +var arr = [10, 20, '30', 'xyz']; +arr.indexOf(10); // 元素10的索引为0 +arr.indexOf(20); // 元素20的索引为1 +arr.indexOf(30); // 元素30没有找到,返回-1 +arr.indexOf('30'); // 元素'30'的索引为2 +``` + +注意了,数字30和字符串'30'是不同的元素。 + +********* + +#### slice + +**slice()[切片]**就是对应String的substring()版本,**它截取Array的部分元素,然后返回一个新的Array:** + +```js +var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; +arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C'] +arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G'] +``` + +注意到slice()的起止参数包括开始索引,不包括结束索引。 + +如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array: + +```js +var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; +var aCopy = arr.slice(); +aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G'] +aCopy === arr; // false +``` + +******** + +#### push和pop + +**push[推] pop[通俗的]** + +- **push()向Array的末尾添加若干元素** +- **pop()则把Array的最后一个元素删除掉:** + +```js +var arr = [1, 2]; +arr.push('A', 'B'); // 返回Array新的长度: 4 +arr; // [1, 2, 'A', 'B'] +arr.pop(); // pop()返回'B' +arr; // [1, 2, 'A'] +arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次 +arr; // [] +arr.pop(); // 空数组继续pop不会报错,而是返回undefined +arr; // [] +``` + +******** + +#### unshift和shift + +unshift[未移动] shift[移动] + +**如果要往Array的头部添加若干元素,使用unshift()方法** + +**shift()方法则把Array的第一个元素删掉:** + +```js +var arr = [1, 2]; +arr.unshift('A', 'B'); // 返回Array新的长度: 4 +arr; // ['A', 'B', 1, 2] +arr.shift(); // 'A' +arr; // ['B', 1, 2] +arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次 +arr; // [] +arr.shift(); // 空数组继续shift不会报错,而是返回undefined +arr; // [] +``` + +******** + +#### sort[排序] + +**sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序:** + +```js +var arr = ['B', 'C', 'A']; +arr.sort(); +arr; // ['A', 'B', 'C'] +``` + +能否按照我们自己指定的顺序排序呢?完全可以,我们将在后面的函数中讲到。 + +****** + +#### reverse[反转] + +reverse()把整个Array的元素给调个个,也就是反转: + +```js +var arr = ['one', 'two', 'three']; +arr.reverse(); +arr; // ['three', 'two', 'one'] +``` + +***** + +#### splice[拼接] + +splice()方法是修改Array的“万能方法”,**它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:** + +```js +var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle']; +// 从索引2开始删除3个元素,然后再添加两个元素: +arr.splice(2, 3, 'Google', 'Facebook'); +// 返回删除的元素 ['Yahoo', 'AOL', 'Excite'] +arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle'] +// 只删除,不添加: +arr.splice(2, 2); // ['Google', 'Facebook'] +arr; // ['Microsoft', 'Apple', 'Oracle'] +// 只添加,不删除: +arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素 +arr; // ['Microsoft', 'Apple', 'Google','Facebook', 'Oracle'] +``` + +****** + +#### concat[合并] + +concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array: + +```js +var arr = ['A', 'B', 'C']; +var added = arr.concat([1, 2, 3]); +added; // ['A', 'B', 'C', 1, 2, 3] +arr; // ['A', 'B', 'C'] +``` + +请注意,concat()方法并没有修改当前Array,而是返回了一个新的Array。 + +实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里: + +```js +var arr = ['A', 'B', 'C']; +arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4] +``` + +**** + +#### 连接符join + +join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串: + +``` +var arr = ['A', 'B', 'C', 1, 2, 3]; +arr.join('-'); // 'A-B-C-1-2-3' +``` + +如果Array的元素不是字符串,将自动转换为字符串后再连接。 + +***** + +### 3.多维数组 + +如果数组的某个元素又是一个Array,则可以形成多维数组,例如: + +```js +var arr = [[1, 2, 3], [400, 500, 600], '-']; +//取值 +arr[1][2]=2 +``` + +上述Array包含3个元素,其中头两个元素本身也是Array。 + +**** + +### 4.**小结** + +循环是让计算机做重复任务的有效的方法,有些时候,如果代码写得有问题,会让程序陷入“死循环”,也就是永远循环下去。JavaScript的死循环会让浏览器无法正常显示或执行当前页面的逻辑,有的浏览器会直接挂掉,有的浏览器会在一段时间后提示你强行终止JavaScript的执行,因此,要特别注意死循环的问题。 + +在编写循环代码时,务必小心编写初始条件和判断条件,尤其是边界值。特别注意i < 100和i <= 100是不同的判断逻辑。 \ No newline at end of file -- Gitee