js常用代码和属性（最近更新时间20190902）

学习笔记不断更新总结

fill

1.语法

fill() 方法用于将一个固定值替换数组的元素
array.fill(value, start, end)

2.示例

fruits数组index从2开始到4之前元素替换成watermelon

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("watermelon", 2, 4);

输出：Banana,Orange,watermelon,watermelon

注意: IE 11 及更早版本不支持 fill() 方法。

3.技巧场景

a.数组中需要添加null元素等

filter

1.语法

filter() 方法创建一个新的数组，新数组的元素通过检查制定数组中符合条件的所有元素
array.filter(function(currentValue,index,arr), thisValue)

2.示例

筛选出数组中满足大于18的数

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}

console.log(ages.filter(checkAdult))

输出：32,33,40

3.技巧场景

a.[2==2,2===3].filter(Boolean),Boolean也可以作为第一个参数
b.静态删除某个元素时,使用filter去掉某个制定id的数值返回新的数组

function remove(id){
	list = list.filter(item => {
	      return item.id !== id
	})
}

es6-解构

1.语法

const { a, b } = array

2.示例

多层解构

var info={
	name:'ct',
	address:{
		province:'fujian',
		city:'xiamen'
	}
}
const  { name, address: { province, city } }  = info

3.技巧场景

a.多层解构

es6-扩展运算符…

1.语法

{…info}

2.示例

基础复制数组

let person = {a:1, b:2}
let female = {...person}
let male = Object.assign({},person)

3.技巧场景

a.将数组转换为参数序列

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers)

b.扩展运算符可以与解构赋值结合起来，用于生成数组,扩展运算符用于数组赋值，只能放在参数的最后一位

const [first, ...last] = [1, 2, 3, 4, 5];
first // 1
last  // [2, 3, 4, 5]

c.将字符串转为真正的数组

[...'ct']
// [ "c", "t" ]

d.两个数组连接返回新的数组
标对象与源对象有同名属性，则后面的属性会覆盖前面的属性，可用在新增的场景

let a=[1,2]
let b=[2,3]
let c=[...a,...b]
//c:  [1, 2, 2, 3]

let e = {a: 1, b: 2};
let f = {...e, ...{a:2, b: 4}}
// f: {a: 2, b: 4}

map

1.语法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
array.map(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

2.示例

var arr = [10,20,30]
  var result = arr.map(function (item,index,array) {
  	console.log(array[index])
    return item+10
  })
  console.log(result)
  [20, 30, 40]

3.技巧场景

a.修改数组某个数值

function update(id) {
	list = list.map(item => {
		return item.id === id ? { ...list, show: !item.show } : list
	})
}

b.Math.sqrt等也可以作为函数传入

var numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt))
//  [2, 3, 4, 5]