ES6入门笔记（基础）

最新推荐文章于 2023-07-10 20:17:45 发布
最新推荐文章于 2023-07-10 20:17:45 发布
阅读量292 收藏
点赞数 2
分类专栏： es6 文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ma_programmer/article/details/118334420
版权

目录

一． 定义(声明)变量

二． 解构赋值

三． 字符串

四． 函数

五． 数组

六． 对象

定义(声明)变量

1. var

        var应用的作用域有全局作用域和局部作用域,在if、for、while等块级作用域中是不能成为判断和循环独有的变量，因此if、for、while在全局中时，if、for、while中定义的是全局变量，if、for、while在局部中时，if、for、while中定义的是局部变量。

// 例：

window.onload = function() {

        for(var i=0; i<10; i++) {

                alert(i);     // 0,1,2,3,4,5,6,7,8,9

        }

        alert(i);     // 10

}

function() {

        If(true) {

                var i = 10;

        }

        alert(i);     //10

}

        var存在变量提升的问题，在作用域中定义的变量会先在作用域开始时定义，在赋值行赋值。

// 例：

function f1() {

        alert(a);               // 显示undefined

        var a = 5;

}

        var在同一作用域可以重复定义变量，只不过后定义的会覆盖之前定义的。

// 例：

var a = 10;

var a = 9;

alert(a);             // a=9

2. let     相当于var,但是不属于window

        let应用于块级作用域{...}，在if、for、while等块级作用域中是能成为判断和循环独有的变量，不会污染块级作用域之外的区域。

// 例：

window.onload = function() {

        for(let i = 0; i<10; i++) {

                alert(i);     // 0,1,2,3,4,5,6,7,8,9

        }

        alert(i);     // 报错

}

function() {

        If(true) {

                let i=10;

        }

        alert(i);     //报错

}

        不存在变量提升的情况。只能先定义再使用。

// 例：

function f1() {

        alert(a);               // 显示undefined

        var a = 5;

}

function f2() {

        alert(a);               // 报错

        let a = 5;

}

        let在同一作用域中不能重复定义。

// 例：

let a = 10;

let a = 9;

alert(a);             // 报错

        let在不同作用域可以重复定义，最典型的是for循环。

// 例：

for(let i = 0; i<5; i++) {

        let i = 8;

        console.log(i);  // i=8

}

// 第一个i在(...)中相当于父级作用域，而第二个i在{...}中相当于子级作用域。

        let和var都可以被子作用域继承。

// 例:

function f1( ) {

         let i = 9;

         for(let j = 0; j<2; j++) {

                console.log(i);          

         }

}

f1();          // 9

3. const常量

        const是常量（在同一作用域内不可更改），但是对象除外。对象被修改不是因为常量可以修改，而是因为对象的特性允许被修改。取消修改可以用Object.freeze(对象) 冻结。

// 例1:

const a = 2;

const a = 90;     // 报错

// 例2:

const arr= ["one"];

arr.push("two");

alert(arr) // ["one","two"]

// 冻结

const arr= Object.freeze(["one"]);

arr.push("two");

alert(arr) // 报错

        特性和let一样

例：

const a = 2;

function show() {

        alert(a);             // 报错

        const a = 5;

}

.......

解构赋值

1. 在数据交互（Ajax）用处较大

 // 例:

let  json = {

        name:  "jack",

        age: 18

};

let  {name, age} = json;

let {name: a, age: g} = json;     // 可以起别名

console.log(name, age)   // jack 18

console.log(a, g)      // jack 18

2. 定义：let/var  [自定义变量名1, 自定义变量名2, ....]  =  [arr1,arr2,......]

// 例:

let [a, b, c] = [12, "html", 7];

alert(a, b, c)        //12  "html"  7

let [a, [b, c]]=[12, ["html", 7]];

alert(a, b, c)        //12 "html" 7

// 注意: 左右两边,结构格式要保持一致。

3. 解构时候可以给默认值:

// 例:

let  [a, b, c = "默认值"] = ["aa", "bb"];

alert(a, b, c)        //aa bb 默认值

// PS：如果c传过来的数据是null，则无法用这样的格式赋默认值。

4. 解构赋值可以实现两个数交换

// 例:

let  a = 5;

let  b = 6;

[a, b]=[b, a]

alert(a, b);                   //6  5

5. 解构赋值可以实现函数返回值的解构

// 例:

function getPos() {

         ......

         return {

                   left: 10,

                   top: 2

         }

}

