js学习笔记es6（2）

ES6的新特性（2）

一、字符串的新增方法（常用）

includes() 判断字符串是否包含参数字符串，返回boolean值。
startsWith() / endsWith()，判断字符串是否以参数字符串开头或结尾。返回boolean值。这两个方法可以有第二个参数，一个数字，表示开始查找的位置。

let s = 'Hello world!';

s.includes('o') // true
s.startsWith('Hello') // true
s.endsWith('!') // true

s.includes('Hello', 6) // false
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true

repeat() 方法按指定次数返回一个新的字符串。

'hello'.repeat(2)   //'hellohello'
// 如果参数是小数，向下取整
'a'.repeat(2.9) // 'aa'
// 如果repeat的参数是负数或者Infinity，会报错
'a'.repeat(-1) // 报错
// 如果参数是 0 到-1 之间的小数，则等同于 0
'a'.repeat(-0.9) // ''
// 如果参数是NaN，则等同于0
'a'.repeat(-0.9) // ''
// 如果repeat的参数是字符串，则会先转换成数字
'a'.repeat('abc') // ''
'a'.repeat('2') // 'aa'

padStart()/padEnd()，用参数字符串按给定长度从前面或后面补全字符串，返回新字符串，不改变原字符串。

let arr = 'hell';
console.log(arr.padEnd(5,'o'));  //代表补充到5位字符（不包括0位）'hello'  
console.log(arr.padEnd(6,'o'));  //'helloo'
console.log(arr.padEnd(6));  //'hell  ',如果没有指定将用空格代替
console.log(arr.padStart(5,'o'));  //'ohell'

trimStart(),trimEnd()
– trimStart：消除字符串头部的空格
– trimEnd：消除尾部的空格
它们返回的都是新字符串，不会修改原始字符串。

const str = ' a '
str.trimStart() // 'a '
str.trimEnd() // ' a'

// 另外，浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名
str.trimLeft() // 'a '
str.trimRight() // ' a'

二、数组的新增方法（常用）

Array.from() 是内置对象Array的方法，实例数组不能调用
函数可接受3个参数（后两个参数可以没有）：
第一个表示将被转换的可迭代对象(如果只有一个参数就是把形参转变成数组)
第二个是回调函数，将对每个数组元素应用该回调函数，然后返回新的值到新数组，
第三个是回调函数内this的指向。

let arr = [1, 2, 3];
let obj = {
    double(n) {
        return n * 2;
    }
}
console.log(Array.from(arr, function (n){
    return this.double(n);
}, obj)); // [2, 4, 6]

includes() 参数：数值 -------- 返回值：true/false
参数：数值 -------- 返回值：true/false
includes()方法------是查看数组中是否存在这个元素，存在就返回true,不存在就返回false

let arr = [1,33,44,22,6,9]
let ary = arr.includes(22)
console.log(ary)//true

map()、filter() 参数：函数-------- 返回值：数组
参数：函数-------- 返回值：数组
map()方法-----要利用原数组经过运算后的数组，或者从对象数组中拿某个属性
filter()方法------是将符合挑选的筛选出来成为一个新数组，新数组不会影响旧数组。

<script>
	let arr = [1, 33, 44, 2, 6, 9];

	let newarr1 = arr.filter((v) => v > 10); //newarr1-------[33, 44]
	let newarr2 = arr.filter((v) => v * 2);  //newarr2-------[1, 33, 44, 2, 6, 9]

	let newarr3 = arr.map((v) => v > 10);    //newarr3-------[false, true, true, false, false, false]
	let newarr4 = arr.map((v) => v * 2);     //newarr4-------  [2, 66, 88, 4, 12, 18]
</script>

forEach() 参数：函数-------- 返回值：undefined
参数：函数-------- 返回值：undefined
forEach() 方法------是循环遍历数组中的每一项，没有返回值
find()方法---------是查找数组中符合条件的第一个元素，直接将这个元素返回出来

let arr = [1,33,44,2,6,9]
let a1= []
arr.forEach((v, i)=>{
  if (v > 10) {
    a1.push(arr[i])
  }  
})
console.log(a1) [33,44]

let a2= arr.find(v => v > 10)
console.log(a2)

find() 参数：函数-------- 返回值：数值
参数：函数-------- 返回值：数值

find()方法----------是查找数组中符合条件的第一个元素，直接将这个元素返回出来

let arr = [1,33,44,2,6,9]
let a= arr.find(v => v > 10)
console.log(a) // 33

some()、every() 参数：函数-------- 返回值：true/false
参数：函数-------- 返回值：true/false

some()方法------找到一个符合条件的就返回true,所有都不符合返回false。
every()方法------数组所有值都符合条件才会返回true,有一个不符合返回false。

let arr = [1,2,3,4,6,11]

let newarr = arr.some(function(v){
  return v > 10
})
console.log(newarr) //true

let newarr2 = arr.every(function(v){
  return v > 10
})
console.log(newarr2) //false

三、对象的新增方法（常用）

Object.is() 方法用来判断两个值是否为同一个值，返回一个布尔类型的值。

const obj1 = {};
const obj2 = {};
console.log(Object.is(obj1, obj2)); // false

const obj3 = {};
const value1 = obj3;
const value2 = obj4;
console.log(Object.is(value1, value2)); // true

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，并返回目标对象。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a:5 , c: 3 };
//对象合并，把后面对像合并到第一个对象，对象里相同的属性会覆盖
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}

Object.keys() 返回对象所有属性
Object.values() 返回对象所有属性值
Object.entries() 返回多个数组，每个数组是 key–value

<script>
	let person = {
		name: "admin",
		age: 12,
		language: ["java", "js", "css"],
	};
	console.log(Object.keys(person)); //[ 'name', 'age', 'language' ]
	
	console.log(Object.values(person)); //[ 'admin', 12, [ 'java', 'js', 'css' ] ]
	
	console.log(Object.entries(person));    /* [
	                                                     ["name", "admin"],
	                                                     ["age", 12],
	                                                     ["language", ["java", "js", "css"]],
	                                                 ]; */
</script>