ES6

最新推荐文章于 2024-06-16 23:16:39 发布

羽下佳人

最新推荐文章于 2024-06-16 23:16:39 发布

阅读量617

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/zjl199303/article/details/69499523

版权

js 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

学习网址：

阮一峰（书籍）： http://es6.ruanyifeng.com/#docs/intro

阮一峰（入门）： http://www.ruanyifeng.com/blog/2014/04/ecmascript_6_primer.html

阮一峰（源码）： Github

新的JS语言标准——ES6。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的 Web API ，这些都在独立的标准中进行定义。

环境搭建：

1.npm下载安装： https://github.com/coreybutler/nvm-windows/releases

ES6的使用方法：

①

②

一. 基础知识

① {} 内部 let 声明的变量 --> 局部变量

let a = 10, b= 10;
{
let a = 1;
let b = 2;
var c = 3;
console. log( a, b); // 1,2
}
console. log( a, b); // 10 10
console. log( c); // 3

----------------------------------------------------------------------------------------------------------------------

② for 循环里声明的变量也只在本轮循环下有效。下一次循环 i 又是新的变量

var str = 'adsdsfsfftrtyr';
var max = 0;
for( let i = 0; i < str. length; i++){
max = i;
max = max> i ? max : i;
}
console. log( 'i= '+ i); // undefined
console. log( 'max= '+ max); // 13

--------------------------------------------------------

var arr = [];

for( var i = 0; i < 10; i++){
arr[ i] = function(){ console. log( 'arr[i]= '+ i ) };
}
arr[ 6](); // arr[i]= 10

var brr = [];
for( let j= 0; j < 10; j++){
brr[ j] = function(){ console. log( 'brr[j] = '+ j ) }
}

brr[ 6](); // brr[j] = 6

----------------------------------------------------------------------------------------------------------------------

④

var a = 10;
if(true){
a = 11;
console.log('a1: '+ a); // 11
let a;
console.log('a2: '+a); // 11
a = 12;
console.log('a3: '+a); // 12
}
console.log('a5： '+a); // 10

---------------------------------------------------------------------------------------------------------------------

⑤ let不允许在相同作用域内，重复声明同一个变量。

< script type= "module" >
function fun(){
var a = 10;
let a = 11;
} // 报错

</script>

----------------------------------------------------------------------------------------------------------------------

⑥ let 新建的变量必须写在 { } 里

< script type= "module" >
function a(arg){
{
let arg = 10;
console.log(arg); // 10
}
return arg;

}

console.log(a(1)) // 1

</script>

报错：

< script type= "module" >
function a(arg){
let arg = 10;
console.log(arg);
return arg;
}

console.log(a(1))

</script>

--------------------------------------------------------------------------------------------------------

⑦ let 创建块作用域

var s = 0; function fun(){ console.log(s);if(false){ let s = '123'; }}; fun(); // 0

var 声明的变量还属于当前函数作用域，声明提前。 let 声明的函数已经属于另外一个域。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

二. 新特性：

① 反引号 ` 拼接字符串，不需要用 + 拼接

<script type="module">

var name = 'zjl';

var intro = `your name is ${name}`;

var longStr = `dssdfsdfsdfs

你手机发付款的抵抗力

你都没考虑到付款吗

的烦恼科技发达

每当防空雷达`;

console.log(intro);

console.log(longStr);

$('p').html(longStr);

</ script >

③ 对象表达式

<script type="module">

var serverBase = {port: 3000,url: 'www.baidu.com'},getAccounts = function(){return [1,2,3]}

var accountServies = {

_proto_ : serverBase,

getAccounts,

toString(){

return JSON.Stringify(super.valueOf())

getUrl(){ return 'http://'+ this.url + ':'+ this.port },

['valueOf()_' + getAccounts().join('_')]: getAccounts()

}

console.log(accountServies)

</ script >

三. const

四. 声明变量

1.ES5: 2 种 var ， function

2.ES6: 6种 var , function , let , const , import , class

五. 变量的解构赋值

数组 + 对象 + 字符串 + 函数参数

1.数组基本用法：

解构不成功：有些变量并未赋值，undefined ;

2. yield和function*一起使用。在构造器函数中，yield可以暂停然后返回当前表达式的值。

function* fibs() {

var a = 0;

var b = 1;

while (true) {

yield a; // yield和function*一起使用。在构造器函数中，yield可以暂停然后返回当前表达式的值。

[a, b] = [b, a + b]; // 1,1 1,2 2,3 3,5 5,8

console.log(a,b)

}

var [first, second, third, fourth, fifth, sixth] = fibs();

console.log(first,sixth); //0 5

3.设置默认值，要设置右侧 = undefined，否则不会生效，

只要不是undefined，厨师设置都不会生效。

对象的解构：

4.对象：数组的元素是按次序排列的，变量的取值由它的位置决定；

而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

// 1，2

5.避免 {} 写在行首，js 容易把他解释成代码块

字符串的解构

6.字符串：按字母分割，自动按顺序赋值，不够位数 undefined

var [a,b,c,d] = 'hello';
console.log(a,b,c,d); // h e l l

var [a,b,c,d] = 'hello';

console.log(a,b,c,d); // h e undefined undefined

var {length: len} = 'helloWorld'; // lenght : 自动读取字符串长度

console.log(len); // 10

七. 字符串扩展

var str2 = 'hello world';

var inc = str2.includes('o');

console.log('includes: '+ inc); // true

var start = str2.startsWith('e');

console.log(start); // false

var end = str2.endsWith('d');

console.log(end); // true

var str3_4 = 'na'.repeat(3);

console.log(str3_4); // nananana

八. 数值扩展

Math.sign（）：判断正数，负数，0 ，-0，非数值数：

console.log(Math.sign(1)) // 1
console.log(Math.sign(-8)) // -1
console.log(Math.sign(0)) // 0

console.log(Math.sign(-0)) // -0

console.log(Math.sign('asd')) // NaN

特殊：不论是字符串还是数组形式，都是先使用 Number 方法将其转为数值

console.log(Math.sign('143243')); // 1

console.log(Math.sign([143243])); // 1

Math.clz32（）： 32位计算前导 0 的个数：

console.log(Math.clz32(0)); // 输出当前数值前面0的个数： 32

九. 遍历数组

for(let index of ['a','b','c'].keys()){ 键名

console.log(index); // 0 1 2
}
for(let index of ['a','b','c'].values()){ 键值
console.log(index); // a, b, c
}
for(let index of ['a','b','c'].entries()){ 键值对
console.log(index); // [0, "a"] [1, "b"] [2, "c"]
}