ES6基础3(扩展)-学习笔记
字符串扩展
//扩展
//字符串扩展
charAt(); //返回指定索引位置的字符
//var str = "hello world"; str.charAt(2) //l
indexOf(); //返回字符串中检索指定字符第一次出现的位置
//var str = "hello world"; str.indexOf('o') //l
lastIndexOf();//返回字符串中检索指定字符最后一次出现的位置
slice() // 提取字符串的片断,并在新的字符串中返回被提取的部分
//var str = "hello world"; str.slice(2,6) //"llo "
split() //把字符串分割为子字符串数组
//var str = "hello world"; str.split('')
toLowerCase()// 把字符串转换为小写
toUpperCase() //把字符串转换为大写
substr(start,length) // 从起始索引号提取字符串中指定数目的字符
//var str = "hello world"; str.substr(1,4)
substring(start,stop) //提取字符串中两个指定的索引号之间的字符
//es6
includes() //返回布尔值,表示是否找到了参数字符串。
//var str = "hello world"; if(str.includes('h'))
//数据匹配查询---模糊匹配
var arr = ['abcde','red','blue','orange','dfag','agabeiy']; //列表数据
var a = 'e'; //输入的值
var f = arr.filter(function(item){
//return item.indexOf(a) !=-1; //==-1不匹配 !=-1 匹配
return item.includes(a);
});
console.log(f);
startsWith() //返回布尔值,表示参数字符串是否在原字符串的头部。 区分 大小写
//var str = "hello world"; str.startsWith('h')
//var str = "hello world"; str.startsWith('h',3) //3表示位置
endsWith() //返回布尔值,表示参数字符串是否在原字符串的尾部
repeat() //返回一个新字符串,表示将原字符串重复n次。
'x'.repeat(3); //'xxx' repeat(n) n重复的次数
padStart() //用于头部补全
'x'.padStart(4,'ab') // 'x'.padStart(指定长度,补全的内容)
padEnd() //用于尾部补全。
'x'.padEnd(4,'ab') // 'x'.padStart(指定长度,补全的内容)
//指数运算符(**)
2**2 //4
2**3 //8
var a = 3;
a**=3; //a=a*a*a a**=2 ==>a=a*a
console.log(a)
数值扩展
//数值扩展
//ES5
parseInt('10.05');
parseFloat('10.05');
//es6
Number.parseInt('10.05');
Number.parseFloat('10.05');
//Number.isInteger()用来判断一个数值是否为整数。
//25 25.1
Number.isInteger(25) //true
Number.isInteger(25.0) //true
Number.isInteger(25.1) //false
Number.isInteger('10') //false
Number.isInteger(null) //false
Number.isInteger(true) //false
Number.isInteger() //false
//Math对象
Math.round(3.6); //四舍五入 4
Math.ceil(3.1); //向上 =4
Math.floor(3.9); //向下 3
//Math.trunc() 用于去除一个数的小数部分,返回整数部分。
Math.trunc(3.1) // 3
Math.trunc('3.9') //3
Math.trunc(-3.9) //-3
//Math.sign()方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。
//会返回五种值:
//1 参数为正数 返回+1
//2 参数为负数 返回-1
//3 参数为0 返回0
//4 参数为-0 返回-0
//5 参数为其它值 是非数值 会自动转为数值,无法转换 会返回NAN
Math.sign(10)
Math.sign(-10)
Math.sign(0)
Math.sign(-0)
Math.sign('10')
Math.sign(true)
Math.sign(false)
Math.sign('abc')
函数扩展
//函数扩展
//ES5
function fun(x,y){
y = y || 10;
console.log(x,y);
};
fun(100);
ES6
function fun(x,y=10){
console.log(x,y);
};
fun(100);
//rest参数 表现形式(...变量名) arguments对象
//rest参数和arguments对象的区别:arguments对象并不是一个数组,无法使用数组中的方法和属性,rest参数是一个数组
function fun(){
console.log(arguments[2]) //{}
}
fun(1,2,3,4,2,3,5,2,6,234,3);
//es6
function fun(...value){
console.log(value)
}
fun(1,2,3,4,2,3,5,2,6,234,3);
//对比
function fun(x,y,...value){
value.push(10);
console.log(value)
}
fun(1,2,3,5,7,9);
//箭头函数
var f = v => v; //函数名 =参数 => 函数体
var f = function(v) {
return v;
};
//参数为空
var f =() => 123;
//多个参数
var f = (a,b) =>a+b;
//返回的是一个对象
var f = function(v) {
return {id:1,name:v}
};
var f = v => ({id:1,name:v});
f('abc');
//传默认值
var f = (x,y=10)=>{
console.log(x,y);
};
f(100);
//解构
var f = ({x=0,y=0}={})=> [x,y];
f({x:10,y:8});
//箭头函数 注意点!!!
//1、箭头函数不能当作构造函数,不可以使用new命令
var Fun = ()=>{
this.name = 'a';
};
var f1 = new Fun(); //Fun is not a constructor
//2、箭头函数没有原型属性
//每一个函数对象都有prototype属性,普通对象没有,prototype里面有一个constructor,指向这个函数;
function a(){}
a.prototype; // constructor: ƒ a()
//es6
var a2 = ()=>{}
a2.prototype;
//3、不可以使用arguments对象,该对象在函数体内不存在 替代 rest参数
var fun = ()=>{
console.log(arguments[2]) //{}
}
fun(1,2,3,4,2,3,5,2,6,234,3); //arguments is not defined
//es6
var fun = (x,y,...value)=>{
value.push(10);
console.log(value)
}
fun(1,2,3,5,7,9);
//4、this指向 定义时所在的对象 并不是调用者 this指向外层调用者
var name = 'abc';
var obj = {
name:'xyz',
f:function(){
console.log(this.name) //this = obj
},
f2:()=>{
console.log(this.name) //this = window
},
f3:function(){
var f4 = ()=>{console.log(this) } //this = obj
return f4();
}
};
obj.f();
obj.f2(); //window.obj.f2() f2函数是在obj对象中,而obj是全局的 ,f2固定在全局了
//定时器 this
function Fun(){
// this.name = 'abc';
setTimeout(function(){
console.log(this) //this = window
},2000)
};
var f = new Fun();
function Fun(){
// this.name = 'abc';
setTimeout(()=>{
console.log(this) //this = Fun()
},2000)
};
var f = new Fun();
//作用域
var x = 1;
function f(x,y = x) {
console.log(y)
};
f(10); //10
var x = 1;
function f(y = x) {
let x = 20;
console.log(y)
};
f(); //1
function f(y = x) {
let x = 20;
console.log(y)
};
f(); //x is not defined
扩展运算符
//扩展运算符 ... 将一个数组对象转为用逗号分参数序列
//数组合并
//es5
var a1 = [1,2,3]; //1,2,3
var a2 = [4,5,6];
a1 = a1.concat(a2); //a1.push(...a2)
console.log(a1);
//es6
a1 = [...a1,...a2,...[7,8],9];
a1.push(...a2);
//[1,2,3,4,5,6,7,8,9]
//深拷贝 浅拷贝
var a3 = [1,2,3];
var a4 = [...a3];
a4[1] = 10;
console.log(a3); //[1,2,3];
var a3 = [1,{id:2},3];
var a4 = [...a3];
a4[1].id = 10;
console.log(a3); // 浅拷贝 [1,{id:10},3];
//扩展运算与rest的结合
function add(x,y){
return x+y
};
var n = [10,20];
add(...n);
//rest
function add2(...rest){
return rest
};
add2(...n);
//demo
var arr = [1,2];
function f(...item){ //rest参数
console.log(item); //[0 1 2 3 4 5]
console.log(...item); // 0 1 2 3 4 5 扩展运算符
};
f(0,...arr,3,4,...[5]) //扩展运算符
//扩展运算符与解构结合
var [a,...b] = [1,2,3,4,5];
var [a,...b] = [];
var [a,...b] = ['a'];
//注意 产生错误 只能放在参数的最后一位,否则报错
var [...a,b] = [1,2,3,4,5]; //error
var [a,...b,c] = [1,2,3,4,5]; //error