ES6——扩展

最新推荐文章于 2024-07-17 10:19:04 发布

27th

最新推荐文章于 2024-07-17 10:19:04 发布

阅读量254

点赞数

分类专栏： es6 前端文章标签： es6

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

es6

3 篇文章 0 订阅

订阅专栏

一、字符串的扩展

1、模板字符串和标签模板 `xxx`的用法，hin方便哦。

// 模版字符串
'asdffdsa'
"asdfasdf"

`asdfasdffsa`

const xiaoming = {
	name: 'xiaoming',
	age: 14,
	say1: function() {
		console.log('我叫' + this.name.toUpperCase() + ', 我今年' + this.age + '岁!');
	},
	say2: function() {
		console.log(`我叫${ `Mr.${ this.name.toUpperCase() }` }, 我今年${ this.age }岁!`);
	}
}

xiaoming.say1();
xiaoming.say2();






const getImoocCourseList = function() {
	// ajax
	return {
		status: true,
		msg: '获取成功',
		data: [{
			id: 1,
			title: 'Vue 入门',
			date: 'xxxx-01-09'
		}, {
			id: 2,
			title: 'ES6 入门',
			date: 'xxxx-01-10'
		}, {
			id: 3,
			title: 'React入门',
			date: 'xxxx-01-11'
		}]
	}
};

const { data: listData, status, msg } = getImoocCourseList();

function foo(val) {
    return val.replace('xxxx', 'xoxo');
}

if (status) {
    let arr = [];

    listData.forEach(function({ date, title }) {

        // arr.push(
        // 	'<li>\
        // 		<span>' + title + '</span>' +
        // 		'<span>' + date + '</span>' +
        // 	'</li>'
        // );

        arr.push(
            `
				<li>
					<span>${ `课程名: ${ title }` }</span>
					<span>${ foo(date) }</span>
				</li>
			`
        );

    });

    let ul = document.createElement('ul');
    ul.innerHTML = arr.join('');

    document.body.appendChild(ul);

} else {
    alert(msg);
}

2、部分新方法 padStart padEnd repeat startsWith endsWith includes

// 部分新方法

// padStart padEnd

{
	let str = 'i';

	let str1 = str.padStart(5, 'mooc');
	console.log(str1);

	let str2 = str.padEnd(5, 'mooc');
	console.log(str2);
}

// repeat
{
	   

	function repeat(str, num) {
		return new Array(num + 1).join(str);
	}
	console.log(repeat('s', 3));
}

// startsWith endsWith
{
	const str = 'A promise is a promsie';

	console.log(str.startsWith('B'));
	console.log(str.startsWith('A pro'));

	console.log(str.endsWith('promsie'));
	console.log(str.endsWith('A'));
}

// includes
{
	const str = 'A promise is a promise';

	// if (str.indexOf('promise') !== -1) {
	if (~str.indexOf('promise')) {
		console.log('存在1');
	}

	if (str.includes('a promise')) {
		console.log('存在2');
	}
}

3、for-of的用法

let str = 'PROMISE';

/***************************************************************/
// ES6之前遍历字符串的方式
// 使用for循环

for (var i = 0, len = str.length; i < len; i ++) {
	console.log(str[i]);
	console.log(str.charAt(i));
}


/***************************************************************/
// 转成数组后遍历
var oStr = Array.prototype.slice.call(str);
var oStr = str.split('');

const oStr = [...str];
const [...oStr] = str;

oStr.forEach(function(word) {
	console.log(word);
});

console.log(oStr);


// 有时候遍历是为了操作字符串
// 对全是英文的字符串中的大写字符加密 A -> 100  B -> 99。。。
const map = {A: '100', B: '99', C: '98', D: '97', E: '96', F: '95', G: '94', H: '93', I: '92', J: '91', K: '90', L: '89', M: '88', N: '87', O: '86', P: '85', Q: '84', R: '83', S: '82', T: '81', U: '80', V: '79',W: '78',X: '77',Y: '76', Z: '75'};
const words = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

