DAY27-ES6基础

DAY27-ES6基础_第1张图片

 DAY27-ES6基础_第2张图片

 

var i = 0;
for (i = 1; i <= 10; i ++) {
 (function(i) {
    var btn = document.createElement('button');
    btn.innerText = i;
    btn.onclick = function() {
       alert(i)
     };
     document.body.appendChild(btn);
   })(i);
 }

这段代码创建了一个变量 `i` 并将其赋值为 `0`,然后使用 `for` 循环结构,从 `1` 到 `10` ,遍历 `i` 的取值,并使用一个立即执行函数,将遍历到的当前值 `i` 传递作为参数。

在这个立即执行函数中,创建了一个 `button` 元素,设置它的文本内容为 `i`,并为该按钮设置了一个 `onclick` 事件监听器,当用户点击该按钮时,弹出一个弹窗,展示当前的 `i` 值。最后,将 `button` 元素添加到了 `body` 元素中。

值得注意的是,由于 JavaScript 的作用域是基于函数的而非基于块级作用域的,该立即执行函数的作用域中的 `i` 与循环中的 `i` 并不是同一个变量,使得每个按钮事件监听器都能按照预期正确地展示相应的 `i` 值。

for (let i = 1; i <= 10; i ++) {
  var btn = document.createElement('button');
  btn.innerText = i;
  btn.onclick = function() {
    alert(i)
  };
  document.body.appendChild(btn);
}

为什么这里加上let和不加let结果一样?

`let` 定义变量在代码块中拥有块级作用域的特性,可以更好地隔离变量,防止变量名污染和变量重复定义的问题。但如果在代码块中未发生变量重新定义、变量与外部环境变量名不冲突等情况时,使用 `let` 和 `var` 声明变量结果可能是相同的。

需要注意的是,`let` 与 `var` 声明变量的一个主要区别是,`var` 声明的变量在同一作用域内可以被多次定义或重新赋值,而 `let` 声明的变量则只能被定义一次,之后只能重新赋值,这也是 JavaScript 在最新标准中引入 `let` 的目的之一。


为什么const引用类型的时候可能被修改?


const obj = {name: 'Tom', age: 18};  // 使用 const 声明一个对象
console.log(obj);   // 输出 {name: 'Tom', age: 18}

obj.age = 20;   // 使用改变属性的方式来修改对象的值
console.log(obj);   // 输出 {name: 'Tom', age: 20}

```

我们使用 `const` 声明了一个名为 `obj` 的对象。调用 `console.log(obj)` 以输出 `{name: 'Tom', age: 18}`,这是这个对象的初始值。之后我们使用 `obj.age = 20`更改了对象属性 age 值,然后再次调用 `console.log(obj)`输出 `{name: 'Tom', age: 20}`,这个对象的属性已经被成功地更改了。

值得注意的是,虽然 `obj` 是通过 `const` 关键字声明的,但是这仅仅意味着 `obj` 的引用不允许被重新赋值,而并不是不允许更改它所指向对象的属性。如果需要创建一个不可变的对象,可以使用一些类似 `Object.freeze()`的内置函数来达到目的。

// const ARR = [];
// Object.freeze(ARR);
// ARR.push(1);
// console.log(ARR);
Object.defineProperty(Object, 'freezePolyfill', {
  value: function(obj) {
    var i;
    for (i in obj) {
      if (obj.hasOwnProperty(i)) {
        Object.defineProperty(obj, i, {
          writable: false
        });
      }
    }
    Object.seal(obj);
  }
});

这段代码定义了一个名为 `freezePolyfill` 的方法,使用 `Object` 对象的 `defineProperty` 函数,将传递进来的 `obj` 对象的所有属性配置为只读,从而实现了对象的冻结。

具体而言,`freezePolyfill` 的实现会遍历传递进来的对象,为其所有的具有自身属性的属性设置只读 `writable: false` 属性,然后使用 `Object.seal` 函数将对象密封,阻止向对象添加新属性,并可以将已有属性的配置更改为不可变。

需要注意的是,该方法为一个 polyfill 函数,也就是将 `Object.freeze()` 函数的实现引入了可能不支持该函数的浏览器环境中。尽管这可以在一些情况下达到一定的兼容效果,但在代码使用时应谨慎,避免因修改过多环境内置函数而导致的副作用。

 数组的解构赋值

DAY27-ES6基础_第3张图片

let [a, b, c] = [1, 2, 3];
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3
```

