ES6（二）
ECMAScript6中字符串的用法
模版字符串
标签模板
模板：用反引号定义的字符串
标签：一个专门处理模板字符串的函数。
var name = "zs";
var age = 12;
function fn(v1, v2) {
console.log(arr);
console.log(v1)
console.log(v2)
}
fn`名字${name},今年${age}岁了`
字符串常用方法
1、repeat()重复
var name = "zs"
var res = name.repeat(4);
console.log(res)//zszszszs
2、includes() 表示是否包含某一项，有就返回true、无返回false，支持第二个参数，代表从几开始
var a = "hello"
console.log(a.includes("h"))//true
console.log(a.includes("w"))//false
console.log(a.includes("l", 5))//false
3、startsWith()表示是否是开始位置，同时支持第二个参数，代表从第几项开始查找（从索引值开始），返回结果true和false
var m = "father";
console.log(m.startsWith("h", 3))//true
4、endsWith()表示是否是结束位置，支持第二个函数，针对前n个字符，返回结果是true和false
var q = "bother";
console.log(q.endsWith("o", 2))//true
5、String.raw()未加工
console.log("hello\nworld")//hello
//world
console.log(String.raw`hello\nworld`)//hello\nworld
ECMAScript6中数值的用法
1、Number.isNaN
console.log(isNaN(2.5))//false
console.log(window.isNaN(2.5))//false
console.log(Number("abc"))//NAN
console.log(Number.isNaN("abc"))//false
// Number下返回的结果是false时，不一定为数值，字符串也行
2、Number.isFinite
console.log(Number.isFinite(1))//true
console.log(Number.isFinite(Infinity))//false ,仅Infinity为无穷
3、Number.parseInt函数
console.log(Number.parseInt("5.3ab"))
console.log(Number.parseInt(4.5))
console.log(Number.parseInt(4.0))
4、Number.parseFloat函数
console.log(Number.parseFloat(2.30))//2.3
console.log(Number.parseFloat(4.00))//4
5、 Number.isInteger函数
// 整数返回true，小数返回false
console.log(Number.isInteger(3.4))//false
console.log(Number.isInteger(3))//true//
// 在javascript内部对整数和浮点数采用一样的存储方式，因此小数点后如果都是0的浮点数，都会被认为是整数
console.log(Number.isInteger(3.0000))//true
6、 Math.trunc函数:用于去除一个数的小数部分，返回整数部分。
console.log(Math.trunc(3.956799))//3
7、Math.sign函数：用来判断一个数到底是正数、负数、还是零
// 返回的结果类型有点多，我们分别来讲解一下，参数如果是正数，结果返回1；如果是负数，结果返回 - 1；如果是0，结果返回0；
// 如果是一个非数值类型的参数，结果返回：NaN
console.log(Math.sign(3))//1
console.log(Math.sign(-4))//-1
console.log(Math.sign(0))//0
console.log(Math.sign("abc"))//NaN
ECMAScript6中数组的用法
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</body>
1、Array.of函数:函数作用：将一组值，转换成数组。
var str = "abcd";
console.log(Array.of(str))
console.log(Array.of("啊", "五环", "你比四环多一环"))
2、Array.from函数:可以将类似数组的对象或者可遍历的对象转换成真正的数组。(伪数组)
var btn = document.getElementsByTagName("button");
console.log(btn instanceof Array)//false
console.log(btn instanceof Object)//true
console.log(Array.from(btn) instanceof Array)//true
3、entries函数 :对数组的键值对进行遍历，返回一个遍历器，可以用for..of对其进行遍历。
for (let [i, v] of ["a", "b"].entries()) {
console.log(i, v)
}
//0 "a"
//1 "b"
4、find函数:找出数组中符合条件的第一个元素。
var arr = [1, 23, 0, 4]
var newArr = arr.find(function (val) {
return val > 0;
})
console.log(newArr)
5、 findIndex函数：返回符合条件的第一个数组成员的位置。
console.log(arr.findIndex(function (val) {
return val > 23//没有返回-1
// return val >0//3,代表有3个
}))
6、fill函数：用指定的值，填充到数组。
var arr1 = [1, 2, 3, 4]
console.log(arr1.fill(7, 0, 5))
// 传3参数时
// fill(value, start, end)
// value：想要替换的内容。
// start：开始位置（数组的下标），可以省略。
// end：替换结束位置（数组的下标），如果省略不写就默认为数组结束。
// 传一参数时
// fill(value)
console.log(arr1.fill(4))
7、 keys函数:对数组的索引键进行遍历，返回一个遍历器。
for (let index of ["a", "b", "c", "d"].keys()) {
console.log(index)
}
8、 values函数:对数组的元素进行遍历，返回一个遍历器。
for (let index of ["a", "b", "c", "d"].values()) {
console.log(index)
}
ECMAScript6中对象的使用
var name = "11";
var age = 23;
// 传统写法
var person = {
"name": name,
"age": age,
say: function () {
alert("传统")
}
};
console.log(person)
// ES6新写法
var person1 = { name, age, say() { alert("ES6写法") } };
console.log(person1)
1、 Object.is函数：比较两个值是否严格相等，或者说全等。===
// 严格相等和抽象相等：===和==
var str = "12";
var num = 12;
var num1 = 12;
// 抽象相等
console.log(str == num);
//严格相等
console.log(str === num)
2、Object.assign函数：将源对象的属性赋值到目标对象上。
var target = { "name": "ls" }
var object = { "age": 14, "gender": "男" }
console.log(Object.assign(target, object))
3、Object.getPrototypeOf函数:获取一个对象的prototype属性。
function Person() {
}
Person.prototype = {
say() {
console.log("11")
}
}
let p = new Person();
p.say();
console.log(Object.getPrototypeOf(p))
4、Object.setPrototypeOf函数:设置一个对象的prototype属性。
Object.setPrototypeOf(p, { say() { console.log("22") } })
p.say();
ECMAScript6中属性名的更新
var a = "first"
var b = "name"
var c = "say"
var d = "hello"
var people = {
[a + b]: "王五",
[c + d]() {
return "好吗,好的"
}
}
console.log(people.firstname);
console.log(people.sayhello());
ECMAScript6中函数的使用
1、 函数参数的默认值(函数有默认值的时候,放在后面)
function fn1(b, a, n = "ls") {
var name = n;
var age = a;
var b = b;
return { n, a, b }
// return { name, age }//{name: 20, age: 11}
}
console.log(fn1("wu", 20))//{n: "ls", a: 20, b: "wu"}
console.log(fn1(null))//{n: "ls", a: undefined, b: null}
console.log(fn1(undefined))//{n: "ls", a: undefined, b: undefined}
console.log(fn1("zs", null, undefined))//{n: "ls", a: null, b: "zs"}
2、rest参数的用法，
// 首先是表示法：...values（三个点+变量名）；其次，values是一个数组est函数
// rest参数必须是函数的最后一个参数,后面不能再跟其他参数rest...values参数放在最后面
function sum(result, ...values) {
values.forEach(function (v, i) {
result += v;
})
console.log(result)//
}
var res = 0;
sum(res, 1, 2, 3, 4)
3、扩展运算符
function suma(a, b, c) {
return a + b + c
}
var arr = [1, 2, 3]
console.log(suma(...arr))//6
4、箭头函数与普通函数对比
function sum(a, b) {
console.log(a + b)
}
sum(2, 3);
// 箭头函数
var sun = (a, b) => { console.log(a + b) }
sun(4, 7)
// function fn() {
// var name = "ls";
// return function fn1() {
// console.log("11");
// return function fn2() {
// console.log("22");
// }
// }
// }
// 箭头函数
var fn = () => { var name = "zs"; return () => { console.log("11"); return () => { console.log("22"); } } }
console.log(fn())
console.log(fn()())
console.log(fn()()())
// 箭头函数里的this
// 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象), 而不是执行时的对象, 定义它的时候, 可能环境是window; 箭头函数可以方便地让我们在 setTimeout, setInterval中方便的使用this
// 2.箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
扩充：
// Number.parseInt与Math.trunc区别
// 数值极大时或极小时
// 明显6.234e34整数部分是其本身
console.log(Number.parseInt(6.234e34))//6
console.log(Math.trunc(6.234e34))//6.234e+34
console.log(Number.parseInt("12.2g"))//12
console.log(Math.trunc("12.2g"))//NaN
//如果出现连续的超过6个及其以上连续的6个0会自动改成科学计数法：
console.log(Number.parseInt(0.00000020))//2
console.log(Math.trunc(0.00000020))//0
