【JavaScript】学习第六天【数组及常用方法】

数组

• 什么是数组？
• 字面理解就是 数字的组合
• 其实不太准确，准确的来说数组是一个 数据的集合
• 也就是我们把一些数据放在一个盒子里面，按顺序排好

[1,2,3,'hello',true,false]

• 这个东西就是一个数组，存储着一些数据的集合

创建一个数组

• 数组就是一个 [ ]
• 在 [ ] 里面存储着各种各样的数据，按照顺序依次排好

字面量创建一个数组

• 直接使用 [ ] 的方式创建一个数组

//创建一个空的数组
var arr1 = []

//创建一个有内容的数组
var arr2 = [1,2,3]

内置构造函数创建数组

• 使用 js 的内置构造函数 Array 创造一个数组

//创建一个空数组
var arr1 = new Array()

//创建一个长度为 10 的数组
var arr2 = new Array(10)

//创建一个有内容的数组
var arr3 = new Array(1,2,3)

数组的 length

• lenght: 长度的意思
• length: 就是表示数组的长度，数组里面有多少个成员，length 就是多少

//创建一个数组
var arr = [1,2,3]

console.log(arr.length)//3

数组的索引

• 索引，也叫做下标，是指一个数据在数组里面排在第几个的位置
• 注意：在所有的语言里面，索引都是从 0 开始的
• 在 js 里面也一样，数组的索引从 0 开始

//创建一个数组
var arr = ['hello','world']

• 上面这个数组中，第 0 个 数据就是字符串 hello，第 1 个 数据就是字符串 world
• 想获取数组中的第几个就使用 数组[索引] 来获取

var arr = ['hello','world']

console.log(arr[0])// hello
console.log(arr[1])// world

数组的常用方法

• 数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样的操作了
• 比如我们想改变一个数组

//创建一个数组
var arr = [1,2,3]

//我们想把数组变成只有 1 和 2
arr [1,2]

1.这样肯定是不合理，因为这样不是在改变之前的数组
2.相当于新弄了一个数组给到 arr 这个变量了
3.相当于把 arr 里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
4.所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了

会改变原数组的方法

1.数组常用方法之 push

• 含义：push 是用来在数组的末尾追加一个元素或多个元素
• 语法：arr.push(元素1，元素2，元素3)
• 返回值：追加后数组的长度

var arr = [1,2,3]

//使用 push 方法追加一个元素在末尾
arr.push(4)

console.log(arr)//[1,2,3,4]

2.数组常用方法之 pop

• 含义： pop是用来删除数组末尾的最后一个元素
• 语法：arr.pop()
• 返回值：删除的那个元素

var arr = [1,2,3]

//使用 pop 方法删除末尾的一个元素
arr.pop()

console.log(arr)//[1,2]

3.数组常用方法之 unshift

• 含义：unshift 是在数组的最前面添加一个元素或多个元素
• 语法：arr.unshift(元素1,元素2,元素3)
• 返回值：追加后数组的长度

var arr = [1,2,3]

//使用 unshift 方法想数组的最前面添加一个元素
arr.unshift(4)

console.log(arr)//[4,1,2,3]

4.数组常用方法之 shift

• 含义：shift 是删除数组最前面的第一个元素
• 语法：arr.shift()
• 返回值：删除的那个元素

var arr = [1,2,3]

//使用 shift 方法删除数组最前面的一个元素
arr.shift()

console.log(arr)//[2,3]

5.数组常用方法之 splice

• 含义：splice 是截取数组中的某些内容，按照数组的索引来截取

• arr.splice(下标,n)删除从下标开始后的n个元素
  arr.splice(下标,n,新增元素),删除从下标开始后的n个元素，在新增元素
  

• 语法：splice（从哪一个索引位置开始，截取多少个，替换的新元素）（第三个参数可以不写）

• arr.splice(下标,个数)
  arr.splice(下标，个数，新增元素)
  

• 返回值：将删除的元素以数组形式返回

var arr = [1,2,3,4,5]

//使用 splice  方法截取数组
arr.splice(1,2)

console.log(arr)//[1,4,5]

• arr.splice(1,2) 表示从索引 1 开始截取 2 个内容
• 第三个参数没有写，就是没有新内容替换掉截取位置

var arr = [1,2,3,4,5]

//使用 splice 方法截取数组
arr.splice(1,2,'我是新内容')

console.log(arr)//[1,'我是新内容',4,5]

• arr.splice(1,2,'我是新内容') 表示从索引 1 开始截取 2 个内容
• 然后用第三个参数把截取完空出来的位置填充

6.数组常用方法之 reverse

• 含义：reverse 是用来反转数组使用的（数组逆序）
• 语法：arr.reverse()
• 返回值：逆序后的数组

var arr = [1,2,3]

//使用 reverse 方法来反转数组
arr.reverse()

console.log(arr)//[3,2,1]

7.数组常用方法之 sort

• 含义：sort 是用来给数组排序的
• 语法：arr.sort(function(a,b){return a-b})
• 返回值：排序后的数组

var arr = [2,3,1]

//使用 sort 方法给数组排序
arr.sort()

console.log(arr)//[1,2,3]

• 这个只是一个基本的简单用法

不会改变原数组的方法