在这个例子中,我们定义了一个包含三个元素的数组 `[1, 2, 3]`,然后使用解构赋值的语法将 `[1, 2, 3]` 的值的分别赋值给变量 `a`、`b` 和 `c`。

在解构赋值中,等号左边的变量名要和等号右边的数组元素对应,即:第一个元素对应第一个变量,第二个元素对应第二个变量,以此类推。如果右侧的数组元素不够时,未被对应到的变量将被赋值为 `undefined`。同时,如果右侧的元素多于左侧的变量数,则会忽略多余的元素。

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 输出 2
console.log(b); // 输出 1

在这段代码中,我们首先声明了两个变量 `a` 和 `b`,并分别赋值为 `1` 和 `2`。然后,我们使用解构赋值的语法将两个变量的值互换,这样变量 `a` 的值变为 `2`,变量 `b` 的值变为 `1`。


解构赋值语法的使用可以让我们编写更加优雅和简洁的代码,并且提高了代码的可读性。

对象的解构:

const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

const { name, age, gender } = person;

console.log(name);   // 输出 'Tom'
console.log(age);    // 输出 18
console.log(gender); // 输出 'male'

在这个例子中,我们定义了一个名为 `person` 的对象,它包含三个属性 `name`、`age` 和 `gender`。然后,我们使用解构赋值的方式快速地从 `person` 中提取这三个属性,并将它们赋值给变量 `name`、`age` 和 `gender`。最后,输出这三个变量的值。
需要注意的是,在对象解构赋值时,左侧是一个对象字面量,右侧是一个与左侧对象属性名相同的对象,采用的是类似“名值对”一样的方式进行一一匹配和赋值。这意味着左侧的变量名应该和右侧的对象属性相对应,而且左右两侧变量名需要为一致。

对象解构赋值同样可以嵌套使用,可以通过对嵌套对象进行解构,快速方便地获取其内部嵌套的属性值。

 const player = {
nickname: '感情的戏∫我没演技∆',
master: '东海龙王',
skill: [{
		skillName: '龙吟',
	mp: '100',
	time: 6000
 	},{
 		skillName: '龙卷雨击',
		mp: '400',
		time: 3000
 	},{
		skillName: '龙腾',
	mp: '900',
		time: 60000
	}]
};

const { nickname } = player;
 const { master } = player;
 const { skill: [ skill1, { skillName }, { skillName: sklName } ] } = player;
const { skill } = player;
 const [ skill1 ] = skill;

这段代码是使用JavaScript语言编写的,并定义了一个名为`player`的对象。对象拥有四个属性,分别是昵称(nickname)、主人公(master)和技能(skill)。
`const { nickname } = player;`这行代码使用了解构赋值语法,从`player`对象中提取了`nickname`属性,并将其赋值给变量`nickname`。

`const { master } = player;`同样使用了解构赋值语法,从`player`对象中提取了`master`属性,并将其赋值给变量`master`。

`const { skill: [skill1, { skillName }, { skillName: sklName } ] } = player;`这行代码同样使用了解构赋值语法,从`player`对象中提取了`skill`属性,并将其赋值给了一个新的对象,该对象包含了三个属性,分别是`skill1`、`skillName`和`sklName`。其中`skill1`表示`skill`数组中的第一个元素;`{ skillName }`表示从`skill`数组中的第二个元素中提取了`skillName`属性,将其赋值给变量`skillName`;`{ skillName: sklName}`表示从`skill`数组中的第三个元素中提取了`skillName`属性,并将其赋值给变量`sklName`。

`const [ skill1 ] = skill;`这行代码同样使用了解构赋值语法,从`skill`数组中提取了第一个元素,将其赋值给变量`skill1`。

DAY27-ES6基础_第4张图片

 

// 如何对已经申明了的变量进行对象的解构赋值

let age;
 const obj = {
name: '小明',
 	age: 22
};

 ({ age } = obj);

这段代码是使用JavaScript语言编写的,并定义了两个变量,分别是`age`和`obj`。

`let age;`定义了一个变量`age`,但未对其进行赋值,因此此时`age`的值为`undefined`。