oStr.forEach(function(word, index) {
	if (words.includes(word)) oStr[index] = map[word];
});

console.log(oStr.join(''));

/***************************************************************/
// 使用for-of遍历字符串
for (let word of str) {
	console.log(word);
}

let newStr = '';
for (let word of str) {
	if (words.includes(word)) newStr += map[word];
}
console.log(newStr)

/***************************************************************/
// ? \u1f436 unicode码(点)。emoji

console.log('\u1f436');
console.log('\u{1f436}');

// Unicode是一项标准 包括字符集、编码方案等
// 他是为了解决传统的字符编码方案的局限而产生的，为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。

// codePointAt 获取字符串中对应字符的一个码点
'?'.codePointAt(0);

// at 根据下标取字符
'?abc'.at(0)     ?

二、正则扩展

const regexp1 = /^a/g;

const regexp2 = new RegExp('^a', 'g');
const regexp3 = new RegExp(/a/g);
const regexp4 = new RegExp(/a/);

console.log('aabbcc'.match(regexp1));
console.log('babbcc'.match(regexp1));
console.log('aabbccaabbaa'.match(regexp3));
console.log('aabbccaabbaa'.match(regexp4));

// 构造函数的变化

const regexp5 = new RegExp(/a/giuy, 'ig');

// uy修饰符

// u.  unicode

console.log(/^\ud83d/.test('\ud83d\udc36'))
console.log(/^\ud83d/u.test('\ud83d\udc36'))

// '\ud83d\udc36'

// y 粘连修饰符   sticky

const r1 = /imooc/g;
const r2 = /imooc/y;

const str = 'imoocimooc-imooc';

console.log(r1.exec(str));
console.log(r1.exec(str));
console.log(r1.exec(str));
console.log(r1.exec(str));

console.log('-----------------');

console.log(r2.exec(str));
console.log(r2.exec(str));
console.log(r2.exec(str));

三、数值扩展

// 新的进制表示法

016  =>  14

0o  0O    octonary
0b  0B    binary

console.log(0o16);
console.log(0b1111);

// 新的方法与安全数
// ---------------------------------------------------

// Number.parseInt Number.parseFloat

console.log(window.parseInt('1.23'));
console.log(parseFloat('1.23'));

console.log(Number.parseInt(1.23));
console.log(Number.parseFloat(1.23));

// ---------------------------------------------------

// Number.isNaN Number.isFinite

// isNaN
console.log(Number.isNaN(NaN));
console.log(Number.isNaN(-NaN));
console.log(Number.isNaN(1));
console.log(Number.isNaN('1'));
console.log(Number.isNaN(true));

function isNaN(value) {
	return value !== value;
}

console.log(isNaN(NaN));
console.log(isNaN(-NaN));
console.log(isNaN(1));
console.log(isNaN('1'));
console.log(isNaN(true));

// isFinite
console.log(Number.isFinite(Infinity));
console.log(Number.isFinite(2 / 0));
console.log(Number.isFinite(2 / 4));
console.log(Number.isFinite(1234));
console.log(Number.isFinite('1234'));
console.log(Number.isFinite(true));
console.log(Number.isFinite(NaN));

// ---------------------------------------------------

Number.MAX_SAFE_INTEGER Number.MIN_SAFE_INTEGER
Number.isSafeInteger();

console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MIN_SAFE_INTEGER);

console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER - 1));
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1));

// ---------------------------------------------------

// 幂运算

let a = (2 ** 10) ** 0;
console.log(a);

// Math

四、函数扩展

// 函数参数的默认值

function add(a, b = 999 + b, c = 1) {
	console.log(a, b);
}

add(1);

function People({ name, age = 38 } = {name: 1}) {
	console.log(name, age);
};

People({ name: 3 });

// 结合扩展运算符(剩余参数...)

function sum(...args) {
	// let args = Array.prototype.slice.call(arguments);
	// let args = [...arguments];
	// let [...args] = arguments;
	console.log(args);
}