let {left, top: t} = getPos();

console.log(left, t);        // 10, 2

// 例:

function show({a = "默认1", b = "默认"} = {}) {

         console. log(a,b);

}

show({});        // "默认1", "默认"

字符串

 1. 模板: ` ....${变量} ....`

// 例:

let name = 'jack';

let age = 18;

let str = `这个人叫${name},年龄是${age}岁`;

// Ps: 可以随意换行

2. 字符串的方法

        include(“查找内容”)        // 字符串查找

// 例:

let str = "const是常量(在同一作用域内不可更改), 但是对象除外"

console.log(str.includes(“对象”));        // 返回true

// PS:相似方法indexof(“查找内容”);         // 返回查找内容的位置标号

// 常用功能: 判断浏览器

If (navigator.userAgent.includes(“Chrome”)) {

        alert(“这是谷歌浏览器”)

}

        startsWith(“字符串”)       // 字符串以 ? 开头

// 例:

let str1 = "E:\专业学习笔记\ES6";

let str2 = "https://study.163.com/course/courseLearn.htm";

console.log(str1.startsWith("http"));       // false

console.log(str2.startsWith("http"));       // true

// PS:常用功能:检测网址

        endsWith("字符串")         // 字符串以 ? 结尾

// 例:

let str1 = "ES…….docx";

let str2 = "1525439897.zip";

console.log(str1.startsWith("zip"));         // false

console.log(str2.startsWith("zip"));         // true

// PS:常用功能:检测文件类型

        repeat(次数)

// 例:

let str = "jack";

console.log(str.repeat(3));                 // jackjackjack

        padStart(整个字符串长度,填充内容)         往前填充

// 例:

let str1 = "jack";

let str2 = "第一"

console.log(str1.padStart(str1.length + str2.length, str2))                //第一jack

        padEnd(整个字符串长度,填充内容)           往后填充

// 例:

let str1 = "jack";

let str2 = "第一"

console.log(str1.padEnd(str1.length+str2.length, str2))                  // jack第一

函数

1. 设置默认值

// 例:

function show(a, b = 'jack') {

        console.log(a + b);

}

show('欢迎');       // '欢迎jack'

2. 函数参数声明之后,不能用let和const在函数体内重复声明同名变量。但是var可以,会覆盖函数的变量,不推荐用var。

// 例:

function show(b = '马督') {

        let b = '新用户'；

        console.log(b);          // 错误

}

show('欢迎');

3. 扩展运算符/reset运算符 (...) 。可以将多个参数合成为一个数组,也可以将一个数组的每一项都拆成独立个体。

// 例:

// 1,2,5,8,9  --->     [...a ]---> [1,2,5,8,9]

// [1,2,5,8,9]  ---> ...[1,2,5,8,9] ---> 1,2,5,8,9

function sort(...a) {

        a.sort();              // 将传入的参数合成一个数组,再进行排序

        console.log(a)       // [1,2,5,8,9]

}

show(1,8,2,5,9);

// 例:

function sort(a,b,c,d,e) {

        console.log(a,b,c,d,e)        // 1,8,2,5,9

}

show(...[1,8,2,5,9]);

// 例1:

function show (a,b,...c) {           // 将剩余的参数合为一个数组

         console.log(a, b);               // 1, 2

         console.log(c);                  // [3, 4, 5]

}

show(1,2,3,4,5);

// PS:作剩余预算符时,只能放在最后

4. 箭头函数

        (参数1,参数2...)=>{...语句... return ...}    =     function(参数1,参数2...){...语句... return ...},如果只有一个参数就无须写（）,直接 参数=>{...语句... return ...}

// 例:

let show= (a, b) => {                                                           

        console. log(a, b);               // a=1  b=2

        return a+b;                // 3

}

show(1, 2);

        PS:(1). 原生js中this指向调用的对象,谁调用就是谁,箭头函数中this指向定义this的那个对象(特别针对定时)。

// 例:

var id = 10;

let json = {

        id: 1,

        show: function() {

                setTimeout(function() {

                        alert(this.id);        // 这里的this指向window,因此打印出来的是10.

                }, 2000);

        }

};

json.show();

// 例:

var id = 10;

let json = {

        id: 1,

        show: function() {

                setTimeout(() => {

                        alert(this.id);        // 这里的this指向json,因此打印出来的是1.

                },2000);

        }

};

json.show();

        PS:(2). 箭头函数里没有arguments,用扩展运算符...代替arguments。