`const obj = { name: '小明', age: 22 };`定义了一个对象`obj`,包含两个属性`name`和`age`,分别对应字符串`'小明'`和数字`22`。

`({ age } = obj);`这行代码使用了解构赋值语法,从`obj`对象中提取了`age`属性,并将其赋值给变量`age`。这里使用了圆括号(`()`)是因为在JavaScript中,如果直接使用`age = obj.age`的方式将`age`赋值为`obj`对象中的`age`属性值时,语法上会出现错误;所以需要将整个语句放在一对圆括号中,以表示这是一个解构赋值语句。

总的来说,这段代码的作用是将对象`obj`中的`age`属性值提取出来,并赋值给变量`age`。最终的结果是变量`age`的值为`22`。

let girlfriend = {
name: '小红',
	age: undefined,
};

 let { name, age = 24, hobby = ['学习'] } = girlfriend;

`let { name, age = 24, hobby = [ '学习' ] } = girlfriend;`这行代码使用了解构赋值语法,从`girlfriend`对象中提取了`name`属性,并将其赋值给变量`name`;提取了`age`属性,将其赋值给变量`age`,如果`age`的值为`undefined`,则会将其默认值设为`24`;提取了`hobby`属性,将其赋值给变量`hobby`,如果`hobby`不存在,则会将其默认值设为一个包含字符串`'学习'`的数组`[ '学习' ]`。

总的来说,这段代码的作用是将对象`girlfriend`中的`name`和`age`属性值提取出来,并将其分别赋值给变量`name`和`age`。如果`age`属性的值为`undefined`,则将`age`默认设为`24`。最终的结果是变量`name`的值为`'小红'`,变量`age`的值为`24`,变量`hobby`的值为`[ '学习' ]`。

 const { name, hobby: [ hobby1 ], hobby } = {
	name: '小红',
	hobby: ['学习']
 };

这段代码是对一个对象进行解构赋值,并将其属性分别赋值给变量。对象的属性包括name和hobby。

在解构赋值时,使用了ES6中的对象解构特性,通过花括号包裹需要解构的属性名,同时使用":"操作符将hobby解构成单独的数组"hobby1",并将原"hobby"的值以普通变量"hobby"的形式赋值。

解构赋值过程中,变量name接收了对象属性name的值,变量hobby1接收了值为"学习"的数组的第一个元素,变量hobby则接收了整个数组作为它的值。

最终,变量name的值为"小红",变量hobby1的值为"学习",变量hobby的值为["学习"]。

function getUserInfo(uid) {

 	return {
 		status: true,
 		data: {
 			name: '小红'
 		},
		msg: '请求成功'
 	};
};

const { status, data, msg: message } = getUserInfo(123);

这段代码定义了一个名为getUserInfo的函数,该函数以一个参数uid作为输入,并返回一个包含status、data和msg等属性的对象。

在代码的最后,使用了ES6中的对象解构特性,将函数返回的对象中的属性值分别赋值给变量status、data和message。

具体来说,变量status的值等于对象属性status的值(即true),变量data的值等于对象属性data的值(即{name: '小红'}),变量message的值等于对象属性msg的值(即"请求成功")。

最终,通过解构赋值的方式,我们可以更方便地获取到函数返回的结果中的部分数据。

const str = 'I am the bone of my sword'; 
const [ a, b ,c, ...oth ] = str;

 const [ ...spStr1 ] = str;
 const spStr2 = str.split('');
 const spStr3 = [ ...str ];

 这段代码主要展示了如何对字符串进行解构和拆分操作。

首先,将字符串" I am the bone of my sword "赋值给变量str。然后,使用数组解构的方式,将字符串中的前三个字符依次赋值给变量a、b和c,剩余的字符则以数组形式赋值给变量oth。

接着,使用ES6中的扩展运算符(...)将字符串str转换为数组形式,即将其中每个字符分别作为数组的一个元素,保存在新数组spStr1中。此时,spStr1的值为["I", " ", "a", "m", " ", "t", "h", "e", " ", "b", "o", "n", "e", " ", "o", "f", " ", "m", "y", " ", "s", "w", "o", "r", "d"]。