sum(1, 2, 321, 4354, 'fdafsd');


function op(type, b, ...nums) {
	console.log(type);
	console.log(nums);
}

op('sum', 1, 23, 454, 3, 67, 234);

function sum(...numbers) {
	return numbers.reduce(function(a, b) {
		return a + b;
	}, 0);
}

console.log(sum(1, 2, 3, 4));

箭头函数

// 箭头函数

const add1 = (a, b) => {
	a += 1;
	return a + b;
};

const add2 = function(a, b) {
	a += 1;
	return a + b;
}

console.log(add1(2, 2));
console.log(add2(2, 2));

const pop = arr => void arr.pop();

console.log(pop([1, 2, 3]));

const log = () => {
	console.log(arguments);
};

log(1, 2, 3);



const xiaoming = {
	name: '小明',
	say1: function() {
		console.log(this);
	},
	say2: () => {
		console.log(this);
	}
}

xiaoming.say1();
xiaoming.say2();
 


const xiaoming = {
	name: 'xiaoming',
	age: null,
	getAge: function() {
		let _this = this;
		// ...ajax
		setTimeout(function() {
			_this.age = 14;
			console.log(_this);
		}, 1000);

	}
}; 

xiaoming.getAge();
  
const xiaoming = {
	name: 'xiaoming',
	age: null,
	getAge: function() {


		// ...ajax
		setTimeout(() => {
			this.age = 14;
			console.log(this);
		}, 1000);

	}
};

xiaoming.getAge();

五、对象扩展

// 简洁表示法

const getUserInfo = (id = 1) => {
	// AJAX ....

	const name = 'xiaoming';
	const age = 10;

	return {
		name: name,
		age: age,
		say: function() {
			console.log(this.name + this.age);
		}
	};
}; 

const xiaoming = getUserInfo();

// ------------------------------------------

const getUserInfo = (id = 1) => {
	// AJAX ....

	const name = 'xiaoming';
	const age = 10;

	return {
		name,
		age,
		say() {
			console.log(this.name + this.age);
		}
	};
};

const xiaoming = getUserInfo();

// ------------------------------------------

// 属性名表达式

const obj = {
	a: 1,
	$abc: 2,
	'FDASFHGFgfdsgsd$#$%^&*%$#': 3
};

const key = 'age';

const xiaoming = {
	name: 'xiaoming',
	[`${key}123`]: 14
};

// 扩展运算符

// 复制对象 - 浅拷贝

const obj1 = {
	a: 1,
	b: 2,
	d: {
		aa: 1,
		bb: 2
	}
};

const obj2 = {
	c: 3,
	a: 9
};

const cObj1 = { ...obj1 };

console.log(cObj1.d.aa);

cObj1.d.aa = 999;

console.log(cObj1.d.aa);
console.log(obj1.d.aa);

// 合并对象

const newObj = {
	...obj2,
	...obj1
};

newObj.d.aa = 22;

console.log(obj1);

// -----------------------------------

// 部分新的方法和属性

// Object.is
// ===
// +0 -0
// NaN

console.log(Object.is(+0, -0));
console.log(+0 === -0);
console.log(Object.is(NaN, NaN));
console.log(NaN === NaN);

console.log(Object.is(true, false));
console.log(Object.is(true, true));

// --------------------------------------------------

// Object.assign

const obj = Object.assign({a: 1}, {b: 2}, {c: 3}, {d: 4, e: 5});

const obj = {
	a: 1,
	b: {
		c: 2
	}
};

let newObj = Object.assign({a: 3}, obj);

console.log(newObj.b.c);

newObj.b.c = 100;

console.log(obj.b.c);

// --------------------------------------------------

const obj = {
	a: 1,
	b: 2,
	c: 3,
	d: 4
};

// Object.keys

console.log(Object.keys(obj));

// // Object.values

console.log(Object.values(obj));