8.数组常用方法之 concat

• 含义：concat 是把多个数组进行拼接(将arr和arr1拼接到一起，形成新数组)
• 语法：arr.concat(arr1)
• 返回值：拼接好的数组

var arr = [1,2,3]

//使用 concat 方法拼接数组
var newArr = arr.concat([4,5,6])

console.log(arr)//[1,2,3]
console.log(newArr)//[1,2,3,4,5,6]

• 注意：concat 方法不会改变原始数组

9.数组常用方法之 join

• 含义：join 是把数组里面的每一项内容链接起来，变成一个字符串

• 可以自己定义每一项链接内容 `join(要以什么内容链接)`
  

• 语法：arr.join(‘符号’) arr.join(’-’) “1-2-3-4-5”
• 返回值：拼接好的字符串

var arr = [1,2,3]

//使用 join 链接数组
var str = arr.join('-')

console.log(arr)//[1,2,3]
console.log(str)//1-2-3

• 注意： join 方法不会改变原始数组，而是返回链接好的字符串

10.数组常用方法之 indexOf

• 含义：查找该元素首次出现的下标位置，找到就返回该下标，找不到返回-1
• 语法：arr.indexOf(元素)
• 返回值：下标/-1

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(3)

console.log(index) // 2

• 我们要找的是数组中值为 3 的那一项
• 返回的就是值为 3 的那一项在该数组中的索引
• 如果你要找的内容在数组中没有，那么就会返回 -1

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(10)

console.log(index) // -1

• 你要找的值在数组中不存在，那么就会返回 -1

11.数组常用方法之 lastIndexOf

• 含义：从后向前查找该元素首次出现的下标位置，找到就返回下标，找不到返回-1
• 语法：arr.lastIndexOf(元素)
• 返回值：下标/-1

12.数组常用方法之 slice

• 含义：从数组中切出来一个数组（包左不包右）
• 语法：arr.slice(开始下标,结束下标) arr = [1,2,3,4,5] arr.slice(1,3)
• 返回值：切出来的数组

var arr = [1,2,3,4,5]  
var res = arr.slice(1,3)

    console.log(arr);// [1,2,3,4,5]
    console.log(res); //[2,3]

ES5/String

严格模式（了解）

• 我们都知道 js 是一个相对不很严谨的语言
• 而且开发的时候，一些代码也不是很严格要求
• 而严格模式就是对开发的时候写的一些内容做了要求

开启严格模式

• 想开启严格模式，直接在代码最开始的位置写上字符串 use strict

<script>
	'use strtic'
	// 下面代码书写就要按照严格模式来书写
</script>

严格模式的规则

1.声明变量必须有 var 关键字

'use strtic'​

var num = 100
num2 = 200 // 这个就会报错

• 之前了解过，在声明变量的时候，如果没有 var 关键字，那么按照作用域的规则会自动定义成全局变量
• 严格模式下不可以，会报错

2.函数的行参不可以重复

'use strtic'

function fn(p1, p1) {
    
    } // 直接就会报错

• 在非严格模式下，函数两个行参一样，是不会报错的，只不过就是相当于在函数内部只有一个变量了
• 但是在严格模式下会报错

3.声明式函数调用的时候函数内部没有 this

'use strtic'

function fn() {
    
    
  console.log(this) // undefined
}
fn()

• 本身，全局声明式函数在调用的时候，函数内部的 this 是指向 window 的
• 在严格模式下，是没有 this 的

ES5新增的数组方法

• 之前我们讲过的数组常用方法都是 ES3 的方法
• 今天来说一些 ES5 中的方法

1.新增数组方法之 map

• 含义：遍历数组，item代表是每一个元素，i代表下标
• 语法：arr.map(function(item,i){return item*3;})
• 返回值：映射出来的新数组

var arr = [121,300,500,500,321];

    var res = arr.map(function(item,i){
    
    
         return item*3;
    })

    console.log(res);//映射出来的新数组

2.新增数组方法之 forEach

• 含义：遍历数组
• 语法：arr.forEach(function(item,i){//没有return})
• 返回值：无

var arr = [121,300,500,500,321];

arr.forEach(function(item,index){
    
    
        console.log(index); //遍历的每一个元素的下标
    });

3.新增数组方法之 filter

• 含义：过滤满足条件的元素
• 语法：arr.filter(function(item,index){return item>8})
• 返回值： 数组形式的大于8的元素

var arr = [12,30,50,59,32];

var res = arr.filter(function(item,i){
    
    
        return item>8;// 判断条件 是元素大于8的
    })
    console.log(res); //过滤出来满足条件的元素，以数组形式返回 [12, 32]

4.新增数组方法之 some

• 含义：数组中有一个满足条件的，返回的就是true，都不满足才返回false
• 语法：arr.some(function(item,index){return item>8})
• 返回值：true/false

5.新增数组方法之 every

• 含义：数组中必须每一个元素都大于8，返回的都是true，有一个不大于8的就是false
• 语法：arr.every(function(item,index){return item>8})
• 返回值：true/false

var arr = [121,300,500,500,321];


var res = arr.every(function(item,index){
    
    
        return item>90; // 有一个满足是大于90的就返回true
    })
    console.log(res);