接下来,使用字符串的split方法将字符串str按照空格字符分割为一个字符串数组,将该数组赋值给变量spStr2。此时,spStr2的值为["I", "am", "the", "bone", "of", "my", "sword"]。

最后,使用ES6中的扩展运算符,将变量str中的每个字符分别作为一个单独的元素保存在新数组spStr3中。跟spStr1的结果是一致的,值也是["I", " ", "a", "m", " ", "t", "h", "e", " ", "b", "o", "n", "e", " ", "o", "f", " ", "m", "y", " ", "s", "w", "o", "r", "d"]。

const { valueOf: vo } = 1;
const { toString: ts } = false;

这段代码使用了对象解构的方式,将数字1和布尔值false转化为对应的包装对象,然后将其属性分别解构赋值给变量vo和ts。

在第一个解构赋值语句中,由于数字1是一个原始值类型,JS会将其隐式地转化为Number对象,从而可以访问到Number对象原型上的valueOf方法,而对象解构则可以将该方法作为vo变量的值。

在第二个解构赋值语句中,boolean类型的false也会被隐式地转化为Boolean对象,从而可以访问到Boolean对象原型上的toString方法,该方法将被赋值给ts变量。

最终,vo变量的值为根据数字1创建的Number对象的valueOf方法,ts变量的值为根据布尔值false创建的Boolean对象的toString方法。

需要注意的是,由于本题中的解构赋值只是用来演示如何获取包装对象的原型方法。因此在实际开发中不建议使用解构赋值来获取原型方法,这样会使代码变得难以阅读和理解。

 function swap([x, y]) {
 	return [y, x];
 };

 let arr = [1, 2];
 arr = swap(arr);

这段代码定义了一个名为swap的函数,该函数接受一个数组作为参数,并返回该数组的第一个元素和第二个元素的值交换后的数组。

在主程序中,定义了一个名为arr的数组,并将值[1, 2]赋值给该数组。然后,调用swap函数并将arr作为参数传入。因为swap函数返回一个数组,所以可以将其直接赋值给arr。

但是这里需要注意的是,swap函数的参数x是一个普通变量,而y是一个引用变量。调用swap函数时传递的参数arr是一个引用(即数组在内存中的地址)。因此,在swap函数内部对y作值的修改实际上是在修改主程序中的arr数组。

最终,由于swap函数交换了arr数组中的元素顺序,因此arr的值被更新为[2, 1]。

function Computer({
	cpu,
	memory,
	software = ['ie6'],
	OS = 'windows 3.5'
}) {

	console.log(cpu);
	console.log(memory);
	console.log(software);
	console.log(OS);

};

new Computer({
	memory: '128G',
	cpu: '80286',
	OS: 'windows 10'
});

这段代码定义了一个构造函数Computer,该函数接受一个对象作为输入参数,对象包含cpu、memory、software和OS等属性。

在构造函数内部,使用ES6中的对象解构方式将参数对象中对应的属性值分别赋值给cpu、memory、software和OS这几个变量。

需要注意的是,对象解构中software的默认值为["ie6"],如果参数对象中未提供software属性,则会默认使用"ie6"作为其属性值。同时,OS的默认值为"windows 3.5",如果参数对象中未提供OS属性,则会默认使用"windows 3.5"作为其属性值。

在主程序中,使用new关键字创建了一个Computer对象,并将一个包含cpu、memory和OS等属性的对象作为参数传递给了该构造函数。

 

这段代码基于事件监听器开发了一个弹窗组件,当用户点击页面上的按钮时会触发事件处理函数。在事件处理函数中,以一个$Msg对象的形式创建了一个包含多个属性的弹窗,并设置了弹窗的标题、内容、类型、按钮名称、确认和取消回调函数等属性。

具体来说,当用户点击按钮时,代码会查找页面上该按钮对应的DOM元素,并调用addEventListener方法,监听click事件。在监听器函数中,通过new $Msg()的形式创建了一个$Msg对象,并将一个包含各种属性的配置对象作为参数传递给了该对象。

其中,$Msg对象是一个弹窗组件,它有多个配置项控制弹窗的外观和行为,这些配置项的含义如下:

- content:弹窗的内容。
- title:弹窗的标题。
- type:弹窗的类型,可以是success、info、warning或者error。
- btnName:自定义弹窗的按钮名称,包括确认和取消按钮。
- confirm:当用户点击确认按钮时的回调函数。
- cancel:当用户点击取消按钮时的回调函数。

