记录个人数组、字符串自己常忘记的方法，以及ES常用处理方式
2024-09-12 22:55:07
记录自己在工作中，时不时使用，每次都要去查一下的基础方法。以及ES6经常使用的方法
一、Array
1、concat 合并数组
2、shift 获取数组第一个元素 unshift 向数组首位添加一个元素
3、pop 获取数组中最后一个元素
4、slice 截取数组
5、splice 对数组的增删改
/*
* concat 合并数组
* 该方法并不会改变原有的数组结构，而是生成一个新的数组
* */
var arr1_1 = [1 , 2 , 3] , arr1_2 = [4 , 5];
var arr1_3 = arr1_1.concat(arr1_2);
console.log(arr1_1 , arr1_2 , arr1_3);//(3) [1, 2, 3] (2) [4, 5] (5) [1, 2, 3, 4, 5]
console.log('---------------------------------------------------------');
/*
* shift 获取数组中的第一个元素
* unshift 向数组第一项添加一个元素
* 该方法会把数组第一个元素给删除
* */
var arr2_1 = [1 , 2, 3 , 4];
var item2 = arr2_1.shift();
console.log(arr2_1 , item2);//(3) [2, 3, 4] 1
console.log(arr2_1.unshift(1));//(4) [1 ,2, 3, 4]
console.log('---------------------------------------------------------');
/*
* pop 获取数组中最后一个元素
* 该方法会把数组最后一个元素给删除
* */
var arr3_1 = [1 , 2, 3 , 4];
var item3 = arr3_1.pop();
console.log(arr3_1 , item3);//(3) [1, 2, 3] 4
console.log('---------------------------------------------------------');
/*
* slice 截取数组
* 该方法不会改变原有数组的结构，两个参数为[)左闭右开的区间，两个参数均代表index索引
* */
var arr4_1 = [1 , 2, 3 , 4];
var arr4_2 = arr4_1.slice(1 , 3);
console.log(arr4_1 , arr4_2);//(4) [1, 2, 3, 4] (2) [2, 3]
console.log('---------------------------------------------------------');
/*
* splice
* 数组方法中最强大的，包含数组操作的增删改
* 它会修改原有的数组结构，并返回一个新数组
* 可以传入多个参数splice(index , length , args)
* index 开始的索引 length 删除元素的长度 args 向索引处添加的元素（可以为多个）
* */
var arr5_1 = [1 , 2, 3 , 4 , 5];
//1、删除
var arr5_2 = arr5_1.splice(1 , 2);
console.log(arr5_1 , arr5_2);//(3) [1, 4, 5] (2) [2, 3]
//2、新增
var arr5_3 = [1 , 2, 3 , 4 , 5];
var arr5_4 = arr5_3.splice(1 , 0 , 9 , 8);
console.log(arr5_3 , arr5_4);//(7) [1, 9, 8, 2, 3, 4, 5] []
//3、修改
var arr5_5 = [1 , 2, 3 , 4 , 5];
var arr5_6 = arr5_5.splice(1 , 2 , 9 , 8);
console.log(arr5_5 , arr5_6);//(5) [1, 9, 8, 4, 5] (2) [2, 3]
二、String
1、concat 拼接字符串
2、slice 字符串截取
3、substring 字符串截取
4、substr 字符串截取
/*
* concat 拼接字符串
* */
var str1_1 = 'sky ';
console.log(str1_1.concat('blue'));//sky blue
console.log('---------------------------------------------------------');
/*
* slice 字符串截取
* 使用方法同数组一样
* */
var str2_1 = 'sky blue';
var str2_2 = str2_1.slice(1 , 5);
console.log(str2_1 , str2_2);//sky blue ky b
console.log('---------------------------------------------------------');
/*
* substring 字符串截取
* 使用方法同slice一样
* */
var str3_1 = 'sky blue';
var str3_2 = str3_1.substring(1 , 5);
console.log(str3_1 , str3_2);//sky blue ky b
console.log('---------------------------------------------------------');
/*
* substr 字符串截取
* 同样是接收2个参数，一个是开始截取的索引位置，一个是要截取的长度
* */
var str4_1 = 'sky blue';
var str4_2 = str4_1.substr(1 , 4);
console.log(str4_1 , str4_2);//sky blue ky b
console.log('---------------------------------------------------------');
三、ES6在处理数组中常用方式
1、数组过滤
2、数组循环(无返回值的)
3、数组循环（有返回值，按需求得到一个新的数组）
4、数组添加元素
5、数组按条件查询元素
6、数组按条件查询元素索引
7、数组查询某元素
8、数组元素内，条件判断1
9、数组元素内，条件判断2
10、根据数据的内容获取值
/*
* filter 数组过滤
* 该方法会返回一个新数组
* */
const arr1_1 = [1, 2, 3, 4, 5];
let arr1_2 = arr1_1.filter(item => item != 3);
console.log(arr1_2); //(4) [1, 2, 4, 5]
console.log('---------------------------------------------------------');
/*
* forEach 数组遍历
* 遍历的是当前数组
* */
const arr2_1 = ['a', 'b', 'c'];
arr2_1.forEach((item, index) => {
console.log(item, index); //a 0 b 1 c 2
});
console.log('---------------------------------------------------------');
/*
* map 数组遍历
* 遍历的是当前数组，但是会返回一个新的数组，回调方法里需要return内容
* */
const arr3_1 = [2, 3, 4];
let arr3_2 = arr3_1.map((item, index) => {
return(item * item + index) //新数组的内容为其中单个元素但是是乘积加上索引
});
console.log(arr3_2);
console.log('---------------------------------------------------------');
/*
* 数组添加元素
* 得到的是一个新数组
* */
const arr4_1 = [1, 2];
let arr4_2 = [...arr2_1, 3, 4];
console.log(arr4_2); //(4) [1, 2, 4, 5]
console.log('---------------------------------------------------------');
/*
* find() 根据条件查找某一个条件的元素
* 查找到就返回该元素，反之则返回undefined
*/
const arr5_1 = [1, 3, 5, 9, 15];
let ret5_1 = arr5_1.find((val, i, arr) => {
return val > 6
})
let ret5_2 = arr5_1.find((val, i, arr) => {
return val < 0
})
console.log(ret5_1, ret5_2); // 9 undefined
console.log('---------------------------------------------------------');
/*
* findIndex() 根据条件查找某一个条件的元素索引
* 查找到就返回该元素索引，反之则返回-1
* 若仅仅查找某个元素，则indexOf效率会远远高于findIndex
*/
const arr6_1 = [1, 3, 5, 9, 15];
let ret6_1 = arr6_1.findIndex((val, i, arr) => {
return val > 6
})
let ret6_2 = arr6_1.findIndex((val, i, arr) => {
return val < 0
})
console.log(ret6_1, ret6_2); // 9 -1
console.log('---------------------------------------------------------');
/*
* includes() 查找数组中是否存在某元素
* 查找到就返回true，反之false
*/
const arr7_1 = [1, 3, 5, 9, 15];
let ret7_1 = arr7_1.includes(5)
let ret7_2 = arr7_1.includes(100)
console.log(ret7_1, ret7_2); // true false
console.log('---------------------------------------------------------');
/*
* some() 给一个条件
* 若数组中任意一元素满足条件，则返回true
* 若数组中元素均不满足条件，则返回false
*/
const arr8_1 = [1, 3, 5, 9, 15];
let ret8_1 = arr8_1.some((val, i, arr) => {
return val > 6
})
let ret8_2 = arr8_1.some((val, i, arr) => {
return val < 0
})
console.log(ret8_1, ret8_2); // true false
console.log('---------------------------------------------------------');
/*
* every() 给一个条件
* 若数组中所有元素均满足条件，则返回true
* 若数组中元素，只要一个不满足条件，则返回false
*/
const arr9_1 = [1, 3, 5, 9, 15];
let ret9_1 = arr9_1.every((val, i, arr) => {
return val > 0
})
let ret9_2 = arr9_1.every((val, i, arr) => {
return val <= 9
})
console.log(ret9_1, ret9_2); // true false
console.log('---------------------------------------------------------');
/*
* reduce(callback,[initialValue]) 主要可用于通过数组中的item,求出一个值，以求和为例
* callback 执行数组中每个值的函数，包含四个参数——previousValue 上一次调用回调返回的值，或者是提供的初始值（initialValue）currentValue 数组中当前被处理的元素
* index 当前元素在数组中的索引 array调用 reduce 的数组
* initialValue （作为第一次调用 callback 的第一个参数。）
*/
const arr10_1 = [1 , 10 , 100]
let ret10_1 = arr10_1.reduce((lastRet , item) => {
return lastRet + item
} , 1000)
console.log(ret10_1); //
console.log('---------------------------------------------------------');
四、ES6在处理对象中常用方式
1、对象添加
2、对象覆盖
3、获取对象中的值
/*
* 对象添加
* 得到一个新对象
* */
const obj1_1 = {
a: 1,
b: 2
},
c = 3;
let obj1_2 = { ...obj1_1,
c
};
console.log(obj1_2); //{a: 1, b: 2, c: 3}
console.log('---------------------------------------------------------');
/*
* 对象覆盖
* 覆盖目标对象
* */
let obj2_1 = {
a: 1,
b: 2
},
obj2_2 = {
a: 11,
b: 22
},
obj2_3 = {
c: 3
};
Object.assign(obj2_1, obj2_2, obj2_3);
console.log(obj2_1); //{a: 11, b: 22, c: 3}
console.log('---------------------------------------------------------');
/*
* 获取对象中的值
* */
const obj3_1 = {
a3: 1,
b3: 2,
c3: 3
};
let {
a3,
b3,
c3
} = obj3_1;
console.log(a3, b3, c3); //1 2 3
搞定！！！
最新文章
- 拓扑排序（topsort）
- mac 安装 php nginx mysql
- C++变量对比java变量所占内存
- http://blog.csdn.net/ClementAD/article/category/6217187/2
- swift基础二
- C#.NET ObjectDumper
- jQuery UI - draggable 中文API
- Yii Framework 开发教程Zii组件-Tabs示例
- Apache commons (Java常用工具包)简介
- 正则获取URL参数
- Log4J：Log4J三大组件：Logger+Appender+Layout 格式化编程详解
- 平衡树简单教程及模板（splay, 替罪羊树, 非旋treap）
- Code signing is required for product type 'Application' in SDK 'iOS 11.4'
- 配置 -- php运行报Call to undefined function curl_init()的解决办法
- sqlserver恢复数据库被挂起
- SSH和SSM的区别
- 转：在网站开发中很有用的8个 jQuery 效果【附源码】
- 【RS】Using graded implicit feedback for bayesian personalized ranking - 使用分级隐式反馈来进行贝叶斯个性化排序
- android开发 系统时间与定时器之间有关系嘛？
- Win7下的flutter环境安装配置