冒泡排序 选择排序 数组
一.冒泡排序
核心原理
循环遍历数组
当前单元和下一个单元进行数据比较
按照从小到大排序
应该是当前单元小于下一个单元
如果当前单元大于下一个单元
将交换两个单元存储的数据
一次循环结束会将一个最大值存储到数组末位
多次循环遍历完成整个数组中数值的排序
案例:
var arr=[10,20,30,40,50];
var n=11;
arr.push(n);
//冒泡排序
for(var k =0; k<arr.length; k++){
for(var i=0; i<arr.length-1-k; k++){
if(arr[i]>arr[i+1]){
var temp=arr[i]
arr[i]=arr[i+1]
arr[i+1]=temp
}
}
}
console.log('冒泡排序结束后的arr',arr);
二.选择排序
核心原理
每次使用变量存储起始循环单元的索引下标
使用变量中存储的索引下标对应的数据数值
和之后的其他单元的数据数值进行比较
如果之后循环单元数据数值小于变量中存储索引下标对应数据数值
变量存储循环单元的索引下标
循环结束 变量中存储本次循环 存储最小值单元的索引下标
如果变量存储的索引下标不是起始单元的索引下标
交换两个单元存储的数据数值
每次循环会将最小值存储到数组的起始位置
多次循环完成整个数组的排序
案例:
for(var k=0; k < arr.length; k++){
for(var i =k+1; i<arr.length; i++){
if(arr[minIndex]>arr[i]){
minIndex=i
}
}
//交换真实最小的值 与下标0的值
var temp=arr[k]
arr[k]=arr[minIndex]
arr[minIndex]=temp
}
console.log('选择排序结束后的arr:',arr)
三、数组
1.概念:存储数据的集合
2.理解:
- 其他数据类型一个变量中只能存储一个数据单元
- 在数组中可以同时存储多个数据单元
3.语法
-
字面量: var 变量=[数据1,数据2,数据3...];
-
内置构造函数: var 变量 = [new Array(数据1,数据2, 数据3);
属性 下标 在定义数组时 JavaScript程序 自动定义的从0开始的连续整数 如果下标是 数值类型 称为 索引下标 在 JavaScript中 下标只支持是数值类型的索引下标 在 其他计算机语言中 数组的下标可以是字符串类型 称为 关联下标 通过 索引下标 使用 []语法 操作 数组中的数据单元 length 数组的长度 也就是 数组中单元个数 语法 数组.length 索引下标是从0开始的连续整数 数组索引下标的范围是 0 至 数组.length-1 数据存储的数据类型 在 JavaScript语言中 数组中可以存储任意 JavaScript支持的数据类型 一个数组中 可以 存储不同类型的数据 数组中存储函数 var arr = [100,200,300,function(){} ]; 一般情况下 数组中 不会存储函数 数组[索引下标] 获取的是 数组单元中存储的内存地址 数组[索引下标]() 是 调用执行 数组中存储的函数
1、数组的存储
数组中存储的数据 ：
数组中可以存储任意JavaScript支持的数据类型，一个数组中可以存储多种数据类型(number,String,boolean,Object等)。
数组中可以存储函数，一般存储的是匿名函数。
实际项目中，后端程序-->返回的数据, 一般都是比较复杂的数组/对象形式，数组一般是 数组中存储对象。
案例：
<script>
var arr = [true , false , '北京' , '上海' , 100 , 100.123 , 2e3 , [100,200,300] , function(){} , {name:'张三' , age:18 , sex:'男'} ];
console.log( arr );
</script>
2、数组的基本操作
- 通过 数组[索引下标] 调用数组中指定索引下标对应的数据单元存储的数据数值
- 如果没有对应的索引下标 调用结果是 undefined
- 如果存储的是基本数据类型 数组[索引下标] 获取对应的数据
- 如果存储的是函数程序 数组[索引下标] 获取的是 指定索引下标 对应的数据单元 存储的 函数的内存地址 数组索引下标 是 按照 存储的内存地址调用执行函数 如果需要可以在()中输入实参
- 如果存储的是数组 通过 多个并列的[]语法 获取 指定单元存储的数据
案例：
<script>L
// /*
// 数组中存储函数
// 本质是 在 数组单元中存储 这个函数的内存地址
// 也就是 索引下标是5的这个单元中存储的是 匿名函数的内存地址
// */
// var arr = [100,200,300,400,500 , function( num1 , num2 ){ console.log( num1 , num2 ) } ];
// console.log( arr ) ;
// // 调用 数组arr 中 索引下标是2 的 第三个单元 存储的数据数值
// // 对应的数据 是 300
// console.log( arr[2] ) ;
// // 通过 数组[索引下标] 调用指定单元存储的函数程序
// // 调用结果是 索引下标对应的数组单元存储的函数的内存地址
// // 浏览器的显示结果是 函数的存储空间中 存储的函数程序代码
// console.log( arr[5] ) ;
// // 如果要执行这个函数
// // arr[5] 存储的是函数的内存地址
// // arr[5]() 就是 调用执行这个函数
// // 如果需要 在调用时 可以输入实参
// arr[5]( 500 , 600 );
// function fun( num1 , num2 ){ console.log( num1 , num2 ); }
// console.log( fun );
// fun( 100 , 200 );
// 数组中存储数组
// 数组[索引下标] 获取的是 数组中存储的数组 称为 二维数组
// 数组中 可以 存储多层的数组 称为 多维数组
var arr = [100,200,300,[400,500,600,[700,800,900]]] ;
console.log( arr );
// 索引下标是0的第一个单元存储的数据 是 100
console.log( arr[0] );
// 索引下标是3的第四个单元存储的数据 是 二维数组[400,500,600]
console.log( arr[3] );
// 获取二维数组的数据 使用 两个 并列的[]语法
// arr[3] 获取的结果是 二维数组 [400,500,600]
// arr[3] 是 二维数组 可以 接续使用 []语法 再获取二维数组中的具体数据
// arr[3][1] 是 arr[3] 获取的是 二维数组 在这个二维数组中 再获取 索引下标是1 的第二个单元存储的数据
console.log( arr[3][1] );
// 多维数组获取数据 就是 多个并列的[]语法
console.log( arr[3][3][2] );
// 没有对应的索引下标 调用结果是 undefined
console.log( arr[30] );
</script>
3、数组的新增
数组的基本操作
修改
对已经存在的数值单元进赋值行操作，通过 []语法对指定索引下标，对应的数组单元进行重复赋值操作。
执行效果：后赋值的数据覆盖新赋值的数据，达到修改数组单元存储数据的效果
新增
对不存在的数组单元进行，赋值操作，通过 []语法对指定索引下标对应的数组单元进行赋值操作。
执行效果是：给数组新增单元对新增单元设定索引下标，同时赋值存储的数据。
实际项目中
新增单元索引下标必须是连续整数
如果不是连续整数会生成 empty 空单元,empty 空单元 调用结果是 undefined
实际项目中索引下一般都是整数数值：
1、如果输入的是 符合整数语法规范的字符串会转化为对应的整数数值。
2、 如果输入的是 不符合整数语法规范的字符串 / null / undefined / true / false
实际项目中 新增数组单元 一般使用 专门的函数方法操作执行；可以新增单元 ，但是新增单元不会计算数组长度，这样操作实际项目中一般不会使用
案例：
<script>
var arr = [100,200,300,400,500];
// 执行数组的修改操作
// 对 已经存在的索引下标 1 进行 赋值操作
// 对 索引下标是1 的 数组中的第二个单元 进行赋值操作
// = 等于赋值 执行的是 覆盖赋值效果
// 后赋值的数据 '北京' 会 覆盖原始数据200
// 数组索引下标是1 的第二个单元存储的数据 最终结果是 '北京'
// 执行的效果 就是 修改了数组中 索引下标是1 的第二个单元存储的数据
arr[1] = '北京' ;
// 对 不存在的索引下标 5 进行 赋值操作
// 给 数值新增一个单元 设定索引下标是5 赋值存储的数据是'我是新增的'
arr[5] = '我是新增的' ;
// // 如果设定的索引下标 不是 连续的索引下标
// // 可以执行新增操作
// // 但是 数组中会生成 empty 空单元
// arr[50] = '我是新增的' ;
// // 空单元的调用结果是 undefined
// console.log( arr[48] );
// // 实际项目中 新增单元 必须是 连续的索引下标
// 如果新增单元索引下标 一定要设定成 字符串 / true / false / null / undefined
// 数组单元中会新增这个单元
// 但是 length 属性 没有增加
// 也就是 下标是 字符串的数值单元 不计算数组长度
arr['a'] = '我是新增的' ;
arr[true] = '我是新增的' ;
arr[false] = '我是新增的' ;
arr[null] = '我是新增的' ;
arr[undefined] = '我是新增的' ;
// 如果 下标输入的是 符合 整数语法规范的字符串
// 会将 字符串转化为 对应的数字 作为索引下标
// 也就是 arr['6'] 就 等于执行 arr[6] 的操作
arr['6'] = '我是新增的' ;
// 输入的科学计数法 不是整数语法规范
// 不能识别转化为对应的数字 只能是 2e3 三个字符
arr['2e3'] = '我是新增的' ;
console.log(arr);
</script>
4、数组的遍历
方法一： for循环
通过 for循环生成数组中 第一个单元 至 最后一个单元的索引下标，也就是 0 至 数组.length-1 的所有连续整数再。
通过 []语法 也就是 数组[循环变量] 来 获取操作 数组中的每一个单元。
for( var i = 0 ; i <= 数组.length-1 ; i++ ){
i 是 数组中每一个单元的索引下标
数组[i] 是 数组中么一个单元的数据数值
}
方法二： for...in循环
JavaScript程序自动循环数组中的每一个单元。 获取 每一个单元的索引下标 以 字符串形式存储 。 通过 []语法 使用 获取的索引下标 操作 当前循环的数组单元。
for( var 变量 in 数组 ){
变量中存储的是 当前循环的数组单元的索引下标 以字符串形式存储
可以 通过 数组[变量] 操作 当前循环的数组单元
}
方法三： for...of循环
JavaScript程序自动循环数组中的每一个单元。 获取每一个单元的数据数值存储到变量中。
for( var 变量 of 数组 ){
变量中存储的是 当前循环的数组单元的数据数值
}
方法四：forEach循环
JavaScript程序自动循环数组中的每一个单元，获取 每一个单元的 索引下标 数据数值 原始数组本身 存储到对应的变量中，是 专门针对数值操作的函数方法。
数组.forEach( function( [参数1 , 参数2 , 参数3] ){})
参数1 存储 当前循环数组单元的数据数值
参数2 存储 当前循环数组单元的索引下标
参数3 存储 原始数组
实际项目中 需要哪个参数 写 哪个
实操案例：
<script>
var arr = ['北京' , '上海' , '广州' , '重庆' , '天津' , '贵阳' , '武汉'];
// 需要输出每一个数据
// 通过 索引下标 获取操作每一个数据单元
// 每一次操作数据单元 程序代码都是相同的 只是索引下标不同
console.log( arr[0] );
console.log( arr[1] );
console.log( arr[2] );
console.log( arr[3] );
console.log( arr[4] );
console.log( arr[5] );
console.log( arr[6] );
// for循环
// 通过 循环 生成 0 - 6 的 数值
// 也就是 第一个单元 至 最后一个单元的索引下标
// 第一个单元的索引下标 一定是 0
// 最后一个单元的索引下标 一定是 数组长度-1 也就是 arr.length-1
// 也就是 数组中 每一个单元的索引下标
// 再通过 []语法 获取操作数组的每一个数据单元
for( var i = 0 ; i <= arr.length-1 ; i++ ){
// i 存储的是 从 0 - 6 的 连续整数
// 也就是 数组单元的索引下标
// 通过 数组[索引下标] 可以 获取操作对应的数组单元
// 也就是 arr[i]
console.log( i , arr[i]);
}
// for...in 循环
// 变量index中存储的是 数组单元的索引下标
// 变量index中 以 字符串形式 存储 索引下标
for( var index in arr ){
// index 存储的是 当前循环单元的索引下标
// arr[index] 存储的是 当前循环单元的数据数值
console.log( index , arr[index] );
}
// for...of循环
// 变量中存储的是 数组单元的数据数值
for( var value of arr ){
console.log( value );
}
// forEach循环
// 第一个参数 存储 当前循环单元的数据数值
// 第二个参数 存储 当前循环单元的索引下标
// 第三个参数 存储 原始数组
arr.forEach( function( value , index , array ){
console.log( value , index , array );
})
</script>
5、各种遍历方式的区别
1、for循环
实际项目中 推荐使用的数组循环方法
执行效率最高
for循环本质上没有针对数组进行循环，只是按照设定的循环条件生成数组对应的索引下标 ，然后通过索引下标操作数组单元
本质上只是0 至 数组.length-1 的数字的循环
1、可以操作循环的进程
2、可以通过操作循环变量的数值控制循环程序执行的过程
3、可以通过 break 终止循环
4、如果数组单元有非数字索引下标不能循环操作
2、for...in
实际项目中 一般用于循环遍历对象的语法
一般不用来循环数组
for...in循环
真正的循环遍历操作每一个数组单元，一定会从数组的第一个单元循环遍历到数组的随后一个单元，每次循环获取当前循环单元的索引下标存储到设定的变量中
注意：
1、不能通过修改变量中存储的索引下控制循环的进程，循环的进程执行是JavaScript程序默认设定的执行进程，也就是一定会从第一个单元循环至最后一个单元
2、只是获取 当前循环单元的索引下标存储到变量中，不是通过变量中存储的数据控制 for..in的循环
3、可以通过break终止循环
4、如果数组单元有非数字索引下标可以循环遍历获取对应的索引下标
3、for...of循环
实际项目中 一般 迭代操作
一般不用来循环数组
1、不能修改循环的进程
2、可以通过break终止循环
3、如果数组单元有非数字索引下标不能循环遍历获取对应的数据数值
4、forEach循环
指针的概念： 1、所谓的指针 是 计算机程序中 一种数据的操作方式。 2、所谓的指针 可以理解为 一种 指向操作 。 3、指针指向谁 操作的就是谁。
forEach的基本循环过程： 1、首先指针指向数组的起始位置。 2、判断 当前位置 是不是数组范围内 有没有 对应的数据单元 。 3、如果没有对应的数据单元 终止循环 。 4、如果有对应的数据单元 获取这个数据单元的 数据数值 索引下标 原始数组。
5、将指针 移动到数组的下一个位置。 6、判断 当前位置 是不是数组范围内 有没有 对应的数据单元 。 7、如果没有对应的数据单元 终止循环 。 8、如果有对应的数据单元 获取这个数据单元的 数据数值 索引下标 原始数组。
9、.....
10、最终 指针移动到数组范围外 终止整个循环。
执行效率最低的循环
通过指针操作循环遍历数组的每一个单元
如果需要循环遍历数组的每一个单元
使用 forEach语法比较简单
1、forEach的循环进程一定是从第一个单元至数组的最后一个单元
2、不能通过改变，变量中存储的数值,修改forEach循环的进程
3、不能通过break 终止循环
总结：
| 方法 | 总结 |
|---|---|
| for | 执行效率最高 可以控制进程 可以break终止 不能获取非数字索引下标单元的数据 |
| for...in | 一般循环对象 不能控制进程 可以break终止 可以获取非数字索引下标单元的数据 |
| for...of | 一般用于 迭代操作 不能控制进程 可以break终止 不能获取非数字索引下标单元的数据 |
| forEach | 循环效率最低 执行的是指针操作 不能控制进程 不能break终止 不能获取非数字索引下标单元的数据 |
6、数组的操作
1、首位新增：
数组.unshift( 数据1 , 数据2 ... );
在数组的首位新增数据单元,一次可以新增一个单元 或者 多个单元
多个单元之间使用逗号间隔
执行结果返回值：新增单元之后 新数组的长度
2、末位新增：
数组.push( 数据1 , 数据2 ... );
在数组的末位新增数据单元
次可以新增一个单元 或者 多个单元
多个单元之间使用逗号间隔
执行结果返回值：新增单元之后新数组的长度
3、首位删除:
数组.shift();
一次只能删除一个单元
执行结果返回值：删除单元存储的数据数值
4、末位删除:
数组.pop();
一次只能删除一个单元
执行结果返回值：删除单元存储的数据数值
案例：
<script>
var arr = [100,200,300,400,500];
// 首位新增
var res1 = arr.unshift( '北京' , '上海' );
console.log( res1 );
// 末位新增
var res2 = arr.push('贵阳' , '武汉');
console.log( res2 );
// 首位删除
// 删除首位单元 也就是 删除第一个单元
// 第一个单元中存储的数据是 '北京'
var res3 = arr.shift();
console.log( res3 );
var res4 = arr.pop();
console.log( res4 );
console.log( arr );
</script>
5、数组删除指定单元
数组.splice( 参数1 , 参数2 , [ 其他所有参数 ] );
参数1 删除起始位置的索引下标
参数2 删除数组单元的个数 必须是连续的数组单元
其他所有参数 在删除位置替换写入的新内容
可以一次替换写入一个单元 可以 提替换写入多个单元
执行结果返回值 是 删除单元数据 组成的新数组
案例：
<script>
var arr = [100,200,300,400,500,600,700,800,900];
// // 如果要删除 300 400 500 三个单元
// // 是 从 索引下标是 2 的位置开始 删除 3个单元
// // 执行结果返回值 是 删除的 300 400 500 组成的新数组
// var res1 = arr.splice( 2 , 3 );
// console.log( res1 );
// 如果删除 500 600 替换 写入 新内容
var res2 = arr.splice( 4 , 2 , '北京' , '上海' , '广州' , '重庆' , '贵阳' );
console.log( res2 );
console.log( arr );
</script>
6、数组数据的查询
数组.indexOf( 数值数据 )
查询 指定数据 在数组中 第一次 出现的位置
如果有符合的数据 返回值 是 存储数据单元的索引下标
如果没有符合的数据 返回值 是 -1
数组.lastIndexOf( 数值数据 )
查询 指定数据 在数组中 最后一次 出现的位置
如果有符合的数据 返回值 是 存储数据单元的索引下标
如果没有符合的数据 返回值 是 -1
案例：
<script>
var arr = [ 1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7 ];
console.log( arr );
// 查询 数值1 在数组中第一次出现的位置
// 如果有符合的数据 返回值 是 存储数据单元的索引下标
var res1 = arr.indexOf( 1 );
console.log( res1 );
var res2 = arr.indexOf( 4 );
console.log( res2 );
// 查询 数值1 在数组中最后一次出现的位置
// 如果有符合的数据 返回值 是 存储数据单元的索引下标
var res3 = arr.lastIndexOf( 1 );
console.log( res3 );
// 查询 字符a 在数组中出现的位置
// 没有匹配的数据 返回值 是 -1
// 执行结果是 -1 也就是 意味着 数组中没有存储这个数据
var res4 = arr.indexOf( 'a' );
var res5 = arr.lastIndexOf( 'a' );
console.log( res4 );
console.log( res5 );
</script>
7、数组的去重
数组去重的12种方法: blog.csdn.net/weixin_4631…
实际项目中推荐使用使用 set数据类型方法
数组去重方法1 indexOf
数组中默认是可以存储重复数据
实际项目中 数组中不能存储重复数据
不需要去除数组中重复的数据
去重的基本原理
创建一个新的空数组
将原始数组数据 写入新数组中
写入时执行判断，要写入的数据 新数组中没有 再执行写入操作
案例：
<script>
var arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7];
console.log( arr );
// // 实际项目中 使用的 数组去重代码
// var newArr = [...new Set(arr)];
// console.log( newArr );
// indexOf / lastIndexOf 方法
// 创建一个空数组
var newArr = [] ;
// // 将 原始数组的数据 写入新数组
// // 需要循环遍历 原始数组的每一个单元
// for( var i = 0 ; i <= arr.length-1 ; i++ ){
// // i 是 原始数组arr的索引下标
// // arr[i] 是 原始数组arr中 数据单元存储的数据数值
// // console.log( arr[i] );
// // 将 原始数组的数据数值 也就是arr[i] 写入 新数组中
// // 为了确数据的顺序相同 使用 末位新增数据语法
// // 执行判断 新数组中 没有 要写入的数据 再执行写入操作
// // 在 新数组中 查询 要写入的数据 arr[i]
// // 如果 查询结果是 -1 证明 新数组中没有要写入的数据 arr[i]
// // 可以 执行写入操作
// if( newArr.indexOf( arr[i] ) === -1 ){
// // 在 新数组中 查询 要写入的 数据 arr[i]
// // 如果查询结果是 -1 也就是 新数组中没有要写入的原始数组数据arr[i];
// // 执行 末位新增数据操作
// newArr.push( arr[i] );
// }
// }
// forEach循环
arr.forEach( function(value){
// value 存储的是 原始数组arr中 数据单元存储的数据数值
// console.log( value );
// 判断 原始数组数据value 不在 新数组newArr 中 执行写入操作
if( newArr.indexOf( value ) === -1 ) newArr.push( value );
})
console.log( newArr );
</script>
8、数组的截取
数组的截取方法
从数组中 截取 部分数据单元 组成新数组
截取函数的执行结果 返回值 是 截取的新数组
! 不会改变 原始数组中 存储的数据内容
语法
var 变量 = 数组.slice( 参数1 , 参数2 );
执行结果返回值 是 截取原始数组内容 组成的新数组
参数1 截取起始位置的索引下标
参数2 截取结束位置的索引下标
! 截取结果不包括结束位置的数据数值
案例：
<script>
var arr = [100,200,300,400,500,600,700,800,900];
// // 数组的删除操作 执行结果返回值 是 删除的数组单元组成的新数组
// // 但是会改变原始数组中存储的内容
// var res1 = arr.splice( 2 , 4 );
// console.log( res1 );
// 从 索引下标是 2 的单元开始截取
// 截取至 索引下标是 6 的单元 结束
// 截取 结果 是 索引下标 是 2 3 4 5 的 4个单元的数据
// 没有 结束位置 索引下标是6的单元的数据
var res2 = arr.slice( 2 , 6 );
console.log( res2 );
console.log( arr );
</script>
9、数组反转
<script>
/*
数组的反转
将 原始数组内容都反向排序
数组.reverse()
*/
var arr = [100,200,300,400,500];
arr.reverse();
console.log( arr );
</script>
10、数组排序
数组的排序方法：
数组.sort();
按照 首字符的大小排序
数组.sort(function( 参数1 , 参数2 ){ return 参数1 - 参数2 })
小 到 大 排序
数组.sort(function( 参数1 , 参数2 ){ return 参数2 - 参数1 })
从 大 到 小 排序
案例：
<script>
var arr = [312,432,456,567,897,234,123,6543,7865,434,1234,213,465,43,]
// 首字符排序
arr.sort();
// 小 -- 大
arr.sort( function( a , b ){ return a - b });
// 大 -- 小
arr.sort( function( num1 , num2 ){ return num2 - num1 });
console.log( arr );
</script>
11、数组拼接
<script>
/*
数组的拼接操作
将两个数值的数据 拼接成 一个数组
不会改变原始数组的内容
执行结果返回值是 两个数值拼接的结果
var 变量 = 原始数组.concat( 数组1 , 数组2 .... );
可以将 一个或者多个数值的数据 拼接到一个数组中
*/
var arr = [100,200,300];
var arr1 = [400,500,600];
var arr2 = [700,800,900];
var res = arr.concat( arr1 , arr2 );
console.log( arr );
console.log( res );
</script>
12、数组字符串转换
数组 --- 字符串
var 变量 = 数组.join();
将数组数据拼接为字符串
以 逗号 为间隔符号
var 变量 = 数组.join('间隔符号');
将数组数据拼接为字符串
以 设定的符号 为间隔符号
var 变量 = 数组.join('');
将数组数据拼接为字符串
以 设定参数是 空字符串 没有 间隔内容
字符串 --- 数组
var 变量 = 字符串.split();
案例：
<script>
// var arr = [100,200,300,400,500,600];
// // 没有定义参数 默认以逗号为间隔符号
// // 获取数组中每一个数据单元的数值 拼接为 字符串
// var res1 = arr.join();
// console.log( res1 );
// // 以设定的符号 为间隔符号
// // 获取数组中每一个数据单元的数值 拼接为 字符串
// var res2 = arr.join('-');
// console.log( res2 );
// // 设定空字符串 没有 间隔内容
// // 获取数组中每一个数据单元的数值 拼接为 字符串
// var res3 = arr.join('');
// console.log( res3 );
var str = 'abc-abc-abc-abc-abc';
// 将字符串转化为数组
// 没有设定参数 整个字符串作为一个整体存储到数组中
var res1 = str.split();
console.log( res1 );
// 将字符串转化为数组
// 以设定的 间隔符号 作为依据 将字符串分割
// 分割结果中 不包括 分割符号
// 也就是 设定 '-' 分割结果中 没有 '-'
// 字符串 'abc-abc-abc-abc-abc'
// 按照 - 减号 进行分割 结果是 abc abc abc abc abc
var res2 = str.split('-');
console.log( res2 );
// 使用 空字符串 作为 分割符号 每一个字符都是一个数组单元
var res3 = str.split('');
console.log( res3 );
</script>
13、数组扁平化
数组的扁平化
将 多维数组 转化为 一维数组
[100,200,300,[400,500,600,[700,800,900]]];
多维数组
[100,200,300,400,500,600,700,800,900]
一维数组
实际项目中 数组如果存储的是 复杂的数据结构 例如对象/函数
需要使用 复杂的递归程序完成或者其他的函数方法完成
如果存储的是 基本数据类型 可以使用 简答的方法实现
案例：
<script>
var arr = [100,200,300,[400,500,600,[700,800,900]]];
console.log( arr );
// 将数组转化为 字符串
// 默认以逗号间隔
// 转化结果是 将 多维数组数据都获取到 拼接为字符串
// var str = arr.join();
// 变量.toString()
// 可以获取数组中每一个单元的数据 以逗号为间隔 拼接成字符串
// var str = arr.toString();
// String( 变量 )
// 可以获取数组中每一个单元的数据 以逗号为间隔 拼接成字符串
var str = String( arr );
console.log( str );
var newArr = str.split(',');
console.log( newArr );
</script>
14、数组的映射
名词解释： 镜像： 一模一样的
镜像： [1,2,3,4,5] ---- [1,2,3,4,5]
映射： 一一对应 但是 经过操作数据不同，单元个数相同 但是 数据做过 操作 映射：[1,2,3,4,5] --- [2,4,6,8,10]
数组的映射
将数组单元执行对应的操作 生成一个新的数组
不会改变原始数组中存储的数据单元
var 变量 = 数组.map( function( 参数1 , 参数2 , 参数3 ){
return 原始数组单元的操作 ;
});
参数1 原始数组的数据数值
参数2 原始数组的索引下标
参数3 原始数组
执行结果返回值 是 映射的新的数组
案例：
<script>
var arr = [100,200,300,400,500];
// 生成一个新的数组 存储的数据是原始数组的2倍
var newArr = arr.map( function( value , index , array ){
console.log( value , index , array );
// 返回值的新数组 存储的数据是 原始数组数据的2倍
return value*2 ;
})
console.log( arr );
console.log( newArr );
// 数组扁平化
var arr = [100,200,300,[400,500,600,[700,800,900]]];
// 数组转字符串
var str = arr.join();
// 字符串转数组 以 逗号为间隔
var newArr = str.split(',');
console.log( newArr );
// 通过映射 将 newArr 中 存储的字符串数据 准化为 数值数据
var res = newArr.map(function( value ){
// 将 newArr数组中的数据 操作 转化为数值类型 生成一个新数组
return Number( value );
})
console.log( res );
</script>
15、数组的过滤
数组的过滤
将符合条件的数组单元存储的数组 生成一个新的数组
过滤的条件 可以是 任意条件 生成的新数组是 符合条件的单元的数据
var 变量 = 数组.filter( function( 参数1 , 参数2 , 参数3 ){
return 设定的条件;
})
参数1 原始数组的数据数值
参数2 原始数组的索引下标
参数3 原始数组
案例：
<script>
var arr = [100,200,300,400,500,600,700,800,900];
// 将存储的数值 大于 400 的 单元 生成一个新数组
var res1 = arr.filter( function( value ){
return value > 400 ;
});
console.log( res1 );
// 将 索引下标 是 偶数的单元 生成一个新数组
var res2 = arr.filter( function( value , index ){
// 过滤的条件是 索引下标是 偶数
return index % 2 === 0 ;
})
console.log( res2 );
</script>
16、数组的判断
数组的判断
判断 数组中 有没有 符合条件的数据
数组.some( function( 参数1 , 参数2 , 参数3 ){
return 判断的条件 ;
})
参数1 原始数组的数据数值
参数2 原始数组的索引下标
参数3 原始数组
只要有一个 符合条件的数据 返回值 就是 true
如果所有数据 都不符合条件 返回值 才是 false
数组.every( function( 参数1 , 参数2 , 参数3 ){
return 判断的条件 ;
})
参数1 原始数组的数据数值
参数2 原始数组的索引下标
参数3 原始数组
每一个数据单元 必须都符合条件 返回值 才是 true
有一个数据单元 不符合条件 附加值 就是 false
案例：
<script>
var arr = [100,200,300,400,500,600,700,800,900];
// 判断 有没有 大于 500 的 数值
// 只要有一个 符合条件的数据 返回值 就是 true
var res1 = arr.some( function( value ){
return value > 500 ;
})
console.log( res1 );
// 判断 所有数据都要 大于 500
// 必须每一个数据 都符合条件 返回值 才是 true
var res2 = arr.every( function( value ){
return value > 500 ;
})
console.log( res2 );
</script>
17、数组的复杂查询
数组的复杂查询
1, 数组的简单查询
数组.indexOf( 数据 )
数组.lastIndexOf( 数据 )
返回 索引下标 / -1
数据只能是 基本数据类型
2, 数组的判断
数组.some( function(参数1, 参数2){ return 条件 } )
数组.every( function(参数1, 参数2){ return 条件 } )
返回 true / false
3, 数组的复杂查询
数组.find( function( 参数1 , 参数2 , 参数3 ){
return 条件
})
返回符合条件的数据
返回的是 第一个 符合条件的数据
实际项目中 数组存储复杂数据类型 执行数据查询时使用
一般是 数组中存储对象时使用
返回值 是 符合条件的 数组中存储的对象
如果没有符合条件的数据 返回值 是 undefined
数组.findIndex( function( 参数1 , 参数2 , 参数3 ){
return 条件
})
返回符合条件的数据
返回的是 第一个 符合条件的数据 所在单元的索引下标
一般是针对数组中存储的对象 执行操作
返回值 是 存储符合条件数据的对象 在 数组中的索引下标
案例：
<script>
// var arr = [100,200,300,400,500,600,700,800,900];
// // 返回第一个符合条件的数据
// var res = arr.find( function( value ){
// return value > 500 ;
// })
// console.log( res );
// 一般是用于复杂数据查询操作
// 例如 数组中 存储对象时 查询使用
var arr = [
{ id:1 , name:'张三' , age:18 , sex:'男' },
{ id:2 , name:'李四' , age:19 , sex:'女' },
{ id:3 , name:'王五' , age:20 , sex:'男' },
{ id:4 , name:'赵六' , age:21 , sex:'女' },
{ id:5 , name:'刘七' , age:22 , sex:'保密' },
];
console.log( arr );
// 复杂数据的查询操作
// 返回值结果 是 对象中name是王五的这个 对象
var res1 = arr.find( function( value ){
// value 是 数组中的数据数值 也就是 当前存储的对象
return value.name === '王五' ;
})
console.log( res1 );
// 复杂数据的查询操作
// 返回值结果 是 对象中name是王五的这个 对象
var res2 = arr.findIndex( function( value ){
// value 是 数组中的数据数值 也就是 当前存储的对象
return value.name === '王五' ;
})
console.log( res2 );
</script>
18、数组的叠加
数组的叠加
将数组单元的数据 执行 累加操作
没有设定初始值
var 变量 = 数组.reduce(function(参数1,参数2,参数3,参数4){
return 参数1 + 数据 ;
})
参数1 存储初始值 和 叠加结果
参数2 原始数组数据数值
参数3 原始数组索引下标
参数4 原始数组
循环次数是 数组.length-1 次
默认获取第一个单元存储的数据 作为 初始值 存储到参数1 中
从 第二个单元开始循环
每次循环 给 参数1 累加设定的数值
设定初始值
var 变量 = 数组.reduce(function(参数1,参数2,参数3,参数4){
return 参数1 + 数据 ;
} , 初始值 )
参数1 存储初始值 和 叠加结果
参数2 原始数组数据数值
参数3 原始数组索引下标
参数4 原始数组
先 将 设定的初始值 存储到 参数1 中
从 数组的第一个单元开始循环
循环次数是 数组.length 次
案例：
<script>
// var arr = [100,200,300,400,500,600,700,800,900];
// // 没有设定初始值
// // 从 第二个单元 开始 循环
// // prev 起始默认值 是 第一个单元存储的数值100
// // 以此类推 执行 累加操作
// // 一共循环 数组.length-1 次
// var res1 = arr.reduce( function( prev , value , index , array ){
// // console.log( prev , value );
// // 本质上执行的是 从 数组的第一个单元存储的数据开始 执行 累加操作
// // 累加的数值 可以是数组单元的数据 也可以任意数据
// // return prev + value ;
// // return prev + 100 ;
// // 如果 有字符串参与 叠加的结果就是字符串
// return prev + '北京' ;
// })
// console.log( res1 );
var arr = [100,200,300,400,500,600,700,800,900];
// 设定初始值
// 从 第一个单元 开始 循环
// 循环执行的次数是 数组.length 次
var res2 = arr.reduce( function(prev , value){
// prev中存储的就是 设定的初始值 1000
// console.log( prev );
// return prev + 100 ;
return prev + value ;
} , 1000 );
console.log( res2 );
</script>
二、对象
1、对象的基本介绍
JavaScript 对象的基本介绍 object / obj
对象 是 JavaScript中一种数据类型
存储数据的集合
JavaScript中 对象的 索引 是 字符串类型
以 键值对 的形式 存储数据
键名:键值 / 键:值 / 属性:属性值
JavaScript语法
字面量
var 对象 = { 键名:键值 , 键:值 , 属性:属性值 };
构造函数
var 对象 = new Object({ 键名:键值 , 键:值 , 属性:属性值 });
浏览器显示对象内容时 按照 键名的首字符顺序显示
是 浏览器本身设定的显示效果 跟 js程序没有关系
<script>
// 字面量
var obj1 = { name:'张三' , age:18 , sex:'男' };
console.log( obj1 );
// 构造函数
var obj2 = new Object( { name:'张三' , age:18 , sex:'男' } );
console.log( obj2 );
</script>
2、对象的基本操作
调用
语法形式1
对象.属性
对象.键名
对象.键
获取对应的 属性值 / 键值 / 值
语法形式2
对象['属性']
对象['键名']
对象['键']
获取对应的 属性值 / 键值 / 值
点语法 和 []语法 的区别
1, 键名/键/属性 一般都是 字符串形式
如果键名是 数值类型
点击语法 不执行 执行结果是 报错
[]语法 支持 可以获取对应的结果
2, 通过 变量中存储的 键名/键/属性 获取对应的 数据
点语法 不能解析变量 会 使用 变量名称 作为 键名 获取对应的数据
[]语法 可以解析变量 会 使用 变量中存储的数据 作为 键名 获取对应的数据
[]语法中 写入的是 键名 要加 定界符
[]语法中 写入的是 变量 不要加 定界符
修改 :
对已经存在的 键名/键/属性 进行 重复赋值操作
后赋值的数据覆盖存储的原始数据 执行效果 是 修改对象中存储的数据
新增:
对 不存在的 键名/键/属性 进行 赋值操作
给 对象新增数据单元 设定 键名 和 存储的键值
删除:
delete( 对象.属性 )
delete( 对象['属性'] )
delete 对象.属性
delete 对象['属性']
删除对象中指定的单元
案例：
<script>
// var obj = { name:'张三' , age:18 , sex:'男' , 0:100 , 1:200 , 2:300 };
// console.log( obj );
// 获取 name 存储的对应的数据
// // 点语法
// console.log( obj.name ) ;
// console.log( obj.age ) ;
// console.log( obj.sex ) ;
// // []语法
// console.log( obj['name'] );
// console.log( obj['age'] );
// console.log( obj['sex'] );
// 对象中 键名是 数值类型
// // 点语法 不支持 键名是 数值类型
// // console.log( obj.0 );
// // []语法 支持 键名是 数值类型
// console.log( obj[0] );
// console.log( obj[1] );
// console.log( obj[2] );
// var obj = { name:'张三' , age:18 , sex:'男' };
// // 使用变量 存储 键名
// var str = 'name' ;
// // 通过变量str 使用 其中存储的键名 获取对应的键值
// // 点语法
// // 点语法 不能解析 变量
// // 使用的是 str 这个变量名称作为 键名 从对象中调用数据
// console.log( obj.str );
// // []语法
// // []语法 可以解析 变量
// // 解析变量str中存储的数据 解析结果是 'name'
// // obj[str] 也就是解析结果是 obj['name']
// // 可以 获取 'name' 键名 对应的 数据 张三
// // []语法中 定义的如果是 键名 要加 '' 定界符
// // []语法中 定义的如果是 变量 不要加 '' 定界符
// console.log( obj[str] );
var obj = { name:'张三' , age:18 , sex:'男' };
// 对象的修改操作
// 对 已经存在的数据单元 进行 赋值操作
obj.name = 'jack';
obj['age'] = 20;
// 对象的新增操作
// 对 不存在的数据单元 进行 赋值操作
obj.addr = '北京' ;
obj['phone'] = 123456 ;
// 对象的删除操作
delete( obj.name );
delete obj['addr'] ;
console.log( obj );
</script>
