es6数据扩展

函数的扩展

形参默认值参数

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(2
3) //8
console.log(24);//16
console.log(2
5);//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继承
原型继承 有两种方式

  1. 子类.prototype = new 父类
    子类 .prototype.constuctor = 子类
  2. 子类.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();删除首位空格

  1. trimEnd();删除末尾空格

模块系统

es6 模块系统
模块化来发
本质上是为 了解决 js文件之间互引用
用来开发 大型的web应用
将项目的各个功能 封装一个一个js组成
开发时 分开去研发各个组件
最后利用es6提供的模块系统将各个组件导入到一个指定的主js组件中 这就是 模块化开发的思想 es6 模块系统 依托 于两个关键字 export{} 导出
import{解构}from '路径' 导入

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,258评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,335评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,225评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,126评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,140评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,098评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,018评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,857评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,298评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,400评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,993评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容