函数的扩展
形参默认值参数
function fn1(x){
var a = x || 10; //js中默认赋值
}
function fn2(x=10){
//var a = x; //es6 中 默认值
console.log(x)
}
//形参默认值 不是赋值 而是惰性 传值
function fn3(x){
//var x =0;
let x =0;
consloe.log(x)
在es6中 不能用let或const声明与形参重复的变量或常量
其实 不管是在es6还是js中 形参跟变量名都尽量不要重复
}
fn3(10)
箭头函数
普通函数
命名函数
function fn1(a){
console.log(a)
}
///字面量的形式
var fn2 = function(a){
console.log(a)
}
//箭头函数
//两个参数
var fn3 = (a,b)=>{
console.log(a,b)
}
fn3(10,11)
一个参数可以省略括号
var fn4 = a=>{
console.log(a)
}
fn4(2)
没有参数
没有参数 不能省略括号
var fn5 =()=>{
console.log(123)
}
//返回值
function aa(){
正常函数
return 123;
}
let aa1 = ()=>123 ;箭头函数
//箭头函数中如果只有一条
return 语句
则可以省略大括号
如果这个箭头函数 还有且只有一个形参
则小括号也可以省略
let aa1 =a=>a+1;
function b(){
return function(a){
return a+1;
}
}
let b =()=>a=>a+1; //b没有参数 就是一个括号
var a =b();
a(12)
let b1 = b()(1);
console.log(b1)
btn.onclick = function(){
console.log(this);//标签
}
btn.onclick =()=>{
console.log(this);//window
}
一般绑定事件 函数的时候 不要使用 箭头函数
btn.onclick = function(){
setInterval(function(){
console.log(this);/window
},3000)
}
btn1.onclick = function(){
setInterval(()=>{
console.log(this);//标签本身
},3000)
}
btn.onclick = function(){
btn1.onclick=()=>{
console.log(this);btn
}
}
当内部函数使用 箭头函数时 不会改变外部函数到的this指向
总结
普通函数 谁调用我 我的this指向谁
箭头函数 我被定义时 sing一的环境中this指向谁 我的this就指向谁
let obj ={
say:function(){
console.log(this);//obj
}
eat:()=>{
console.log(this);//window
}
}
console.log(obj.say())
console.log(obj.eat())
function Dog(){
this.say = function(){
console.log(this)
}
this.eat=()=>{
console.log(this)
}
}
let f1 = new Dog();
f1.say()
f1.eat()
数值的扩展
Number 新增方法
{
//1.isNaN() 判断数值是否是NaN
let num=123;
let num = NaN;
let str = 'abc';
console.log(Number.isNaN(num));false
console.log(Number.isNaN(num1))//true
console.log(Number.isNaN(str)) //false
只跟值是不是NaN有关系 与数据类型无关
}
{
//2. .parseInt() 舍去小数位
let num = '131564.5s';
console.log(Number.parseInt(num));//131
//3. .paeseFloat() 转成标准的小数 是将多余的0去掉
let num1 = 1234.15165000000
console.log(Number.parseFloat( num1));
}
{
//4. isInteger();//判断是不是整数 是就是 true 不是 就是false
let num2 = 123;
let num3=123.12;
console.log(Nmuber.isInteger(num2));
console.log(Number.isInteger(num3))
}
计算平方
Math.pow(num,次方)
Math.sqrt(num)
开立方
Math.cbrt(num)
判断一个数 是不是正数
Math.sign()
正数返回1 负数返回-1 0返回0
新增的运算符 ** 连乘 相当于 Math.pow();
console.log(22);//4
conslole.log(23) //8
console.log(24);//16
console.log(25);//26
对象的扩展
{
var obj = {
'name':'123',
'age':123,
'say':function(){
console.log(234)
}
}
}
{
es6
let name = '123';
let age = '12';
let say = function(){
console.log(345)
}
}
let obj = {
name:'123',
age:12,
say(){
return 12;
}
console.log(obj.name);
console.log(obj.age);
console.log(obj.say())
}
面向对象
es5 (js)中 没有一个类的概念 只有构造函数
在es6中 js模拟了 其他语言实现类的概念 让对象可以由类产生
//es6 虽然 有了类 但是 底层实现实例化对象
class Person{
从底层上来讲 在类里面定义属性和方法 都是原型的属性和方法
name = '张三';
age='12';
say(){
console.log('hellow');
}
eat(){
console.log('这是 类的方法')
}
//需要传参的属性
constructor(sex,job,money){
this.sex = sex;
this.job = job;
this.money = money;
}
}
//类中构造函数 里 写了多沙个形参 实例化 的过程就要按顺序传入多少个实参
//如果形参 实参不一致 没传参属性 值 是undefined;
let p1 = new Person('男','程序员');
consloe.log(p1.name);
consloe.log(p1.job);
consloe.log(p1.money)
继承
js继承
原型继承 有两种方式
- 子类.prototype = new 父类
子类 .prototype.constuctor = 子类 - 子类.preototype.constructor = 子类构造函数 继承
3.call();
4.apply()
es6继承
extends
class Man extends Person{
sex = '男';
static 修饰类属性和类方法
//只有类才能使用的属性和方法 只能通过类名的调用
static a ='123';
static says(){
console.log('dsdsds')
}
fn1(){
this.eat();
console.log(this.sex);
}
constructor(...arg){
Man.says();
//suber 如果放在子类的构造函数中 直接代表父类的构造函数
//console.log(arg[0],arg[1],arg[2])
console.log(...arg);
suber(...arg)
console.log(Man.a)
只有类可以使用它 这叫类方法
}
eat(){
suber.eat();//将父类的方法在子类调用
console.log('这是子类的方法')
}
names = suber.name;
}
let m1 = new Man('女','程序员','123');
console.log(m1.name);
console.log(m1.names);
console.log(Man.a)
m1.eat()
Man.says();
console.log(Man.a)
在类中 使用自身的属性和方法 用this来使用
this.属性
this.方法()
只有一种情况 suber 如果爱子类的constructor中 代表着分类的构造函数constructor
class 定义类的关键字
extnds 子类继承父类(定义子类时使用)
constructor 构造函数
suber 定义 类属性
static 代表父类
面向对象(2)
//私有 公有
function Person(){
this.money = 123456;
公有
var money = 123456;//私有
//es6 中
class Person{
money = 123456;
constructor(){
this.money=123564;//公有
var money1 = 13564;
money = 546464;//公有
_money = 1315465;私有属性
//set get
//set 设置
set m1(m){
this._money = m+10000;
}
get m1(){
return this._money
}
}
}
}
let p1 = new Person();
console.log(p1.m1);12312
给私有属性一开始设置的哪个值
p1.m1=5000;
console.log(p1.m1)
字符串的扩展
//模板字符串
//console.log(`\
);
在模板字符串中 如果需要写一个字符 则要在前面加上
字符串扩展的方法
1.includes();
let str = 'hellow';
console.log(str.includes('o'));true
console.log(str.inclueds('a'));false
查找指定字符 有返回值
能找到 返回true
没有 返回 false
//2.startWidth();判断 是否以指定返回值开头 是就是true 不是就是false
let str1 = 'hellow';
console.log(str.startwidth('h'));true
console.log(str.startsWith('he'));//true
console.log(str.startsWith('hel'));//true
console.log(str.startsWith('helo'));//false
console.log(str.startsWith('o'));//false
console.log(str.startsWith('w'));//false
//3.endsWidth(); 判断以指定字符结尾
let str2 = 'hellow';
consloe.log(str2.endWidth('h'));true
//4 .repeat() 让元字符串重复指定次数 并将生成的新字符串返回
console.log(str.repeat(1));
console.log(str.repeat(4));
//5.trim() 可以删除前后空格
let str4 = 'a,b,c,d,e,f'
console.log(str4)
console.log(str4.trim());
6.trimStart();删除首位空格
- trimEnd();删除末尾空格
模块系统
es6 模块系统
模块化来发
本质上是为 了解决 js文件之间互引用
用来开发 大型的web应用
将项目的各个功能 封装一个一个js组成
开发时 分开去研发各个组件
最后利用es6提供的模块系统将各个组件导入到一个指定的主js组件中 这就是 模块化开发的思想 es6 模块系统 依托 于两个关键字 export{} 导出
import{解构}from '路径' 导入