《其实你并不需要Lodash / Underscore》
来源:互联网 发布:java encode解码 编辑:程序博客网 时间:2024/04/25 15:25
You-Dont-Need-Lodash-Underscore
《其实你并不需要Lodash / Underscore》
接触前端较晚,主要使用的是React+ES5/ES6,下面大部分在前端开发过程中接触过,就当是做一份ES5/ES6笔记:
一、Array数组
1、_.concat
将原数组拷贝一份副本, 拼接操作副本新数组,原数组不变
const array = [1]const other = array.concat(2, [3], [[4]])console.log(other); // [1, 2, 3, [4]]console.log(array); // [1]
2、_.fill
修改替换数组中元素的值
const array = [1, 2, 3];array.fill('a');console.log(array); // ['a', 'a', 'a']console.log(Array(3).fill(2)); // [2, 2, 2]console.log([4, 6, 8, 10].fill('*', 2, 3)); // [4, '*', '*', 10]; 从下标为2开始到下标为3,第三个为空时默认替换到数组最尾
3、_.find
返回从数组中查找到符合条件的第一个值
const users = [ { 'user': 'barney', 'age': 36, 'active': true }, { 'user': 'fred', 'age': 40, 'active': false }, { 'user': 'pebbles', 'age': 1, 'active': true } ];const findOut = users.find(item => item.age < 40);console.log(findOut); // { active: true, age: 36, user: "barney" }
4、_.findIndex
返回从数组中查找到符合条件的第一个值的下标,没有符合的返回-1
const users = [ { 'user': 'barney', 'age': 36, 'active': true }, { 'user': 'fred', 'age': 40, 'active': false }, { 'user': 'pebbles', 'age': 1, 'active': true } ];const findIndex = users.findIndex(item => item.age < 40);console.log(findIndex); // 0
5、_.indexOf
返回从数组中查找到的第一个值的下标,没有符合的返回-1
Returns the first index at which a given element can be found in the array, or -1 if it is not present.
const array = [2, 9, 9];const result = array.indexOf(9);console.log(result); // 1
6、_.join
根据分隔符来拼接数组中元素
const result = ['one', 'two', 'three'].join('--');console.log(result); // "one--two--three"
7、_.lastIndexOf
返回在数组中最后出现该值的index下标,没有返回-1
const array = [2, 9, 9, 4, 3, 6];const result = array.lastIndexOf(9);console.log(result); // 2
8、_.reverse
反转数组
const array = [1, 2, 3];console.log(array.reverse()); // [3, 2, 1]
二、Collection集合
1、_.each
依次yielding数组元素, 可以在中间操作每个元素
Iterates over a list of elements, yielding each in turn to an iteratee function.
[1, 2, 3].forEach((value, index) => { console.log(value * 3);}); // 3 6 9 依次输出
2、_.every
数组中每个元素是否符合提供的测试条件函数
const isLargerThanTen = (element, index, array) => { console.log(element, index, array); return element >= 10;}const array = [10, 20, 30];const result = array.every(isLargerThanTen);console.log(result); // true
3、_.filter
过滤出符合提供的条件函数的值, 并返回它们组成的数组
const isBigEnough = (value) => { return value >= 10}const array = [12, 5, 8, 130, 44];const filtered = array.filter(isBigEnough);console.log(filtered); // [12, 130, 44]
4、_.includes
该值是否在数组中
const array = [1, 2, 3];array.includes(1); // true// 用indexOf相同效果const array = [1, 2, 3];array.indexOf(1) > -1; // true
5、_.map
将数组中元素每个值改变后返回新数组
const array1 = [1, 2, 3];const array2 = array1.map((value, index) => { return value * 2 + index;});console.log(array2); // [2, 5, 8]
6、_.pluck
pluck是Lodash v4.0之前的函数
const array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}];const names = array1.map(x => { return x.name;})console.log(names); // ["Alice", "Bob", "Jeremy"]
7、_.reduce
从左到右计算一个数组中各元素值
const array = [0, 1, 2, 3, 4];const result = array.reduce((previousVal, currentVal, currentIndex, array) => { return previousVal + currentVal;});console.log(result); // 等于各元素之和10
8、_.reduceRight
从右到左计算一个数组中各元素值
const array = [0, 1, 2, 3, 4];const result = array.reduceRight((previousVal, currentVal, currentIndex, array) => { return previousVal - currentVal;});console.log(result); // 从右减到左,等于-2
9、_.size
返回对象的键值对个数
const result2 = Object.keys({one: 1, two: 2, three: 3}).length;console.log(result2); // 3
10、_.some
数组中是否有些元素符合条件
const isLargerThanTen = (element, index, array) => { return element >= 10;}const array = [10, 9, 8];const result = array.some(isLargerThanTen);console.log(result); // true
三、Function函数
1、_.after
【注】这只是一种可选的实现方式在执行之前保证所有async calls异步回调已结束
const notes = ['profile', 'settings'];notes.forEach((note, index) => { console.log(note); if (notes.length === (index + 1)) { render(); // 到数组最后一个元素执行渲染方法 }});
四、Lang属性
1、_.isNaN
检测值是否是NaN
// ES6console.log(Number.isNaN(NaN)); // true
五、Object对象
1、_.assign
将自身可enumerable属性加到目标对象
const result1 = Object.assign({1: 'aaa'}, {2: 'bbb'});console.log(result1); // { 1: "aaa", 2: "bbb" }const result2 = Object.assign({1: 'aaa'}, ['a', 'b', 'c']);console.log(result2); // { 0: "a", 1: "b", 2: "c" }
2、_.keys
取出对象所有自身可enumerable属性
const result2 = Object.keys({one: 1, two: 2, three: 3});console.log(result2); // ["one", "two", "three"]
六、String字符串
1、_.repeat
重复字符串count次
const result = 'abc'.repeat(2);console.log(result); // 'abcabc'
2、_.toLower
字符串中字符所有大写转成小写
const result = 'Fo1OBAR'.toLowerCase();console.log(result); // "fo1obar"
3、_.toUpper
字符串中字符所有小写转成大写
const result = 'foobar'.toUpperCase();console.log(result); // "FOOBAR"
4、_.trim
裁剪字符串首尾的空符
const result = ' abc '.trim()console.log(result); // 'abc'
【拓展】
1、unshift向数组添加的第一个元素
const data = ['1', '2', '3'];data.unshift('0');console.log(data); // ["0", "1", "2", "3"]
2、Array.from();
creates a new Array instance from an array-like or iterable object.
Array.from({length: 5}, (v, index) => index); // [0, 1, 2, 3, 4]Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
- 《其实你并不需要Lodash / Underscore》
- 【越紧越好?其实,你并不需要紧实…
- 其实你并不重要
- lodash和underscore
- Lodash和Underscore工具
- 你可能不再需要Underscore
- 你可能不再需要Underscore
- 大多数人其实并不在意你
- 交换两个整型变量其实并不需要第三者
- 其实你的app并不一定要设置退出功能
- 你可能并不需要消息队列
- 也许你并不需要 Gulp, Grunt ?
- 你可能并不需要消息队列
- 华为其实并不太忙
- Ajax其实并不神秘
- 其实微软并不独
- 最近流行邮箱扩容 但是其实并不是我们真正需要的
- lodash
- JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
- C server多路复用
- 从菜鸟开始学嵌入式linux NO.1
- modelsim-win64-10.4-se 下载、安装、破解全攻略(屡试不爽)
- 1206/2016
- 《其实你并不需要Lodash / Underscore》
- 203. Remove Linked List Elements leetcode list
- java类初始化初步学习
- 设计模式C++实现(8)——代理模式
- UVA P1585 Score
- IOC容器的实现
- josn教程(二)---json简介
- 有关common lang组件
- CodeForces 246A Buggy Sorting