一、箭头函数arrow funtion
1.定义一个匿名函数常规语法:
function (x) { return x * x; }
2.该函数使用箭头函数可以使用仅仅一行代码搞定!
x => x * x
箭头函数相当于匿名函数,并且简化了函数定义
箭头函数有两种格式:
- 一种像上面的,只包含一个表达式,连
{
... }
和return
都省略掉了。 - 还有一种可以包含多条语句,这时候就不能省略
{ ... }
和return。
例如:
x => { if (x > 0) { return x * x; } else { return - x * x; } }
箭头函数的语法规则:
(parameters) => { statements }
如果函数有多个参数或者没有参数,可按照下面写法:
如果返回值仅仅只有一个表达式(expression), 还可以省略大括号。
// 无参数: () => 3.14 //一个参数 //如果只有一个参数,可以省略括号: x=>x*x // 两个参数: (x, y) => x * x + y * y // 可变参数: (x, y, ...rest) => { var i, sum = x + y; for (i=0; i<rest.length; i++) { sum += rest[i]; } return sum; }
注解:当传入的参数不确定时,使用rest运算符...rest
注意:如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:
// SyntaxError: x => { foo: x }
因为和函数体的 { ... } 有语法冲突,所以要改为:
// ok: x => ({ foo: x })
二、JS中filter的用法
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
例子
例如,在一个Array
中,删掉偶数,只保留奇数,可以这么写:
var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; }); r; // [1, 5, 9, 15]
把一个Array
中的空字符串删掉,可以这么写:
var arr = ['A', '', 'B', null, undefined, 'C', ' ']; var r = arr.filter(function (s) { return s && s.trim(); // 注意:IE9以下的版本没有trim()方法 }); r; // ['A', 'B', 'C']
可见用filter()
这个高阶函数,关键在于正确实现一个“筛选”函数。
filter()
接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array
的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:
var arr = ['A', 'B', 'C']; var r = arr.filter(function (element, index, self) { console.log(element); // 依次打印'A', 'B', 'C' console.log(index); // 依次打印0, 1, 2 console.log(self); // self就是变量arr return true; });
利用filter
,可以巧妙地去除Array
的重复元素:
'use strict'; var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; r = arr.filter(function (element, index, self) { return self.indexOf(element) === index; }); console.log(r.toString()); //运行结果 apple,strawberry,banana,pear,orange
去除重复元素依靠的是indexOf
总是返回第一个元素的位置,后续的重复元素位置与indexOf
返回的位置不相等,因此被filter
滤掉了。
尝试用filter()
筛选出素数:
'use strict'; function get_primes(arr) { var i; return arr.filter(function (element) { var flag=true; if(element<2){ flag=false; }else { for(var i=2;i<element;i++){ if (element%i==0){ flag=false; break; } } } return flag; }); } // 测试: var x, r, arr = []; for (x = 1; x < 100; x++) { arr.push(x); } r = get_primes(arr); if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) { console.log('测试通过!'); } else { console.log('测试失败: ' + r.toString()); } //运行结果:测试通过
三、JS中map函数的使用
map()
方法定义在JavaScript的Array
中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
map()
不会对空数组进行检测map()
不会改变原始数组
语法
array.map(function(currentValue, index, arr), thisIndex)
参数说明
function(currentValue, index, arr)
:必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:
currentValue
:必须。当前元素的的值。index
:可选。当前元素的索引。arr
:可选。当前元素属于的数组对象。
thisValue
:可选。对象作为该执行回调时使用,传递给函数,用作"this
"的值。
实例
返回由原数组中每个元素的平方组成的新数组:
let array = [1, 2, 3, 4, 5]; let newArray = array.map((item) => { return item * item; }) console.log(newArray) // [1, 4, 9, 16, 25]
三、JS中find函数的使用
定义和用法:
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
语法:
array.find(function(currentValue, index, arr),thisValue)
参数:
例子:
//获取数组中年龄大于 19 的第一个元素 let arr1 = [10, 12, 18, 20, 22] let newArr1 = arr1.find((item) => item > 19) console.log(newArr1, '-----大于19的值') //运行结果返回:20
findIndex()方法的用法与find()方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
let arr1 = [10, 12, 18, 20, 22] let newArr1 = arr1.findIndex((item) => item > 19) console.log(newArr1, '-----大于19的值的位置') //运行结果返回:3
四、JS中forEach函数的使用
遍历数组全部元素,利用回调函数对数组进行操作,自动遍历整个数组,且无法break中途跳出循环,不可控,不支持return操作输出,return只用于控制循环是否跳出当前循环。
回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身。
var arr = [1,2,3,4,5,] ; arr.forEach(function(item,index){ console.log(item); });
这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;
但是可以自己通过数组的索引来修改原来的数组;
var ary = [12,23,24,42,1]; var res = ary.forEach(function (item,index,input) { input[index] = item*10; }) console.log(res);//--> undefined; console.log(ary);//--> 通过数组索引改变了原数组; //运行结果 [120, 230, 240, 420, 10]
五、some() 和 every()
every()与some()方法都是JS中数组的迭代方法, 只返回布尔值。
every()
判断数组中是否每个元素都满足条件
只有都满足条件才返回true;
只要有一个不满足就返回false;
some()
判断数组中是否至少有一个元素满足条件
只要有一个满足就返回true
只有都不满足时才返回false
// 判断数组arr1是否全是偶数 // 判断数组arr2是否至少有一个偶数 var arr1=[1, 2, 3, 4, 5]; var arr2=[1, 4, 6, 8, 10]; console.log( arr1.every(function(value, index, array){ return value % 2 == 0; }) ); // false console.log( arr2.some(function(value, index, array){ return value % 2 == 0; }) ); // true
四、JS中常用函数...
随机数生成器 Math.random() 装换为整数 parseInt() 日期时间函数(需要用变量调用): var b = new Date(); //获取当前时间 b.getTime() //获取时间戳 b.getFullYear() //获取年份 b.getMonth()+1; //获取月份 b.getDate() //获取天 b.getHours() //获取小时 b.getMinutes() //获取分钟 b.getSeconds() //获取秒数 b.getDay() //获取星期几 b.getMilliseconds() //获取毫秒 数学函数(用Math来调用): abs(x) 返回数的绝对值。 ceil(x) 对小数进行上舍入。 floor(x) 对数进行下舍入。 round(x) 把数四舍五入为最接近的整数。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 sqrt(x) 返回数的平方根。 random() 返回 0 ~ 1 之间的随机数。 字符串函数(用变量来调用): indexOf 返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。 let str = 'vold.ndexx' var index1 = str.indexOf("e"); console.log(index1,'字符串第一次出现的位置') charAt 返回指定位置的字符。 var index1 = str.charAt(7); lastIndexOf 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。 var index1 =str.lastIndexOf('e'); match 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。 var re = new RegExp(/^\w+$/); var is_alpha1 = a.match(re); //is_alpha1 = "hello" var is_alpha2 = b.match(re); //is_alpha2 = null substring 返回字符串的一个子串,传入参数是起始位置和结束位置。 var sub_string2 = a.substring(1,4); //sub_string2 = "ell" substr ******** 返回字符串的一个子串,传入参数是起始位置和长度 var sub_string1 = a.substr(1); //sub_string1 = "ello" var sub_string2 = a.substr(1,4); //sub_string2 = "ello" replace ******* 替换字符串,第一个参数代表被替换的字符串,第二个参数代表替换的字符串 a.replace("he","aa") search 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。 var index1 = a.search(re); //index1 = 0 var index2 = b.search(re); //index2 = -1 split ****** 通过将字符串划分成子串,将一个字符串做成一个字符串数组。 var arr1 = a.split(""); //arr1 = [h,e,l,l,o] length 属性 ******* 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。 toLowerCase 将整个字符串转成小写字母。 var lower_string = a.toLowerCase(); //lower_string = "hello" toUpperCase 将整个字符串转成大写字母。 var upper_string = a.toUpperCase(); //upper_string = "HELLO"
补充知识点:
new set()数组去重
//new set()数组去重 var arr4 = [...new Set([1, 2, 1, 1, 2, 3, 3, 4, 4])]; console.log("去重后的数组",arr4) //运行结果:1,2,3,4
...reset用法
//...reset用法 function foo(a,b,...rest){ console.log(a); console.log(b); console.log(rest); } foo(1,2,3,4,5) //1,2,Array [3,4,5] foo(1) //1, undefined, Array[]
rest参数只能写在最后,前面用...
标识,从运行结果可知,传入的参数先绑定a
、b
,多余的参数以数组形式交给变量rest
。
如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined
)。