concat() 方法用于连接两个或多个数组。
concat() 方法不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值。const arr1 = [1, 2, 3]const arr = [4, 5]console.log( arr1.concat(arr)) //[1, 2, 3, 4, 5]entries()
方法返回一个新的Array Iterator对象,
该对象包含数组中每个索引的键/值对
注释:entries() 不会更改原始数组。
var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined//使用for…of 循环
for (let e of iterator) {console.log(e);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]Object.entries ,是将对象的键和值都取出来形成一个二维数组const obj = { name: 'zhangsan', age: 18 }console.log(Object.entries(obj))// 0: (2) ['name', 'zhangsan']// 1: (2) ['age', 18]every 返回一个布尔值
every()方法用于检测数组中的所有元素是否都满足指定条件(该条件为一个函数)。
every()方法会遍历数组的每一项,如果有一项不满足条件,则返回false,剩余的项将不会再执行检测;
如果遍历完数组后,每一项都符合条,则返回true。
注释:every() 不对没有值的数组元素执行函数。
注释:every() 不改变原始数组。
若收到一个空数组,此方法在一切情况下都会返回 true。array.every(function(currentValue,index,arr), thisValue)
参数说明:
第一个参数为一个回调函数,必传,数组中的每一项都会遍历执行该函数。
currentValue:必传,当前项的值
index:选传,当前项的索引值
arr:选传,当前项所属的数组对象
第二个参数thisValue为可选参数,回调函数中的this会指向该参数对象。
var arr = [1000, 2000, 3000]
var flag = arr.every(function (a, b, c) {console.log(a + "===" + b + "====" + c) //1000===0====1000,2000,3000return a > 2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
})
console.log(flag) //falsefilter 返回一个新数组,如果没有任何数组元素通过测试,则返回空数组。
filter() 方法创建数组,其中填充了所有通过测试的数组元素(作为函数提供)。
注释:filter() 不会对没有值的数组元素执行该函数。
注释:filter() 不会改变原始数组。
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,
该元素,false 则不保留。它接受以下三个参数:
element
数组中当前正在处理的元素。
index可选
正在处理的元素在数组中的索引。
array可选
调用了 filter 的数组本身。
thisArg可选
执行 callback 时,用于 this 的值。var words = ['abcd', 'badc', 'css', 'dd']const result = words.filter(function (item, index, array) {return item.length > 3})console.log(result) //['abcd', 'badc']find
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时,
find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
null和undefined转boolean,两者都是false
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
array.find(function(currentValue, index, arr),thisValue),
其中currentValue为当前项,index为当前索引,arr为当前数组const arr = [15, 18, 20]console.log(arr.find((item) => item > 15)) //18console.log(arr.find((item) => item > 18)) //20console.log(arr.find((item) => (item = 0))) //undefinedfindIndex
findIndex() 返回数组中通过测试的第一个元素的索引(作为函数提供)
findIndex() 方法为数组中的每个元素都调用一次函数执行:
如果找到函数返回 true 值的数组元素,则返回该数组元素的索引且不会再调用执行函数。
否则返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。const arr = [15, 18, 20]console.log(arr.findIndex((item) => item > 15)) //1console.log(arr.findIndex((item) => item > 18)) //2console.log(arr.findIndex((item) => (item = 0))) //-1 forEach 返回值underfinded
forEach() 方法按顺序为数组中的每个元素调用一次函数。
注释:对于没有值的数组元素,不执行forEach() 方法。
forEach()有三个参数,第一个是function()函数,第二个是对象;
函数里面有三个参数,
第一个是数组的每一项值(必选),
第二个是数组下标(可选),
第三个是原数组(可选)var obj = {name: 'zhangsan',age: 18,}const arr = [1, 3, 5]arr.forEach((item, index, array) => {console.log(item, index, array)// 1 3 5 // 0,1,2 // [1,3,5]})forEach()第二个参数对象,使第一个参数函数的this指向对象 arr.forEach(function (item, index, array) {console.log(this) //{name: 'zhangsan', age: 18}}, obj)from
从具有 length 属性或可迭代对象的任何对象返回 Array 对象。
Array.from(object, mapFunction, thisValue)var myArr = Array.from("ABCDEFG");console.log(myArr); //['A', 'B', 'C', 'D', 'E', 'F', 'G'] includes
用来判断一个数组是否包含一个指定的值,
如果是返回 true,否则false。
includes() 方法区分大小写
array.includes(element, start)
element为必选项,表示要找的元素,
start为可选项,表示从索引值为几的元素开始,默认为0const a=["tom","jj"]a.includes("tom") //trueconst a=[1,2,3,1,3]a.includes(1,1) //trueindexOf
返回某个指定的字符串值在字符串中首次出现的位置
如果不存在为 -1,所以它间接可以判断 字符 在不在字符串里
indexOf() 方法对大小写敏感!var str = 'Helloworld!'console.log(str.indexOf('Hello')) //0console.log(str.indexOf('World')) //-1console.log(str.indexOf('world')) //5isArray
isArray()方法确定对象是否为数组。
如果对象是数组,则此函数返回 true,否则返回 false。
Array.isArray(obj)join
join() 方法将数组作为字符串返回。
元素将由指定的分隔符分隔。默认分隔符是逗号 (,)
注释:join() 方法不会改变原始数组。var fruits = ['Banana', 'Orange', 'Apple']console.log(fruits.join()) //Banana,Orange,Applemap使用为每个数组元素调用函数的结果创建新数组。按顺序为数组中的每个元素调用一次提供的函数(每遍历一次就得到一个值)
注释:map() 对没有值的数组元素不执行函数。
注释:map() 不会改变原始数组。var arr1 = [1, 4, 9]const map1 = arr1.map((x) => x * 2)console.log(map1) //[2, 8, 18]const map2 = arr1.map((x) => {if (x == 4) {return x * 2}})console.log(map2) // [undefined, 8, undefined]substr:截取字符串
*参数1:从哪个下标开始截取
*参数2:截取几个长度split:根据某个字符分割字符串
特点:如果传入空字符串,那代表把字符串中的每个字符都当做数组的一个元素toUpperCase() 转大写
toLowerCase() 转小写数组的方法:
pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。const arr = [1, 2, 3]console.log(arr.pop()) //3console.log(arr) //[1,2]push() 方法向数组末尾添加新项目,并返回新长度。const arr = [1, 2, 3]console.log(arr.push(4)) //4console.log(arr) //[1, 2, 3,4]在最后添加
unshift() 方法将新项添加到数组的开头,并返回新的长度。const arr = [1, 2, 3]console.log(arr.unshift(4)) //4console.log(arr) //[4,1, 2, 3]shift() 方法移除数组的第一项,改变数组的长度,返回值是被移除的项目。const arr = [1, 2, 3]console.log(arr.shift(2)) //1console.log(arr) //[ 2, 3]reverse:
将数组中元素的位置颠倒,并返回该数组。
数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。var fruits = ['Orange', 'Apple', 'Mango']console.log(fruits.reverse()) // ['Mango', 'Apple', 'Orange']sort:
sort() 方法对数组的项目进行排序。
排序顺序可以是按字母或数字,也可以是升序(向上)或降序(向下)。
默认情况下,sort() 方法将按字母和升序将值作为字符串进行排序。
这适用于字符串("Apple" 出现在 "Banana" 之前)。
但是,如果数字按字符串排序,则 "25" 大于 "100" ,因为 "2" 大于 "1"。var fruits = ['Banana', 'Apple', 'Mango']console.log(fruits.sort()); //['Apple', 'Banana', 'Mango']toString: 转成字符串
toString() 方法返回包含所有数组值的字符串,以逗号分隔。
注释:toString() 方法不会改变原始数组。slice()
方法返回一个新的数组对象,
这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)
原始数组不会被改变。const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]fill可用于向空数组的初始化,接受一个参数,表示填充的值,返回修改后的数组
arr.fill(value[, start[, end]])
alue
用来填充数组元素的值。
start 可选
起始索引,默认值为0。
end 可选
终止索引,默认值为 this.length。var arr1 = [];
arr1.fill(6);
console.log(arr1); //[] 原数组中没有定长度,没有数据可以替换,所以结果仍为空var arr3 = ['a','b','c'];
arr3.fill(7);
console.log(arr3); //[7,7,7],将数组的每一项都替换为7var arr4 = new Array(5);
arr4.fill(5);
console.log(arr4);//[5,5,5,5,5],将数组的5项都填充为5接受两个参数,用于指定填充的起始位置和结束位置
var arr2 = [0,0,0];
arr2.fill(3,2,5);
console.log(arr2); //[0,0,3]从第二位填充到第四位,但是数组的长度只有3var arr5 = [1,2,3,4,5];
arr5.fill(6,2,4);
console.log(arr5); //[1,2,6,6,5]将数组的第二位到第三位填充为6splice:
可以删除
参数1:开始下标
参数2:结束下标(不包括结束下标)
可以替换
参数1:开始下标
参数2:结束下标(不包括结束下标)
参数3:要替换的内容
可以添加
参数1:开始下标
参数2:跟开始下标相同
参数3:要添加的内容splice () 下标是从0开始 序号从1开始
传递参数
splice(2) 表示 从索引2开始删除所有元素传递参数
splice(1,2) 表示从下标为1开始删除2个元素传递参数
splice(0,0,index)表示 从下标为0开始,添加一个新元素为indexvar myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。注意: some() 不会对空数组进行检测。注意: some() 不会改变原始数组。arr.some(fn[, thisArg]) 参数 fn是用来测试每个元素的函数,接受三个参数:item:数组中正在处理的元素。index:数组中正在处理的元素的索引值。array:some()被调用的数组。
thisArg:执行 callback 时使用的 this 值。
//例子:检测在数组中是否有大于10的元素var a = [11, 50, 40, 3]function some(item, index, array) {console.log(item)return item > 10}a.some(some)//11//true//例子:检索数组中是否存在某个值function some(t, i, a) {if (t == 10) {console.log(t + '存在于这个数组')}console.log(10 + '不存在于这个数组')}var a = [11, 50, 40, 3]a.some(some)// 10不存在于这个数组// falseObject.keys()
返回一个由一个给定对象的自身可枚举属性组成的数组,
数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。// 传入对象,返回包含对象可枚举属性和方法的数组const obj = {name: 'zhangsan',age: 18,}console.log(Object.keys(obj)) //['name', 'age']// 传入字符串,返回索引值var str = 'Bei'console.log(Object.keys(str)) //['0', '1', '2']//传入数组,返回索引值var str = ['Jing', 'Li']console.log(Object.keys(str)) //['0', '1']//构造函数,返回空数组或者属性名function Person(name, age) {this.name = 'zhangsan'this.age = 18}console.log(Object.keys(Person)) //[]常用技巧
let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person).map((key)=>{person[key] // 获取到属性对应的值,做一些处理
}) reduce() 方法接收一个函数作为累加器,
数组中的每个值(从左到右)开始缩减,最终计算为一个值。
函数的返回值存储在累加器中(结果/总计)。
注释:对没有值的数组元素,不执行 reduce() 方法。
注释:reduce() 方法不会改变原始数组。
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数,
不包括数组中被删除或从未被赋值的元素,
接受四个参数:
初始值(或者上一次回调函数的返回值),
当前元素值,
当前索引,
调用 reduce 的数组。callback (执行数组中每个值的函数,包含四个参数)1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))2、currentValue (数组中当前被处理的元素)3、index (当前元素在数组中的索引)4、array (调用 reduce 的数组)
initialValue (作为第一次调用 callback 的第一个参数。)
//例子1:var arr = [1, 2, 3]var sum = arr.reduce(function (prev, cur, index, arr) {console.log(prev, cur, index)return prev + cur})console.log(arr, sum)// 1 2 1// 3 3 2// [1, 2, 3] 6// index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是3,但是reduce函数循环2次//例子2:var arr = [1, 2, 3]var sum = arr.reduce(function (prev, cur, index, arr) {console.log(prev, cur, index)return prev + cur}, 0)console.log(arr, sum)// 0 1 0// 1 2 1// 3 3 2// [1, 2, 3] 6// index是从0开始的,第一次的prev的值是我们设置的初始值0。数组长度是3,reduce函数循环3次
//例子3:var arr = []var sum = arr.reduce(function (prev, cur, index, arr) {console.log(prev, cur, index)return prev + cur})//报错,"TypeError: Reduce of empty array with no initial value"//但是要是我们设置了初始值就不会报错,如下:var arr = []var sum = arr.reduce(function (prev, cur, index, arr) {console.log(prev, cur, index)return prev + cur}, 0)console.log(arr, sum) // [] 0//例子4:简单用法var arr = [1, 2, 3, 4]var sum = arr.reduce((x, y) => x + y)var mul = arr.reduce((x, y) => x * y)console.log(sum) //求和,10console.log(mul) //求乘积,24//例子5:高级用法1、计算数组中每个元素出现的次数let names = ['jack', 'Bob', 'tom']let nameNum = names.reduce((pre, cur) => {if (cur in pre) {pre[cur]++} else {pre[cur] = 1}return pre}, {})console.log(nameNum) //{jack: 1, Bob: 1, tom: 1}2、数组去重let arr = [1, 2, 4, 4, 1]let newArr = arr.reduce((pre, cur) => {if (!pre.includes(cur)) {return pre.concat(cur)} else {return pre}}, [])console.log(newArr) // [1, 2, 4]3、将二维数组转化为一维let arr = [[0, 1],[2, 3],]let newArr = arr.reduce((pre, cur) => {return pre.concat(cur)}, [])console.log(newArr) // [0, 1, 2, 3]4、将多维数组转化为一维let arr = [[0, 1],[2, 3],[4, [5, 6, 7]],]const newArr = function (arr) {return arr.reduce((pre, cur) =>pre.concat(Array.isArray(cur) ? newArr(cur) : cur),[])}console.log(newArr(arr)) //[0, 1, 2, 3, 4, 5, 6, 7]5、对象里的属性求和var result = [{subject: 'math',score: 10,},{subject: 'chinese',score: 20,},]var sum = result.reduce(function (prev, cur) {return cur.score + prev}, 0)console.log(sum) //30递归计算数组const array = [5, [[4, 3], 2, 1]]function fn(data) {if (!Array.isArray(data)) {return data}return data.reduce((pre, cur) => {return fn(pre) - fn(cur)})}console.log(fn(array))Object.values(obj)
obj:被返回可枚举属性值的对象。把一个对象的值转换为数组
返回一个数组,其元素是在对象上找到的可枚举属性值。
属性的顺序与通过手动循环对象的属性值所给出的顺序相同。var obj = { foo: 'bar', baz: 42 }console.log(Object.values(obj)) // ['bar', 42]var obj = { 0: 'a', 1: 'b', 2: 'c' }console.log(Object.values(obj)) // ['a', 'b', 'c']Object.defineProperty ()
管理对象
// 以现有对象为原型创建对象
Object.create()// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)// 添加或更改对象属性
Object.defineProperties(object, descriptors)// 访问属性
Object.getOwnPropertyDescriptor(object, property)// 以数组返回所有属性
Object.getOwnPropertyNames(object)// 访问原型
Object.getPrototypeOf(object)// 以数组返回可枚举属性
Object.keys(object)ES6里的一些方法都常用
forEach
map
以上两个
都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项)、index(索引值)、arr(原数组)
匿名函数中的this都是指向window
只能遍历数组二、区别1.forEach()没有返回值。2.map() 有返回值,可以return 出来。
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!