函数——es6函数扩展(二)
一、声明
1. let(变量)
可以只声明不给值(默认为undefined),或者是先声明后给值,但是必需声明后再使用,可以重复赋值,可以防止变量泄露;
同一作用域里不能重复的声明,不同作用域里可以,不会被预解析;
声明的变量不再属于window的属性
2. const(常量)
必需先声明后使用,声明的时候必需要赋值;声明后不能进行修改,但是const声明的对象中的属性可以修改;
同一作用域里不能重复的声明,不同作用域里可以,不会被预解析;
具有块级作用域,声明的变量不再属于window的属性
<script>
let a;
console.log(a); //undefined a = 'dvaina';
console.log(a, window.a); //dvaina undefined const b = 10;
const obj = {
c: 10,
d: 20
}
obj.d = 30;
console.log(b, obj.c, obj.d); //10 10 30
</script>
二、结构赋值
允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解析。
1、数组的解构赋值
<script>
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); //1 2 3 // 前后的模式必须匹配,如果前面声明的是二维数组,后面的也是二维数组
let [d, [e]] = [1, [2]];
console.log(d, e);////1 2 //前少后多,用上拓展运算符,不定参数解构赋值
let [g, ...h] = [1, 2, 3, 4];
console.log(g, h); //1 (3) [2, 3, 4] //前少后多,省略赋值
let [i, , j] = [11, 2, 3];
console.log(i, j); //11 3 let [k, l] = [1, 2, 3];
console.log(k, l) //1 2 //前多后少的情况下,某些变量只声明未定义
let [m, n] = [2];
console.log(m, n); //2 undefined
</script>
2、对象和函数的解构赋值
<script>
//根据key值进行匹配
let { a, b, c } = { a: 'lisa', b: 'davina' }
console.log(a, b, c) //lisa davina undefined //变量提前被声明,变量也可以设置默认值
let name, age;
({ name, age, love='reading' } = { name: 'davina', age: 18 })
console.log(name, age, love); //davina 18 reading
</script>
<script>
//变量设置默认值
function fn(a, b, c = 5) {
console.log(a, b, c); //4 5 5
console.log(arguments) //[4,5]
}
fn(4, 5);
</script>
3、字符串,数值,和布尔值的解构赋值
<script>
//字符串的解构赋值,字符串,被转成一个类似数组的对象,未声明为undefined,有length属性
const [a, b, c, d, e, f, g] = 'davina';
console.log(a, b, c, d, e, f, g); //d a v i n a undefined
console.log([a, b, c, d, e, f, g].length) //7 //数值和布尔值的解构赋值,如果等号右边是数值或者是布尔值会先转为对象
let { toString: s } = 123;
console.log(s === Number.prototype.toString); //true let { toString: S } = false;
console.log(S === Boolean.prototype.toString); //true
//undefined和null无法转为对象,所以对它们进行解构赋值,报错
</script>
4、解析赋值的用途
<script>
//交接变量的值
let x = 3;
let y = 4;
[x, y] = [y, x];
console.log(x, y); //4 3 //从函数返回多个值
function test() {
return [1, 2, 3]
}
let [a, b, c] = test();
console.log(a, b, c) //1 2 3 function test2() {
return {
foo: 1,
bar: 2
}
}
let { foo, bar } = test2();
console.log(foo, bar); //1 2 //快速的提取json值
let json = {
'id': 2,
'name': 'peng',
'sex': 'male',
'date': [1, 2]
}
let { id, name, sex, date } = json;
console.log(id, name, sex, date); //2 "peng" "male" (2) [1, 2] //函数参数的默认值
//遍历Map结构
</script>
5、扩展运算符
扩展运算符(...)主要用于函数的调用,也可以将某些数据结构转为数组。
<script>
//扩展运算符
console.log(1, [2, 3, 4], 5); //1 (3) [2, 3, 4] 5
console.log(1, ...[2, 3, 4], 5); //1 2 3 4 5 //函数调用
var arr = [1, 2, 3];
function fn(arr) {
return [...arr];
}
console.log(fn(arr)); //(3) [1, 2, 3]
function fn1(a, b, c) {
return a + b + c;
}
console.log(fn1(...arr)); //6 //扩展运算符后面还可以放置表达式
let x = 2;
console.log(...(x > 0 ? ['a'] : [])); //a //如果扩展运算符后面是一个空数组不产生任何效果
console.log(...[], 3); //3 //函数中的参数用...x 代表实参为数组
function show(y, ...x) {
console.log(x)
}
show(1, 2, 3, 4) //[2, 3, 4]
//
let a = `<div></div>`;
document.write(a.repeat(5));
console.log([...document.querySelectorAll('div')]); //[div, div, div, div, div]
</script>
扩展运算符的作用
<script>
//复制数组
const arr = [1, 2, 3]; // const arr1 = arr;
// arr[2] = 0;
// console.log(arr, arr1); //(3) [1, 2, 0] (3) [1, 2, 0]
// //从中我们可以看出,arr1并不是arr的克隆,它只复制了指向底层数据结构的指针,如是arr1变化,那arr也会改变。 //es5中要想实现克隆如下:
const arr3 = arr.concat();
arr3[2] = 4;
console.log(arr3, arr); //(3) [1, 2, 4] (3) [1, 2, 3] //es6中可以用到...
const arr2 = [...arr];
console.log(arr2); //(3) [1, 2, 3] //合并数组
let a = [1, 2];
let b = [3]; //es5中
console.log(a.concat(b)); //(3) [1, 2, 3]
//es6中
console.log([...a, ...b]); //(3) [1, 2, 3] //与解构赋值结合,可以生成新的数组
const [num1,...numn]=[1,2,3,4,5,6];
console.log(num1,numn); //1 (5) [2, 3, 4, 5, 6] //将字符串转成真正的数组
console.log([...'davina']); //(6) ["d", "a", "v", "i", "n", "a"]
</script>
实例:用es6中新学的内容写选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
display: none;
} div:first-of-type {
display: block;
}
</style>
</head>
<body>
<input type="button" value="vlaue1">
<input type="button" value="value2">
<input type="button" value="value3">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
//选项卡
[...document.querySelectorAll('input')].find((x, y) => {
x['onclick']= () => {
[...document.querySelectorAll('div')].find(d => {
d.style.display = 'none';
});
[...document.querySelectorAll('div')][y].style.display = 'block';
}
})
</script>
</body>
</html>
三、字符串
方法:
1. fromCharCode / charCodeAt 接受 Unicode 值,返回一个字符串 / 返回 Unicode 编码
<script>
let name = '';
for (let i = 0x4e00; i < 0x9fa5; i++) {
name += String.fromCharCode(i);
};
console.log(name.length); //20901
</script>
2 . repeat 字符串复制指定次数
<script>
let div = '<div></div>';
console.log(div.repeat(4)); //<div></div><div></div><div></div><div></div>
</script>
3. includes(有点像indexOf) 判断一个数组是否包含一个指定的值,如果是返回 true,否则false 第一个参数 要找的内容 第二个参数 从第几位开始
<script>
var ua = window.navigator.userAgent;
console.log(ua.includes('Chrome')); //true
</script>
4. startsWith/endsWith 检查字符串是否是以指定子字符串开头/结尾,还回布尔值 第一参数:判断的字符 第二参数:从第几位开始
<script>
let str = 'dafjdfdfjad3r34jfk32435fdgjiera';
console.log(str.startsWith('p', 4), str.endsWith('a')); //false true
</script>
5. padStart/padEnd 用于补全头部/尾部,返回补全后的字符串。第一参数:补全后字符串最大长度,第二个是要补的字母
<script>
let str = 'davina';
let str1 = 'dvaina'
console.log(str.padStart(10, 'love')); //lovedavina;
console.log(str1.padEnd(7)); //dvaina 没有第二个参数时用空格替代
console.log(str1.padStart(5, 'love')) //dvaina 原字符串长度大于第一个参数还回原字符串
</script>
模版(`${}`)
es6中的模版字符串替代了原有的字符串拼接的功能,字符串越长,或字符串中有特殊字符这种方法就更加的好用。
用法:“``”: 使用反引号将要拼接的模版包起来。“${}”: 使用${}将变量包起来
<script>
//es5中拼接方法 :用到+号
let name = 'davina';
const age = 18;
let str = '我的名字是\'' + name + '\',我今年' + age + '岁。'
console.log(str) //我的名字是'davina',我今年18岁。 //es6中
let str1 = `我的名字是'${name}',我今年${age}岁。`;
console.log(str1) //我的名字是'davina',我今年18岁。 let json={
'div':`<div></div>`,
'spna':`<span></span>`
}
document.write(`${json.div+json.spna}`)
</script>
四、数组
1. find 参数为函数,函数可以接收3个参数,值x、索引i、数组arr,回调函数默认返回值x
<script>
let arr = [1, 'davina', 2, 4];
arr.find((x, y, z) => {
console.log(x, y, z);
console.log(z[y]);
})
</script>
2. filter 过滤,筛选。 参数为函数。返回新新数组,不会对原数组有影响,可以遍历完数组。(es5)
<script>
let arr = [1, 'davina', 2, 4];
var arr2 = arr.filter(item => {
return typeof item === 'number';
})
console.log(arr2); //(3) [1, 2, 4]
</script>
3. reduce/reduceRight 返回最后一次调用函数获得累积结果 参数:prev:上一次调用函数时返回的结果,cur当前元素,index 当前索引,arr:循环数组 reduceRigth是从右往左开始。
<script>
//元素相加
let arr = [1, 2, 3, 4, 5];
var arr2 = arr.reduce((prev, cur, index, arr) => {
return prev + cur;
});
console.log(arr2); //15
//合并数组
const arr3 = [[0, 1], [3, 4], [5, 6]].reduce((a, b) => {
return a.concat(b);
})
console.log(arr3); //(6) [0, 1, 3, 4, 5, 6]
//数组去重
var arr4 = [12, 43, 1, 2, 54, 1, 2, 234, 4, 5, 54, 45];
var arr5 = arr4.sort().reduce((prev, cur) => {
if (prev.length === 0 || prev[prev.length - 1] !== cur) {
prev.push(cur);
}
return prev;
}, [])
</script>
4. map 返回新数组,原来的数组不会改变,可以在原有的基础上做运算(es5)
<script>
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map((num) => {
return num * 2
})
console.log(arr2); //[2, 4, 6, 8, 10] var arr3 = [
{ name: 'davina', age: 18, sex: '女' },
{ name: 'lisa', age: 20, sex: '女' },
{ name: 'amy', age: 21, sex: '女' }
]
var arr4 = arr3.map((name) => {
return name.name;
})
console.log(arr4); //["davina", "lisa", "amy"]
</script>
5. for...of 数组的遍历
arr.keys() 方法是对key值进行遍历
arr.values()方法是对value值进行遍历
arr.entries()方法是对键值对进行遍历
<script>
let arr = ['davina', 'lisa', 'amy'];
for (let item of arr) {
console.log(item); //davina lisa amy
} for (let index of arr.keys()) {
console.log(index); //0 1 2
} for (let [index, val] of arr.entries()) {
console.log(index, val); //0 "davina" 1 "lisa" 2 "amy"
}
</script>
6. Array.of 将一组转化为数组
<script>
arr = Array.of(3, 4, 'dvaina', 'lisa');
console.log(arr.length);//4
console.log(arr[2]); //dvaina
</script>
7. Array.from 将类数组对象和可遍历的对象转换成真正的数组,第一个参数:类数组对象或者可遍历对象,第二参数:函数,第三个参数:第二个参数所代表的回调函数的this值。如果是一个真正的数组,Array.from会返回一个一样的新数组
<script>
let person = {
'0': 'davina', //key值必须是0,1,2...可以是数字或者是字符串
'1': 'lisa',
length: 2, //必须要有这个特殊的属性
} //es5写法
var array1 = [].slice.call(person);
console.log(array1); //
//es6写法
let array = Array.from(person);
console.log(array); // ["davina", "lisa"] console.log(Array.from('davina')); //["d", "a", "v", "i", "n", "a"] //只要部署了Iterator接口的数据结构都可以被转化成真正的数组
let set = new Set(['a', 'b']);//字符串和 Set 结构都具有 Iterator 接口
console.log(Array.from(set)) //["a", "b"]
</script>
8. copyWithin 在当前数组内部,将指定位置的成员复制到其它位置(会覆盖原数据),返回当前数组。会修改当前的数组。第一个参数:从该位置开始替换的数组,第二个参数:可选,从该位置开始读取数据默认为0负值为倒数,第三参数:可选 到该位置前停止读取,默认为数组长度
<script>
let arr = [1, 2, 3, 4, 5];
//console.log(arr.copyWithin(4)); [4, 5, 3, 4, 5]
//console.log(arr.copyWithin(4,3)); //[1, 2, 3, 4, 4]
console.log(arr.copyWithin(2, 1, 4)); // [1, 2, 2, 3, 4]
</script>
函数——es6函数扩展(二)的更多相关文章
- ES6函数扩展
前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES ...
- ES6 函数的扩展1
1. 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值. ES6允许为函数的参数设置默认值,即直接 ...
- ES6 函数的扩展3
箭头函数 基本用法 ES6允许使用"箭头"(=>)定义函数 var f = v => v; 上面的箭头函数等同于: var f = function(v) { retu ...
- ES6 函数的扩展2
8.2 rest参数 ES6引入rest参数(形式为"-变量名"),用于获取函数的多余参数,这样就不需要使用arguments对象了. arguments对象并没有数组的方法,re ...
- ES6 函数的扩展(1)
1. 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值. ES6允许为函数的参数设置默认值,即直接 ...
- es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6新增语法(二)——函数和参数
箭头函数 箭头函数:将原来函数的function关键字和函数名都删掉,并使用"=>"连接参数列表和函数体. 箭头函数语法: (参数1,参数2)=>{ 函数体 } 注意点 ...
- ES6函数增强
函数参数可以拥有默认值.调用函数时,如果没有进行相应的实参传递,参数就会使用默认值.怎么给参数提供默认值呢?很简单,声明函数时候,给形参赋一个值就可以了,这个值就是参数的默认值. // num2拥有默 ...
随机推荐
- iTerm 2打造ssh完美连接Linux服务器快捷方法
iTerm 2打造ssh完美连接Linux服务器快捷方法 2019年05月02日 10:40:19 Mars0908 阅读数 213更多 个人分类: Mac下开发 版权声明:本文为博主原创文章,遵 ...
- 如何在CentOS 7上安装Memcached(缓存服务器)
首先更新本地软件包索引,然后使用以下yum命令从官方CentOS存储库安装Memcached. yum update yum install memcached 接下来,我们将安装libmemcach ...
- 使用iptables为docker容器动态添加端口映射
1.将当前iptables的配置写入保存到/etc/sysconfig/iptables 2.保存 /etc/init.d/iptables sava 3.修改iptables配置(vi /etc/s ...
- 【leetcode_easy】543. Diameter of Binary Tree
problem 543. Diameter of Binary Tree 题意: 转换一种角度来看,是不是其实就是根结点1的左右两个子树的深度之和呢.那么我们只要对每一个结点求出其左右子树深度之和,这 ...
- 【leetcode_easy】541. Reverse String II
problem 541. Reverse String II 题意: 给定一个字符串,每隔k个字符翻转这k个字符,剩余的小于k个则全部翻转,否则还是只翻转剩余的前k个字符. solution1: cl ...
- []how to use caffe model with TensorRT c++
//IHostMemory *gieModelStream {nullptr}; //const char* prototxt = "./googlenet/test_20181010.pr ...
- swift 第十四课 可视化view: @IBDesignable 、@IBInspectable
以前应objctiew-c 写项目的时候,就知道有这两个关键字,现在用swift了.用法稍作改变,基本用法还是一致的 虽然使用这个之后,有时候会报错的非常的莫名其妙----(其实还是自己技术不够牛…… ...
- Jmeter 逻辑控制器 之 Runtime Controller
一.认识 Runtime Controller 控制其下样例执行的时间长度. 设置界面: Runtime (seconds):运行时间,单位秒.即控制其下样例执行多长时间.与线程组中的调度器的持续 ...
- Bilateral Multi-Perspective Matching for Natural Language Sentences---读书笔记
自然语言句子的双向.多角度匹配,是来自IBM 2017 年的一篇文章.代码github地址:https://github.com/zhiguowang/BiMPM 摘要 这篇论文主要 ...
- php代码调试的重要性
从去年开始做PHP,基本上有的集成环境用了一个遍,XAMPP,WAMP,phpStudy.都是部署一个环境,就在环境下的默认访问目录去创建项目运行.用PHPStorm一直没能在本地做过什么调试.要么不 ...