在这段代码中,当用户点击确认按钮时,会打印出this和e的值,并且在控制台上输出一条成功消息。当用户点击取消按钮时,代码会修改页面上id为"t"的元素的innerHTML属性,添加一个取消的标记字符串。

整个代码的作用是在用户点击按钮时显示一个弹窗,提示用户是否确认删除。如果用户选择确认,则显示删除成功的消息;如果用户选择取消,则在页面上输出一个取消的标记

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();

这段代码定义了一个名为"xiaoming"的对象,该对象具有以下属性:

- "name"表示名称,其值为"xiaoming"
- "age"表示年龄,其值为14
- "say1"是一个方法,它将输出"xiaoming"的大写名称和年龄
- "say2"也是一个方法,它将输出"Mr. xiaoming"和年龄

然后,通过调用xiaoming对象的两个方法say1()和say2()来运行这些方法。执行结果为:

我叫XIAOMING,我今年14岁!
我叫Mr. XIAOMING,我今年14岁!
 

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();

这段代码定义了一个函数getImoocCourseList(),它会执行一个Ajax请求,并返回一个包含status、msg和data属性的对象。其中,data属性是一个包含多个课程信息的数组,每个课程包含id、title和date属性。

然后,使用ES6中的解构赋值语法,将从getImoocCourseList()函数返回的对象解构为3个变量:listData、status和msg。这样,我们就可以通过listData变量来访问这些课程信息。

值得注意的是,在解构赋值中,我们将data属性直接赋值给了listData变量,这意味着我们可以更轻松地访问和操作课程信息,而无需使用冗长的dot notation。