// // Object.entries

console.log(Object.entries(obj));

// for - of

for (let [k, v] of Object.entries(obj)) {
	console.log(k, v);
}

// --------------------------------------------------

// __proto__

// console.log({a: 1});

// --------------------------------------------------

// Object.setPrototypeOf

const obj1 = {
	a: 1
};

const obj2 = {
	b: 1
}

const obj = Object.create(obj1);

console.log(obj.__proto__);

Object.setPrototypeOf(obj, obj2);

console.log(obj.__proto__);

// --------------------------------------------------

Object.getPrototypeOf

const obj1 = {a: 1};

const obj = Object.create(obj1);

console.log(obj.__proto__);
console.log(Object.getPrototypeOf(obj));
console.log(obj.__proto__ === Object.getPrototypeOf(obj));

// --------------------------------------------------

// super

const obj = {name: 'xiaoming'};

const cObj = {
	say() {
		console.log(`My name is ${super.name}`);
	}
}

Object.setPrototypeOf(cObj, obj);

cObj.say();

六、数组扩展

// 结合扩展运算符使用

function foo(a, b, c) {
	console.log(a);
	console.log(b);
	console.log(c);
}

foo(...[1, 3, 2]);

const user = ['小明', 14, ['吃饭', '打游戏'], '我没有女朋友'];

function say(name, age, hobby, desc) {
	console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join('和') }, ${ desc }`);
}

say(user[0], user[1], user[2], user[3]);

say(...user);

apply

say.apply(null, user);

const arr = [1, 2, 233, 3, 4, 5];

// Math.max();

console.log(Math.max(...arr));
console.log(Math.max.apply(null, arr));

console.log(Math.min(...arr));
console.log(Math.min.apply(null, arr));

// --------------------------------------------

const arr1 = [1, 2, 3, 4];
const arr2 = [4, 2, 2, 1];
const arr3 = [2.2, '123', false];

const cArr1 = [1, 2, 3, ...arr3];

const cArr2 = [...arr1];
const [...cArr3] = arr3;

const cArr4 = [...arr1, ...arr2, ...arr3];


function *g() {
	console.log(1);
	yield 'hi~';
	console.log(2);
	yield 'imooc~';
}

// const arr = [...g()];

const gg = g();

gg.next();

setTimeout(function() {
	gg.next();
}, 1000);

let set = new Set([1, 2, 2, 3]);

console.log([...set]);

// 新的方法

// ----------------------------------------
// Array.from

const obj = {
	0: 1,
	1: '22',
	2: false,
	length: 2
};

console.log(Array.from(obj, item => item * 2));

Array.prototype.slice.call();
[].slice.call();
[...]

// ----------------------------------------
// Array.of

console.log(Array.of(1, 2, '123', false));

// ----------------------------------------
// Array#fill

let arr = new Array(10).fill(0, 0, 3);

console.log([1, 2, 3].fill(0));

// ----------------------------------------
// Array.includes

var arr = [1, 2, 3, 4];
console.log(arr.includes(1));
console.log(arr.includes(55));

// ----------------------------------------
// keys

const arr = [1, 2, 3, 444];

console.log(arr.keys());
for (let i of arr.keys()) {
	console.log(i);
}

// values
for (let v of arr.values()) {
	console.log(v);
}

// entries
for (let [i, v] of arr.entries()) {
	console.log(i, v);
}

// ----------------------------------------
// find 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的值
const res = [1, 7, 6, 3].find((value, index, arr) => value % 2 === 0);

console.log(res);

// ----------------------------------------
// findIndex 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的下标
const res = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));

console.log(res);

27th

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6——扩展

一、字符串的扩展1、模板字符串和标签模板 `xxx`的用法，hin方便哦。// 模版字符串'asdffdsa'"asdfasdf"`asdfasdffsa`const xiaoming = { name: 'xiaoming', age: 14, say1: function() { console.log('我叫' + this.name.toUpperCase(...
复制链接

扫一扫