// 例:

let show = () => {

        console.log(arguments);        //报错

}

show(1,2,3,4,5);

let show = (...a) => {

        console.log(a);        //[1,2,3,4,5]

}

show(1,2,3,4,5);

        PS:(3). 箭头函数不能当做构造函数。

let show = () => {

        this.name = 'jack';

}

let name = new show();

alert(name.name);        // 报错

数组

 1. 循环

        arr.forEach(function(val, index, arr){...}), this指向的对象)

        //代替普通for循环例:

// 例:

let arr = ['南京','北京','东京','西京'];

arr.forEach(function(val, index, arr) {

        console.log(index + ':' + val)     // 1:南京 2:北京 3:东京 4:西京

});

        arr.map(function(val,index,arr){...}), this指向的对象)

       // ”映射”,正常情况下map()要有return,返回一个新的数组,没有return,map()和forEach()没区别。map()可以有效防止对原数据的变动。

// 例:

let arr = ['南京','北京','东京','西京'];

let newArr = arr.map(function(val, index, arr) {

        let city =[];

        city.push(val);

        return city;

});

console.log(newArr );      //  ['南京','北京','东京','西京'];

        arr.filter(function(val,index,arr){...}), this指向的对象)

        // 过滤,filter()也有返回值,但是返回的是Boolean值,如果是true,返回的数组就push,如果是false,返回的数组就pop。

 // 例:

let arr = [{name: "南京", id:1},{name: "北京", id: 2},{name: "东京", id: 3}];

let newArr = arr.filter(function(item, index, arr) {

        return item.id >= 2;

});

console.log(newArr);        // {name: "北京",id: 2},{name: "东京",id: 3}

        arr.some(function(val,index,arr){...}), this指向的对象) 和 arr.every(function(val, index, arr){...}), this指向的对象)

        // 都类似于查找功能,some在查找到数组中某一项符合条件之后就返回true,every在数组所有项都符合条件之后才返回true。

// 例:

let arr = ['南京','北京','东京','西京'];

let a = arr.some((val, index, arr) => {

         return value == "南京";              // true

});

console.log(a);

let b = arr.every((val,index,arr) => {

         return value == "南京";              // false

        // return val.charAt(1)=="京"; 

});

console.log(b);

        arr.reduce(function(prev,cur,index,arr){...})

        // reduce()方法接收一个函数作为累加器,数组中的每个值（从左到右）开始缩减,最终计算为一个值。常用于数组求和、阶乘,二维数组转一维数组,数组去重。

// 例:

let arr = [1,2,3,4,5,6,7,8,9,10]

let a = arr.reduce((prev, cur, index, arr) => {

        return prev + cur;     

});

console.log(a);        // 55

        arr.reduceRight(function(prev, cur, index, arr){...})      

        // reduceRight()和reduce()的区别是reduce是从左往右缩减,reduceRight是从右往左缩减,其他的一样。

// 例:

let arr = [2,2,3];

let a = arr.reduce((prev, cur, index, arr) => {

        return prev ** cur;   

});

console.log(a);          // 81

        for....of...

        // for in遍历的是数组的索引（即键名）,会将原型这一属性也遍历进去,而for of遍历的是数组元素值。For in适合于对象的遍历,for of 适合数组的遍历。

// 例:

let arr = ['南京','北京','东京','西京'];

for(let val of arr) {

        console.log(val);       // 值

}

for(let index of arr.keys()) {       // arr.keys() 数组下标

        console.log(index); 

}

for(let item of arr.entries()) {             // arr.entries() 数组某一项

        console.log(item);   

}

        Array.from( )

        // 作用:把类数组(获取一组元素、 arguments...)对象转成数组

// 例:

let aLi = document.queryselectorAll("ul li");

let arrLi = Array.from(aLi);

console.log(arrLi);             //将li集合转换成数组

// PS:具备length条件的类数组才能用Array.from

// 例:

let json = {

         0: "apple",

         1: "banana",

         2: "orange",

         length:3

};

let json1 = {

         0: "apple",

         1: "banana",

         2: "orange",

};

let arr= Array.from(json);

let arr1= Array.from(json1);

console.log(arr1);    //[ ]

console.log(arr);       //["apple","banana","orange"]

        Array.of( )

        // 作用:将一组值转为数组,类型于扩展运算符功能。

// 例:

let arr= Array.of("apple","banana", "orange");