if (status) {
    let arr = [];

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

        arr.push(
            `
				
  • ${ `课程名: ${ title }` } ${ foo(date) }
  • ` ); }); let ul = document.createElement('ul'); ul.innerHTML = arr.join(''); document.body.appendChild(ul); } else { alert(msg); }

    这段代码是一个条件判断,如果status为true,则会将listData数组中的每个课程信息提取出来,放入一个ul列表中,并将该ul元素添加到文档中。否则,将弹出一个警告框,显示msg中的信息。

    具体地说,如果status为true,则会定义一个空数组arr,然后使用forEach()方法遍历listData数组中的每个元素,并通过模板字符串的方式将每个元素的date和title属性渲染到一个li元素中,最后将每个li元素都添加到arr数组中。然后,创建一个ul元素并使用innerHTML属性将arr数组的元素转换为HTML代码并插入到ul元素中。最后,将该ul元素添加到文档中。

    ${ `课程名: ${ title }` } 这段代码里的$的作用是什么

    在这段代码中,$字符是一种模板字符串语法。模板字符串是一种新的字符串语法,它允许我们将表达式嵌入到字符串中。在表达式中,我们可以对变量进行运算、调用函数等操作,并将结果渲染到字符串中。

    在此示例中,$字符的主要作用是将一个表达式嵌入到字符串中,表达式的结果将被渲染为字符串。具体来说,表达式`${ title }`表示将title变量的值嵌入到字符串中。

    同时,$字符与大括号配合使用,可以方便地将表达式和其他文本结合起来。在这个例子中,我们使用`${ `课程名: ${ title }` }`将表达式`${ title }`嵌套在其他文本中,这使得我们可以将文本和表达式组合成一个字符串,最终的结果是渲染为`课程名: xx`的HTML代码,其中“xx”是title变量的值。

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

    这段代码通过字符串的padStart()和padEnd()方法来实现对字符串的填充。

    padStart()方法会在当前字符串的开始位置添加指定的字符串,直到字符串达到指定的长度。比如在代码中的"i"字符串前插入4个"mooc",使其总长度到达5。

    padEnd()方法则是在字符串的结尾位置添加指定的字符串,直到字符串达到指定的长度。比如在代码中的"i"字符串后面插入4个"mooc",使其总长度到达5。

    最终输出的结果为:
    "mooci"
    "imooc"

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

    这段代码定义了一个函数repeat,传入两个参数:字符串str和数字num。

    在函数内部,先创建一个num+1长度的数组,然后调用数组的join方法,将数组拼接成一个字符串。

    join方法的参数为str,这样数组中每个元素都会被字符串str连接起来,num+1的原因是为了保证最后字符串重复num次。

    最终输出的结果就是字符串s重复3次,即"sss"。

    数组的join方法是什么?为什么这段代码要num+1才能确保重复num次?console括号里面的3有什么作用?

    数组的join方法是将数组中的所有元素转化为字符串并连接起来,连接符可以作为参数传入。如果不传入参数,则会默认使用 "," 作为连接符来连接数组元素。

    这段代码要num+1才能确保重复num次的原因是,当构造一个长度为num的数组时,数组元素的下标从0到num-1,因此数组的长度只有num。但上述代码要求重复字符串num次,因此需要添加1,这样新构造的数组长度就为num+1,这样在执行join时保证了字符串被重复num次。

    console括号里面的3是作为参数传递给函数repeat的,用来指定重复字符串的次数。在这里的作用是表示将字符s重复3遍的输出结果。

    {
    	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'));
    }

    这段代码演示了字符串的startsWith()和endsWith()方法,用于检查字符串是否以指定的字符或字符串开始或结束。

    startsWith()方法用来检查字符串是否以指定的字符或字符串开始,它接收一个参数,指定要检查的字符或字符串。如果字符串以该字符或字符串开始,则返回true,否则返回false。在这段代码中:

    - str.startsWith('B')返回false,因为字符串str并不以字符'B'开始。
    - str.startsWith('A pro')返回true,因为字符串str以字符串'A pro'开始。

    endsWith()方法用来检查字符串是否以指定的字符或字符串结束,它接收一个参数,指定要检查的字符或字符串。如果字符串以该字符或字符串结束,则返回true,否则返回false。在这段代码中:

    - str.endsWith('promsie')返回true,因为字符串str以字符串'promsie'结束。
    - str.endsWith('A')返回false,因为字符串str不以字符'A'结束。

    {
    	const str = 'A promise is a promise';
    
    	
    	if (~str.indexOf('promise')) {
    		console.log('存在1');
    	}
    
    	if (str.includes('a promise')) {
    		console.log('存在2');
    	}
    }

    这段代码演示了字符串的indexOf()和includes()方法,用于查找字符串中是否包含指定的字符或字符串,返回布尔值。

    indexOf()方法接收一个参数,指定要查找的字符或字符串。如果找到该字符或字符串,返回该字符或字符串在原字符串中第一次出现的位置;未找到则返回-1。在这段代码中:

    - 用 ~(按位取反)运算符对str.indexOf('promise')结果取反,结果为false,表示字符串中不包含'promise'。
    - ~str.indexOf()在JS中用来快速判断某字符/子串是否存在,因为如果子串不存在,返回的是-1,而按位反码后都会转化为 true。

    includes()方法也接收一个参数,指定要查找的字符或字符串。如果找到该字符或字符串,返回true,否则返回false。在这段代码中:

    - str.includes('a promise')返回true,因为字符串str包含子字符串'a promise'。

    综上所述,代码中的if语句通过indexOf()和includes()方法来检查字符串中是否包含指定字符或字符串,当检查结果为true时,在控制台输出相应的信息。

     如果没有按位取反符号 ~的结果会有什么差别?

    如果没有使用按位取反符号 ~,那么代码在判断字符串'str'是否包含子串'promise'时,只会返回一个数值,而不是布尔值。

    具体来说,'~str.indexOf('promise')'语句会返回一个数值,如果找到'promise'子串,则返回一个非-1的数字,并且这个数字按位取反后返回false,否则如果未找到'promise'子串,则返回-1,按位取反后返回true。而如果没有使用 ~ 符号,则返回的是数字,位运算符只能对数字进行按位取反,无法直接作用于字符串,因此无法直接获得字符串是否包含指定子串的结果,需要通过数字转换为布尔值来表示是否找到子串的结果。

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

    这段代码通过循环遍历字符串中的每个字符,输出字符的值以及通过charAt()方法得到的字符值。

    循环遍历的方式是通过for循环,循环变量i从0开始逐步增加,直到字符串的长度len(因为字符串下标是从0开始的),逐个输出字符串中的字符。

    在循环体内,通过数组下标方式输出字符的值,即使用str[i]实现。同时,通过JavaScript String对象的charAt()方法获得整个字符串的每一个字符,实现方式是使用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);

    这段代码通过不同的方式将字符串转化为字符数组,并遍历输出每个字符。

    首先,通过Array.prototype.slice.call()方法可以将字符串str转换为字符数组oStr。这种方式通过Array原型链上的slice方法,创建一个新的包含所有字符的数组。

    其次,可以使用split()方法将字符串str分割成由单个字符组成的数组,得到字符数组oStr。在这里,分隔符是空字符串,即用空字符将字符串分割成单个字符。这种方式比较简单,但效率略低。

    接着,使用ES6的展开运算符(...),也可以很方便地将字符串str转变为字符数组oStr。在这个方式中,注意展开运算符要放在一个外层数组内,用于将输入的字符串转化为单个字符组成的数组。

    最后,通过forEach()方法对oStr字符数组进行遍历,逐个输出每个字符。

    最终,通过console.log(oStr)输出整个字符数组oStr。

    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(''));

    这段代码将字符数组oStr中的每个元素与大写字母表字符串words进行比较,查找当前字符是否是大写字母。如果是大写字母,则根据映射表map中的键值将该字符的值替换。最后将所有替换后的字符连接起来,输出结果。

    具体来说,代码中首先调用数组oStr的forEach方法,开始遍历字符数组。在forEach的回调函数中,对于数组中的每个元素,判断其是否为大写字母,如果是,则根据其在映射表map对象中对应的键名,将其在数组中对应的值替换成map对象中的键值。

    最后,调用数组oStr的join('')方法将修改后的字符数组变成字符串,并且把字符以空字符串为分隔符连接成一个完整的字符串,将结果输出到控制台。

    使用for of遍历字符串(最简短,可读性最高)

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

    具体实现方式是:声明一个空字符串newStr,通过for...of循环遍历字符串str中的每个字符,判断当前字符是否是大写字母,如果是,则从映射表map对象中获取该字符相应的得分,并将其加到空字符串newStr中。最终,将newStr字符串输出到控制台,即输出转换后的结果。

    与之前的代码相比,这段代码在遍历字符串时使用了for...of循环,这是ES6新特性之一,该语句可以用来遍历字符串、数组等可迭代对象。同时,也可以使用模板字符串实现字符串拼接,这样代码可读性更高。

    2-9

    编程练习:

    在Java中,可以使用两种方法将一个数组的内容复制到另一个数组:(将a复制到B上)

     System.arraycopy(a, 0, b, 0, a.length);

    在这个示例中,`arraycopy()`方法将`a`数组的数据复制到`b`数组,开始复制位置为`a`数组的起始位置(0),目标位置为`b`数组的起始位置(0),复制的长度为`a`数组的长度(`a.length`)。

    int[] help = nums.clone()

    这段代码是在Java语言中声明一个整型数组help,并将另一个整型数组nums的副本赋值给help数组。

    具体来说, nums.clone() 的作用是创建一个原数组 nums 的副本,其长度和内容都与原数组相同,然后将这个副本作为一个新数组返回。

    因此,上述代码相当于将 nums 数组中的所有元素复制到 help 数组中,从而得到具有相同长度和内容的另一个整型数组。

    需要注意的是,使用clone()方法生成数组副本时,副本和原数组是独立的,对其中一个进行修改不会影响另一个。

    给你一个整数数组 nums,将它重新排列成 nums[0] < nums[1] > nums[2] < nums[3]... 的顺序。

    你可以假设所有输入数组都可以得到满足题目要求的结果。

    class Solution {
      public void wiggleSort(int[] nums) {
            int[] help = nums.clone(); //不能写成int[] help = nums,排序后两个数组都改变
            Arrays.sort(help);
            int N = nums.length;
            //比如123456
            for (int i = 1; i < nums.length; i += 2) {
                nums[i] = help[--N]; //遍历完成后 x 6 x 5 x 4 
            }
            for (int i = 0; i < nums.length; i += 2) {
                nums[i] = help[--N]; //便利完成后 3 6 2 5 1 4
            }
        }
    }
    

    java里将一个数组所有元素变成0的代码:

    Arrays.fill(arr,0);

    你可能感兴趣的:(es6,前端,ecmascript)