console.log(arr);

        arr.find()

        // 作用:查找,找出第一个符合条件的数组成员,如果没有找到,返回undefined

// 例:

let arr = [23, 900, 101, 80, 100];

let res = arr.find((val, index, arr) => {

         return val > 100;

});

console.log(res);        // 900

        arr.findIndex()

        // 作用:查找,找出第一个符合条件的数组成员的位置,没找到返回-1

// 例:

let arr=[23, 900, 101, 80, 100];

let res = arr.findIndex((val, index, arr) => {

        return val > 100;

});

console.log(res);                // 1

        arr.fill() 填充

        arr.fill(填充的内容, 开始位置, 结束位置)

// 例:

let arr  = new Array(10);

arr.fill('默认', 1, 5);

console.log(arr);       // [empty, '默认', '默认', '默认', '默认', empty, empty, empty, empty, empty]

        arr.include( )          // 包含

// 例:

let arr=[23, 900, 101, 80, 100];

console.log(arr.include(900));           // true

对象

1. Json对象的简写

// 例:

//原json写法      

let name = "jack"

let age = 18

let json = { 

        name:name,

        age: age

        show:function() {

                return this.name + this.age;

        }

} 

console.log(json.show())

//简写对比

let name = "jack"

let age = 18

let json = {

        name,

        age,

        show(){

                return this.name + this.age

        }

}

console.log(json.show())

// PS:简写不要使用箭头函数

// 因为在使用箭头函数时,this就不是调用的那个对象,而是定义的对象,又因为json无法构成一个作用域,因此往上一级找到window,因此箭头函数中的this指向的是window,而不是json。

2. 绝对相等Object.is(arg1,arg2)

        Object.is( )是将两个值进行绝对比较, 只要一样就返回true, 例如: console.log(Object.is(NaN,NaN));理论上是NaN!=NaN,但是Object.is( )返回true。又比如:console.log(Object.is(+0,-0));理论上是+0 = -0,但是Object.is( )返回false。因为Object.is( )要求两个值一模一样才返回true。

3. 合并对象Object.assign( )

        let 新的对象=Object.assign(目标对象, source1, srouce2...)       //将source1和source2合并成一个对象,放在目标对象中。

// 例:

let json = { a:1}

let json1 = { b:1,a:2}

let json2 = { c:1}

let newjson = Object.assign({ }, json, json1, json2);

console.log(newjson)    // {a:2,b:1,c:1}  这里a=2的原因是后面的对象中a=2覆盖了之前的a=1.

        常用举例:Object.assign( )常用在有默认数据的方法中,用户传进来的数据要覆盖方法中定义的默认数据。

function ajax(options) (        //用户传的数据

        let defaults = {             //默认数据

                type: "get",

                data: {}

                ...

        };

        Object.assign({}, defaults, options);         //用户数据覆盖默认数据

}

// PS:也可以用于复制一个对象

4. object和array一样也有keys,value,entries方法,对象中的object.keys()是找到对象中某个属性,object.values()是找到属性的值,object.entries()是找到的是属性+值。

 // 例:

let json={

        A: 1,

        B: 2,

        C: 3

}

for(let key of object.keys()) {

        console.log(key)                 // A,B,C

}

for(let value of object.values()) {

        console.log(value )           // 1,2,3

}

for(let entries of object.entries()) {

        console.log(entries )                  // A=1,B=2,C=3

}

5. 解构不仅可以用在数组身上,也可以用在对象身上,只不过运算符要加在{ }里边。

// 例:

let {x, y, ...z} = {x:1, y:2, a:3, b:4};

console.log(x, y, z);     // 1,2,{a:3,b:4}

// 例:

let json = {x:1, y:2, a:3, b:4};

let newjson = {...json}                

console.log(newjson);         // {x:1,y:2,a:3,b:4} 

Ma_programmer
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6笔记.txt
07-29
整理了以下关于ES6的笔记，虽然内容不是很多，也不全，但是基本的入门算是够了
JS的编译与执行规则（var与function的覆盖规则）
weixin_46579258的博客
04-28 304
JS的预编译 编译的提升 案例 ;(function(){ console.log(a); // 4 function a(){ 1 } console.log(a); // 4 function a(){ 2 } console.log(a); // 4...
ECMA-262-5 词法环境:ECMA实现（二）--- 环境记录项
szengtal的专栏
12-05 1351
环境记录类型  ES5中有两种类型的环境记录项，分别是声明式环境记录项和对象式环境记录项。声明式环境记录项  声明式环境记录项是用来处理变量声明，函数声明以及形参与值的绑定，这些都出现在函数作用域中（这与ES3中的激活记录一致）或者catch从句中。   例如：// all: "a", "b" and "c" // bindings are bindings of // a declarative
苹果(ios)手机端浏览器, input 输入框 设置 readonly (不生效)，照样有焦点聚焦
业余前端的职业经历
12-11 1443
安卓上正常 ， 苹果上不正常了 在 input 输入框的样式 上加一个 -webkit-user-select :none; /* readonly 在苹果浏览器上不起作用*/ #user-info .select-area input { cursor: pointer; -webkit-user-select :none; /* readonly 在苹果浏览器上不起作用*/ } 关注我 持续更新 前端知识 一起见证小白的成长之路 ...
Javascript ES6-11
探鱼不是鱼
11-09 867
ECMS相关介绍 什么是ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制 造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该 组织改名为 Ecma 国际 什么是ECMAScript ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。 什么是ECMA-262 Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看 http://ww
ES6基础
mengweiwei_的博客
10-01 262
蓝旭秋季自学自讲——ES6基础。
Babel 入门教程学习笔记
08-27
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，本篇文章主要介绍了Babel 入门教程学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nodejs学习笔记之入门篇
01-20
解释型将在后面的 NodeJS 里面讨论，原型链是 ES6 之前的 Javascript 的面向对象的实现方式之一，在 ES6 中支持的 class 增加了一种新的实现方式。在 Javascript 里面所有东西都是对象，包括 “类”。接触过 ruby/...
ES6最全总结.mmap
09-14
ES6最全总结.mmap、ES6最全自学笔记、ES6入门到深入、ES6自学路线
ES6基础（入门笔记）
m0_62497325的博客
11-23 737
ES6的简介 ES6全称 简单来说：ECMAScript 和 JavaScript的关系是，前者是后者的规格，后者是前者的一种实现 let 和 const let块级作用域 let声明的变量具有块级作用域：{ }，变量只在{ }里面起作用，外边无法获取 if (true) { let a = 10; } console.log(a); //报错 a is not defined let没有变量提升 console.log(num);//let声明...
ES6基础知识题
02-17
ES6系列40道基础题
ES6入门基础-阮一峰
04-10
《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。
【实战】ES6从零开始基础+实战项目
10-23
语法讲解，项目搭建，由浅入深..
ES6基础教程
liwan09的博客
07-10 2050
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。其目标为使JavaScript可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript和JavaScript的关系：前者是后者的规格；后者是前者的一种实现。 ECMAScript 背景 JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，
ES6的语法及基础知识
wzy199982的博客
09-26 5038
ES6的语法及基础知识、什么是ES6、变量声明、数组和对象的解构、箭头函数、ES6新增的字符串方法、数组新增方法
ES6入门教程
又逢乱世
10-12 7061
VScode安装插件 Chinese (Simplified)、vscode-icons、Live Server 创建项目 新建文件夹ES6，在VScode中打开 新建两个文件夹src用于存放es6语法的代码，dist用于存放编译后的代码 打开VScode终端，使用命令 //意思是使用默认配置初始化项目 npm init -y 使用babel 安装babel 终端使用命令（babel的作用是把es6的代码转译成es5） // npm安装 非全局安装 babel客户端，b.....
ES6基础入门
『愚』的博客
11-29 7401
ES6基础入门ES6简介ES6基础编程let命令let命令存在块级作用域Let不存在变量提升Let暂时性死区const 命令字符串的扩展-模板字符串函数的扩展rest参数函数的扩展-箭头函数箭头函数的语法使用箭头函数的注意点this指向问题使用箭头函数简化回调函数rest参数与箭头函数结合 ES6简介 1、ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。 2、它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程
ES6基础知识
weixin_51699336的博客
12-24 204
类型 1.const 作用：声明常量 注意事项 1.一定要赋初值 2.常量一般使用大写 3.常量的值不能修改 4.块级作用域 { const PLAYER='UZI'; } console.log(PLAYER);//PLAYER is not defined 5.对于数组和对象的元素修改，不算做对常量的修改，不会报错（原因与Java中同） const TEAM=['UZI','MLXG','Letme','Ming']; TEAM.push('xiaohu'
pink es6 笔记
最新发布
07-27
- *1* *3* [es6笔记](https://blog.csdn.net/weixin_42235173/article/details/115300118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值